線上書籍

Home

網站、部落格架設

  1. 預設樣式 <div class="row"> <div class="col-xs-6 col-md-3"> <a href="#" class="thumbnail"> <img src="http://fakeimg.pl/800x600/"> </a> </div> </div>

     

  2. 自定義樣式 <div class="row"> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <img src="http://fakeimg.pl/800x600/" alt="假圖"> <div class="caption"> <h3>Thumbnail label</h3> <p> Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. </p> <p> <a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a> </p> </div> </div> </div> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <img src="http://fakeimg.pl/800x600/" alt="假圖"> <div class="caption"> <h3>Thumbnail label</h3> <p> Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. </p> <p> <a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a> </p> </div> </div> </div> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <img src="http://fakeimg.pl/800x600/" alt="假圖"> <div class="caption"> <h3>Thumbnail label</h3> <p> Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. </p> <p> <a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a> </p> </div> </div> </div> </div>

     

  3. 如果要響應，記得用容器 .container 、 .container-fluid

  4. 單獨圖片要響應，請用 「.img-responsive」

  5. 栅格参数

    通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。

      超小屏幕 手机 (<768px) 小屏幕 平板 (≥768px) 中等屏幕 桌面显示器 (≥992px) 大屏幕 大桌面显示器 (≥1200px) 栅格系统行为 .container 最大宽度 类前缀 列（column）数 最大列（column）宽 槽（gutter）宽 可嵌套 偏移（Offsets） 列排序
    总是水平排列 开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
    None （自动） 750px 970px 1170px
    .col-xs- .col-sm- .col-md- .col-lg-
    12
    自动 ~62px ~81px ~97px
    30px （每列左右均有 15px）
    是
    是
    是