Bootstrap

（1）####Bootstrap
它将会根据你的屏幕的大小来调整HTML元素的大小 —— 强调 响应式设计的概念。

通过响应式设计，你无需再为你的网站设计一个手机版的。它在任何尺寸的屏幕上看起来都会不错。

你仅需要通过添加下列代码到你的HTML开头来将Bootstrap添加到任意应用中：

<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css"/>

（2）Make Images Mobile Responsive

通过Bootstrap，我们要做的只是给图片添加** img-responsive class**属性。这样图片的宽度就能完美地适配你的页面的宽度了。

（3）Center Text with Bootstrap

既然我们在使用Bootstrap，我们可以通过居中头部元素来使它看起来更棒。 我们所要做的只是把text-center class属性添加给 h2 元素。

记住：你可以用空格分开多个class来为同一个元素添加多个 class 属性， 就像这样：

<h2 class="red-text text-center">your text</h2>

Create a Bootstrap Button

Bootstrap有它自己的 button 按钮风格， 看起来要比默认的按钮好看得多。

在三只猫咪图片下面创建一个新的 button 元素。给它添加 btn class 属性以及"Like"文本。

Create a Block Element Bootstrap Button

通常情况下，你的** button** 元素仅与它所包含的文本一样宽。通过使其成为块级元素，你的按钮将会伸展并填满页面整个水平空间，任何在它之下的元素都会跟着浮动至该区块的下一行。

这张图阐述了行内元素与块级元素的区别：

【注意】，这些按钮仍然需要 btn class。
添加Bootstrap的 btn-block class 到你的按钮。
【例如】<button class="btn btn-block">Like</button>

Taste the Bootstrap Button Color Rainbow

Taste the Bootstrap Button Color Rainbow
深蓝色btn-primary是你的应用的主要颜色，被用在那些用户主要采取的操作上。

添加Bootstrap的** btn-primary class **属性到按钮标签上。

【注意】：这个按钮仍然需要 btn 和 btn-block 属性！
【案例】：<button class="btn btn-block btn-primary">Like</button>

Call out Optional Actions with Button Info

Bootstrap自带了一些预定义的按钮颜色。**浅蓝色 btn-info **被用在那些用户可能会采取的操作上。

【案例】：
在你的 "Like" 按钮下面添加一个文本为** "Info"** 的块级Bootstrap按钮，并为其添加** btn-info 和 btn-block **class属性。

<button class="btn btn-block btn-primary">Like</button>
 <button class="btn btn-block btn-info">info</button>

【注意】：这些按钮仍然需要 btn 和 btn-block class属性

Warn your Users of a Dangerous Action

Bootstrap自带了一些预定义的按钮颜色。红色btn-danger被用来提醒用户该操作具有“破坏性”，例如删除一张猫的图片。
【案例】
创建一个文本为 "Delete" 的按钮，并且给它添加 class btn-danger。

<button class="btn btn-block btn-danger">Delete</button>

【注意】：这些标签仍然需要 btn 与 btn-block class。

Use the Bootstrap Grid to Put Elements Side By Side

Bootstrap 使用一种响应式网格布局——可轻松实现将多个元素放入一行并指定各个元素的相对宽度的需求。Bootstrap 中大多数的class属性都可以设置于 div 元素中。

下面这张图表显示了 Bootstraps 的12列网格布局是如何起作用的：

【请注意】在这张图表中，class属性 col-md- 正被使用。在这里，md表示 medium (中等的) ，*** 代表一个数字，它指定了这个元素所占的列宽。通过此图表的属性设置可知，在中等大小的屏幕上(例如笔记本电脑)，元素的列宽被指定了。
【案例】
在我们创建的【案例】 Cat Photo App 中，将会使用 col-xs-*** ，其中 xs 是 extra small 缩写（应用于较小的屏幕，比如手机屏幕），* 是你需要填写的数字，代表在一行中,各个元素应该占的列宽。

把** Like, Info 和 Delete **三个按钮一并放入一个 <div class="row"> 元素中；然后，其中的每一个按钮都需要各自被一个 <div class="col-xs-4"> 元素包裹。

当div 元素设置了 class 属性** row **之后，那几个按钮便可嵌入其中。

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

Ditch Custom CSS for Bootstrap

