bootstrap学习（四）输入框、导航
输入框组：
基本用法：
//form-control 占满
//input-group:输入框组
//input-group-addon：输入框前加入一个前缀
<div class="input-group"> <span class="input-group-addon">@</span> <input type="text" class="form-control"> <span class="input-group-addon">@</span> </div>
加入小图标：
<div class="input-group"> <span class="input-group-addon"> <span class="glyphicon glyphicon-plus "></span> </span> <input type="text" class="form-control"> </div>
加入按钮：
<div class="input-group"> <span class="input-group-btn"> <button type="button" class="btn btn-default btn-danger">按钮</button> </span> <input type="text" class="form-control"></input> </div>
导航
Bootstrap 中的导航组件都依赖同一个 .nav 类，状态类也是共用的。改变修饰类可以改变样式。
标签页：
li：标签内部是一个链接或按钮
<ul class="nav nav-tabs">{#选项卡nav-tabs 只写nav不行#} <li><a href="">111</a></li> <li><a href="">222</a></li> <li><a href="">333</a></li> </ul>
胶囊标签页：nav-pills active默认选中
<ul class="nav nav-pills"> <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> </ul>
竖胶囊：nav-stacked
<ul class="nav nav-pills nav-stacked"> <li class="active"><a href="">首页1</a></li> <li class="disabled"><a href="">首页2</a></li> <li><a href="">首页3</a></li> <li><a href="">首页4</a></li> </ul>
禁用的标签： .disable 不可选
<ul class="nav nav-pills"> <li class="active"><a href="">首页1</a></li> <li class="disabled"><a href="">首页2</a></li> <li><a href="">首页3</a></li> <li><a href="">首页4</a></li> </ul>
自适应标签页：nav-justfified 标签页自动占满一行
<ul class="nav nav-tabs nav-justified"> <li class="active"><a href="">首页1</a></li> <li class="disabled"><a href="">首页2</a></li> <li><a href="">首页3</a></li> <li><a href="">首页4</a></li> </ul>
二级导航：.caret 向下的箭头
<ul class="nav nav-tabs nav-justified"> <li class="active"><a href="">首页1</a></li> <li> <a href="" class="dropdown-toggle" data-toggle="dropdown"> 首页2 <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="">item1</a></li> <li><a href="">item2</a></li> <li><a href="">item3</a></li> </ul> </li> <li><a href="">首页3</a></li> <li><a href="">首页4</a></li> </ul>
导航条：
基础导航： navbar-brand：字体稍微大点 navbar-header：导航头信息
<nav class="navbar navbar-default"> <div class="navbar-header"> <a href="" class="navbar-brand">导航</a> <ul class="nav navbar-nav"> <li class="active"><a href="">item1</a></li> <li class="active"><a href="">item2</a></li> <li class="active"><a href="">item3</a></li> </ul> </div> </nav>
导航中加入表单：
<nav class="navbar navbar-default"> <div class="navbar-header"> <a href="" class="navbar-brand">导航</a> <ul class="nav navbar-nav"> <li class="active"><a href="">item1</a></li> <li><a href="">item2</a></li> <li><a href="">item3</a></li> </ul> </div> <form action="" class="navbar-form"> <input type="text" class="form-control"> <button type="button" class="btn btn-default">按钮</button> </form> </nav>
面包屑导航：
breadcrumb：面包屑样式
<ul class="breadcrumb"> <li>首页</li> <li>首页2</li> <li>首页3</li> </ul>
分页导航：可以给li设置 .active设置激活状态
<ul class="pagination"> <li><a href="">«</a></li> <li><a href="">1</a></li> <li><a href="">1</a></li> <li><a href="">1</a></li> <li><a href="">»</a></li> </ul>
<ul class="pager"> <li><a href="">上一页</a></li> <li><a href="">下一页</a></li> </ul>
