DocHdl1OnPPMtmpTarget

Size: px

Start display at page:

Download "DocHdl1OnPPMtmpTarget"

派惶栾
5 years ago
Views:

1 C h a p t e r Bootstrap Bootstrap Bootstrap 15-3 CSS

2 15-1 Bootstrap Bootstrap Twitter Blueprint Twitter (framework) Bootstrap Bootstrap HTMLCSS JavaScript (responsive) (mobile first) CSS JavaScript Bootstrap Bootstrap Bootstrap JavaScript Bootstrap CSS bootstrap.min.css jquery JavaScript jquery-xxx.min.js (XXX ) Popper.jspopper.min.js Bootstrap JavaScript bootstrap.min.js CDN (Content Delivery Networks) Bootstrap <head> bootstrap. min.css <link rel="stylesheet" href=" Bootstrap </body> jquery min.jspopper.min.js bootstrap.min.js <script src=" <script src=" <script src=" 15-2

使用 Bootstrap 開發響應式網頁 15 15-1-2 Bootstrap 網頁的基本結構 Bootstrap 網頁的基本結構和 HTML5 網頁差不多下面是一個例子 01:<!

3 使用 Bootstrap 開發響應式網頁 Bootstrap 網頁的基本結構 Bootstrap 網頁的基本結構和 HTML5 網頁差不多下面是一個例子 01:<!doctype html> 02:<html> 03: <head> 04: <meta charset="utf-8"> 05: <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 06: <link rel="stylesheet" href=" 07: <title>bootstrap 網頁 </title> 08: </head> 09: <body> 10: <h1>hello, world!</h1> 11: 12: 13: 14: are.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src=" </body> 15:</html> <\Ch15\BS1.html> 05 將網頁寬度指定為行動裝置的螢幕寬度縮放比為 1:1 當有元素超過螢幕寬度時 shrink-to-fit=no 能夠讓網頁不被縮放以符合螢幕寬度 06 透過 CDN 參考 Bootstrap 核心 CSS 檔案 (bootstrap.min.css) 11 ~ 13 透過 CDN 參考 jquery 核心 JavaScript 檔案 (jquery min.js) Popper.js (popper.min.js) 和 Bootstrap 核心 JavaScript 檔案 (bootstrap.min.js) 15-3

