Bootstrap_导航组件

1、导航

• 标签页
• 释义：.nav-tabs类依赖 .nav 基类
• 示例

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

• 效果图

  
  

• 胶囊式标签页(.nav-pills)

• 示例

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

• 效果图

  
  

• Note
  胶囊是标签页也是可以垂直方向堆叠排列的。只需添加 .nav-stacked 类

• 两端对齐的标签页

• 示例

<ul class="nav nav-tabs nav-justified" role="tablist"> ...</ul>

2、导航条

• 默认导航条
• 示例

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
            </button>
            <a class="navbar-brand" href="#">Brand</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <form class="navbar-form navbar-left" role="search">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
            <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 <span class="caret"></span></a>
                </li>
            </ul>
        </div>
    </div>
</nav>

• 效果图

  
  

• 反色的导航条

• 释义：通过添加 .navbar-inverse类可以改变导航条的外观

• 示例

<nav class="navbar navbar-inverse" role="navigation"> ...</nav>

• 效果图

  
  

• 固定在顶部

• 释义：添加 .navbar-fixed-top 类可以让导航条固定在顶部

• 固定在底部

• 释义：添加 .navbar-fixed-bottom 类可以让导航条固定在底部

• 这两个都可以包含一个 .container 或 .container-fluid容器，从而让导航条居中，并在两侧自动添加内部（padding）

• 示例

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        ...
      </div>
</nav>

• 静止在顶部
• 释义：通过添加 .navbar-static-top 类，创建一个与页面等宽度的导航条，它会随着页面向下滚动而消失
• 示例

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        ...
      </div>
</nav>

• 文本
• 释义：可以把文本包裹在 .navbar-text中，为了有正确的行距和颜色，通常使用<p> 标签
• 示例

<p class="navbar-text">Signed in as Mark Otto</p>

3、路径导航

• 释义：在一个带有层次的导航结构中标明当前页面的位置
• 示例

<ol class="breadcrumb">
    <li><a href="#">Home</a></li>
    <li><a href="#">Library</a></li>
    <li class="active">Data</li>
</ol>

• 效果图

  
  

• 注意点
  各路径间的分隔符已经通过 CSS 的 :before 和 content 属性自动添加

4、注意点

• 使用 .navbar-link 类可以让链接有正确的默认颜色和反色设置
• 对于不包含在 <form> 中的<button> 元素，加上 .navbar-btn 后，可以让它在导航条里垂直居中