（1）####Bootstrap
它將會(huì)根據(jù)你的屏幕的大小來調(diào)整HTML元素的大小 —— 強(qiáng)調(diào) 響應(yīng)式設(shè)計(jì)的概念汤纸。

通過響應(yīng)式設(shè)計(jì)秃症，你無需再為你的網(wǎng)站設(shè)計(jì)一個(gè)手機(jī)版的陨献。它在任何尺寸的屏幕上看起來都會(huì)不錯(cuò)寸士。

你僅需要通過添加下列代碼到你的HTML開頭來將Bootstrap添加到任意應(yīng)用中：

<link rel="stylesheet" />

（2）Make Images Mobile Responsive

通過Bootstrap谜诫，我們要做的只是給圖片添加** img-responsive class**屬性。這樣圖片的寬度就能完美地適配你的頁面的寬度了痪蝇。

（3）Center Text with Bootstrap

既然我們在使用Bootstrap鄙陡，我們可以通過居中頭部元素來使它看起來更棒。 我們所要做的只是把text-center class屬性添加給 h2 元素躏啰。

記壮梅：你可以用空格分開多個(gè)class來為同一個(gè)元素添加多個(gè) class 屬性， 就像這樣：

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

Create a Bootstrap Button

Bootstrap有它自己的 button 按鈕風(fēng)格丙唧， 看起來要比默認(rèn)的按鈕好看得多愈魏。

在三只貓咪圖片下面創(chuàng)建一個(gè)新的 button 元素。給它添加 btn class 屬性以及"Like"文本想际。

Create a Block Element Bootstrap Button

通常情況下培漏，你的** button** 元素僅與它所包含的文本一樣寬。通過使其成為塊級元素胡本，你的按鈕將會(huì)伸展并填滿頁面整個(gè)水平空間牌柄，任何在它之下的元素都會(huì)跟著浮動(dòng)至該區(qū)塊的下一行。

這張圖闡述了行內(nèi)元素與塊級元素的區(qū)別：

Taste the Bootstrap Button Color Rainbow

Taste the Bootstrap Button Color Rainbow
深藍(lán)色btn-primary是你的應(yīng)用的主要顏色披粟，被用在那些用戶主要采取的操作上咒锻。

添加Bootstrap的** btn-primary class **屬性到按鈕標(biāo)簽上。

【注意】：這個(gè)按鈕仍然需要 btn 和 btn-block 屬性守屉！
【案例】：<button class="btn btn-block btn-primary">Like</button>

Call out Optional Actions with Button Info

Bootstrap自帶了一些預(yù)定義的按鈕顏色惑艇。**淺藍(lán)色 btn-info **被用在那些用戶可能會(huì)采取的操作上。

【案例】：
在你的 "Like" 按鈕下面添加一個(gè)文本為** "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自帶了一些預(yù)定義的按鈕顏色思灌。紅色btn-danger被用來提醒用戶該操作具有“破壞性”，例如刪除一張貓的圖片恭取。
【案例】
創(chuàng)建一個(gè)文本為 "Delete" 的按鈕泰偿，并且給它添加 class btn-danger。

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

【注意】：這些標(biāo)簽仍然需要 btn 與 btn-block class蜈垮。

Use the Bootstrap Grid to Put Elements Side By Side

Bootstrap 使用一種響應(yīng)式網(wǎng)格布局——可輕松實(shí)現(xiàn)將多個(gè)元素放入一行并指定各個(gè)元素的相對寬度的需求耗跛。Bootstrap 中大多數(shù)的class屬性都可以設(shè)置于 div 元素中。

下面這張圖表顯示了 Bootstraps 的12列網(wǎng)格布局是如何起作用的：

把** Like, Info 和 Delete **三個(gè)按鈕一并放入一個(gè) <div class="row"> 元素中藏鹊；然后，其中的每一個(gè)按鈕都需要各自被一個(gè) <div class="col-xs-4"> 元素包裹转锈。

當(dāng)div 元素設(shè)置了 class 屬性** row **之后盘寡，那幾個(gè)按鈕便可嵌入其中。

<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

