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="#">«</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="#">«</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="#">»</a></li> </ul>

9.翻页导航

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

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