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>