線上書籍

一、複習

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) 栅格系统行为 .container 最大宽度 类前缀 列（column）数 最大列（column）宽 槽（gutter）宽 可嵌套 偏移（Offsets） 列排序

   总是水平排列	开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
   None （自动）	750px	970px	1170px
   .col-xs-	.col-sm-	.col-md-	.col-lg-
   12
   自动	~62px	~81px	~97px
   30px （每列左右均有 15px）
   是
   是
   是