Bootstrap的一些筆記——form，button，etc.

所有標籤都可以添加class="well"。用來增加預設樣式（白色圓角的那個）。

<pre>標籤不同於網格系統，是已經加入了可見樣式的標籤。可以結合google-code-prettify代碼加亮。

相關地址：http://google-code-prettify.googlecode.com/svn/trunk/README.html

<table>標籤有以下幾個標籤組成：<thead><tbody><tr><th><td>

其中<thead>中應包含<tr><th></th></tr>

其中<tbody>中應包含<tr><td></td></tr>

(因為th和td等等有各自的樣式表)

同時，<table>表有可選class：table|table-bordered|table-striped|table-condensed

詳細樣式：http://twitter.github.com/bootstrap/base-css.html#tables

<form>標籤有一些屬性：.form-vertical(預設，水平排列)；.form-inline（橫向）；.form-search（說是為搜尋最佳化，沒感覺有啥效果，水平）；.form-horizontal（這個才應該是水平水平，但是完全沒效果— —|||..）

太多的東西懶得寫了，用個例子概括吧：

<div class="row"><div class="span12"><form class="form-horizontal"><fieldset><legend>Form test</legend><div class="control-group"><label class="control-label">Field one:</label><div class="controls"><input class="span6" type="text" placeholder=".span6"></div></div><div class="control-group"><label class="control-label">Field two:</label><div class="input-prepend"><span class="add-on">www.</span><input class="span6" type="text" placeholder="   .com"></div></div><div class="control-group"><label class="control-label">Field three:</label><div class="input-append"><input class="span6" type="text" placeholder"www.   "><span class="add-on">.com</span></div><p class="help-block">Help text can be written here</p></div><div class="form-actions"><button type="submit" class="btn btn-primary">Submit Button</button><button type="reset" class="btn">Reset Button</button><p class="help-block">That's all the example</p></div></fieldset></form></div></div>

按鈕首先要有.btn屬性才能顯示出bootstrap的效果。

同時還可以附加屬性：.btn-primary；.btn-info；.btn-success；.btn-warning；.btn-danger；

不多說，貼例子：

<section id="showButton"><div class="row show-grid"><legend>Button show:</legend><div class="span2"><center><button type="button" class="btn">Button(Normal)</button><p class="help-block">.btn</p></center></div><div class="span2"><center><button type="button" class="btn btn-primary">Button(Primary)</button><p class="help-block">.btn .btn-primary</p></center></div><div class="span2"><center><button type="button" class="btn btn-info">Button(Info)</button><p class="help-block">.btn .btn-info</p></center></div><div class="span2"><center><button type="button" class="btn btn-success">Button(Success)</button><p class="help-block">.btn .btn-success</p></center></div><div class="span2"><center><button type="button" class="btn btn-warning">Button(Warning)</button><p class="help-block">.btn .btn-warning</p></center></div><div class="span2"><center><button type="button" class="btn btn-danger">Button(Danger)</button><p class="help-block">.btn .btn-danger</p></center></div></div></section>

同時按鈕還有尺寸屬性，分別是btn-large和btn-small。

調用按鈕不一定非要用<button/>在bootstrap中還可以通過<a class="btn"/>強制調用，其他屬性同button。

.disabled屬性可以讓按鈕處於實效狀態（灰選）。

bootstrap提供一堆icon，都是通過以icon-為首碼的屬性調用的，調用方式例如：

<i class="icon-search">

