整理一些Bootstrap基础的常用类名出来，以备之后使用查看

共性定义

字符串含义lg/md/sm/xs大小定义（大、中等、小、极小）default/primany/danger/warning/info事件（缺省、最重要、危险、警告、信息）

布局容器

为页面内容和栅格系统包裹一个 .container 容器，可以在此基础上添加自己的class

container: 固定宽度container-fluid: 100%宽度 <div class="container"> <!--栅格内容等--> </div>

栅格系统

根据页面的尺寸大小调整布局，横向分割空间，总共12份，按照设计的比例书写类名

col-(lg/md/sm/xs)-num：括号中内容依据需要选择，num同一组中加起来为12 <div class="col-md-2"> <h3>左侧栏</h3> </div> <div class="col-md-8"> <h1>主页面</h1> </div> <div class="col-md-2"> <h3>右侧栏</h3> </div>

表单

form-group: 表单内项目组form-control: 单个项目的类form-inline：将表单项放至同一行form-group has-(error/success/warning)：错误/成功/警告提示（不同颜色）input-group：输入框组 or 特殊设置input-(lg/sm)：调整输入框大小 <div class="form-inline"> <div class="form-group has-error"> <label>用户名</label> <input type="text" class="form-control"/> </div> <div class="form-group"> <label>密码</label> <input type="password" class="form-control"/> </div> </div>

<div class="form-group"> <label>金额</label> <div class="input-group"> <div class="input-group-addon">￥</div> <input type="text" class="form-control"/> </div> </div>

按钮

btn btn-(default/primany/danger/warning/info)：不同按钮类型，颜色btn btn-(lg/sm/xs)：按钮大小btn-block：占据全部宽度active：按钮处于被点击状态 <div class="form-group"> <input type="button" class="btn btn-default" value="缺省" /> <input type="button" class="btn btn-primary" value="重要" /> <input type="button" class="btn btn-warning" value="警告" /> </div> <div class="form-group"> <input type="button" class="btn btn-default btn-lg" value="大" /> <input type="button" class="btn btn-default" value="标准" /> <input type="button" class="btn btn-default btn-sm" value="小" /> <input type="button" class="btn btn-default btn-xs" value="极小" /> </div> <div class="form-group"> <input type="button" class="btn btn-default active" value="按下" /> <input type="button" class="btn btn-default" value="正常" /> </div>

按钮组

btn-group：按钮组btn-group-(ld/sm/xs)：不同尺寸btn-group-verticial：纵向排列btn-tool-bar：按钮组工具栏 <div class="btn-toolbar"> <div class="btn-group"> <input type="button" class="btn btn-default" value="btn1" /> <input type="button" class="btn btn-default" value="btn2" /> <input type="button" class="btn btn-default" value="btn3" /> </div> <div class="btn-group btn-group-lg"> <input type="button" class="btn btn-default" value="btn1" /> <input type="button" class="btn btn-default" value="btn2" /> <input type="button" class="btn btn-default" value="btn3" /> </div> </div>

导航（navigation）

nav nav-tabs：导航类型1nav nav-pills：导航类型2nav-staked：竖直放置nav-justified：均分 <ul class="nav nav-tabs"> <li class="active"><a href="#">选项1</a></li> <li><a href="#">选项2</a></li> <li><a href="#">选项3</a></li> </ul> <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> </ul> <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#">选项1</a></li> <li><a href="#">选项2</a></li> <li><a href="#">选项3</a></li> </ul> <ul class="nav nav-tabs nav-justified"> <li class="active"><a href="#">选项1223</a></li> <li><a href="#">选项2</a></li> <li><a href="#">选项3</a></li> </ul>

导航栏

navbar navbar-default：总容器navbar-header：头部，标题navbar-brand：品牌navbar-nav：具体导航navbar-(left/right)：向左/右浮动navbar-form：导航栏中的提交表单 <div class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <a href="#" class="navbar-brand">网站名称</a> </div> <ul class="nav navbar-nav navbar-left"> <li class="active"><a href="#">主页</a></li> <li><a href="#">页面1</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">登录</a></li> <li><a href="#">注册</a></li> </ul> </div> </div>

面板

panel panel-(default/success/warning…)panel-heading：面板头部panel-body：面板主体panel-footer：面板底部panel-title <div class="panel panel-default"> <div class="panel-heading"> <div class="panel-title"> 面板标题 </div> </div> <div class="panel-body"> 面板内容。。。。。。。。。。。。。 </div> <div class="panel-footer"> <div class="small"> 面板底部 </div> </div> </div> <div class="panel panel-danger"> <div class="panel-heading"> <div class="panel-title"> 面板标题 </div> </div> <div class="panel-body"> 面板内容。。。。。。。。。。。。。 </div> <div class="panel-footer"> <div class="small"> 面板底部 </div> </div> </div>

表格

table：表格table-striped：奇偶行效果不同table-hover：光标放置有效果table-border：含边框success/warning/…：单行不同颜色 <table class="table table-striped"> <caption>name</caption> <thead> <tr> <th>head1</th> <th>head2</th> </tr> </thead> <tbody> <tr> <td>r1c1</td> <td>r1c2</td> </tr> <tr> <td>r2c1</td> <td>r2c2</td> </tr> <tr> <td> </td> <td>r3c2</td> </tr> </tbody> </table>

其他

pagination：页码pager：翻页breadcrumb：可做路径导航label-(default)：提示list-group： <ul class="pagination"> <li><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="#">下一页</a></li> </ul>

<ul class="pager"> <li><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="#">下一页</a></li> </ul>

<ul class="breadcrumb"> <li><a href="#">主页面</a></li> <li><a href="#">分支一</a></li> <li><a href="#">本页面</a></li> </ul>

<p> <span class="label label-default">标签1</span> <span class="label label-success">标签2</span> <span class="label label-warning">标签3</span> </p>