7. 第七週 縮圖列表

一、複習

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

二、縮圖列表

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. 假圖：http://fakeimg.pl/

   <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 圖片標籤語法
    

   <img src="插入的圖片網址" alt="圖片替代文字" title="圖片提示文字">

   alt - 圖片替代文字，當圖片無法呈現時，可以顯示 alt 的文字內容。
   title - 圖片的提示文字，也就是當滑鼠移到圖片上方會顯示的文字。

4. 自定義樣式
    

   
         <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. 如果要響應，記得用容器 .container 、 .container-fluid

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

7. 栅格参数

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

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