FCC 3.前端库和框架 3.1Bootstrap

Bootstrap 使用响应式的12列栅格布局并提供了一些设计模板：

• 按钮
• 图片
• 表格
• 表单
• 导航

<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" 
crossorigin="anonymous"/>

首先，我们应该把所有 HTML 标签放在 class 为 container-fluid 的 div 元素下（除了 link 标签和 style 标签）。

为 image 标签上设置 class 属性为 img-responsive 就可以让它完美的适应你页面的宽度了。

只需为 h2 元素设置 class 属性 text-center 就可以做到居中文本

button 元素。 为它添加 btn 与 btn-default 两个 class 和 “Like” 文本。

<button class="btn btn-default">"Like"</button>

一般情况下，具有 btn 和 btn-default 两个 class 的 button 元素宽度与它包含的文本相同。

通过为按钮添加 class 属性 btn-block 使其成为块级元素，按钮会伸展并填满页面整个水平空间，后续的元素会流到这个块级元素的下方，即 “新开一行”。

btn-primary class 的颜色是你在应用中的主题色。这样 “突出显示” 是引导用户按步就班进行操作的有效办法。

将按钮的 class 从 Bootstrap 的 btn-default 替换为 btn-primary。

Bootstrap 有着丰富的预定义按钮颜色。浅蓝色 btn-info class 通常用在用户可能采取的操作上。

为该按钮添加 Bootstrap 的 btn 和btn-info 和 btn-block class。

红色 btn-danger class 用来提醒用户此行为具有破坏性，比如删除

col-md-* class 来说。 在这里， md 表示 medium （中等的）， 而 * 是一个数字，说明了这个元素占有多少个列宽度。
col-xs-* ， 其中 xs 是 extra small 的缩写 (应用于较小的屏幕，比如手机屏幕)， * 是你填写的数字，代表一行中，你的元素该占多少列宽。

将我们的 Like, Info 和 Delete 三个按钮并排放入一个 <div class="row"> 元素中，然后每个按钮都各用一个 <div class="col-xs-4"> 元素包裹起来。

删除包含死链接的 p 元素。 然后将 h2 的 red-text class 替换为 Bootstrap 的 text-primary class.

最后, 将你第一个 img 元素的 “smaller-image” class 替换为 img-responsive class.

通过使用行内元素 span，你可以把不同的元素放在同一行，甚至能为一个元素的不同部分指定样式。

为span 标签添加 text-danger class 来使其文字变成红色。
<p>Top 3 things cats <span class="text-danger">hate:</span></p>

把我们的第一张图片和 h2 元素用一个简单的 <div class="row"> 元素包裹起来。
再用 <div class="col-xs-8"> 包裹我们的 h2 元素，
用 <div class="col-xs-4"> 包裹我们的图片，这样它们就能位于同一行了。

<div class="row">
    <div class="col-xs-8">
      <h2 class="text-primary text-center">CatPhotoApp</h2>
    </div>
    <div class="col-xs-4">
      <a href="#"><img 
      class="img-responsive thick-green-border" 
      src="https://bit.ly/fcc-relaxing-cat" 
      alt="A cute orange cat lying on its back."></a>
    </div>
  </div>

Font Awesome 是一个非常便利的图标库。这些图标都是被保存在 .svg 的文件格式中的矢量图。这些图标就和字体一样，不仅能通过像素单位指定他们的大小，它们也同样会继承父级 HTML 元素的字体大小。在你的 HTML 头部增加下列代码:

<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" 
integrity="sha384-XdYbMnZ/QjLh6iI4ogqCTaIjrFk87ip+ekIjefZch0Y+PvJ8CDYtEs1ipDmPorQ+" 
crossorigin="anonymous">

i 元素起初用于让其它元素具有斜体（italic）的效果，不过现在一般用于指代图标。span 元素也一样可以用于指代图标。
你可以通过 Font Awesome 库增加一个 thumbs-up 图标到你的 like 按钮上，具体方法是给 i 元素添加 class 属性 fa 和 fa-thumbs-up；

<button class="btn btn-block btn-primary ">Like
<i class="fa fa-info-circle fa fa-thumbs-up"></i></button>

<div class="row">
    <div class="col-xs-4">
      <button class="btn btn-block btn-primary">
      <i class="fa fa-thumbs-up"></i> Like</button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-info">
      <i class="fa fa-info-circle"></i> Info</button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-danger">
      <i class="fa fa-trash"></i> Delete</button>
    </div>
</div>

将 Bootstrap 的 col-xs-* class 用在 form 元素上！这样我们就可以在不关心屏幕大小的情况下，将我们的单选按钮均匀的平铺在页面上。将你的所有单选按钮放入 <div class="row"> 元素。再用 <div class="col-xs-6"> 元素包裹每一个单选按钮。

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

将所有复选框都放置于一个

元素中。然后分别把每个复选框都放置于一个

元素中。

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

你可以通过在 submit button 内加上 来添加 Font Awesome 的 fa-paper-plane 图标。

为表单的文本输入框（text input）设置 form-control class。为表单的提交（submit）按钮设置 btn btn-primary class，并为它加上 Font Awesome 的 fa-paper-plane 图标。

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

所有文本输入类的元素如 ， 和 只要设置 .form-control class 就会占满100%的宽度。

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

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

通过给你的 h3 元素设置 Bootstrap 的 class 属性 text-primary 来为其上色，然后添加 Bootstrap 的 class 属性 text-center 使其文本居中显示。

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

将我们的 h3 元素内嵌进一个具有 container-fluid class 的div 元素中。

这次让我们为内联元素创建一个 Bootstrap 栅格系统的 Row（行）。

在 h3 标签下方创建一个 class 属性为 row 的 div 元素。

既然我们已经有了一个 Bootstrap Row，就让我们把它分成两列来放置我们的元素。

在行内创建两个 class 属性为 col-xs-6 的 div 元素。

Bootstrap 有一个叫做 well 的 class，作用是赋予列一种视觉上的深度感（视觉上的效果）。

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

在每一个 well div 元素下放置三个 button 元素。

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

为 button 元素增加两个 class： btn 和 btn-default。

并不是所有 class 属性都需要有对应的 CSS 样式。有时候我们设置 class 只是为了更方便地在 jQuery 中选中这些元素。

为每一个 button 元素添加 target class。

让我们为每个 class 为 well 的 div 元素添加一个唯一的 id。

记住，你可以这样给一个元素设置 ID。

把左边 well 的 ID 设置为 left-well。右边的 well 的 ID 设置为 right-well。

为了让我们页面逻辑更清晰，让我们为 wells 都标上它们的 id 吧。

在 left-well 的上一层，class 属性为 col-xs-6 的 div 元素里面，增加一个文本为 #left-well 的 h4 元素。

在 right-well 的上一层，class 属性为 col-xs-6 的 div 元素里面，增加一个文本为 #right-well 的 h4 元素。

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

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

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

记住，你可以在 为结束的地方进行评论注释（像这样， ）。

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

 <!--Only change code above this line. -->
<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <h4>#left-well</h4>
      <div class="well" id="left-well">
        <button class="btn btn-default target" id="target1">#target1</button>
        <button class="btn btn-default target" id="target2">#target2</button>
        <button class="btn btn-default target" id="target3">#target3</button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target" id="target4">#target4</button>
        <button class="btn btn-default target" id="target5">#target5</button>
        <button class="btn btn-default target" id="target6">#target6</button>
      </div>
    </div>
  </div>
</div>