Bootstrap框架学习(四）——Bootstrap组件设计之导航

四、Bootstrap组件设计

3、Bootstrap导航

    Bootstrap框架的导航组件，均使用.nav类来实现。

    默认标签导航

        默认标签导航是基于<ul><li>标签组并应用.nav-tabs类设计而成的。

<section id="global">
    <div class="page-header">
        <h3>Bootstrap组件 - 默认标签导航</h3>
    </div>
</section>
<div class="bs-docs-example">
    <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>
        <li><a href="#">论坛</a></li>
    </ul>
</div>
</div>

pills标签导航

pills标签导航是基于<ul><li>标签组并应用.nav-pills类设计而成的。

<div class="bs-docs-example">
    <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>
        <li><a href="#">论坛</a></li>
    </ul>
</div>

堆叠式标签导航

    堆叠式标签导航是区别于水平排列标签，通过.nav-stacked类设计而成的。

<div class="bs-docs-example">
    <ul class="nav nav-tabs 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>

下拉菜单式标签导航

    在标签导航中添加下拉菜单，可以通过添加.dropdown-menu类设计而成。

<div class="bs-docs-example">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#">首页</a></li>
        <li><a href="#">新闻</a></li>
        <li><a href="#">财经</a></li>
        <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">体育 <b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li><a href="#">足球</a></li>
                <li><a href="#">篮球</a></li>
                <li><a href="#">排球</a></li>
                <li class="divider"></li>
                <li><a href="#">游泳</a></li>
            </ul>
        </li>
        <li><a href="#">论坛</a></li>
    </ul>
</div>

导航列表

    在Bootstrap框架中通过<ul>中添加.nav-list类设计实现，导航列表。在<li>中添加.nav-header类定义导航列表分类标题。

<div class="bs-docs-example">
    <div class="well" style="max-width: 320px; padding: 4px;">
        <ul class="nav nav-list">
            <li class="nav-header">新闻</li>
            <li class="active"><a href="#">财经</a></li>
            <li><a href="#">军事</a></li>
            <li><a href="#">娱乐</a></li>
            <li class="nav-header">体育</li>
            <li><a href="#">足球</a></li>
            <li><a href="#">篮球</a></li>
            <li class="divider"></li>
            <li><a href="#">排球</a></li>
        </ul>
    </div> <!-- /well -->
</div>

标签页式导航

    标签页式导航类似于桌面系统中的Tab界面，在网页中可以将导航固定在上下左右4个位置方向。在Bootstrap框架中，可以通过在导航组件中添加.tabbable类、.nav-tabs类、.tab-content类和.tab-pane类设计实现。 

<div class="bs-docs-example">
    <div class="tabbable" style="margin-bottom: 8px;">
        <ul class="nav nav-tabs">
            <li class="active"><a href="#tab1" data-toggle="tab">新闻</a></li>
            <li><a href="#tab2" data-toggle="tab">财经</a></li>
            <li><a href="#tab3" data-toggle="tab">体育</a></li>
            <li><a href="#tab4" data-toggle="tab">娱乐</a></li>
            <li><a href="#tab5" data-toggle="tab">论坛</a></li>
        </ul>
        <div class="tab-content" style="padding-bottom: 9px; border-bottom: 1px solid #ddd;">
            <div class="tab-pane active" id="tab1">
                <p>新闻标签页.</p>
            </div>
            <div class="tab-pane" id="tab2">
                <p>财经标签页.</p>
            </div>
            <div class="tab-pane" id="tab3">
                <p>体育标签页.</p>
            </div>
            <div class="tab-pane" id="tab4">
                <p>娱乐标签页.</p>
            </div>
            <div class="tab-pane" id="tab5">
                <p>论坛标签页.</p>
            </div>
        </div>
    </div> <!-- /tabbable -->
</div>

Bootstrap导航条

    在Bootstrap框架中所有导航条组件均使用.navbar类来实现。

    默认样式导航条

    导航条的默认样式式静态（static）形式的，通常包含一个标题（title）名称和一组导航项。通过.navbar类定义一个导航条，通过.brand类定义导航标题。

<div class="bs-docs-example">
    <div class="navbar">
        <div class="navbar-inner">
            <a class="brand" href="#">导航条</a>
            <ul class="nav">
                <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>
    </div>
</div>

导航条表单

    可以在导航条中通过<form>标签添加表单，可以包括输入框、按钮、搜索条等元素。

<div class="bs-docs-example">
    <div class="navbar">
        <div class="navbar-inner">
            <a class="brand" href="#">提交</a>
            <form class="navbar-form pull-left">
                <input type="text" class="span2">
                <button type="submit" class="btn">Submit</button>
            </form>
        </div>
    </div>
</div>

响应式导航条

响应式导航条可以实现交互功能，要实现一个响应式导航条，需要把导航条包含在.nav-collapse类和.collapse类中，并向其中添加一个.btn-navbar类的触发按钮。

<div class="bs-docs-example">
    <div class="navbar">
        <div class="navbar-inner">
            <div class="container">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>
                <a class="brand" href="#">响应式导航条</a>
                <div class="nav-collapse collapse navbar-responsive-collapse">
                    <ul class="nav">
                        <li class="active"><a href="#">首页</a></li>
                        <li><a href="#">导航条</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉导航条<b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">导航条</a></li>
                                <li><a href="#">导航条</a></li>
                                <li class="divider"></li>
                                <li class="nav-header">导航条</li>
                                <li><a href="#">导航条</a></li>
                            </ul>
                        </li>
                    </ul>
                    <form class="navbar-search pull-left" action="">
                        <input type="text" class="search-query span2" placeholder="Search">
                    </form>
                </div><!-- /.nav-collapse -->
            </div>
        </div><!-- /navbar-inner -->
    </div><!-- /navbar -->
</div>