[FrontEnd] Bootstrap 小記

2015-01-28

摘要:[FrontEnd] Bootstrap 小記

Bootstrap 是以Mobile為主要支援的樣式，目的用手機瀏覽也可以有好的體驗

user-scalable=no 可以禁用其缩放（zooming）功能

Grid System

Bootstrap 的頁面內容與隔欄(Grid System)皆是以 .container 樣式包覆

Grid 中一列(row)區分為１２等份超過則會折行，如下方code，其中col-lg-4 col代表一列中的欄，lg/md/sm/xs 為後綴字表示在不同解析度的分配比例，數字代表佔１２等份的比重


  <div class="row">
      <div class="col-lg-4">
          <img class="img-circle" src="" alt="" style="width: 140px; height: 140px;">
          <h2>Heading</h2>
          <p></p>
          <p><a class="btn btn-default" href="#" role="button">View details »</a></p>
     </div><!-- /.col-lg-4 -->
</div><!-- row -->

同一頁的桌面版有三欄，每欄占1/3；但到手機版時每欄各占版面的1/2


<div class="row">  
    <div class="col-xs-6 col-md-4"></div>  
    <div class="col-xs-6 col-md-4"></div>  
    <div class="col-xs-6 col-md-4"></div>  
 </div>

.col-md-offset-4 是將 .col-md-4 向右邊偏移４個cloumn

回首頁