导航 - Navs

创建标签式导航

导航一般用 <ul>元素设置 .nav 创建

<ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Messages</a></li>
</ul>

01.PNG

给导航条目添加图标

导航一般用 <ul> 元素设置 .nav 创建

<ul class="nav nav-tabs">
    <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span>  首页</a></li>
    <li><a href="#"><span class="glyphicon glyphicon-user"></span> 性能</a></li>
    <li><a href="#"><span class="glyphicon glyphicon-envelope"></span> 消息</a></li>
</ul>

02.PNG

创建胶囊式标签

设置 .nav-pills 样式

<ul class="nav nav-pills">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Messages</a></li>
</ul>

03.PNG

垂直堆叠式导航

设置 .nav-stacked 样式

<ul class="nav nav-pills nav-stacked">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Messages</a></li>
</ul>

04.PNG

带下拉菜单的导航

将导航项设置为下拉菜单即可

<ul class="nav nav-pills">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Profile</a></li>
    <li class="dropdown">
        <a href="#" data-toggle="dropdown" class="dropdown-toggle">Messages <b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li><a href="#">Inbox</a></li>
            <li><a href="#">Drafts</a></li>
            <li><a href="#">Sent Items</a></li>
            <li class="divider"></li>
            <li><a href="#">Trash</a></li>
        </ul>
    </li>
</ul>

05.PNG

两端对齐的导航

使用 .nav-justified样式

<ul class="nav nav-tabs nav-justified">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Messages</a></li>
</ul>

06.PNG

禁用导航条目

给需要禁用的条目设置 .disabled样式

<ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Messages</a></li>
    <li class="disabled"><a href="#">Admin</a></li>
</ul>

07.PNG