【RWD 響應式網頁設計】Bootstrap 學習筆記

tags: Web Design CSS

CDN 環境建置

    <!-- Latest compiled and minified CSS -->    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

補充：Bonita UI只使用了css的部分

Grid 網格

1. 單位：xs, sm, md, lg
2. 最多12個column

    <div class="col-sm-4">.col-sm-4</div>

Text

1. <small>：lighter, secondary header
2. <mark>
3. <kbd>：keyboard input
4. text, background：bg-, text-
5. color：success, danger, info, warning, active
   
6. 其他class：center, uppercase

Table

1. striped rows：.table-striped

2. .table-bordered, .table-hover

3. 欄位顏色：同Text

4. .table-responsive

5. 形狀：.img-rounded, .img-circle, .img-thumbnail

6. .img-responsive

Button

1. style：同Text
2. size：.btn-lg, .btn-md, .btn-sm, .btn-xs
3. .btn-block：entire width of the parent element
4. .active, .disabled

Button Group

1. .btn-group-vertical
2. 等分：.btn-group-justified
3. data-toggle，參考Dropdown

Badge 數字指標

    <a href="#">News <span class="badge">5</span></a>

Label 文字訊息

顏色：同Text

<h1>Example <span class="label label-default">New</span></h1>

Pagination

1. add the .pagination class to an <ul> element
   
2. .active, .disabled
3. size：.pagination-lg, .pagination-sm
4. 特殊style：.breadcrumb, .pager
   

Panel

1. .panel-heading, .panel-footer
2. .panel-group
3. 顏色：同Text

Dropdown

1. basic

<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">

2. divider：.divider
3. header：.dropdown-header

Collapse 折疊

1. basic (hidden to show)

<button data-toggle="collapse" data-target="#demo">Collapsible</button>

<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>

2. show to hidden：class="collapse in"
3. 應用：panel, list Group

其他常用tag

1. List Group 很像panel

2. Menu/Tab/Pill Tab屬於Navigation Bar的一部分

3. Navigation Bar

4. Form：All textual , <textarea>, and <select> elements with class .form-control have a width of 100%.
   a. 控制在同一水平：.form-control-static

5. Input Groups： icon or help text，例如：search bar

6. Carousel 輪播

7. Modal 互動視窗(block背景，彈出dialog)

8. Tooltip 提示框

9. Scrollspy 滾動監聽

10. Filter

Reference

1. Bootstrap 3 Tutorial：https://www.w3schools.com/bootstrap/default.asp