bootstrap提供的所有的icon如下：

       <i class="icon-glass"></i>        <i class="icon-music"></i>        <i class="icon-search"></i>        <i class="icon-envelope"></i>        <i class="icon-heart"></i>        <i class="icon-star"></i>        <i class="icon-star-empty"></i>        <i class="icon-user"></i>        <i class="icon-film"></i>        <i class="icon-th-large"></i>        <i class="icon-th"></i>        <i class="icon-th-list"></i>        <i class="icon-ok"></i>        <i class="icon-remove"></i>        <i class="icon-zoom-in"></i>        <i class="icon-zoom-out"></i>        <i class="icon-off"></i>        <i class="icon-signal"></i>        <i class="icon-cog"></i>        <i class="icon-trash"></i>        <i class="icon-home"></i>        <i class="icon-file"></i>        <i class="icon-time"></i>        <i class="icon-road"></i>        <i class="icon-download-alt"></i>        <i class="icon-download"></i>        <i class="icon-upload"></i>        <i class="icon-inbox"></i>        <i class="icon-play-circle"></i>        <i class="icon-repeat"></i>        <i class="icon-refresh"></i>        <i class="icon-list-alt"></i>        <i class="icon-lock"></i>        <i class="icon-flag"></i>        <i class="icon-headphones"></i>        <i class="icon-volume-off"></i>        <i class="icon-volume-down"></i>        <i class="icon-volume-up"></i>        <i class="icon-qrcode"></i>        <i class="icon-barcode"></i>        <i class="icon-tag"></i>        <i class="icon-tags"></i>        <i class="icon-book"></i>        <i class="icon-bookmark"></i>        <i class="icon-print"></i>        <i class="icon-camera"></i>        <i class="icon-font"></i>        <i class="icon-bold"></i>        <i class="icon-italic"></i>        <i class="icon-text-height"></i>        <i class="icon-text-width"></i>        <i class="icon-align-left"></i>        <i class="icon-align-center"></i>        <i class="icon-align-right"></i>        <i class="icon-align-justify"></i>        <i class="icon-list"></i>        <i class="icon-indent-left"></i>        <i class="icon-indent-right"></i>        <i class="icon-facetime-video"></i>        <i class="icon-picture"></i>        <i class="icon-pencil"></i>        <i class="icon-map-marker"></i>        <i class="icon-adjust"></i>        <i class="icon-tint"></i>        <i class="icon-edit"></i>        <i class="icon-share"></i>        <i class="icon-check"></i>        <i class="icon-move"></i>        <i class="icon-step-backward"></i>        <i class="icon-fast-backward"></i>        <i class="icon-backward"></i>        <i class="icon-play"></i>        <i class="icon-pause"></i>        <i class="icon-stop"></i>        <i class="icon-forward"></i>        <i class="icon-fast-forward"></i>        <i class="icon-step-forward"></i>        <i class="icon-eject"></i>        <i class="icon-chevron-left"></i>        <i class="icon-chevron-right"></i>        <i class="icon-plus-sign"></i>        <i class="icon-minus-sign"></i>        <i class="icon-remove-sign"></i>        <i class="icon-ok-sign"></i>        <i class="icon-question-sign"></i>        <i class="icon-info-sign"></i>        <i class="icon-screenshot"></i>        <i class="icon-remove-circle"></i>        <i class="icon-ok-circle"></i>        <i class="icon-ban-circle"></i>        <i class="icon-arrow-left"></i>        <i class="icon-arrow-right"></i>        <i class="icon-arrow-up"></i>        <i class="icon-arrow-down"></i>        <i class="icon-share-alt"></i>        <i class="icon-resize-full"></i>        <i class="icon-resize-small"></i>        <i class="icon-plus"></i>        <i class="icon-minus"></i>        <i class="icon-asterisk"></i>        <i class="icon-exclamation-sign"></i>        <i class="icon-gift"></i>        <i class="icon-leaf"></i>        <i class="icon-fire"></i>        <i class="icon-eye-open"></i>        <i class="icon-eye-close"></i>        <i class="icon-warning-sign"></i>        <i class="icon-plane"></i>        <i class="icon-calendar"></i>        <i class="icon-random"></i>        <i class="icon-comment"></i>        <i class="icon-magnet"></i>        <i class="icon-chevron-up"></i>        <i class="icon-chevron-down"></i>        <i class="icon-retweet"></i>        <i class="icon-shopping-cart"></i>        <i class="icon-folder-close"></i>        <i class="icon-folder-open"></i>        <i class="icon-resize-vertical"></i>        <i class="icon-resize-horizontal"></i>

我們甚至能夠利用Button和Icon製作出有動態效果的Button-Group。例如

<section><div class="row"><div class="span12"><div class="btn-group"><a class="btn btn-primary" href="#"><i class="icon white user"></i> User</a>          <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>          <ul class="dropdown-menu">          <li><a href="#"><i class="icon-pencil"></i> Edit</a></li>          <li><a href="#"><i class="icon-trash"></i> Delete</a></li>          <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>          <li class="divider"></li>          <li><a href="#"><i class="i"></i> Make admin</a></li>          </ul>          </div></div></div></section>

或者是一個很炫的nav list

<section><div class="row"><div class="span12"><div class="well" style="padding: 8px 0;"><ul class="nav nav-list"><li class="active"><a href="#"><i class="icon-home icon-white"></i> Home</a></li><li><a href="#"><i class="icon-book"></i> Library</a></li><li><a href="#"><i class="icon-pencil"></i> Applications</a></li><li><a href="#"><i class="i"></i> Misc</a></li></ul></div></div></div></section>