bootstrap基础布局

居中容器.container

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto; /*左右居中的设置*/
    margin-left: auto;
}

.container的宽度由设备宽度决定（响应式）;

标题样式

bootstrap定义了.h1~.h6用于在非标题元素使用

强调文本样式

Bootstrap将默认的文本强调元素进行了轻量级实现，这些元素分别为：small、 strong、 em、 cite。

表格样式

<table class="table">
    ...
</table>

.table样式的主要作用有3个：

1. 增加单元格的内边距。
2. 在thead的底部设置一条2像素的粗线
3. 以及在每行记录的顶部都有1条1个像素的细线。

.table-striped是表格样式一个附加样式，用于实现背景条纹表格，另表格每相邻两行颜色不同、隔行颜色相同。

<table class="table table-striped">
    ...
</table>

.table-bordered为表格所有的单元格提供了1条1像素宽的边框。
.table-hover为表格每行提供悬停高亮
.table-condensed用于制作紧凑型表格，将默认情况下表格的padding由8xp改为5xp
以上样式可以组合使用

<table class="table table-striped table-bordered table-condensed">
    ...
</table>

表格行（tr）样式

<tr class="active">
    <td>1</td>
    <td>JavaScript编程精解</td>
    <td>机械工业出版社</td>
    <td>汤姆大叔(译)</td>
</tr>

bootstrap提供5种行颜色样式：

1. active
2. success
3. warnning
4. danger
5. info

水平滚动的表格容器

将.table-responsive套在.table外面，就可以创建可以水平滚动的表格容器，作为响应式表格。

<div class="table-responsive">
    <table class="table">
    ...
    </table>
</div>

表单

在input元素上添加.form-control：外观美化（如圆角），宽度变成100%，有焦点激活状态

通常将提示语label和input元素放在一个样式为.formg-roup的div里。

<form>
    <fieldset>
        <legend>用户登录</legend>
        <div class="form-group">
            <label>登录账户</label>
            <input type="email" class="form-control" placeholder="请输入你的用户名或Email">
        </div>
        <div class="form-group">
            <label>密码</label>
            <input type="text" class="form-control" placeholder="请输入你的密码">
        </div>
            <div class="checkbox">
            <label><input type="checkbox">记住密码</label>
        </div>
        <button type="submit" class="btn btn-default">登录</button>
    </fieldset>
</form>

.form-inline：在form元素上应用.form-inline样式，可以使.form-group的div显示在一行（设备像素大于768px才有效）
.form-horizontal：在form元素上应用.form-horizontal，可以使.form-group的div，想带上了行样式（.row）一样，自由的使用列样式（.col）将label与input水平水平排布

<form class="form-horizontal" role="form">
    <div class="form-group">
        <label for="account" class="col-sm-2 control-label">用户名</label>
        <div class="col-sm-10">
            <input type="email" class="form-control" id=" account " placeholder="请输入你的用户名">
        </div>
    </div>
</form>

checkbox和radio

checkbox和radio是input元素里两个非常特殊的type，通常在使用的过程中和label文字搭配，但通常会出现【左右边距对不齐】的问题.
为此:

<div class="checkbox">
    <label><input type="checkbox" value="">是否想赚大钱？</label>
</div>

<div class="radio">
    <label><input type="radio" name="optionsRadios" value="female" checked>请确保,您喜欢女人？</label>
</div>

即使用的时候，每个input外部都要用label包住，并且在最外层用div元素包住，并应用相应的.checkbox和.radio样式。

有些checkbox或者radio元素中文本很少，可能需要横向显示，为此可以将内联样式.checkbox-inline和.radio-inline应用于label元素。

<label class="checkbox-inline">
    <input type="checkbox" value="体育" id="inlineCheckbox1">体育
</label>
<label class="checkbox-inline">
    <input type="checkbox" value="音乐" id="inlineCheckbox2">音乐
</label>

<label class="radio-inline">
    <input type="radio" value="未知" id="Radio3">未知
</label>

针对不同提示状态，可以将.has-warning .has-error .has-success三种样式加于.form-group的div上

<div class="form-group has-warning">
    <label class="control-label">输入长度不够！</label>
    <input type="text" class="form-control" id="Text1">
</div>

状态反馈小图标

.has-feedback用于设置position方便.form-control-feedback通过top与left进行绝对定位，所以要把前者放在.form-group的div元素上，后者放在span元素上

<div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess2">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess2" />
    <span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>

.input-lg（稍大）和.input-sm（稍小）放在input元素上，用于设置控件大小，这只是控制高度和字体大小，宽度通常用带有.col的div控制。

按钮

.btn应用于button元素，定义了按钮的基础样式。
.btn-lg .btn-sm .btn-xs 定义了按钮大尺寸
.btn-primary .btn-success .btn-info .btn-warning .btn-danger .btn-danger .btn-link定义了按钮的风格
通常按钮宽度是根据文本长度决定的。
.btn-block是定义了一个宽度100%充满父元素的按钮。

图像显示

bootstrap三种关于图片的样式.img-rounded、.img-circle、 .img-thumbnail样式

文本样式及背景样式

文本样式（text-）

在文本显示方面，Bootstrap提供了6种统一的样式颜色，
分别是：

• 柔和灰（text-muted）
• 主要蓝（text-primary）
• 成功绿（text-success）
• 信息蓝（text-info）
• 警告黄（text-warning）
• 危险红（text-danger）

文本背景样式

与此同时，Bootstrap还提供了5种背景颜色和上面的5种文本颜色样式对应（muted样式除外），分别是：

• 主要蓝（bg-imary）
• 成功绿（bg-success）
• 信息蓝（bg-info）
• 警告黄（bg-warning）
• 危险红（bg-danger）
• +

关闭图标与向下箭头

.close
.caret

内容浮动

.pull-left与.pull-righ可以另元素左浮动或右浮动，.center-block可以使元素居中显示
.clearfix用于清除浮动

隐藏与显示

.hidden 隐藏
.invisible 不可视
.show 显示