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 (framework) Bootstrap Bootstrap HTML CSS JavaScript CSS JavaScript Bootstrap Bootstrap CSS bootstrap.min.css Bootstrap CSS bootstrap-theme.min.css jquery JavaScript jquery-xx.min.js (XX ) Bootstrap JavaScript bootstrap.min.js 14-2 jquery JavaScript Bootstrap Bootstrap Bootstrap (http://getbootstrap.com/) Bootstrap bootstrap-3.3.7-dist.zip <head> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/bootstrap-theme.min.css"> <script src="js/bootstrap.min.js"></script> CDN (Content Delivery Networks) Bootstrap http:// getbootstrap.com/getting-started/ <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 15-3
Bootstrap 01:<!doctype html> 02:<html> 03: <head> 04: <meta charset="utf-8"> 05: <meta http-equiv="x-ua-compatible" content="ie=edge"> 06: <meta name="viewport" content="width=device-width, initial-scale=1"> 07: <title>bootstrap </title> 08: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 09: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"> 10: <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 11: <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 12: </head> 13: <body> 14: <h1>hello, World!</h1> 15: </body> 16:</html> <\Ch15\BS1.html> 05 IE 06 1:1 08 CDN Bootstrap CSS bootstrap.min.css 09 CDN Bootstrap CSS bootstrap-theme.min.css 10 CDN jquery JavaScript jquery-3.2.1.min.js 11 CDN Bootstrap JavaScript bootstrap.min.js 15-4
15 15-3 Bootstrap Web http:// www.arts.idv.tw/~jean/bs1.html Web 1. USB BS1.html Download 2. file:///sdcard/download/bs1.html http://www.opera.com/zh-tw/ developer/mobile-emulator Opera Mobile Emulator 18 jquery Mobile 15-5
Chrome [F12] 1 2 3 1 2 3 15-6
15 15-4 Bootstrap (gird system) Bootstrap row ( ) column ( ) 12 12 column ( ) ( ) <div> 1:1 <div> row ( ) 6 column ( ) ( ) ( ) Bootstrap 12 column <div> <div> ( ) <div> 6 column <div> 3:2:1 <div> row 6 4 2 column ( ) <div> <div> <div> ( ) <div> 6 4 2 column 15-7
row ( ) column ( ) column ( ) row ( ).container.container-fluid Bootstrap.col-xs-.col-sm-.col-md-.col-lg- 750px 970px 1170px column 12 column ~62px ~81px ~97px 30px (column 15px) 1 ~ 12 column.col-xs-1 ~.colxs-12.col-sm-1 ~.col-sm-12.col-md-1 ~.col-md-12.col-lg-1 ~.col-lg-12 <div> 2:1 03.col-md-8 8 column 04.col-md-4 4 column 01:<div class="container"> 02: <div class="row"> 03: <div class="col-md-8"></div> 04: <div class="col-md-4"></div> c b a 05: </div> 06:</div> a 1 b 2 row ( ) c 3 column ( ) 15-8
15 15-4-1.container.container-fluid 17 ~ 22.container 19 20.col-md- 970px 2:1 23 ~ 28.container-fluid 2:1... 12: <style> 13: a div[class ="col"] {background-color:#ebdef0; border:0.5px solid purple} 14: </style> 15: </head> 16: <body> b 17: <div class="container"> 18: <div class="row"> 19: <div class="col-md-8"> 1</div> 20: <div class="col-md-4"> 2</div> 21: </div> 22: </div> c 23: <div class="container-fluid"> 24: <div class="row"> 25: <div class="col-md-8"> 3</div> 26: <div class="col-md-4"> 4</div> 27: </div> 28: </div> 29: </body> 30:</html> <\Ch15\BS2.html>( 01 ~ 11 <\Ch15\BS1.html> ) a CSS b 1 c 2 15-9
a b a 2:1.container.container-fluid b 15-4-2 19 1.col-xs-12.col-md-8 1 8 column 2/3 1 12 column 100% 20 2.col-xs-6.col-md-4 2 4 column 1/3 2 6 column 50% 15-10
15... 12: <style> 13: div[class ="col"] {background-color:#ebdef0; border:0.5px solid purple} 14: </style> 15: </head> 16: <body> 17: <div class="container"> 18: <div class="row"> 19: <div class="col-xs-12 col-md-8"> 1</div> 20: <div class="col-xs-6 col-md-4"> 2</div> 21: </div> 22: </div> 23: </body> 24:</html> <\Ch15\BS3.html>( 01 ~ 11 <\Ch15\BS1.html> ) a b a.col-md-8.col-md-4 2/3 1/3 b.col-xs-12.col-xs-6 100% 50% 15-11
15-4-3 19 1.col-xs-12.col-sm-12.col-md-4 1 4 column 1/3 1 12 column 100% 20 2.col-xs-12.col-sm-6.col-md-4 2 4 column 1/3 2 6 column 1/2 2 12 column 100% 21 3.col-xs-12.col-sm-6.col-md-4 20... 12: <style> 13: div[class ="col"] {background-color:#ebdef0; border:0.5px solid purple} 14: </style> 15: </head> 16: <body> 17: <div class="container"> 18: <div class="row"> 19: <div class="col-xs-12 col-sm-12 col-md-4"> 1</div> 20: <div class="col-xs-12 col-sm-6 col-md-4"> 2</div> 21: <div class="col-xs-12 col-sm-6 col-md-4"> 3</div> 22: </div> 23: </div> 24: </body> 25:</html> <\Ch15\BS4.html>( 01 ~ 11 <\Ch15\BS1.html> ) 15-12
15 a b c a.col-md-4 b.col-sm-12.col-sm-6.colsm-6 c.col-xs-12 15-13
15-4-4 column 12 column.col-md-offset-* column 20 2 4 column 4 column 23 3 3 column 3 column... 12: <style> 13: div[class ="col"] {background-color:#ebdef0; border:0.5px solid purple} 14: </style> 15: </head> 16: <body> 17: <div class="container"> 18: <div class="row"> 19: <div class="col-md-4"> 1</div> 20: <div class="col-md-4 col-md-offset-4"> 2</div> 21: </div> 22: <div class="row"> 23: <div class="col-md-3 col-md-offset-3"> 3</div> 24: <div class="col-md-3"> 4</div> 25: </div> 26: </div> 27: </body> 28:</html> <\Ch15\BS5.html>( 01 ~ 11 <\Ch15\BS1.html> ) 15-14
15 15-5 CSS Bootstrap CSS Bootsrtap (http://getbootstrap.com/) 15-5-1 Bootstrap <h1> ~ </h6> HTML.h1 ~.h6 1 ~ 6 36 30 24 18 14 12px <small>.small Bootstrap 14px 1.428 10px.lead <\Ch15\BS6.html> <p class="h1"> <small> </small></p> <p> </p> <p class="lead"> </p> a b c d a 1 b c c.lead 15-15
Bootstrap <mark> <del> <s> <u> <small> <em> <strong> HTML Bootstrap <code> <kbd> <var> <samp> HTML <pre>.pre-scrollable 350px Bootstrap.text-left.text-center.text-right.text-justify.text-nowrap Bootstrap.text-lowercase.text-uppercase.text-capitalize <\Ch15\BS7.html> <p class="text-center text-uppercase">twinkle, twinkle, little star</p> <p class="text-justify text-lowercase">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
15 Bootstrap <ul> <ol> <li> HTML <ul> <ol>.list-unstyled <ul> <ol>.list-inline <\Ch15\BS8.html> <ul> <li> </i> <li> </i> </ul> <ul class="list-unstyled"> <li> </i> <li> </i> </ul> <ul class="list-inline"> <li> </i> <li> </i> </ul> a b c a b c Bootstrap <dl> <dt> <dd> HTML <dl>.dl-horizontal 15-17
跨裝置網頁設計 15-5-2 圖片 響應式圖片 Bootstrap 提供.img-responsive 類別用來設定響應式圖片 (responsive image) 只 要在 <img> 元素加上此類別 圖片就會套用 max-width:100%; height:auto; 和 display:block; 屬性 進而隨著父元素的寬度自動縮放 最大寬度為圖片的原尺 寸 此外 若要讓響應式圖片置中 可以加上.center-block 類別 下面是一個例子 <body> <div class="container"> <img src="flower1.jpg" class="img-responsive" alt=" 響應式圖片 "> </div> </body> <\Ch15\BSimg1.html> a a 當父元素的寬度放大時 響應式圖片會隨著放大 b 當父元素的寬度縮小時 響應式圖片會隨著縮小 15-18 b
15 Bootstrap.img-rounded.img-circle.img-thumbnail <body> <div class="container"> <img src="flower2.jpg" class="img-rounded" alt=" "> <img src="flower2.jpg" class="img-circle" alt=" "> <img src="flower2.jpg" class="img-thumbnail" alt=" "> </div> </body> <\Ch15\BSimg2.html> 15-19
15-5-3 Bootstrap <a> <button> <input>.btn.btn-default <\Ch15\btn1.html> <a class="btn btn-default" href="#" role="button"> 1</a> <button class="btn btn-default" type="submit"> 2</button> <input class="btn btn-default" type="button" value=" 3"> <input class="btn btn-default" type="submit" value=" 4"> Bootstrap.btn-default.btn-primary.btn-success.btn-info.btn-warning.btn-danger.btn-link 15-20
15 Bootstrap.btn-xs.btn-sm.btn-lg.btn-block.active.disabled <\Ch15\btn2.html> <button type="button" class="btn btn-default"> </button> <button type="button" class="btn btn-warning"> </button> <button type="button" class="btn btn-danger"> </button> <button type="button" class="btn btn-link"> </button> <button type="button" class="btn btn-default btn-xs"> </button> <button type="button" class="btn btn-default btn-sm"> </button> <button type="button" class="btn btn-default btn-lg"> </button> <button type="button" class="btn btn-default active"> </button> <button type="button" class="btn btn-default disabled"> </button> 15-21
15-5-4 Bootstrap <table> <tr> <td> <th> <thead> <tbody> <tfoot> <caption> HTML.table.table-striped.table-bordered.table-hover.table-condensed <table>.table ( ) <table>.table.table-striped <table>.table.table-bordered <table>.table.table-hover <table>.table.table-condensed Bootstrap <tr> <td> <th>.active.success.info.warning.danger Bootstrap (responsive table) <table> <div> <div>.table-responsive 768px 768px 15-22
15 <table>.table.table-striped <table class="table table-striped"> <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\BS9.html> 15-23
使用 Bootstrap 開發響應式網頁 15 15-6 響應式網頁設計實例 在本節中 我們將透過下面的例子示範響應式網頁設計 當瀏覽器的寬度為中 螢幕 ( 992px) 時 版面會完整顯示 如下圖 ( 一 ) 當瀏覽器的寬度介於中螢 幕和小螢幕 (768 ~ 992px) 時 版面會按比例縮小 如下圖 ( 二 ) 當瀏覽器的 寬度為超小螢幕 (<768px) 時 版面會變成單欄 如下圖 ( 三 ) a c b d 圖(一) 圖(二) a 頁首 b 內文 c 側邊欄 圖(三) d 頁尾 15-31
15-6-1 Bootstrap a b a 2:1 b 01:<!doctype html> 02:<html> 03: <head> 04: <meta charset="utf-8"> 05: <meta http-equiv="x-ua-compatible" content="ie=edge"> 06: <meta name="viewport" content="width=device-width, initial-scale=1"> 07: <title>bootstrap </title> 08: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> ( 1/2) 15-32
15 09: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"> 10: <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 11: <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 12: </head> 13: <body> 14: <div class="container"> 15: <div class="row"> 16: <div class="col-xs-12 col-sm-12 col-md-12"> a 17: </div> 18: </div> 19: <div class="row"> 20: <div class="col-xs-12 col-sm-8 col-md-8"> b 21: </div> 22: <div class="col-xs-12 col-sm-4 col-md-4"> c 23: </div> 24: </div> 25: <div class="row"> 26: <div class="col-xs-12 col-sm-12 col-md-12"> d 27: </div> 28: </div> 29: </div> 30: </body> 31:</html> ( 2/2) a b c d 14 29.container row ( ) 15 ~ 18 1 row 12 column 19 ~ 24 2 row 8 4 column 12 column 25 ~ 28 3 row 12 column 15-33
15-6-2 01:<!doctype html> 02:<html> 03: <head> 04: <meta charset="utf-8"> 05: <meta http-equiv="x-ua-compatible" content="ie=edge"> 06: <meta name="viewport" content="width=device-width, initial-scale=1"> 07: <title>bootstrap </title> 08: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 09: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"> 10: <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 11: <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 12: <style> 13: #items {background-color:lightblue} 14: aside {border:solid 1px lightgray; border-radius:10px} 15: footer {background:linear-gradient(to bottom, lightblue, white)} 16: </style> 17: </head> 18: <body> 19: <div class="container"> 20: <div class="row"> 21: <div class="col-xs-12 col-sm-12 col-md-12"> 22: <header> 23: <img src="img1.jpg" class="img-responsive"> 24: <nav id="items"> 25: <ul class="list-inline"> 26: <li><a href="item1.html"> </a></li> 27: <li><a href="item2.html"> </a></li> 28: <li><a href="item3.html"> </a></li> 29: <li><a href="item4.html"> </a></li> 30: </ul> 31: </nav> 32: </header> 33: </div> 34: </div> <\Ch15\travel.html>( 1/2) 15-34
15 35: <div class="row"> 36: <div class="col-xs-12 col-sm-8 col-md-8"> 37: <article> 38: <p> 3000 </p> 39: <img src="img2.jpg" class="img-responsive"> 40: </article> 41: </div> 42: <div class="col-xs-12 col-sm-4 col-md-4"> 43: <aside> 44: <h3> </h3> 45: <nav id="travels"> 46: <ul> 47: <li><a href="travel1.html"> </a></li> 48: <li><a href="travel2.html"> </a></li> 49: <li><a href="travel3.html"> </a></li> 50: <li><a href="travel4.html"> </a></li> 51: <li><a href="travel4.html"> </a></li> 52: </ul> 53: </nav> 54: </aside> 55: </div> 56: </div> 57: <div class="row"> 58: <div class="col-xs-12 col-sm-12 col-md-12"> 59: <footer> 60: <p> <br> 61: 220 1 <br> 62: 0800-000-001</p> 63: </footer> 64: </div> 65: </div> 66: </div> 67: </body> 68:</html> <\Ch15\travel.html>( 2/2) 15-35
15-31 22 ~ 32 (img1.jpg) ( ) item1.html ~ item4.html 13 CSS #items {background-color:lightblue} 37 ~ 40 (img2. jpg) 43 ~ 54 3 ( ) ( ) travel1.html ~ travel5.html 14 CSS 1px aside {border:solid 1px lightgray; border-radius:10px} 59 ~ 63 15 CSS footer {background:linear-gradient(to bottom, lightblue, white)} 15-36