Bootstrap：Responsive Design with Bootstrap（二）

1. Style Text Inputs as Form Controls

你可以在你的 button 提交按钮上添加 Font Awesome的 fa-paper-plane 图标，方法是在元素中增加 。

    <input type="text" class="form-control" placeholder="cat photo URL" required>
    <button type="submit" class="btn btn-primary"><i class="fa fa-paper-plane"></i> Submit</button>

2.Line up Form Elements Responsively with Bootstrap

现在让我们把 input 元素和提交按钮 button 放到同一行。我们将用和之前一样的方法：通过使用拥有 row class 属性的 div 元素和其它在它之内的具有 col-xs-* class 属性的 div 元素。

3.Create a Bootstrap Headline

现在，让我们从头开始练习我们的HTML, CSS 和 Bootstrap 技术。

我们将会搭建一个 jQuery playground，它也即将在我们接下来的 jQuery 课程中被投入使用。

首先，创建一个 h3 元素，并且包含文本内容 jQuery Playground 。

在 h3 元素中设置 Bootstrap 的 class 属性 text-primary 为其上色，同时增加 Bootstrap 的 class 属性 text-center 使文本居中显示

4.House our page within a Bootstrap Container Fluid Div

现在让我们确保页面里所有的内容都是响应式的。

让我们将 h3 元素放置于一个class属性为 container-fluid 的 div 元素中。

5.Create a Bootstrap Row

  <div class="row">
    <div class="col-xs-6">

    </div>
    <div class="col-xs-6">

    </div>
  </div>

6.Create Bootstrap Wells

Bootstrap 有一个 class 属性叫做 well，它的作用是为设定的列创造出一种视觉上的深度感（一种视觉上的效果，动手写代码体会一下）。

在你的每一个class为col-xs-6的div 元素中都嵌入一个带有 well class 属性的 div 元素。

7.Apply the Default Bootstrap Button Style

Bootstrap 还有一种属于按钮的 class 属性叫做 btn-default 。

8.Create a Class to Target with jQuery Selectors

并不是每一个 class 属性都是用于 CSS 的。 有些时候我们创建一些 class 只是为了更方便地在jQuery中选中这些元素。

9.Add ID Attributes to Bootstrap Elements

回忆一下，我们除了可以给元素增加 class 属性，还可以给你的每个元素增添一个 id 属性。

每一个指定元素的 id 都是唯一的，并且在每个页面中只能使用一次。

现在给我们每个包含 class well 的 div 元素一个唯一的 id。

记住，你可以像这样赋予一个元素 id：

<div class="well" id="center-well">

给左边的 well 赋予 id left-well。给右边的 well 赋予 id right-well。

10.Label Bootstrap Wells

11.Give Each Element a Unique ID

我们也可以使用jQuery并通过每个按钮各自唯一的 id 来标识出它们。

给你的每一个按钮一个唯一的 id ，以 target1 为开始，target6 为结束。

确保 target1 到 target3 在 #left-well 之中，target4 到 target6 则在 #right-well 之中。

12.Label Bootstrap Buttons

正如我们标注了每个 wells， 我们同样想要标注每一个按钮。

为你的每个 button 元素选择与其 id 选择器相同的文本。

13.Use Comments to Clarify Code

当我们开始使用jQuery，我们将修改HTML元素，但是实际上我们并不是直接在 HTML 文本中修改。

我们必须确保让每个人都知道，他们不应该直接修改此页面上这些代码。

记住，你可以在 <!-- 为开始， --> 为结束的地方进行评论注释。(像这样， <!-- 我是一段注释 --> )

请在你的 HTML 顶部加如下一段注释：Only change code above this line. 。