现在，让我们清理一下之前的代码了，以让我们的案例 Cat Photo 应用看起来更简洁，用 Bootstrap 内置的样式来替换我们之前自定义的样式。

别担心 —— 以后我们会有大把时间来自定义我们的 CSS 样式的 ：）

删除 style 元素里的 .red-text, p 和 .smaller-image CSS声明，这样你的 style 留下的声明就只有 h2 和 thick-green-border。

然后删除包含死链接的 p 元素。 移除 h2 元素的 red-text class 并且用** Bootstrap的 text-primary** class替换之。

最后，移除第一个 img 元素的 "smaller -image" class ，替换为** Bootstrap的 img-responsive class**。

目前Cat Photo案例主源码如下：

<link href="//fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" type="text/css">
<style>

  h2 {
    font-family: Lobster, Monospace;
  }


  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }

  
</style>

<div class="container-fluid">
  <h2 class="text-primary text-center">CatPhotoApp</h2>

  <a href="#">![](/images/relaxing-cat.jpg)</a>

  ![](/images/running-cat.jpg)
  <div class="row">
    <div class="col-xs-4">
      <button class="btn btn-block btn-primary">Like</button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-info">Info</button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-danger">Delete</button>
    </div>
  </div>
  <p>Things cats love:</p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>
  <form action="/submit-cat-photo">
    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
    <label><input type="checkbox" name="personality"> Loving</label>
    <label><input type="checkbox" name="personality"> Lazy</label>
    <label><input type="checkbox" name="personality"> Crazy</label>
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
  </form>
</div>

【效果图】

案例bootstrap.gif

Use Spans for Inline Elements

你可以用 span 标签来创建行内元素。通过使用** span 元素**，你可以把几个元素放在一起。你甚至可以用此为一个元素的不同部分指定样式。
【案例】：

<p>Top 3 things cats <span class = "text-danger">hate:</span></p>

【样式】：

Create a Custom Heading

让我们来为Cat Photo 应用做一个导航吧，把标题和惬意的猫图片放在同一行。

记住，Bootstrap使用响应式栅格系统，这使得把元素放入行内并为每个元素指定宽度变得很容易。大部分的 Bootstrap的 class 都可以被用在** div 元素**上。

将你的第一张图片和 h2 元素放到同一个 <div class="row"> 元素下。 将你的 h2 元素放到 <div class="col-xs-8"> 下，你的图片放到 <div class="col-xs-4"> 下，这样他们就能位于同一行了。

注意现在图片是否与文字大小一致呢？

Add Font Awesome Icons to our Buttons

Font Awesome 是一个非常方便的图标库。这些图标都是矢量图形，被保存在 .svg 的文件格式中。这些图标就和字体一样，你可以通过像素单位指定它们的大小，它们将会继承其父HTML元素的字体大小。

你可以将 Font Awesome 图标库增添至任何一个应用中，方法很简单，只需要在你的 HTML 头部增加下列代码即可：

<link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css"/>

不过，我们已经事先在幕后为此页面添加了该功能。（不必重复添加上面这段代码）

i 元素起初一般是让其它元素有斜体(italic)的功能，不过现在一般用来指代图标。你可以将 Font Awesome 中的 class 属性添加到 i 元素中，把它变成一个图标，比如：
你可以通过 Font Awesome 库增加一个 thumbs-up 图标到你的 like 按钮中，方法是在i 元素中增加 class 属性 fa 和 fa-thumbs-up。

同时，使用 Font Awesome 分别为你的 info 按钮添加 info-circle 图标，为你的 delete 按钮添加 trash 图标。

<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">Info</i></button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-danger"><i class="fa fa-trash" >Delete</i></button>
    </div>

Paste_Image.png

Responsively Style Radio Buttons

你还可以将 Bootstrap 的** col-xs-***用在 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>

【效果图】

Responsively Style Checkboxes

同上

Style Text Inputs as Form Controls

给你表单的文本输入框增加 classform-control 。
表单控件加上类form-control后，效果为：
宽度为100%

设置边框为浅灰色

控件具有4px的圆角

设置阴影效果，元素得到焦点时，阴影和边框效果会发生变化

设置placeholder的颜色为#999

Line up Form Elements Responsively with Bootstrap