bootstrap学习笔记-导航和导航条

导航

• .nav 类作为基类（都要有）
• 标签页：.nav-tabs
• 胶囊式标签页：.nav-pills ；可以选择竖着的菜单：.nav-stacked
• 两端对齐（按钮）自适应：.nav-justified ，在大于 768px 的屏幕上 ，通过 .nav-justified 类可以很容易的让标签页或胶囊式标签呈现出同等宽度。在小屏幕上，导航链接呈现堆叠样式。(小于768 变成竖着的了)
• 如果要让线也自适应（对于按钮的长度，不是对于父类）：.nav-tabs.justified
• 注意胶囊式标签的时候，如果有.nav-tabs.justified那么也会出现线的。
• 内容类：ul:tab-content li:tab-pane
• 要按钮切换，在按钮上还要加上属性data-toggle=”tab”
• 而内容要对应切换的话，要把href 对应id （注意加#号）
  例如：

<ul class="nav nav-tabs">
    <li class="active"><a href="#a" data-toggle="tab">1</a></li>
    <li><a href="#b" data-toggle="tab">2</a></li>
    <li><a href="#c" data-toggle="tab">3</a></li>
</ul>
<ul class="tab-content">
    <li id="a" class="tab-pane active">111111111</li>
    <li id="b" class="tab-pane">2222222</li>
    <li id="c" class="tab-pane">33333333</li>
</ul>

• 内容切换时淡入淡出效果（加在li上）：fade 注意默认的那个要加in （这和加active一样）

带下拉菜单的标签页

<ul class="nav nav-tabs">
    <li class="active"><a>1</a></li>
    <li><a href="#">2</a></li>
    <li><a>3</a></li>
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Separated link</a>
        <ul class="dropdown-menu">
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li>