Bootstrap3.0学习第十二轮(导航、标签、面包屑导航)

Bootstrap3.0学习第十二轮(导航、标签、面包屑导航)

前言

阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehyok/p/3404867.html

本文主要来讲解以下内容

1.导航

2.标签

3.面包屑导航

4.总结

导航

 Bootstrap中可用的导航有相似的标记，用基类.nav开头，这是相似的部分。改变修饰类可以改变样式。

1、标签页

注意.nav-tabs类需要.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>

在这里暂时只进行探讨简单的样式。

2、胶囊式标签页

用相同的 HTML 标记，但要用.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>

Pills 可以竖直堆叠。只要加上.nav-stacked。

 

 

3、两端对齐的导航

在大于768px的屏幕上，通过.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>
<ul class="nav nav-pills nav-justified">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
</ul>

4、禁用的链接

对任何导航（包括标签页，pills，或列表，加入.disabled使链接为灰色且没有鼠标悬停效果。

 

链接功能没有受到影响

这个类只改变<a>的外观，而不是它的功能。用自定义的 JavaScript 禁用这里的链接。

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

通过将鼠标悬停你就可以查看简单的效果了，暂时无法截图。

5、使用下拉菜单

<ul class="nav nav-tabs">
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
        <li><a href="#">Home</a></li>
          <li><a href="#">Profile</a></li>
          <li><a href="#">Messages</a></li>
    </ul>
  </li>
  <li><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
</ul>

6、带下拉菜单的胶囊式标签页

<ul class="nav nav-pills">
  <li class="dropdown active">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
        <li><a href="#">Home</a></li>
          <li><a href="#">Profile</a></li>
          <li><a href="#">Messages</a></li>
    </ul>
  </li>
  <li><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
</ul>

 

 

 

标签

 简单案例

<h1>Example heading <span class="label label-default">New</span></h1>
<h2>Example heading <span class="label label-default">New</span></h2>
<h3>Example heading <span class="label label-default">New</span></h3>
<h4>Example heading <span class="label label-default">New</span></h4>
<h5>Example heading <span class="label label-default">New</span></h5>
<h6>Example heading <span class="label label-default">New</span></h6>

可用的变体

用下面的任何一个class即可改变标签的外观。

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

面包屑导航

 用一个带方向的层次表明当前页面的位置。

分割符自动地通过CSS的:before和content添加上了。

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

总结

 本文已更新至Bootstrap3.0入门学习系列http://www.cnblogs.com/aehyok/p/3404867.html