Bootstrap是比較流行的響應式框架,它會根據(jù)你的屏幕的大小來調(diào)整HTML元素的大小 —— 強調(diào) 響應式設計的概念。
通過響應式設計，你無需再為你的網(wǎng)站設計一個手機版的。它在任何尺寸的屏幕上看起來都會不錯。

常用APIs

• 引入

<link rel="stylesheet" />

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

• 通過Bootstrap使圖片適配手機顯示

  • 給圖片添加 img-responsive class屬性,圖片的寬度就能完美地適配你的頁面的寬度了。
  • ![](/images/running-cat.jpg)

• 通過Bootstrap使文本居中

  • 可以用空格和已有的class區(qū)別開
  • <h2 class="red-text text-center">your text</h2>

• 通過Bootstrap添加一個按鈕

  • <button class="btn">Like</button>
  • 樣式的確和原生有些區(qū)別，看著更平滑一些

• 添加一個Bootstrap塊級元素(block)按鈕

  • 可以理解為匹配父容器的按鈕
  • <button class="btn btn-block">Like</button>

• 嘗試給一個Bootstrap按鈕添加顏色

  • Bootstarp自身預定義了一些顏色
  • (深藍色)<button class="btn btn-block btn-primary">Like</button>
  • (淺藍色)<button class="btn btn-block btn-info">Info</button>

• 添加一個Bootstrap警告按鈕

  • 其實就是個紅色按鈕，也是預定義的顏色,名字叫danger
  • <button class="btn btn-block btn-danger">Delete</button>

使用Bootstrap做頁面布局

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

下面這張圖用的class屬性是col-md-*，12列網(wǎng)格布局

• md是medium（中等），不是markdown
• *是數(shù)字,代表在一行中,各個元素應該占的列寬。

col-md使用

手機可以嘗試col-xs-*

• xs 是 extra small的縮寫（應用于較小的屏幕，比如手機屏幕）
• * 是你需要填寫的數(shù)字,代表在一行中,各個元素應該占的列寬。

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

在按鈕上使用Font Awesome圖標字體

• 你可以在Font Awesome官網(wǎng)找到最新的和所有的icon或者其他的東西

Font Awesome 是一個非常方便的圖標庫，這些圖標都是矢量圖形，被保存在 .svg 的文件格式中。你可以通過像素單位指定它們的大小，它們將會繼承其父HTML元素的字體大小。

• 引入<link rel="stylesheet" />

• i在原生中是斜體，在這里是icon

• 用法（在上面官網(wǎng)鏈接進去找你需要的）

  • 官網(wǎng)上的名稱是這樣的icon-thumbs-up,你用的時候改成fa fa-thumbs-up，fa應該就是Font Awesome，我猜的

  <i class="fa fa-thumbs-up"></i>
  <button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up">Like</i></button>
  //不一定包裹，也可以前綴
  <button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i>Like</button>    
  

• 使用Bootstrap span標簽來創(chuàng)建行內(nèi)元素

  • span標簽可以用來做行內(nèi)元素
  • 通過span 可以把幾個元素放在一起

  <p>Hello World!</p>
  //這時候World！應該是紅色的
  <p> Hello <span class="text-danger"> World!</span></p>
  

• 使用Bootstrap設計一個頭部導航

  <div class="row">
  
  <div class="col-xs-4">![](/statics/codecamp/images/relaxing-cat.jpg)</div>
    
  <div class="col-xs-8"><h2 class="text-primary text-center">CatPhotoApp</h2></div>
  
  </div>
  

• 使用Bootstrap 響應式單選按鈕

  • 將 Bootstrap 的 col-xs-*用在 form 元素中。這樣的話，我們的單選按鈕就可以均勻地在頁面上展開，不需要知道屏幕的分辨率有多寬。

  <form action="/submit-cat-photo">
      <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>
  <form>
  

• 使用Bootstrap 響應式復選框

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

• 使用Form Controls設置輸入框和按鈕樣式

  <input class="form-control" type="text" placeholder="input your text" required>
  
  <button class="btn btn-primary" type="submit" style="margin-top:10px"><i class="fa fa-paper-plane"></i>Submit</button>
  
  

• 使用Bootstrap水平排列的表單

  • 這個沒啥說的，和之前一樣的就行了

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

• 使用Bootstrap設置div容器

  • 響應式容器

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

  • 行容器

    • <div class="row">...</div>

  • 分割Bootstrap行容器

    <div class="row">
        <div class="col-xs-6">...</div>
        <div class="col-xs-6">...</div>
    </div>`
    

• Bootstrap well容器

  • Bootstrap 有一個 class 屬性叫做 well

  • 作用是為設定的列創(chuàng)造出一種視覺上的深度感

    • <div class="well">...</div>

  • 在Bootstrap well容器中加按鈕

    //默認樣式
    <div class="well">
        <button class="btn btn-default"></button>
    </div>
    

• Bootstrap元素的ID屬性

  • 并不是每一個 class 屬性都是用于 CSS 的。 有些時候我們創(chuàng)建一些 class 只是為了更方便地在jQuery中選中這些元素。
  • 每個元素的id是唯一的。
  • 添加id和添加class一樣
    • <div id="target">...</div>

• 使用注釋標簽說明代碼

  • 這個其實可以忽略的，有過編碼經(jīng)驗的人都知道,但是作為初學者還是要提醒一下的，嗯，就醬紫！
  • HTML,XML ``
  • JS //