育將電腦工作室 - 線上書籍

網站、部落格架設
========

1. 預設樣式 ```
  <pre class="brush:as3;">
  <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. 自定義樣式 ```
  <pre class="brush:as3;">
  <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. 如果要響應，記得用容器<span style="color:#FF0000;"> .container 、 .container-fluid</span>
4. 單獨圖片要響應，請用 「<span style="color:#FF0000;">.img-responsive</span>」
5. 栅格参数
  
  通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。
  
   <table> <thead> <tr> <th> </th> <th>超小屏幕 <small>手机 (<768px)</small></th> <th>小屏幕 <small>平板 (≥768px)</small></th> <th>中等屏幕 <small>桌面显示器 (≥992px)</small></th> <th>大屏幕 <small>大桌面显示器 (≥1200px)</small></th> </tr> </thead> <tbody> <tr> <th scope="row">栅格系统行为</th> <td>总是水平排列</td> <td colspan="3">开始是堆叠在一起的，当大于这些阈值时将变为水平排列C</td> </tr> <tr> <th scope="row">`.container` 最大宽度</th> <td>None （自动）</td> <td>750px</td> <td>970px</td> <td>1170px</td> </tr> <tr> <th scope="row">类前缀</th> <td>`.col-xs-`</td> <td>`.col-sm-`</td> <td>`.col-md-`</td> <td>`.col-lg-`</td> </tr> <tr> <th scope="row">列（column）数</th> <td colspan="4">12</td> </tr> <tr> <th scope="row">最大列（column）宽</th> <td>自动</td> <td>~62px</td> <td>~81px</td> <td>~97px</td> </tr> <tr> <th scope="row">槽（gutter）宽</th> <td colspan="4">30px （每列左右均有 15px）</td> </tr> <tr> <th scope="row">可嵌套</th> <td colspan="4">是</td> </tr> <tr> <th scope="row">偏移（Offsets）</th> <td colspan="4">是</td> </tr> <tr> <th scope="row">列排序</th> <td colspan="4">是</td> </tr> </tbody> </table>

Title1

Title2

Title3

Title1

Title2

Title3

MarkDown