根據http://www.runoob.com/bootstrap/bootstrap-tutorial.html的教程，記錄下學習的過程。
關鍵是熟悉或瞭解一些html標籤的樣式類，以便需要時，快速找到解決方案。

文中大部分圖片來自於runoob網站,放在一起比較方便找到適合的樣式

學習bootstrap的想法：
[color=red]1.非前端程式設計師而言，比較常用有bootstrap網格系統(用於排版)，bootstra表格（用於列表展示內容）,bootstrap表單。[/color]
bootstrap的東西太多，不可能每個都需要知道或瞭解，需要有所取捨，明白自己需要什麼不需要什麼。不要為了學習而學習，也不要憑興趣去學習，要看你專案或工作中需要什麼

[color=red]2.bootstrap往簡單的說，就是樣式表，只不過twitter寫好了很多樣式，直接拿來用就行[/color]
而bootstrap外掛就是已經寫好的js指令碼，綁定了一些特定樣式的元件或標籤。只要元件樣式符合要求，載入了外掛，就能觸發相應事件。[color=red]其中大部分繫結的標籤或屬性為data-api[/color]

[color=red]3.樣式類class的命名一般符合一定規則，[/color]
如 .col-* 應用於網格系統的列(column)
.row 字面意思就是定義一個行元素

.text-success 就是應用於文字的樣式

.list-inline 就是應用於html標籤<ul>的樣式類

.table .table-hover 適用於html標籤<table>

.form-inline .form-group .form-control 主要控制表單的,但不一定一定作用於form元素

.input-lg .input-sm 控制input大小

bootstrap有些樣式影響了排版,有些影響了顯示

[color=red]4.比較大的收穫[/color]
瞭解了一些比較專業的前端名詞,如：

麵包屑導航/標籤式導航/膠囊式導航

徽章

Responsive Design (響應式設計)

well牆

分裂式按鈕

談到模態框時，把[color=red]按鈕或連結[/color]當做模態框的[color=red]觸發器[/color]

[color=red]5.學習bootstrap的主要原因[/color]
一是在於它的知名度，讓我想不禁想去了解它，再一個是或許有一天當我需要做一些頁面的東西(ps:趕鴨子上架)，在沒有前端的情況下，bootstrap可以作為一個選擇，而我不想等到用時，再去學習它，那樣也許有點晚了


[size=x-large]Bootstrap CSS[/size]
[size=medium]1.Bootstrap 網格系統[/size]-div.container div.row div.col

[img]http://dl2.iteye.com/upload/attachment/0124/1378/544f719b-d41a-31fd-bb9f-12442862044a.jpg[/img]

grid system
主要用於排版，類似於html的table,tr,td等元素，這裡用css實現內容結構排版
[color=red]網格系統主要類有:.container,.row,.col-xs,.col-sm,.col-md,.col-lg,.col-md-offset-*,.col-md-push-*[/color]

基本結構：

<div class="container">
  <div class="row">
    <div class="col-*-*">
    </div>
  </div>
</div>
 

1.1 .col-md-offset-3 列左外邊距偏移3單元格

[img]http://dl2.iteye.com/upload/attachment/0124/1277/da8c672b-53bf-38db-8ceb-5e5514cfea52.png[/img]

注：沒有.col-xs-offset-*元素 但可通過空單元格實現偏移

1.2 .col-md-push-8 列位置向右移動8列
.col-md-pull-4 列位置向左移動4列

[img]http://dl2.iteye.com/upload/attachment/0124/1279/5ef43f89-4456-3a47-89f5-b352ac59ca81.png[/img]


[size=medium]2.Bootstrap 排版[/size]-h1-h6 p.text-left p.text-success ul.list-inline
[color=red]Bootstrap 中定義了所有的 HTML 標題（h1 到 h6）的樣式。只要引入bootstrap樣式,預設應用bootstrap的樣式[/color]

2.1 強調

html的強調標籤有
<small>（設定文字為父文字大小的 85%）、<strong>（設定文字為更粗的文字）、<em>（設定文字為斜體）

[color=red]bootstrap提供的強調樣式有(應用於元素<p>)：
.text-left,.text-center,.text-right,.text-muted,.text-primary,.text-success,.text-info,.text-warning,.text-danger[/color]

