Bootstrap导航与面包屑

1.  顺序container>nav nva-tabs&nav-pills+nav-stacked

Nva-tabs是选项卡导航nav-pills 胶囊式导航  nav-stacked是与nav-pills一起使用垂直排列

<div class="container">
    <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>
        <li><a href="#">贴吧</a></li>
    </ul>
</div>

2.  导航状态 active hover disabled

3.  自适应导航nav-justified对应pills 与tabs当屏幕宽度小于768px时会堆叠在一起,而不是显示的横向占据100%

4.  导航二级菜单

<div class="container">
    <ol class="nav nav-pills">
        <li><a href="#">网面</a></li>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                音乐<span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
                <li><a href="#">轻音乐</a></li>
                <li><a href="#">流行音乐</a></li>
                <li><a href="#">摇滚音乐</a></li>
                <li><a href="#">古典音乐</a></li>
            </ul>
        </li>
        <li><a href="#">视频</a></li>
        <li><a href="#">图片</a></li>
        <li><a href="#">贴吧</a></li>
    </ol>
</div>

5.  面包屑 breadcrumb

<ol class="breadcrumb">
        <li><span class="glyphicon glyphicon-home"></span> <a href="#">首页</a></li>
        <li><a href="#">仓库作业</a></li>
        <li><a href="#">入库管理</a></li>
        <li><a href="#">新增入库</a></li>
</ol>

 

posted @ 2016-05-22 21:36  xszjk  阅读(177)  评论(0)    收藏  举报