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后，可以让它在导航条里垂直居中
