Bootstrap笔记9—导航

Bootstrap中文网

1.选项卡导航

添加类nav-tabs如下：

<h1>选项卡式导航</h1>
<ul class="nav nav-tabs">
    <li class="active"><a href="#">首页</a></li>
    <li><a href="#">首页</a></li>
    <li><a href="#">首页</a></li>
    <li><a href="#">首页</a></li>
</ul>

2. 胶囊式导航

添加类nav-pills如下：

<h1>胶囊式导航</h1>
<ul class="nav nav-pills">
    <li class="active"><a href="#">首页</a></li>
    <li><a href="#">首页</a></li>
    <li><a href="#">首页</a></li>
    <li><a href="#">首页</a></li>
</ul>

3. 胶囊垂直式导航

添加类nav-stacked如下：

<h1>垂直式导航</h1>
<div class="row">
    <div class="col-md-3">
        <ul class="nav nav-pills nav-stacked">
            <li class="active"><a href="#">首页</a></li>
            <li><a href="#">首页</a></li>
            <li><a href="#">首页</a></li>
            <li><a href="#">首页</a></li>
        </ul>
    </div>
</div>

4.垂直导航添加分隔符

只要给ul中li的下面一行添加<li class="nav-divider"></li>代表分割线，如下：

<h1>垂直式分隔符导航</h1>
<div class="row">
    <div class="col-md-3">
        <ul class="nav nav-pills nav-stacked">
            <li class="active"><a href="#">首页</a></li>
            <li class="nav-divider"></li>
            <li><a href="#">首页</a></li>
            <li class="nav-divider"></li>
            <li><a href="#">首页</a></li>
            <li class="nav-divider"></li>
            <li><a href="#">首页</a></li>
        </ul>
    </div>
</div>

5.自适应导航

自适应导航占满整个容器，无论横着还是垂直。添加类nav-justified如下：

<h1>自适应导航</h1>
<ul class="nav nav-tabs nav-justified">
    <li class="active"><a href="#">首页</a></li>
    <li><a href="#">首页</a></li>
    <li><a href="#">首页</a></li>
    <li><a href="#">首页</a></li>
</ul>

6. 二级导航

<h1>二级导航</h1>
<ul class="nav nav-tabs">
    <li class="active"><a href="#">首页</a></li>
    <li>
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">首页</a>
        <ul class="dropdown-menu" >
            <li><a href="#">menu1</a></li>
            <li><a href="#">menu2</a></li>
            <li><a href="#">menu3</a></li>
            <li><a href="#">menu4</a></li>
        </ul>
    </li>
    <li><a href="#">首页</a></li>
    <li><a href="#">首页</a></li>
</ul>