CH15.indd

Size: px

Start display at page:

Download "CH15.indd"

路符
5 years ago
Views:

1 Chapter 15 Bootstrap 15-1 (RWD) 15-2 Bootstrap CSS 15-6

2 15-1 (RWD) (RWD Responsive Web Design) ( ) PC W3C ( ) ( ) ( ) ( ) ( ) ( ) 15-2

3 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 ( Bootstrap bootstrap 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 getbootstrap.com/getting-started/ <head> <link rel="stylesheet" href=" <link rel="stylesheet" href=" <script src=" 15-3

4 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=" 09: <link rel="stylesheet" href=" 10: <script src=" 11: <script src=" 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 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.

5 Bootstrap Web Web 1. USB BS1.html Download 2. file:///sdcard/download/bs1.html developer/mobile-emulator Opera Mobile Emulator 18 jquery Mobile 15-5

6 Chrome [F12]

7 Bootstrap (gird system) Bootstrap row ( ) column ( ) column ( ) ( ) <div> 1:1 <div> row ( ) 6 column ( ) ( ) ( ) Bootstrap 12 column <div> <div> ( ) <div> 6 column <div> 3:2:1 <div> row column ( ) <div> <div> <div> ( ) <div> column 15-7

8 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

9 container.container-fluid 17 ~ 22.container col-md- 970px 2:1 23 ~ 28.container-fluid 2: : <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

a b a 2:1.container.container-fluid b 15-4-2 19 1.col-xs-12.

10 a b a 2:1.container.container-fluid b col-xs-12.col-md column 2/ column 100% 20 2.col-xs-6.col-md column 1/3 2 6 column 50% 15-10

11 : <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

12 col-xs-12.col-sm-12.col-md column 1/ column 100% 20 2.col-xs-12.col-sm-6.col-md column 1/3 2 6 column 1/ column 100% 21 3.col-xs-12.col-sm-6.col-md : <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

13 15 a b c a.col-md-4 b.col-sm-12.col-sm-6.colsm-6 c.col-xs

14 column 12 column.col-md-offset-* column column 4 column 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

$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.$

15 CSS Bootstrap CSS Bootsrtap ( Bootstrap <h1> ~ </h6> HTML.h1 ~.h6 1 ~ px <small>.small Bootstrap 14px px.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

$text-nowrap Bootstrap.text-lowercase.text-uppercase.text-capitalize <\Ch15\BS7.$

16 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

17 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

display:block; 屬性進而隨著父元素的寬度自動縮放最大寬度為圖片的原尺寸此外若要讓響應式圖片置中可以加上.

18 跨裝置網頁設計圖片響應式圖片 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 當父元素的寬度縮小時響應式圖片會隨著縮小 b

19 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.$

20 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.$

21 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

22 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

23 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

24 使用 Bootstrap 開發響應式網頁響應式網頁設計實例在本節中我們將透過下面的例子示範響應式網頁設計當瀏覽器的寬度為中螢幕 ( 992px) 時版面會完整顯示如下圖 ( 一 ) 當瀏覽器的寬度介於中螢幕和小螢幕 (768 ~ 992px) 時版面會按比例縮小如下圖 ( 二 ) 當瀏覽器的寬度為超小螢幕 (<768px) 時版面會變成單欄如下圖 ( 三 ) a c b d 圖(一) 圖(二) a 頁首 b 內文 c 側邊欄圖(三) d 頁尾 15-31

25 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=" ( 1/2) 15-32

26 15 09: <link rel="stylesheet" href=" 10: <script src=" 11: <script src=" 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 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

27 :<!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=" 09: <link rel="stylesheet" href=" 10: <script src=" 11: <script src=" 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

28 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: <br> 62: </p> 63: </footer> 64: </div> 65: </div> 66: </div> 67: </body> 68:</html> <\Ch15\travel.html>( 2/2) 15-35

29 ~ 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 ~ CSS footer {background:linear-gradient(to bottom, lightblue, white)} 15-36

Chapter V.S. PC

Chapter V.S. PC Chapter 14 14-1 V.S. PC 14-2 14-3 14-4 14-1 V.S. PC PC PC Yahoo! PC (https://tw.yahoo.com/) Yahoo! (https:// tw.mobi.yahoo.com/) Yahoo! a b a PC b PC PC Flash HTML5 CSS3 PC 14-2 14-3 PC PC Yahoo! PC https://tw.yahoo.com/