Bootstrap-->组件-->导航

1、导航之标签页Tabs

<ul class="nav nav-tabs">  <!--第一个nav是清除ul样式  nav-tabs是把li标签变为一行 -->
    <li data-toggle="tab"class="active"><a href="#">标签1</a></li>
    <li data-toggle="tab"><a href="#" >标签1</a></li>
    <li data-toggle="tab"><a href="#" >标签1</a></li>
</ul>

要写tab页：首先需要一个列表，

                既然要写tab分页，所以列表ul需要tab分页类，即nav-tabs【但是都要以nav为基类】所以形式是 

                                                                           <ul class="nav nav-tabs"> 

        接下来就是对列表项进行设置，【首先我们要知道，这些组件的作用效果到a标签，所以只写到li标签是不行的】，
        data-toggle 是表示点击切换的意思，它等于tab，就表示以tab的方式切换，所以你点击的时候就会切页。
        至于在第一个列表项中的active类，表示的默认让第一个列表项被选中。

             

 

2、导航之胶囊标签

<ul class="nav nav-pills nav-justified"><!--nav-justified会把布局占满  三个胶囊标签宽度为屏幕宽度-->
    <li data-toggle="tab" class="active"><a href="#">胶囊1</a></li>
    <li data-toggle="tab"><a href="#">胶囊2</a></li>
    <li data-toggle="tab"><a href="#">胶囊3</a></li>
</ul>

             胶囊标签顾名思义就是像胶囊一样的标签，也是在ul列表中设置类。同tab分页标签一样，需要一个类，但是这个是胶囊标签的类，nav-pills.即

                 <ul class="nav nav-pills nav-justified">   至于nav-justified 是自适应，就是会把布局沾满，三个胶囊标签宽度为屏幕宽度
    
       至于点击切换就跟上面那个一样，data-toggle=‘tab’

  

 


3、两端对齐的标签页，就是上面提到的那个nav-justified类。加到ul中
4、禁用 用的是disabled类。在li标签中，代码见上截图
5、添加下拉菜单，会在下拉菜单中整理