Bootstrap教程(23)--标签页

对应效果如下：

接下来我们来具体讲解下，上面代码时如何描述出一个标签页的。

1. nav nav-tabs类修饰ul元素，使ul元素表现出标签的样式。
2. 为li元素添加data-toggle="tab"类，是为了JS语言能识别标签选项，所以在点击选项时会触发JS事件。
3. href="#section1"是点击标签是，显示的对应元素的id。
4. tab-content修饰的div元素，表示标签页的内容部分。
5. tab-pane active，其中tab-pan表示具体的一个标签页内容，而active表示当前被`显示的标签页。
6. id="section1"对应a标签指向的id。

标签页的语法相对固定，实际上理解了每个属性的意义，再看标签页的语法就很顺溜了。