1.输入框控件
在输入框左边添加文字或图标
首先使用带有 input-group 的类把输入框和要添加的元素包裹起来
然后给要添加的元素外围添加一个父元素 给父元素添加一个 input-group-addon 的类，把要添加图标，文字等放到这个父元素里即可，如下：
<div class="input-group"> <span class="input-group-addon"> <span class="glyphicon glyphicon-user"></span> </span> <input type="text" name="" id="" value="" class="form-control" /> </div>
效果图
也可以在右边和两边添加，只要把图标或文字放到响应的位置就可以了
span 里也可以放单选框和复选框
在输入框右边添加按钮
<div class="input-group"> <input type="text" name="" id="" value="" class="form-control" /> <span class="input-group-btn"> <button class="btn btn-success">按钮</button> </span> </div>
添加按钮的做法和添加文字，图标的做法差不多，把父元素里的 input-group-addon 这个类更换成 input-group-btn
效果图
给一个输入框后面添加下拉菜单
<div class="input-group mar"> <input type="text" name="" id="" value="" class="form-control" /> <div class="input-group-btn"> <button class="btn btn-warning dropdown-toggle" data-toggle="dropdown">下拉菜单 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li>菜单</li> <li>菜单</li> <li>菜单</li> <li>菜单</li> <li>菜单</li> </ul> </div> </div>
2.导航组件
以下是导航的几种类型
<div class="container"> <!--标签式导航 nav-tabs--> <ul class="nav nav-tabs"> <li class="active"><a href="#">标签导航</a></li> <li><a href="#">我是导航</a></li> <li><a href="#">我是导航</a></li> <li><a href="#">我是导航</a></li> <li><a href="#">我是导航</a></li> </ul> <br /> <!--胶囊式导航 nav-pills --> <ul class="nav nav-pills"> <li class="active"><a href="#">胶囊导航</a></li> <li><a href="#">我是导航</a></li> <li><a href="#">我是导航</a></li> <li><a href="#">我是导航</a></li> <li><a href="#">我是导航</a></li> </ul> <br /> <!--垂直胶囊式导航 nav-stacked --> <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#">垂直胶囊</a></li> <li><a href="#">我是导航</a></li> <li><a href="#">我是导航</a></li> <li><a href="#">我是导航</a></li> <li><a href="#">我是导航</a></li> </ul> <br /> <!--导航两端对齐 nav-justified--> <ul class="nav nav-tabs nav-justified"> <li class="active"><a href="#">两端对齐</a></li> <li><a href="#">我是导航</a></li> <li><a href="#">我是导航</a></li> <li><a href="#">我是导航</a></li> <li><a href="#">我是导航</a></li> </ul> </div>
图示：
还可以在导航上添加下拉菜单
<div class="container"> <!--标签式导航 nav-tabs--> <ul class="nav nav-tabs"> <li class="active"><a href="#">标签导航</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown">我是导航 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="">菜单</a></li> <li><a href="">菜单</a></li> <li><a href="">菜单</a></li> <li><a href="">菜单</a></li> </ul> </li> <li><a href="#">下拉菜单</a></li> <li><a href="#">我是导航</a></li> <li><a href="#">我是导航</a></li> </ul> </div>
把 a 标签当作按钮使用，添加 dropdown-toggle 类，data-dropdown 属性，
给父元素添加 dropdown 这个属性。
图示：
导航条组件
<nav class="navbar navbar-default"> <div class="container"> <!--在导航里插入标题或者LOgo--> <div class="navbar-header"> <a class="navbar-brand" href="">标题</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="#" method="post" class="navbar-form navbar-right"> <div class="input-group"> <input type="text" name="" id="" value="" class="form-control" /> <span class="input-group-btn"> <button class="btn btn-default dropdown-toggle">搜索</button> </span> </div> </form> </div> </nav>
效果图
在导航条里插入 LOgo（最好写上div，方便控制）
<div class="navbar-header"> <a class="navbar-brand" href="">标题</a> </div>
在导航条里插入 导航
<ul class="nav navbar-nav"> <li><a href="">...</a></li> </ul>
在导航条里插入 表单
<form action="#" method="post" class="navbar-form navbar-right">...</form>
在导航条里插入 按钮，设置对齐方式（left或right）
<button class="btn btn-default navbar-btn navbar-right">按钮</button>
在导航条里插入 文本，链接（超链接一般都会放在块级元素里面，不然的话无法对齐）
<p class="navbar-text">我是文本<a class="navbar-link" href="">我是链接</a></p>
将导航固定到屏幕最 顶部（navbar-fixed-top）/ 最底部（navbar-fixed-top）
默认情况下内容会被覆盖到导航条下面
<nav class="navbar navbar-default navbar-fixed-top">...</nav>