使用 Bootstrap 3 – A short and Quick Guide

1. 使用 CDN 方式在 Web Application 中使用 Bootstrp 3 CSS framework

: The charset attribute specifies the character encoding for the HTML document.

: link to external style sheets.

加入 Java scripts

  rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">

  rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" integrity="sha384-aUGj/X2zp5rLCbBxumKTCw2Z50WgIr1vs/PFN4praOTvYXWlVyh2UtNUU0KAUhAX" crossorigin="anonymous">

2. Using container and container-fluid class

The Container sets the width and paddings of the contents.

You can have more than one container in the body. But, you cannot nest a container within another.

If you want your page to fill with the whole screen, you can use container-fluid class.

3. 切割版面

Source: http://www.bootstrapzero.com/bootstrap-template/grid

Bootstrap 將版面分割成 12 個 columns. 當螢幕大小變化時，這些 column 的位置便會調整。支援的螢幕寬度為:

· Extra Small (xs): < 768px
· Small (sm): >=768, <992 span="">
· Medium (md): >=992, <1200 span="">
· Large (lg): >= 1200

列用來做水平切割。一列中可以有多個內容區塊的, 內容區塊的長度最寬為 12 columns。以下的程式將一個列分成 2 個內容區塊，這些區塊的寬度分別為 3 及 9 columns。

每個 div 在不同的螢幕寬度下可有不同的寬度:

· col-xs-n: 指定在 Extra Small 寬度下區塊的寬度為 n columns
· col-sm-n: 指定在 Small 寬度下區塊的寬度為 n columns
· col-md-n: 指定在 Medium 寬度下區塊的寬度為 n columns
· col-lg-n: 指定在Large寬度下區塊的寬度為 n columns

上例中，若為Medium 寬度，則該列切中的區塊寬度分別為3 及 6 Columns。若為xs 寬度，則該列切中的區塊寬度分皆為12 columns，此時 div#content 會自動換到下一列。

4. Jumbotron 大型看板

直接套用 jumbtron class，h1 及 p 的內容會被大。

5. Menu 的製作

Menu 的製作使用 ul 標籤並套用 nav, nav-pills, nav-stacked 等 3 個樣式來完成。

更多訊息參考: http://getbootstrap.com/components/#nav-pills

6. Button 的樣式

可用樣式:

· btn btn-defualt
· btn btn-primary
· btn btn-success
· btn btn-warning
· btn btn-danger

7. Navigation Bar 的製作

把 navigation 放在 container 中。

和 navigation bar 相關的 class:

· navbar navbar-default navbar-fixed-top: 固定在上方的 navigation bar
· navbar navbar-default navbar-bottom: 固定在下方的navigation bar

和 navigation bar 中的清單項目有關的 class

· navbar-header: Navigation bar 的最左邊的內容。
· nav navbar-nav: 靠右對齊的導覽元素
· nav navbar-nav navbar-right: 靠右對齊的導覽元素

8. 表單中的控制項及其說明資訊

Standard rules for all three form layouts[1]:

· Always use form role="form" (helps improve accessibility for people using screen readers)
· Wrap labels and form controls in div class="form-group" (needed for optimum spacing) 把 label 和 control 用 div.form-group 包在一起。
· Add class .form-control to all textual input, textarea, and select elements。Form 中的控制項元素使用 form-control 類別

Example :

Source: http://www.w3schools.com/bootstrap/bootstrap_forms.asp

表單中的每個欄位可以在其前或後加入文字說明。在一個 .form-group 中使用另個 div 把欄位及其說明包起來，並套用 .input-group。說明的文字使用包起來並套用 .input-grou-addon 類別並指定該 span 的 id。在要說明的欄位中加入屬性 aria-describedby 其指為說明的文字的 span 的 ID 值。