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>
相關文章
- bootstrap – formbootORM
- Bootstrap風格buttonboot
- BootStrap筆記18boot筆記
- Bootstrap筆記《一》boot筆記
- bootstrap學習筆記 Bootstrap 列表組boot筆記
- HTML標籤之form,input,button,tableHTMLORM
- Angular Form (響應式Form) 學習筆記AngularORM筆記
- bootstrap實踐筆記boot筆記
- Bootstrap學習筆記boot筆記
- Bootstrap框架:學習筆記boot框架筆記
- Bootstrap學習筆記 Wellboot筆記
- Bootstrap~學習筆記索引boot筆記索引
- bootstrap原始碼分析之form、navbarboot原始碼ORM
- button 和input 的區別及在表單form中的用法ORM
- Bootstrap學習筆記皮膚(Panels)boot筆記
- bootstrap學習筆記 外掛概述boot筆記
- Vue & Bootstrap 結合學習筆記(一)Vueboot筆記
- Vue & Bootstrap 結合學習筆記(二)Vueboot筆記
- bootstrap學習筆記 多媒體物件boot筆記物件
- asp.net頁面的相關標記:(<%$, <%=, <%, <%#, etc.)ASP.NET
- Bootstrap select2 ,table, 清空表單formbootORM
- 有關AsyncTask的一些隨筆筆記筆記
- vue一些筆記Vue筆記
- Bootstrap Table 學習筆記之列引數(一)boot筆記
- bootstrap 學習筆記 輪播(Carousel)外掛boot筆記
- hive3.0.0的一些筆記Hive筆記
- npm與yarn的一些筆記NPMYarn筆記
- C語言的一些小筆記C語言筆記
- c# event在form中手工編寫一個按鈕buttonC#ORM
- 前端隨筆 —— Form 的原生部件前端ORM
- oracle一些工作筆記Oracle筆記
- 一些老筆記整理筆記
- bootstrap 學習筆記之 文件結構不能變boot筆記
- bootstrap學習筆記一 登入水平表單boot筆記
- 學習Python的一些小筆記Python筆記
- button按鈕提交form表單的js方法不要使用關鍵字loginORMJS
- 一些概念2(私人筆記)筆記
- 整理一些筆記上傳筆記