Bootstrap常用类名

整理一些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：导航类型1
• nav nav-pills：导航类型2
• nav-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>&nbsp;</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>