現(xiàn)在撮慨，讓我們清理一下之前的代碼了竿痰，以讓我們的案例 Cat Photo 應(yīng)用看起來更簡潔，用 Bootstrap 內(nèi)置的樣式來替換我們之前自定義的樣式砌溺。

別擔(dān)心 —— 以后我們會(huì)有大把時(shí)間來自定義我們的 CSS 樣式的 ：）

刪除 style 元素里的 .red-text, p 和 .smaller-image CSS聲明影涉，這樣你的 style 留下的聲明就只有 h2 和 thick-green-border。

然后刪除包含死鏈接的 p 元素规伐。 移除 h2 元素的 red-text class 并且用** Bootstrap的 text-primary** class替換之蟹倾。

最后，移除第一個(gè) img 元素的 "smaller -image" class 楷力，替換為** Bootstrap的 img-responsive class**喊式。

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

<link  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 標(biāo)簽來創(chuàng)建行內(nèi)元素孵户。通過使用** span 元素**，你可以把幾個(gè)元素放在一起岔留。你甚至可以用此為一個(gè)元素的不同部分指定樣式夏哭。
【案例】：

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

【樣式】：

Create a Custom Heading

讓我們來為Cat Photo 應(yīng)用做一個(gè)導(dǎo)航吧，把標(biāo)題和愜意的貓圖片放在同一行献联。

記住竖配，Bootstrap使用響應(yīng)式柵格系統(tǒng)，這使得把元素放入行內(nèi)并為每個(gè)元素指定寬度變得很容易里逆。大部分的 Bootstrap的 class 都可以被用在** div 元素**上进胯。

將你的第一張圖片和 h2 元素放到同一個(gè) <div class="row"> 元素下。 將你的 h2 元素放到 <div class="col-xs-8"> 下原押，你的圖片放到 <div class="col-xs-4"> 下胁镐，這樣他們就能位于同一行了。

注意現(xiàn)在圖片是否與文字大小一致呢诸衔？

Add Font Awesome Icons to our Buttons

Font Awesome 是一個(gè)非常方便的圖標(biāo)庫盯漂。這些圖標(biāo)都是矢量圖形，被保存在 .svg 的文件格式中笨农。這些圖標(biāo)就和字體一樣就缆，你可以通過像素單位指定它們的大小，它們將會(huì)繼承其父HTML元素的字體大小谒亦。

你可以將 Font Awesome 圖標(biāo)庫增添至任何一個(gè)應(yīng)用中竭宰，方法很簡單，只需要在你的 HTML 頭部增加下列代碼即可：

<link rel="stylesheet" />

不過份招，我們已經(jīng)事先在幕后為此頁面添加了該功能切揭。（不必重復(fù)添加上面這段代碼）

i 元素起初一般是讓其它元素有斜體(italic)的功能，不過現(xiàn)在一般用來指代圖標(biāo)脾还。你可以將 Font Awesome 中的 class 屬性添加到 i 元素中伴箩，把它變成一個(gè)圖標(biāo)，比如：
你可以通過 Font Awesome 庫增加一個(gè) thumbs-up 圖標(biāo)到你的 like 按鈕中鄙漏，方法是在i 元素中增加 class 屬性 fa 和 fa-thumbs-up嗤谚。

同時(shí)，使用 Font Awesome 分別為你的 info 按鈕添加 info-circle 圖標(biāo)怔蚌，為你的 delete 按鈕添加 trash 圖標(biāo)巩步。

<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 元素中。這樣的話桦踊，我們的單選按鈕就可以均勻地在頁面上展開椅野，不需要知道屏幕的分辨率有多寬。
【方法】
將頁面中的兩個(gè)單選按鈕放置于一個(gè) <div class="row"> 元素中。然后竟闪，添加 <div class="col-xs-6"> 元素并分別包裹每一個(gè)單選按鈕离福。

【源碼】

<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%

設(shè)置邊框?yàn)闇\灰色

控件具有4px的圓角

設(shè)置陰影效果妖爷，元素得到焦點(diǎn)時(shí)，陰影和邊框效果會(huì)發(fā)生變化

設(shè)置placeholder的顏色為#999

Line up Form Elements Responsively with Bootstrap