Bootstrap 學習5

圖片自適應： class="img-responsive"

<img class="img-responsive" src="/image/cat.jpg"

文字位置類：

<h2 class="red-text text-center">CatPhotoApp</h2>  //文字居中
 <h2 class="red-text text-left">CatPhotoApp</h2>  //文字居左
 <h2 class="red-text text-right">CatPhotoApp</h2>  //文字居右

擴展按鈕爲塊級元素：

一般狀況下，你的 button 元素僅與它所包含的文本同樣寬。經過使其成爲塊級元素，你的按鈕將會伸展並填滿頁面整個水平空間，任何在它之下的元素都會跟着浮動至該區塊的下一行。

<button class="btn btn-block">Like</button>  //btn-block的做用
<button class="btn btn-block btn-primary">Like</button>  //藍色按鈕，用戶主要的操做
<button class="btn btn-block btn-info">Like</button>    //淺藍色按鈕，用戶可能的操做
<button class="btn btn-block btn-danger">Like</button>   //紅色按鈕，提醒用戶該操做可能具備破壞性

bootstrap網格：

Bootstrap 使用一種響應式網格佈局——可輕鬆實現將多個元素放入一行並指定各個元素的相對寬度的需求。Bootstrap 中大多數的class屬性均可以設置於 div 元素中。

請注意，在這張圖表中，class屬性 col-md-* 正被使用。在這裏，md表示 medium (中等的)，* 表明一個數字，它指定了這個元素所佔的列寬。經過此圖表的屬性設置可知，在中等大小的屏幕上(例如筆記本電腦)，元素的列寬被指定了。用法以下例所示（下例中使用的col-xs-* 適用於小屏幕設備）：

<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 Icons ：使用前需引入圖庫

<link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css"/>
//給按鈕增長點贊手勢圖標：<i class="fa fa-thumbs-up"></i>
<button class="btn btn-block btn-primary">Like <i class="fa fa-thumbs-up"></i></button>
//信息圖標
<button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i>Info</button>
//垃圾箱圖標
<button class="btn btn-block btn-danger"> <i class="fa fa-trash"></i> Delete </button>