Use Responsive Design with Bootstrap Fluid Containers —- 添加Bootstrap 响应式容器（class="container-fluid"）

  1. <head>
  2.     <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
  3. </head>
  4. <body>
  5.     <!--响应式容器-->
  6.     <div class="container-fluid"></div>
  7. </body>

Make Images Mobile Responsive —- 响应式图片（class="img-responsive"）

Center Text with Bootstrap —- 文本居中 （class="text-center"）

Create a Bootstrap Button —- 响应式按钮（class="btn"）

Create a Block Element Bootstrap Button —- 块级按钮（class="btn btn-block"）

Taste the Bootstrap Button Color Rainbow —- 主要按钮/深蓝色（class="btn btn-block btn-primary“）

Call out Optional Actions with Button Info —- 信息按钮/浅蓝色（class="btn btn-block btn-info“）

Warn your Users of a Dangerous Action —- 危险操作按钮/红色（class="btn btn-block btn-danger"）

Use the Bootstrap Grid to Put Elements Side By Side —- 使用 Bootstrap 网格并排排列元素

  1. <div class="row">
  2.     <div class="col-xs-4"><button class="btn btn-block btn-primary">Like</button></div>
  3.     <div class="col-xs-4"><button class="btn btn-block btn-info">Info</button></div>
  4.     <div class="col-xs-4"><button class="btn btn-block btn-danger">Delete</button></div>
  5. </div>

Ditch Custom CSS for Bootstrap（删除自定义 CSS 样式，使用 Bootstrap 替代） —- Bootstrap 样式（淡蓝色文字/class="text-primary"）

Use Spans for Inline Elements —- 使用 span 标签来为 block 元素内的某部分添加特定样式（暗红色文字/class=”text-danger”）

Create a Custom Heading —-

  1. <div class="row">
  2.     <div class="col-xs-8"><h2 class="text-primary text-center">CatPhotoApp</h2></div>
  3.     <div class="col-xs-4"><a href="#"><img class="img-responsive thick-green-border" src="/images/relaxing-cat.jpg"></a></div>
  4. </div>

Add Font Awesome Icons to our Buttons（为按钮添加矢量图标） —-

  1. <!--引入矢量图标库-->
  2. <link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css"/>
  3. <!--竖起大拇指图标-->
  4. <i class="fa fa-thumbs-up"></i> 
  5. <!-- info 图标-->
  6. <i class="fa fa-info-circle"></i>
  7. <!-- 垃圾桶 图标-->
  8. <i class="fa fa-trash"></i>

Add Font Awesome Icons to all of our Buttons —- 为所有按钮添加矢量图标

Responsively Style Radio Buttons —-单选按钮变成响应式

  1. <div class="row">
  2.       <div class="col-xs-6"><label><input type="radio" name="indoor-outdoor"> Indoor</label></div>
  3.       <div class="col-xs-6"><label><input type="radio" name="indoor-outdoor"> Outdoor</label></div>
  4. </div>

Responsively Style Checkboxes —- 多选按钮变成响应式

  1. <div class="row">
  2.       <div class="col-xs-4"><label><input type="checkbox" name="personality"> Loving</label></div>
  3.       <div class="col-xs-4"><label><input type="checkbox" name="personality"> Lazy</label></div>
  4.       <div class="col-xs-4"><label><input type="checkbox" name="personality"> Crazy</label></div>
  5. </div>

Style Text Inputs as Form Controls —- 样式

  1. <!--class="form-control" 使得文本输入框占整行-->
  2. <input type="text" class="form-control" placeholder="cat photo URL" required>
  3. <!--<i class="fa fa-paper-plane"></i>-->
  4. <button type="submit" class="btn btn-primary"><i class="fa fa-paper-plane"></i>Submit</button>

Line up Form Elements Responsively with Bootstrap

  1. <div class="row">
  2.       <div class="col-xs-7"><input type="text" class="form-control" placeholder="cat photo URL" required></div>
  3.       <div class="col-xs-5"><button type="submit" class="btn btn-primary"><i class="fa fa-paper-plane"></i> Submit</button></div>
  4. </div>

Create a Bootstrap Headline —- 创建一个 Bootstrap 头

  1. <h3 class="text-primary text-center">jQuery Playground</h3>

House our page within a Bootstrap Container Fluid Div —- 将整个页面放置在一个响应式容器中

  1. <div class="container-fluid"></div>

Create a Bootstrap Row —- 创建一个响应式列

Split your Bootstrap Row —-

Create Bootstrap Wells —- 样式（classs=”well”）

Add Elements within your Bootstrap Wells —- 在 Bootstrap well 中添加元素

Apply the Default Bootstrap Button Style（给 button 添加 Bootstrap 默认样式） —- 样式（Bootstrap 默认按钮样式/class=”btn btn-default”）

Create a Class to Target with jQuery Selectors —- 样式（class=”target”）

Add ID Attributes to Bootstrap Elements —- 给 Bootstrap 元素添加 ID 属性

Label Bootstrap Wells（标注 Bootstrap well） —-

Give Each Element a Unique ID —-

Label Bootstrap Buttons —-

Use Comments to Clarify Code —- 添加注释说明代码

  1. <!-- Only change code above this line-->