TIP Bootstrap 11 ~ 13 CDN JavaScript jquery Popper.js Bootstrap JS CDN Bootstrap (https:// getbootstrap.

4 TIP Bootstrap 11 ~ 13 CDN JavaScript jquery Popper.js Bootstrap JS CDN Bootstrap ( getbootstrap.com/) Bootstrap bootstrap zip bootstrap <head> <link rel="stylesheet" href="bootstrap-4.1.1/dist/css/bootstrap.min.css" > Bootstrap 15-4

5 使用 Bootstrap 開發響應式網頁 Bootstrap 網格系統 Bootstrap 提供了一個網格系統 (gird system) 讓使用者藉此開發適應不同裝置的網頁達到響應式網頁設計的目的網格系統其實是一種平面設計方式利用固定的格子分割版面來設計布局將內容排列整齊 Bootstrap 網格系統是透過橫向的 row ( 列 ) 和直向的 column ( 行 ) 來設計網頁版面它將網頁寬度平均分割為 12 等分稱為 12 個 column 如下圖假設要使用兩個 <div> 元素製作寬度為 1:1 的雙欄版面那麼這兩個 <div> 元素是位於相同的 row 並分別占用 6 個 column 如下圖 row 6 個 column 6 個 column 同理假設要使用兩個 <div> 元素製作寬度為 2:1 的雙欄版面那麼這兩個 <div> 元素是位於相同的 row 並分別占用 8 和 4 個 column 如下圖 row 8 個 column 4 個 column 15-5

6 Bootstrap column column row row 12 column row row.container.container-fluid.row.col-*.col-sm-*.col-md-*.col-lg-*.col-xl-* Bootstrap 576px768px 992px 1200px (responsive breakpoint) ( ) 540px 720px 960px 1140px.col-.col-sm-.col-md-.col-lg-.col-xlcolumn 12 30px (column 15px) 1 ~ 12 column <576px ( ).col-1 ~.col px ( ).col-sm-1 ~.col-sm px ( ).col-md-1 ~.col-md px ( ).col-lg-1 ~.col-lg px ( ).col-xl-1 ~.col-xl

7 Bootstrap 1 5 <div> 1:3:2 <div> row 26 4 column row 2 column 6 column 4 column 01:<div class="container"> 02: <div class="row"> 03: <div class="col-2"> 04: <div class="col-6"> 05: <div class="col-4"> 06: 07: 0107 <div>.container 0206 <div>.row row <div>.col-2.col-6.col column NOTE Bootstrap.col-sm-* 540px.col-md-* 720px 15-7

8 跨裝置網頁設計容器類別 Bootstrap 提供了.container 和.container-fluid 兩個容器類別前者會根據不同的響應式切換點變更最大容器寬度而後者的容器寬度是瀏覽器的 100% 寬度下面是一個例子 01:<!doctype html> 02:<html> 03: <head> 04: <meta charset="utf-8"> 05: <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 06: <link rel="stylesheet" href=" 07: <title>bootstrap 網頁 </title> 08: <style> div[class ="col"] {background-color:#ebdef0; border:0.5px solid purple} 09: a 10: </style> 11: </head> 12: <body> 13: 14: 15: 16: b 17: 18: 19: 20: 21: 22: c 23: 24: 25: <script src=" 26: <script src=" 27: 28: <script src=" </body> 29:</html> <\Ch15\BS2.html> a 這些 CSS 樣式表用來設定的背景色彩與框線有助於看清楚的位置 b 第 1 個容器使用.container 類別 c 第 2 個容器使用.container-fluid 類別 15-8

9 Bootstrap ~ 18.container 1516 <div>.col-8.col-4 2:1 19 ~ 24.container-fluid 2122 <div>.col-8.col-4 2:1 a b c a 2:1.container b 2:1.container-fl uid c.col 2:1 15-9

10 跨裝置網頁設計欄位寬度我們可以使用 Bootstrap 提供的.col 類別設定欄位寬度下面是一個例子 01:<div class="container"> 02: <div class="row"> 03: 04: 05: 06: 07: <div class="row"> 08: 09: 10: 11: 12: <\Ch15\BS3.html> 02 ~ 06 定義第一列有三個其中第行的 <div> 元素均使用.col 類別表示三個平均分配容器寬度也就是分別占用 1/3 容器寬度 07 ~ 11 定義第二列有三個其中第行的 <div> 元素各自使用.col.col-6.col 類別表示第二個占用 6/12 (1/2) 容器寬度剩下的寬度由另外兩個平均分配也就是分別占用 1/4 容器寬度 15-10

使用 Bootstrap 開發響應式網頁 15 15-2-3 響應式切換點我們可以從 Bootstrap 提供的網格選項中選擇 576px 768px 992px 和 1200px 等響應式切換點下面是一個例子它將響應式切換點設定在 768px 當瀏覽器的寬度 768px 時 1 和 2 會使用.col-md-8.

11 使用 Bootstrap 開發響應式網頁響應式切換點我們可以從 Bootstrap 提供的網格選項中選擇 576px 768px 992px 和 1200px 等響應式切換點下面是一個例子它將響應式切換點設定在 768px 當瀏覽器的寬度 768px 時 1 和 2 會使用.col-md-8.col-md-4 類別分別占用 8 4 個 column 顯示 2:1 的雙欄版面如圖 (a) 相反的當瀏覽器的寬度 <768px 時 1 和 2 均會使用.col-12 類別分別占用 12 個 column 顯示 100% 寬度的流動式版面如圖 (b) <div class="container"> <div class="row"> <\Ch15\BS4.html> a b 15-11

跨裝置網頁設計下面是另一個例子它將響應式切換點設定在 768px 和 992px 當瀏覽器的寬度

col-md-6 類別分別占用 12 6 6 個 column 如圖 (b) 當瀏覽器的寬度

12 跨裝置網頁設計下面是另一個例子它將響應式切換點設定在 768px 和 992px 當瀏覽器的寬度 992px 時三個均會使用.col-lg-4 類別分別占用 4 個 column 如圖 (a) 當瀏覽器的寬度 <992px 且 768px 時三個會使用.col-md-12.colmd-6.col-md-6 類別分別占用個 column 如圖 (b) 當瀏覽器的寬度 <768px 時三個均會使用.col-12 類別分別占用 12 個 column 如圖 (c) <div class="container"> <div class="row"> <\Ch15\BS5.html> a b c 15-12

使用 Bootstrap 開發響應式網頁 15 15-2-4 水平對齊方式我們可以使用.

13 使用 Bootstrap 開發響應式網頁水平對齊方式我們可以使用.justify-content-* 類別設定 column 的水平對齊方式下面是一個例子 <div class="container"> <div class="col-4"> 1 <div class="col-4"> 2 <div class="col-4"> 3 <div class="col-4"> 4 <div class="col-4"> 5 <div class="col-4"> 6 <div class="col-4"> 7 <div class="col-4"> 8 <div class="col-4"> 9 <div class="col-4"> 10 <\Ch15\BS6.html> 15-13

$offset-* 類別來調整 column 的位移下面是一個例子 01:<div class="container"> 02: <div class="row"> 03: 04: 05: 06: <div class="row"> 07: 08: 09: 10: <\Ch15\BS7.$

14 跨裝置網頁設計 column 位移有時在設計網頁版面時可能會保留一些空白不見得 12 個 column 都會用到此時可以使用.offset-* 類別來調整 column 的位移下面是一個例子 01:<div class="container"> 02: <div class="row"> 03: 04: 05: 06: <div class="row"> 07: 08: 09: 10: <\Ch15\BS7.html> 04 指定 2 占用 4 個 column 且向右位移 4 個 column 07 指定 3 占用 3 個 column 且向右位移 3 個 column 08 指定 4 占用 3 個 column 且向右位移 3 個 column 15-14

15 使用 Bootstrap 開發響應式網頁 15-3 CSS 樣式除了網格系統之外 Bootstrap 也針對網頁的排版程式碼圖片表格等元素提供許多 CSS 樣式以下有簡單的介紹更多的說明與範例可以到 Bootsrtap 官方網站查看 (https://getbootstrap.

15 15 使用 Bootstrap 開發響應式網頁 15-3 CSS 樣式除了網格系統之外 Bootstrap 也針對網頁的排版程式碼圖片表格等元素提供許多 CSS 樣式以下有簡單的介紹更多的說明與範例可以到 Bootsrtap 官方網站查看 ( 排版標題 Bootstrap 支援 <h1> ~ </h6> 等 HTML 標題元素並提供.h1 ~.h6 類別用來設定標題 1 ~ 標題 6 預設的字型大小為 px 若要設定副標題可以加上 <small> 元素或.small 類別網頁主體 Bootstrap 網頁主體預設的文字大小為 14px 行高為段落底部邊界為 10px 若要強調某個段落可以加上.lead 類別例如 <\Ch15\BS8.html> > 靜夜思 <small> 作者李白 </small></p> > 床前明月光疑是地上霜 </p> > 舉頭望明月低頭思故鄉 </p> a b c d a 標題 b 副標題 c 一般的段落 d 加上.lead 類別的段落 15-15

跨裝置網頁設計行內文字元素 Bootstrap 支援 <mark> <del> <s> <u> <small> <em> <strong> 等 HTML 元素用來設定螢光標記刪除線刪除線底線小型字粗體斜體程式碼元素 Bootstrap 支援 <code> <kbd> <var> <samp> 等 HTML 元素用來排版程式碼若要使用 re> 元素排版程式碼可以加上.

16 跨裝置網頁設計行內文字元素 Bootstrap 支援 <mark> <del> <s> <u> <small> <em> <strong> 等 HTML 元素用來設定螢光標記刪除線刪除線底線小型字粗體斜體程式碼元素 Bootstrap 支援 <code> <kbd> <var> <samp> 等 HTML 元素用來排版程式碼若要使用 re> 元素排版程式碼可以加上.pre-scrollable 類別將最大高度設定為 350px 超過的話就顯示垂直捲軸文字對齊類別 Bootstrap 提供.text-left.text-center.text-right.text-justify.text-nowrap 等類別用來設定文字靠左對齊置中靠右對齊左右對齊不換行文字轉換類別 Bootstrap 提供.text-lowercase.text-uppercase.text-capitalize 等類別用來將英文單字轉換成全部小寫全部大寫首字大寫例如 <\Ch15\BS9.html> >Twinkle, twinkle, little star</p> >Twinkle, twinkle, little star, how i wonder what you are!up above the world so high, like a diamond in the sky.twinkle, twinkle, little star,how i wonder what you are!</p> a b a 文字置中全部大寫 b 文字左右對齊全部小寫 15-16

$使用 Bootstrap 開發響應式網頁 15 清單 Bootstrap 支援 <ul> <ol> <li> 等 HTML 元素用來設定項目符號與編號清單若要移除項目符號或編號可以在 <ul> 或 <ol> 元素加上.list-unstyled 類別若要將所有項目由左向右排成一列可以在 <ul> 或 <ol> 元素加上.list-inline 類別例如 <\Ch15\BS10.$

17 使用 Bootstrap 開發響應式網頁 15 清單 Bootstrap 支援 <ul> <ol> <li> 等 HTML 元素用來設定項目符號與編號清單若要移除項目符號或編號可以在 <ul> 或 <ol> 元素加上.list-unstyled 類別若要將所有項目由左向右排成一列可以在 <ul> 或 <ol> 元素加上.list-inline 類別例如 <\Ch15\BS10.html> <ul> <li> 蝶戀花 </li> <li> 永遇樂 </li> </ul> <ul > <li> 醉花陰 </li> <li> 浣溪紗 </li> </ul> <ul > <li> 雨霖鈴 </li> <li> 采桑子 </li> </ul> a b c a 一般的項目符號 b 移除項目符號 c 由左向右排成一列定義清單 Bootstrap 支援 <dl> <dt> <dd> 等 HTML 元素用來設定定義清單第二層資料預設會顯示在第一層資料的下一列若要將兩者顯示在同一列可以在 <dl> 元素加上.dl-horizontal 類別 15-17

$height:auto; 屬性進而隨著父元素的寬度自動縮放最大寬度為圖片的原尺寸例如 <\Ch15\ BSimg1.html> <img src="flower1.$

18 跨裝置網頁設計圖片響應式圖片 Bootstrap 提供.img-fluid 類別用來設定響應式圖片 (responsive image) 只要在 <img> 元素加上此類別圖片就會套用 max-width:100%; 和 height:auto; 屬性進而隨著父元素的寬度自動縮放最大寬度為圖片的原尺寸例如 <\Ch15\ BSimg1.html> <img src="flower1.jpg" alt=" 響應式圖片 "> b a a 當父元素的寬度放大時響應式圖片會隨著放大 b 當父元素的寬度縮小時響應式圖片會隨著縮小縮圖 Bootstrap 提供.img-thumbnail 類別用來設定縮圖例如 <\Ch15\BSimg2.html> <img src="flower2.jpg" alt=" 縮圖 ">

使用 Bootstrap 開發響應式網頁 15 圖片對齊方式 Bootstrap 提供.

$float-right 類別用來設定圖片靠左對齊和靠右對齊例如 <\Ch15\BSimg3.$ jpg" alt=" 圖片靠左對齊 "> <img src="flower3.

19 使用 Bootstrap 開發響應式網頁 15 圖片對齊方式 Bootstrap 提供.float-left 和.float-right 類別用來設定圖片靠左對齊和靠右對齊例如 <\Ch15\BSimg3.html> <img src="flower2.jpg" alt=" 圖片靠左對齊 "> <img src="flower3.jpg" alt=" 圖片靠右對齊 "> a b a 圖片靠左對齊 b 圖片靠右對齊若要令圖片置中對齊可以寫成如下 <\Ch15\BSimg4.html> <div > <img src="flower2.jpg" alt=" 圖片置中對齊 "> 15-19

20 Bootstrap <table><tr><td><th><thead><tbody><tfoot> <caption> HTML.table.table-striped.table-bordered.table-borderless.table-hover.table-sm <table>.table <table>.table.table-striped <table>.table.table-bordered <table>.table.table-borderless <table>.table.table-hover <table>.table.table-sm Bootstrap <table><tr><td><th>.table-danger.table-active.table-warning.table-primary.table-info.table-secondary.table-light.table-success.table-dark Bootstrap (responsive table) <table> <div> <div>.table-responsive 576px 768px992px1120px.table-responsive{-sm -md -lg -xl} 15-20

21 使用 Bootstrap 開發響應式網頁 15 範例一表格主體顯示交替的顏色這個例子的重點是在 <table> 元素加上.table 和.table-striped 類別讓表格主體的奇數列和偶數列顯示交替的顏色 <table > <thead> <tr> <th> 星座 </th> <th> 星座花 </th> </tr> </thead> <tbody> <tr> <td> 水瓶座 </td> <td> 瑪格麗特 ( 理性自由的情人 )</td> </tr> <tr> <td> 雙魚座 </td> <td> 鬱金香 ( 體貼浪漫的情人 )</td> </tr> <tr> <td> 牡羊座 </td> <td> 木堇 ( 熱情樂觀的情人 )</td> </tr> <tr> <td> 金牛座 </td> <td> 矮牽牛 ( 堅真不移的情人 )</td> </tr> </tbody> </table> <\Ch15\table1.html> 15-21

$<\Ch15\table2.$

22 跨裝置網頁設計範例二表格的顏色這個例子的重點是在 <tr> 元素加上不同的顏色類別讓表格的每一列顯示不同的顏色您也可以試著改成在 <table> 元素加上顏色類別這樣整個表格都會顯示指定的顏色 <table class="table"> <tr><td>default</td></tr> <tr <tr <tr <tr <tr <tr <tr <tr <tr </table> <\Ch15\table2.html> ><td>active</td></tr> ><td>primary</td></tr> ><td>secondary</td></tr> ><td>success</td></tr> ><td>danger</td></tr> ><td>warning</td></tr> ><td>info</td></tr> ><td>light</td></tr> ><td>dark</td></tr>

23 15 使用 Bootstrap 開發響應式網頁公用類別除了第節所介紹的文字對齊類別和文字轉換類別之外 Bootstrap 還提供很多其它的公用類別以下會簡單介紹幾個更多的說明與範例可以到 Bootsrtap 官方網站查看框線 Bootstrap 提供如下類別用來設定元素的框線類別說明類別說明.border 四周顯示框線.border-left 左方顯示框線.border-top 上方顯示框線.border-right 右方顯示框線.border-bottom 下方顯示框線框線色彩 Bootstrap 提供如下類別用來設定元素的框線色彩類別說明類別說明.border-primary 顯示為藍色.border-warning 顯示為黃色.border-secondary 顯示為灰色.border-info 顯示為青色.border-success 顯示為綠色.border-light 顯示為亮色.border-danger 顯示為紅色.border-dark 顯示為暗色框線圓角 Bootstrap 提供如下類別用來設定元素的框線圓角類別說明類別說明.rounded 四周顯示圓角.rounded-right.rounded-top 上方顯示圓角.rounded-circle 顯示為圓形.rounded-bottom 下方顯示圓角.rounded-0 不顯示圓角.rounded-left 左方顯示圓角右方顯示圓角 15-23

$src="flower2.jpg" alt=" 圓角圖片 "> <img src="flower2.jpg" alt=" 圓形圖片 "> <img src="flower2.jpg" alt=" 右方圓角圖片 "> <\Ch15\table2.$

24 跨裝置網頁設計下面是一個例子您可以從瀏覽結果對照不同的類別會顯示成何種框線色彩 <h3 > 蝶戀花 </h3> <h3 > 卜算子 </h3> <h3 > 臨江仙 </h3> <h3 > 永遇樂 </h3> <h3 > 西江月 </h3> <h3 > 天仙子 </h3> <h3 > 清平樂 </h3> <h3 > 浪淘沙 </h3> <img src="flower2.jpg" alt=" 圓角圖片 "> <img src="flower2.jpg" alt=" 圓形圖片 "> <img src="flower2.jpg" alt=" 右方圓角圖片 "> <\Ch15\table2.html> a b c d a 在標題 1 顯示不同顏色的框線 b 圓角圖片 c 圓形圖片 d 右方圓角圖片

$text-danger</p> >.text-warning</p> >.text-info</p> >.text-light</p> >.text-dark</p> >.text-body</p> >.text-muted</p> >.text-white</p> >.text-black-50</p> <\Ch15\color1.$

25 使用 Bootstrap 開發響應式網頁 15 文字色彩 Bootstrap 提供數個.text-* 類別用來設定元素的文字色彩下面是一個例子您可以從瀏覽結果對照不同的類別會顯示成何種文字色彩 >.text-primary</p> >.text-secondary</p> >.text-success</p> >.text-danger</p> >.text-warning</p> >.text-info</p> >.text-light</p> >.text-dark</p> >.text-body</p> >.text-muted</p> >.text-white</p> >.text-black-50</p> <\Ch15\color1.html> 15-25

$bg-light <div >.bg-dark <div >.bg-white <div >.bg-transparent <\Ch15\color2.html> 關閉按鈕 Bootstrap 提供.$

26 跨裝置網頁設計背景色彩 Bootstrap 提供數個.bg-* 類別用來設定元素的背景色彩下面是一個例子您可以從瀏覽結果對照不同的類別會顯示成何種背景色彩 <div >.bg-primary <div >.bg-secondary <div >.bg-success <div >.bg-danger <div >.bg-warning <div >.bg-info <div >.bg-light <div >.bg-dark <div >.bg-white <div >.bg-transparent <\Ch15\color2.html> 關閉按鈕 Bootstrap 提供.close 類別用來顯示關閉按鈕例如下面的敘述會在瀏覽結果顯示按鈕 <button type="button" class="close" aria-label="close"> <span aria-hidden=" true"> </span> </button> 15-26

27 Bootstrap 1 5 xs {property}{sides}-{size} smmdlgxl {property}{sides}-{breakpoint}-{size} property m (margin) p (padding) sides t (margin-top padding-top) b (margin-bottom padding-bottom) l (margin-left padding-left) r (margin-right padding-right) x y (blank) size $spacer * $spacer * $spacer 4 $spacer * $spacer * 3 auto 15-27

$mx-auto 類別達到將置中的效果 <\Ch15\spacing> <div style="width:165px;background-color:lightblue"> <h1> 暮光之城 </h1> 陰影$ Bootstrap 提供.shadow-

28 跨裝置網頁設計例如.m-0 類別表示將四周邊界設定為 0.mb-2 表示將下邊界設定為變數 $spacer * 0.5.py-5 表示將上下留白設定為變數 $spacer * 3 至於下面的敘述則是利用.mx-auto 類別達到將置中的效果 <\Ch15\spacing> <div style="width:165px;background-color:lightblue"> <h1> 暮光之城 </h1> 陰影 Bootstrap 提供.shadow-none.shadow-sm.shadow.shadow-lg 等類別用來顯示沒有陰影小陰影正常陰影或大陰影例如 <\Ch15\shadow> <div class="shadow-sm p-3 mb-5 bg-white rounded">small shadow ( 小陰影 ) <div class="shadow p-3 mb-5 bg-white rounded">regular shadow ( 正常陰影 ) 15-28

CH15.indd

CH15.indd Chapter 15 Bootstrap 15-1 (RWD) 15-2 Bootstrap 15-3 15-4 15-5 CSS 15-6 15-1 (RWD) (RWD Responsive Web Design) ( ) PC W3C ( ) ( ) ( ) ( ) ( ) ( ) 15-2 15 15-2 Bootstrap Bootstrap Twitter Blueprint Twitter