一、输入框组件
<div class="input-group input-group-lg"> <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"><input type="checkbox"></span> <input type="text" class="form-control"> <span class="input-group-addon"><input type="radio"></span> </div> <div class="input-group"> <input type="text" class="form-control"> <div class="input-group-btn"> <button class="btn btn-default">提交</button> </div> </div>
1、在 .input-group 框里 可分别左右两侧添加文字， <input> 用 .form-control 添加样式。
2、文字元素用 span.inpt-group-addon
3、尺寸大小（从大到小）: input-group-lg 、默认 、xs 、sm
4、使用复选框和单选框，也放入 .input-group-addon 中 。
5、使用按钮，把 div.btn-group 换成 .input-group-btn 。
6、使用下拉菜单或分列式，把 div.btn-group 换成 .input-group-btn ，分列式就是两个button。
<div class="input-group"> <input type="text" class="form-control"> <div class="input-group-btn"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li class="dropdown-header">导航</li> <li><a href="#">首页</a></li> <li><a href="#">资讯</a></li> <li class="divider"></li> <li class="disabled"><a href="#">产品</a></li> </ul> </div> </div>
二、导航组件
<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> </ul>
.nav // 定义是一个导航类
.nav-tabs // 实现便签页导航样式
.active // 当前项
<ul class="nav nav-pills">
.nav-pills // 胶囊式导航
<ul class="nav nav-pills nav-stacked">
.nav-stacked // 垂直胶囊式导航
<ul class="nav nav-tabs nav-justified">
.nav-justified // 导航两端对齐，均分100%
<li class="disabled"><a href="#">产品</a></li>
.disabled // 禁用项
带有下拉菜单的导航：
<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 class="dropdown"> <a href="#" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="#">导航一</a></li> <li><a href="#">导航二</a></li> </ul> </li> <li><a href="#">关于</a></li> </ul>
.dropdown 定义在 li 上，按钮处需要添加 data-toggle="dropdown" ， ul.dropdown-menu 定义下拉列表项
三、导航条组件
<nav class="navbar navbar-default"> <div class="container"> <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 class="disabled"><a href="#">产品</a></li> <li><a href="#">关于</a></li> </ul> <form action="" class="navbar-form navbar-right"> <div class="input-group"> <input type="text" class="form-control"> <div class="input-group-btn"> <button class="btn btn-default">提交</button> </div> </div> </form> <button class="btn btn-default navbar-btn navbar-left">按钮</button> <p class="navbar-text">我是一段文本 <a href="#" class="navbar-link">链接</a></p> </div> </nav>
.navbar // 定义表示是一个导航条
.navbar-default // 导航条基本默认样式
.navbar-inverse // 导航条反色调，深色背景
.container // 把导航条固定在某一个区域
.navbar-brand // 导航条标题或者LOGO， 自带左浮动
.navbar-header // 标题内容多可放入该区域中，只有一个时可直接使用 .navbar-brand , 自带左浮动
.navbar-nav // 导航条中的导航
.navbar-form // 导航中使用表单
.navbar-left // 导航中使用的对齐方式：居左
.navbar-right // 导航中使用的对齐方式：居右
.navbar-btn // 导航中使用按钮
.navbar-text // 导航中使用一段文字
.navbar-link // 非导航链接，一般需要置入文本区域内 ,属于内联，只改变样式与导航样式同步
.navbar-fixed-top // 导航固定在顶部
.navbar-fixed-bottom // 导航固定在底部
.navbar-static-top // 静态导航，和页面等宽，两端对齐，宽度100%，并去掉了圆角
