列偏移

右偏移：col-md-push-8

左偏移：col-md-pull-4

<div class="container">

  <div class="row">

    <div class="col-md-4 col-md-push-8">.col-md-4</div>

    <div class="col-md-8 col-md-pull-4">.col-md-8</div>

  </div>

</div>

列偏移

不希望相邻的两个列紧靠在一起，但又不想使用margin或者其他的技术手段来。这个时候就可以使用列偏移（offset）功能来实现。使用列偏移也非常简单，只需要在列元素上添加类名“col-md-offset-*”(其中星号代表要偏移的列组合数)，那么具有这个类名的列就会向右偏移。例如，你在列元素上添加“col-md-offset-4”，表示该列向右移动4个列的宽度

 <div class="row">

    <div class="col-md-4">.col-md-4</div>

    <div class="col-md-4 col-md-offset-4">列向右移动四列的间距</div>

  </div>

网格的用法

列组合简单理解就是更改数字来合并列（原则：列总和数不能超12），有点类似于表格的colspan属性

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-8">.col-md-8</div>
  </div>
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-3">.col-md-3</div>
    <div class="col-md-6">.col-md-6</div>
    <div class="col-md-3">.col-md-3</div>
 </div>
</div>

bootstrap的网格

1. 数据行(.row)必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内距(padding)。

2. 在行(.row)中可以添加列(.column)，但列数之和不能超过平分的总列数，比如12
   

<div class="container">
<div class="row">
  <div class="col-md-4"></div>
  <div class="col-md-8"></div>

图像在网页制作中也是常要用到的元素，在Bootstrap框架中对于图像的样式风格提供以下几种风格：

1、img-responsive：响应式图片，主要针对于响应式设计
2、img-rounded：圆角图片
3、img-circle：圆形图片
4、img-thumbnail：缩略图片

<img  alt="140x140" src="http://placehold.it/140x140">
<img  class="img-rounded" alt="140x140" src="http://placehold.it/140x140">
<img  class="img-circle" alt="140x140" src="http://placehold.it/140x140">
<img  class="img-thumbnail" alt="140x140" src="http://placehold.it/140x140">
<img  class="img-responsive" alt="140x140" src="http://placehold.it/140x140">

button的禁用

在Bootstrap框架中，要禁用按钮有两种实现方式：

方法1：在标签中添加disabled属性

方法2：在元素标签中添加类名“disabled”

两者的主要区别是：

“.disabled”样式不会禁止按钮的默认行为，比如说提交和重置行为等。如果想要让这样的禁用按钮也能禁止按钮的默认行为，则需要通过JavaScript这样的语言来处理。对于<a>标签也存在类似问题，如果通过类名“.disable”来禁用按钮，其链接行为是无法禁止。而在元素标签中添加“disabled”属性的方法是可以禁止元素的默认行为的。

button的激活和悬浮，焦点状态

正常button有激活和焦点，悬浮三种状态

但如果用a伪装button需要在class中添加.active

bootstrap中的块状按钮用(“btn-block”)

<button class="btn-block" type="button">大型按钮.btn-lg</button>

bootstrap中按钮大小(btn-lg大，btn-sm小，btn-xs超小)

<button class="btn btn-lg" type="button">大型按钮.btn-lg</button>
<button class="btn" type="button">正常按钮</button>
<button class="btn btn-sm" type="button">小型按钮.btn-sm</button>
<button class="btn btn-xs" type="button">超小型按钮.btn-xs</button>

button样式

.btn-primary:蓝

.btn-info:浅蓝

.btn-success:绿

.btn-warning:黄

.btn-danger:红

.btn-link:按钮转化成链接风格

在bootstrap中用a，input-submit，span，div显示为button

<button class="btn btn-default" type="button">button标签按钮</button>
<input type="submit" class="btn btn-default" value="input标签按钮"/>
<a href="##" class="btn btn-default">a标签按钮</a>
<span class="btn btn-default">span标签按钮</span>
<div class="btn btn-default">div标签按钮</div>

button的风格

“.btn”定义了一个基础的按钮风格，然后通过“.btn-default”定义了一个默认的按钮风格。默认按钮的风格就是在基础按钮的风格的基础上修改了按钮的背景颜色、边框颜色和文本颜色。

<button class="btn btn-default" type="button">默认按钮</button>

bootstrap的button(class中加btn)

<button class="btn" type="button">我是一个基本按钮</button>

表单验证后的提示信息

使用了一个"help-block"样式，将提示信息以块状显示，并且显示在控件底部。

<form role="form">
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess1">成功状态</label>
  <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
  <span class="help-block">你输入的信息是正确的</span>
  <span class="glyphiconglyphicon-ok form-control-feedback"></span>
</div>
  …
</form>

表单验证的成功，警告，错误状态

1、.has-warning:警告状态（黄色）
2、.has-error：错误状态（红色）
3、.has-success：成功状态（绿色）
使用的时候只需要在form-group容器上对应添加状态类名。

<form role="form">
<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">成功状态</label>
  <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">警告状态</label>
  <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">错误状态</label>
  <input type="text" class="form-control" id="inputError1" placeholder="错误状态">
</div>
</form>