Bootstrap-组件-2

导航条

品牌图标
将导航条内放置品牌标志的地方替换为 <img> 元素即可展示自己的品牌图标。由于 .navbar-brand 已经被设置了内补（padding）和高度（height），你需要根据自己的情况添加一些 CSS 代码从而覆盖默认设置。

表单
将表单放置于 .navbar-form 之内可以呈现很好的垂直对齐，并在较窄的视口（viewport）中呈现折叠状态。 使用对齐选项可以规定其在导航条上出现的位置。

按钮
对于不包含在 <form> 中的 <button> 元素，加上 .navbar-btn 后，可以让它在导航条里垂直居中。有一些对于为辅助设备提供可识别标签的方法，例如， aria-label、aria-labelledby 或者 title 属性。如果这些方法都没有，屏幕阅读器将使用 placeholder 属性（如果这个属性存在的话），但是请注意，使用 placeholder 代替其他识别标签的方式是不推荐的。

文本
把文本包裹在 .navbar-text中时，为了有正确的行距和颜色，通常使用 <p> 标签。

非导航的链接
或许你希望在标准的导航组件之外添加标准链接，那么，使用 .navbar-link 类可以让链接有正确的默认颜色和反色设置。

组件排列
通过添加 .navbar-left 和 .navbar-right 工具类让导航链接、表单、按钮或文本对齐。两个类都会通过 CSS 设置特定方向的浮动样式。例如，要对齐导航链接，就要把它们放在个分开的、应用了工具类的 <ul> 标签里。

固定在顶部
添加 .navbar-fixed-top 类可以让导航条固定在顶部，还可包含一个 .container 或 .container-fluid 容器，从而让导航条居中，并在两侧添加内补（padding）。

提示：导航条的默认高度是 50px。

固定在底部
添加 .navbar-fixed-bottom 类可以让导航条固定在底部，并且还可以包含一个 .container 或 .container-fluid 容器，从而让导航条居中，并在两侧添加内补（padding）。

静止在顶部
通过添加 .navbar-static-top 类即可创建一个与页面等宽度的导航条，它会随着页面向下滚动而消失。还可以包含一个 .container 或 .container-fluid 容器，用于将导航条居中对齐并在两侧添加内补（padding）。

反色的导航条
通过添加 .navbar-inverse 类可以改变导航条的外观。

路径导航

在一个带有层次的导航结构中标明当前页面的位置。
各路径间的分隔符已经自动通过 CSS 的 :before 和 content 属性添加了。

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">
                <img alt="brand" src="m.png" style="width: 30px">
            </a>
        </div>

        <ul class="nav navbar-nav">
            <li class="active"><a href="#">默认选中<span class="sr-only"></span></a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">下拉<span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
            </ul>
            </li>
        </ul>

        <!--表單-->
        <form class="navbar-form navbar-left" role="search">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="輸入">
            </div>
            <button type="submit" class="btn btn-default">submit</button>
        </form>
        <button class="btn btn-primary navbar-btn" type="button">button</button>
        <p class="navbar-text">文本</p>

        <p class="navbar-text navbar-right">非导航的<a href="#" class="navbar-link">链接</a></p>

    </div>
</nav>

路径导航:
<ol class="breadcrumb">
    <li><a href="#">Home</a></li>
    <li><a href="#">Library</a></li>
    <li class="active">Data</li>
</ol>

<nav class="navbar navbar-inverse navbar-fixed-bottom">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">
                <img alt="brand" src="m.png" style="width: 30px">
            </a>
        </div>
        </div>
</nav>

分页

禁用和激活状态
链接在不同情况下可以定制。你可以给不能点击的链接添加 .disabled 类、给当前页添加 .active 类。

还可以将 active 或 disabled 状态应用于 <span> 标签，或者在向前/向后的箭头处省略<a> 标记，即替换 <a> 标签，这样就可以让其保持需要的样式而不能被点击。

尺寸
想要更小或更大的分页？.pagination-lg 或 .pagination-sm 类提供了额外可供选择的尺寸。

<nav>
        <ul class="pagination">
            <li class="disabled">
                <a href="#" aria-label="Previous">
                    <span aria-hidden="true">«</span>
                </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="#" aria-label="Next">
                    <span aria-hidden="true">»</span>
                </a>
            </li>
        </ul>
    </nav>
尺寸大：
    <nav>
        <ul class="pagination pagination-lg">
            ...
        </ul>
    </nav>
    尺寸小：
    <nav>
        <ul class="pagination pagination-sm">
            ...
        </ul>
    </nav>

翻页
用简单的标记和样式，就能做个上一页和下一页的简单翻页。

对齐链接
你还可以把链接向两端对齐。

可选的禁用状态
.disabled 类也可用于翻页中的链接。

翻页：
    <nav>
        <ul class="pager">
            <li><a href="#">上一页</a></li>
            <li><a href="#">下一页</a></li>
        </ul>
    </nav>
    对齐链接：
    <nav>
        <ul class="pager">
            <li class="previous"><a href="#">上一页(left)</a></li>
            <li class="next disabled"><a href="#">下一页(禁用)</a></li>
        </ul>
    </nav>

标签

<h3>标签<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>
</h3>

徽章

给链接、导航等元素嵌套 <span class="badge"> 元素，可以很醒目的展示新的或未读的信息条目。

<a href="#">QQ<span class="badge">M</span></a>
<button class="btn btn-primary">WX <span class="badge">H</span></button>