[img]http://dl2.iteye.com/upload/attachment/0124/1283/89f448a6-c6f5-3a6b-a4f0-0b8e3a45d0b4.png[/img]


2.2 縮寫
Bootstrap 定義 <abbr> 元素的樣式為顯示在文字底部的一條虛線邊框，當滑鼠懸停在上面時會顯示完整的文字（只要您為 <abbr> title 屬性添加了文字）

如：

<abbr title="World Wide Web">WWW</abbr><br>
<abbr title="Real Simple Syndication" class="initialism">RSS</abbr>
 

2.3 列表
[color=red]列表主要樣式類有：
.list-unstyled 應用於<ul> --清除樣式
.list-inline 應用於<ul> --行內
.dl-horizontal 應用於<dl> --將屬於與描述放在同一行[/color]


[size=medium]3.Bootstrap 程式碼[/size]-code pre
[color=red]bootstrap定義了html元素<code> <pre>的預設樣式[/color]

<code>以內聯形式顯示程式碼 --bootstrap定義了顏色

<pre>以多行形式顯示程式碼 --bootstrap定義了背景顏色

<pre class="pre-scrollable"> --多行程式碼帶有滾動條

開始和結束標籤使用了 unicode 變體： < 和 >


[size=medium]4.Bootstrap 表格[/size]-table.table-striped div.table-responsive tr.success td.warning

[img]http://dl2.iteye.com/upload/attachment/0124/1380/c99a06cd-eaf1-389e-8e4b-6e781447c8fb.jpg[/img]

[color=red]bootstrap為html元素定義了預設的元素樣式,也定義了一些樣式類class適用於table等表格元素[/color]

4.1
[color=red]適用於html元素table的樣式有：
.table,.table-striped,.table-bordered,.table-hover,.table-condensed[/color]
由這些元素名，就可看出其適用的html元素table

[color=red]適用於html元素<tr>, <th> 和 <td> 類
.active,.success,.info,.warning,.danger[/color]

4.2 響應式表格
對於小螢幕，可以水平滾動以顯示內容

<div class="table-responsive">
  <table class="table">
    <thead></thead>
    <tbody></tbody>
  </table>
</div>
 

[size=medium]5.Bootstrap 表單[/size]-form.form-horizontal div.form-group input.form-control div.has-warning

[img]http://dl2.iteye.com/upload/attachment/0124/1382/54edbf4a-4b47-3bc2-9a6d-71898c2940d7.jpg[/img]

[color=red]bootstrap影響form表單的方式主要是html標籤如<form> <input> <label>新增樣式。還有一個是將form內的html標籤和控制元件放在div裡面，便於控制[/color]

[color=red]基本的樣式類有.form-inline .form-horizontal .form-group .form-control .control-label [/color]

基本結構：--每個標籤或控制元件佔據一行

<form role="form">
  <div class="form-group">
    <label for="name">名稱</label>
    <input type="text" class="form-control" id="name" placeholder="請輸入名稱">    
  </div>
  <div class="form-group">
    <label for="inputfile">檔案輸入</label>
    <input type="file" id="inputfile">
    <p class="help-block">這裡是塊級幫助文字的例項。</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox">請打勾
    </label>
  </div>
  <button type="submit" class="btn btn-default">提交</button>
</form>

form role="role"
.form-inline .form-group .form-control

水平表單樣式：
標籤<label>水平,控制元件放在<div class="col-sm-*"> 裡

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="firstname" class="col-sm-2 control-label">名字</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="firstname" placeholder="請輸入名字">
    </div>
  </div>
</form>

複選框：
<div class="checkbox"><label><input/></label></div> 或者

<div><label class="checkbox-inline"></lable></div>


對於某些需要特定的輸入文字，樣式可以特殊處理(.has-warning)：
如：

  <div class="form-group has-warning">
    <label class="col-sm-2 control-label" for="inputWarning">輸入警告</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="inputWarning">
    </div>
  </div>

[img]http://dl2.iteye.com/upload/attachment/0124/1306/4f8cc238-ec07-3cd7-a8d0-59e974b00bdd.png[/img]

[color=red]控制元件大小樣式類：
.input-lg .input-sm[/color]


[size=medium]6.Bootstrap 按鈕[/size]-input.btn input.btn-info input.btn-warning input.btn-sm input.active
按鈕也是前端比較常用的一個元件
按鈕的特性主要要顏色、大小、狀態等，bootstrap還設定了一個標籤

