Bootstrap笔记10—导航条

Bootstrap中文网

1. 基础导航条

给<nav>标签添加类class="navbar navbar-default"如下：

<nav class="navbar navbar-default">
    <div class="navbar-header">
        <a href="#" class="navbar-brand">导航</a>
    </div>
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">首页</a></li>
        <li><a href="#">首页</a></li>
        <li><a href="#">首页</a></li>
        <li><a href="#">首页</a></li>
    </ul>
</nav>

2.导航条中带表单

直接添加form表单标签，如下：

<nav class="navbar navbar-default">
    <div class="navbar-header">
        <a href="#" class="navbar-brand">导航</a>
    </div>
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">首页</a></li>
        <li><a href="#">首页</a></li>
        <li><a href="#">首页</a></li>
        <li><a href="#">首页</a></li>
    </ul>
    <form action="#" class="navbar-form">
        <div class="form-group">
            <input type="text" class="form-control">
        </div>
        <button type="button" class="btn btn-danger">搜索</button>
    </form>
</nav>

如果想让搜索框在最右，就给form表单添加类navbar-right，也可以和最右边有距离margin-right:20px;，如下：

<form action="#" class="navbar-form navbar-right">...</form>

3. 导航条中添加文本、链接、按钮

注意：
文本的类是class="navbar-text"；
链接的类是class="navbar-link";
按钮的类是class="navbar-btn"

<nav class="navbar navbar-default">
    <div class="navbar-header">
        <a href="#" class="navbar-brand">导航</a>
    </div>
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">首页</a></li>
        <li><a href="#">首页</a></li>
        <li><a href="#">首页</a></li>
        <li><a href="#">首页</a></li>
    </ul>
    <p class="navbar-text">文本</p>
    <a href="#" class="navbar-link">链接</a>
    <button type="button" class="btn btn-default navbar-btn">按钮</button>
</nav>

4.顶部固定的导航条

只要在nav标签中添加类navbar-fixed-top。
一但导航条顶部固定，就会压住下面的内容，写样式时为了避免压住下面的内容，需要给body添加样式。假设导航条高为50px,再留一点间隙，就设为70px.例如：body {padding-top:70px;}

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="navbar-header">
        <a href="#" class="navbar-brand">导航</a>
    </div>
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">首页</a></li>
        <li><a href="#">首页</a></li>
        <li><a href="#">首页</a></li>
        <li><a href="#">首页</a></li>
    </ul>   
</nav>

5.全屏方角导航条

<nav class="navbar navbar-default navbar-static-top">
    <div class="navbar-header">
        <a href="#" class="navbar-brand">导航</a>
    </div>
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">首页</a></li>
        <li><a href="#">首页</a></li>
        <li><a href="#">首页</a></li>
        <li><a href="#">首页</a></li>
    </ul>   
</nav>

6. 响应式导航条（汉堡菜单）

屏幕<768px 时展示右边汉堡菜单，点击汉堡菜单会展开/关闭。
注意：<button>按钮里是汉堡菜单；<ul>列表要被div包裹，以方便控制菜单的展开/隐藏.

<nav class="navbar navbar-default">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
            <span class="sr-only"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a href="#" class="navbar-brand">导航</a>
    </div>
    <div class="collapse navbar-collapse navbar-responsive-collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">首页</a></li>
            <li><a href="#">首页</a></li>
            <li><a href="#">首页</a></li>
            <li><a href="#">首页</a></li>
        </ul>
    </div>
</nav>

7.面包屑导航

给ul添加类class="breadcrumb"如下：

<ul class="breadcrumb">
    <li><a href="#">&laquo;</a></li>
    <li><a href="#">新闻</a></li>
    <li><a href="#">国内新闻</a></li>
    <li><a href="#">&r</a></li>
</ul>

8.分页导航

给ul列表添加类：class="pagination" ，也可以控制大小class="pagination pagination-sm、或者class="pagination pagination-lg"如下：

<ul class="pagination pagination-sm">
    <li class="active"><a href="#">&laquo;</a></li>
    <li><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>

9.翻页导航

ul添加类：class="pager"如下：

<ul class="pager">
    <li><a href="#">上一页</a></li>
    <li><a href="#">下一页</a></li>
</ul>