可視化佈局以及經常使用UI

可視化佈局

http://www.bootcss.com/p/layoutit/

實用的快速佈局網站

Flat UI 一個基於bootstrap的主題，界面很是之漂亮
http://www.bootcss.com/p/flat-ui/

jQuery UI

http://www.jqueryui.org.cn/

 

EASY UI

http://www.jeasyui.net/

 

 bootstrap移動端適應

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

width 屬性控制設備的寬度。假設網站將被帶有不一樣屏幕分辨率的設備瀏覽，那麼將它設置爲 device-width 能夠確保它能正確呈如今不一樣設備上
initial-scale=1.0 確保網頁加載時，以 1:1 的比例呈現，不會有任何的縮放。
在移動設備瀏覽器上，添加 user-scalable=no 能夠禁用其縮放（zooming）功能
一般狀況下，maximum-scale=1.0 與 user-scalable=no 一塊兒使用。這樣禁用縮放功能後，用戶只能滾動屏幕，就能讓您的網站看上去更像原生應用的感受

 

bootstrap經常使用類總結

文本設置

強調相關類

.text-muted   ：提示，使用淺灰色（#999）
.text-primary ：主要，使用藍色（#428bca）
.text-success ：成功，使用淺綠色(#3c763d)
.text-info    ：通知信息，使用淺藍色（#31708f）
.text-warning ：警告，使用黃色（#8a6d3b）
.text-danger  ：危險，使用褐色（##a94442）

對齊相關類

.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}
.text-justify {
text-align: justify;
}

列表

無符號列表

<ul class = "list-unstyled"></ul>

無符號橫向列表

<ul class = "list-inline"></ul>

代碼段

單行內聯代碼

<code>單行內聯代碼</code>

多行代碼

<pre>多行代碼</pre>

用戶輸入代碼

<kbd>用戶輸入代碼</kbd>

滾動代碼

class = "<b>.pre-scrollable</b>"

表格設置

.table：基礎表格
.table-striped：斑馬線表格
.table-bordered：帶邊框的表格
.table-hover：鼠標懸停高亮的表格
.table-condensed：緊湊型表格
.table-responsive：響應式表格