<button class="btn btn-default" type="submit">按鈕</button>

[color=red]<a href="#" class="btn btn-default btn-lg" role="button">連結</a>[/color]

[img]http://dl2.iteye.com/upload/attachment/0124/1376/e3a1ef19-c9ee-3995-b6c5-cf8714380d84.jpg[/img]


[size=medium]7.Bootstrap 圖片[/size]-img.img-rounded img.img-circle img.img-thumbnail img.img-responsive
bootstrap對圖片的支援為以上一個類


[size=medium]8.Bootstrap 輔助類[/size]-div.center-block a.text-danger a.text-success a.bg-danger a.show a.hidden button.close

輔助樣式類 如文字樣式，背景樣式，或文字居中元件顯示隱藏等


[size=medium]9.Bootstrap 響應式實用工具[/size]-span.visible-xs-* span.hidden-sm
[color=red]可根據不同裝置顯示或隱藏某些元素[/color]


[size=x-large]Bootstrap 佈局元件[/size]
[size=medium]1.Bootstrap 字型圖示(Glyphicons)[/size]-span.glyphicon span.glyphicon-user

[img]http://dl2.iteye.com/upload/attachment/0124/1386/9ebee82e-aa91-3ccd-9643-3e74f5481e0e.jpg[/img]


[color=red]字型圖示主要應用到按鈕的背景[/color]
可根據需要製作特定的圖示，地址：
[url]http://www.runoob.com/try/demo_source/bootstrap-glyph-customization.htm[/url]
如：

<button type="button" class="btn btn-default btn-xs">
    <span class="glyphicon glyphicon-user"></span>
    User
</button>

[size=medium]2.Bootstrap 下拉選單（Dropdowns）[/size]-div.dropdown ul.dropdown-menu
下拉選單用的也比較多，如果想要有個看起來不錯的下拉選單,bootstrap是個不錯的選擇

[color=red]ul.dropdown-menu可單獨使用不必必須放在div.dropdown下面，使用者可靈活使用[/color]

[img]http://dl2.iteye.com/upload/attachment/0124/1369/225f2885-d764-3b44-ba71-f3d1b90041f5.jpg[/img]


[size=medium]3.Bootstrap 按鈕組[/size]-div.btn-group

[img]http://dl2.iteye.com/upload/attachment/0124/1388/648ddb97-c826-3485-8ea8-91464f17d976.jpg[/img]

[size=medium]4.Bootstrap 按鈕下拉選單[/size]-div.btn-group span.cacert

[size=medium]5.Bootstrap 輸入框組[/size]-div.input-group

[img]http://dl2.iteye.com/upload/attachment/0124/1390/a650513d-bdcf-3cb4-b828-6f5b0669e8ae.jpg[/img]


[size=medium]6.Bootstrap 導航元素[/size]-ul.nav ul.nav-tabs ul.nav-pills ul.nav-stacked

[img]http://dl2.iteye.com/upload/attachment/0124/1392/fb871228-4442-3c66-aebe-6d9d5cdfbd5b.jpg[/img]

[img]http://dl2.iteye.com/upload/attachment/0124/1394/b53dc0f9-4afa-35ec-abd9-572a03f3ca8e.jpg[/img]

[size=medium]7.Bootstrap 導航欄[/size]-nav.navbar nav.navbar-default nav.navbar-fixed-top

[img]http://dl2.iteye.com/upload/attachment/0124/1396/9f0a0f05-f130-3408-b78d-669faa2db884.jpg[/img]


[size=medium]8.Bootstrap 麵包屑導航（Breadcrumbs）[/size]-ol.breadcrumb
[color=red]麵包屑導航[/color]-表示當前頁面所在位置，每個部分可繼續導航

以前見過這個導航方式，不過不清楚具體叫什麼


[img]http://dl2.iteye.com/upload/attachment/0124/1398/595aa143-36fc-3a4d-98a1-315156815aac.jpg[/img]


[size=medium]9.Bootstrap 分頁[/size]-ul.pagination ul.pager

[color=red]翻頁也不一定必須放在ul.pager下面，也可以放在ul.pagination一起使用。這些class都是可以靈活使用的[/color]

[img]http://dl2.iteye.com/upload/attachment/0124/1400/45eaa454-a786-338d-940f-ec0469c18214.jpg[/img]

