Bootstrap学习 导航

最基本的导航条就像下面这个样子：

    <ul class="nav nav-tabs">
        <li class="active"><a>Page 1</a></li>
        <li><a>Page 2</a></li>
        <li><a>Page 3</a></li>
    </ul>

没啥好说的了，nav-tabs的使用是基于nav之上的。

 

还有胶囊式儿的。需要把nav-tabs换成nav-pills即可。小猿觉得没有上一种漂亮。。。

 

不过堆叠式儿的pills还是蛮好看的。nav-stacked

    <ul class="nav nav-pills nav-stacked">
        <li class="active"><a>Page 1</a></li>
        <li><a>Page 2</a></li>
        <li><a>Page 3</a></li>
    </ul>

他会占满整个容器的宽度，可以设置一下。

 

nav-justified能够轻松地让nav-pills和nav-tabs均分是一个容器的宽度。

 

在导航条中追加下拉列表，I believe this is very useful：

    <ul class="nav nav-tabs">
        <li class="active"><a>Page 1</a></li>
        <li><a>Page 2</a></li>
        <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown">
                Dropdown<span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
            </ul>
        </li>
    </ul>

 

要增强可访问性，一定要给每个导航条加上role="navigation"。

如下可能真的是最基本的一个导航条了：

  <!-- navbar-fixed-top, navbar-fixed-bottom, navbar-static-top, navbar-inverse(可以用来改变导航条的外观) -->

  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">

        <div class="navbar-header">

            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse-zone-id">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Brand</a>
        </div>
        
        <div class="collapse navbar-collapse" id="collapse-zone-id">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    Dropdown <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                  <li class="divider"></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
              </li>
            </ul>
            
            <ul class="nav navbar-nav navbar-right">
              <li><a href="#">Link</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    Dropdown <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                </ul>
              </li>
            </ul>
        </div>
    </nav>

 

分页导航：

    
<!-- pagination-sm, pagination-lg 可以用来设定分页导航的大小 -->
<ul class="pagination">
      <li class="disabled"><a href="#">&laquo;</a></li>
      <li class="active"><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li><a href="#">&raquo;</a></li>
    </ul>

 

简单的前后翻页

    <ul class="pager">
      <li class="previous"><a href="#">&larr; Older</a></li>
      <li class="next"><a href="#">Newer &rarr;</a></li>
    </ul>