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

網頁設計好好玩(下)
==========

一、複習

1. 如何使用bootstrap架構
2. 如何使用filezilla FTP 檔案傳輸軟體
3. 為了方便管理網站，會在本地端建立資料夾，來管理遠端的網站
4. 新增網頁時，為何要複製「空白網頁架構」
5. 練習修改導航的 連結與標題
 
二、縮圖列表

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. 假圖：<http://fakeimg.pl/> ```
  <pre class="brush:as3;">
  <img src="http://fakeimg.pl/300/">
  <img src="http://fakeimg.pl/250x100/">
  <img src="http://fakeimg.pl/250x100/ff0000/">
  <img src="http://fakeimg.pl/350x200/ff0000/000">
  <img src="http://fakeimg.pl/350x200/ff0000,128/000,255">
  <img src="http://fakeimg.pl/350x200/?text=Hello">
  <img src="http://fakeimg.pl/350x200/?text=World&font=lobster">
  ```
3. HTML img tag 圖片標籤語法
  
   ```
  <pre class="brush:as3;">
  <img src="插入的圖片網址" alt="圖片替代文字" title="圖片提示文字">
  ```
  
  alt - 圖片替代文字，當圖片無法呈現時，可以顯示 alt 的文字內容。  
   title - 圖片的提示文字，也就是當滑鼠移到圖片上方會顯示的文字。
4. 自定義樣式
  
   ```
  <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>
  ```
5. 如果要響應，記得用容器<span style="color:#FF0000;"> .container 、 .container-fluid</span>
6. 單獨圖片要響應，請用 「<span style="color:#FF0000;">.img-responsive</span>」
7. 栅格参数
  
  通过下表可以详细查看 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