[size=medium]10.Bootstrap 標籤[/size]-label.label label-default

[img]http://dl2.iteye.com/upload/attachment/0124/1402/f0d419cc-60d9-311d-bb07-b134666d6789.jpg[/img]


[size=medium]11.Bootstrap 徽章（Badges）[/size]-span.badge

[color=red]徽章[/color]

[img]http://dl2.iteye.com/upload/attachment/0124/1404/6e8a8c9a-ff80-30fe-a4ad-8c3b132f8f1f.jpg[/img]


[size=medium]12.Bootstrap 超大螢幕（Jumbotron）[/size]-div.jumbotron

[img]http://dl2.iteye.com/upload/attachment/0124/1406/94511018-78ba-3cba-9b23-46704bbdf77f.jpg[/img]


[size=medium]13.Bootstrap 頁面標題（Page Header）[/size]-div.page-header

[size=medium]14.Bootstrap 縮圖[/size]-a.thumbnail

[color=red]不是很理解其作用[/color]

[size=medium]15.Bootstrap 警告（Alerts）[/size]-div.alert alert-success

[img]http://dl2.iteye.com/upload/attachment/0124/1408/ea465a7d-2d4d-3067-ade2-358984834ea7.jpg[/img]


[size=medium][color=red]網站上，如果需要對一些資訊進行標註。一般對文字或背景設定特殊樣式，bootstrap已經幫我們寫好了這些特殊樣式，直接拿來用就可以了[/color][/size]

<div class="alert alert-success alert-dismissable">
            <button type="button" class="close" data-dismiss="alert"
                    aria-hidden="true">
                ×
            </button>
            成功！很好地完成了提交。
        </div>

[size=medium]16.Bootstrap 進度條[/size]-div.progress div.progress-bar

[img]http://dl2.iteye.com/upload/attachment/0124/1410/4c74343e-a1d2-36f4-83ac-fc27fdb089e4.jpg[/img]

[color=red][size=medium]如果想讓自己的網站看起來很炫，設計一個介面美觀的進度條，是個不錯的特性。bootstrap已經寫好了樣式，拿來用就行。[/size][/color]


[size=medium]17.Bootstrap 多媒體物件（Media Object）[/size]-div.media

[color=red][size=medium]如果開發一些部落格類或論文類的網站，在文字中插入一些圖片，可能更具有觀賞性[/size][/color]


[size=medium]18.Bootstrap 列表組[/size]-ul.list-group li.list-group-item a.list-group-item

[img]http://dl2.iteye.com/upload/attachment/0124/1412/52af6d63-4a1e-3da9-819a-cad3158b3ceb.jpg[/img]

[color=red][size=medium]list-group-item不一定非要放在ul.list-group下面使用，可獨立使用如,
a.list-group-item可以有相同的樣式效果。只不過放在div.list-group或ul.list-group下面更容易控制位置[/size][/color]


[size=medium]19.Bootstrap 面板（Panels）[/size]

[img]http://dl2.iteye.com/upload/attachment/0124/1428/8e80731c-d34d-3ea7-bda9-f25419d66957.jpg[/img]

[color=red]如果網頁的開發中，有需要用到面板,bootstrap已經幫你寫好了樣式。但是對於我來說，好像用到的也比較少，所以對一些沒見過的特性也感到陌生。可能所處的行業有關係，或者一直做後臺，沒辦法接觸這些很炫的特性[/color]

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">
            帶有 title 的面板標題
        </h3>
    </div>
    <div class="panel-body">
        面板內容
    </div>
</div>

[size=medium]20.Bootstrap Well[/size]-div.well

[img]http://dl2.iteye.com/upload/attachment/0124/1430/a912ce37-d1e5-3ec4-96e1-595f3a6aca03.jpg[/img]

[size=medium][color=red]Well 是一種會引起內容凹陷顯示或插圖效果的容器 <div>[/color][/size]


[size=large]Bootstrap 外掛[/size]-上面的元件或樣式是靜態的，外掛更多的是互動
[size=medium]1.Bootstrap 外掛概覽[/size]-集成了12中jquery外掛

[size=medium]2.Bootstrap 過渡效果（Transition）外掛[/size]-Transition.js

[size=medium]3.Bootstrap 模態框（Modal）外掛[/size]-modal.js
data-api:data-toggle="model" data-target="#id" id是模態框div的id

[img]http://dl2.iteye.com/upload/attachment/0124/1555/3c57b408-812c-33e1-989f-3ffa8cd7c4c2.jpg[/img]

[size=medium]4.Bootstrap 下拉選單（Dropdown）外掛[/size]-dropdown.js

[size=medium]5.Bootstrap 滾動監聽（Scrollspy）外掛[/size]-scrollspy.js

[color=red]根據檢視內容的位置，動態標註所在選單或標籤[/color]

[img]http://dl2.iteye.com/upload/attachment/0124/1559/472fa52b-fa8e-3b73-9075-1d318ac50786.png[/img]

[size=medium]6.Bootstrap 標籤頁（Tab）外掛[/size]-tab.js

[color=red]動態顯示標籤下的內容div[/color]

[img]http://dl2.iteye.com/upload/attachment/0124/1561/2aad93cb-9b8d-395b-b86d-a1da03e40fd0.png[/img]

[size=medium]7.Bootstrap 提示工具（Tooltip）外掛[/size]-tooltip.js
[color=red]滑鼠移動，動態顯示提示資訊[/color]

[img]http://dl2.iteye.com/upload/attachment/0124/1563/8d041f21-aab6-32ea-829d-b0280b9876b6.jpg[/img]

[size=medium]8.Bootstrap 彈出框（Popover）外掛[/size]-popover.js
[color=red]滑鼠點選，彈出視窗資訊[/color]

[img]http://dl2.iteye.com/upload/attachment/0124/1567/1a893fe8-68d2-3b93-901f-a010169df9aa.png[/img]

[size=medium]9.Bootstrap 警告框（Alert）外掛[/size]-

[color=red]這種提示或警告方式似乎更別緻一點[/color]

[img]http://dl2.iteye.com/upload/attachment/0124/1569/d2680b5e-6db3-36b4-9eef-3e4989bc0d28.png[/img]

[size=medium]10.Bootstrap 按鈕（Button）外掛[/size]-button.js
[color=red]通過按鈕（Button）外掛，您可以新增進一些互動，比如控制按鈕狀態，或者為其他元件（如工具欄）建立按鈕組[/color]

[img]http://dl2.iteye.com/upload/attachment/0124/1571/944987cf-52b1-3055-9268-595692e59b77.png[/img]

[size=medium]11.Bootstrap 摺疊（Collapse）外掛[/size]-collapse.js

[size=medium][color=red]可以動態的讓某個頁面區域div顯示或影藏[/color][/size]

[img]http://dl2.iteye.com/upload/attachment/0124/1573/25e9b919-5bf8-3241-8469-fdbce34387e5.png[/img]

[size=medium]12.Bootstrap 輪播（Carousel）外掛[/size]-carousel.js

[color=red][size=medium]滑動顯示內容，一個漂亮的網站必不可少的特性[/size][/color]

[img]http://dl2.iteye.com/upload/attachment/0124/1575/9b65a1b8-7a76-39fe-b977-dd1463c4ad95.png[/img]


[size=medium]13.Bootstrap 附加導航（Affix）外掛[/size]-affix.js

[color=red][size=medium]將某個導航欄固定在頁面的某個位置，不隨頁面移動[/size][/color]

[img]http://dl2.iteye.com/upload/attachment/0124/1577/e182f054-b7b3-39a8-ae4f-82d4b8439b0a.png[/img]


[size=large]Bootstrap 其他[/size]
[size=medium]1.Bootstrap UI 編輯器[/size]-像dreamweaver一樣設計頁面
見：http://www.runoob.com/bootstrap/bootstrap-ui-editor.html

[size=medium]2.Bootstrap HTML編碼規範[/size]
[color=red]頁面新增如下元素或特性：[/color]
<!DOCTYPE html>

<html lang="zh-CN">

<meta http-equiv="X-UA-Compatible" content="IE=Edge"> -- IE 相容模式

<meta charset="UTF-8">


線上參考手冊
http://www.runoob.com/bootstrap/bootstrap-ui-editor.html
http://pikock.github.io/bootstrap-magic/app/#!/editor

線上制定圖示
http://www.runoob.com/try/demo_source/bootstrap-glyph-customization.htm

http://www.runoob.com/bootstrap/bootstrap-tutorial.html