bootstrap CSS#
一、容器
.container 包裹其他元素
div.row 必須放在.container里面
二、文本對(duì)齊方式:
text-center text-left text-right
三、塊標(biāo)簽對(duì)齊方式:
pull-left pull-right center-block
四、柵格系統(tǒng):
.col-xs-2 .col-sm-2 .col-md-2 .col-lg-2
偏離 .col-xs-offset-2
五、排版樣式 :
h1 .page-header
small
p .leader
著重 <strong> </strong>
斜體 <em> </em>
六、文字的顏色(帶有樣式滑動(dòng)效果)：
text-muted 柔和色
text-primary 淺藍(lán)色
text-success 深綠色
text-info 深藍(lán)色
text-warning 淺黃色
text-danger 紅色
七、縮略語(yǔ)：
<abbr title='鼠標(biāo)經(jīng)過(guò)顯示的文字'>縮寫(xiě)</abbr>
八、列表：
<ul> .list-unstyled 取消樣式(去除原有圓點(diǎn)和邊距)
<ul> .list-group 圓角列表
<li> .list-group-item 列表項(xiàng)目
或者使用<div>和<p>
<ul> .list-inline 行列表(取消了塊特性)
九、自定義列表：
<dl> <dt> <dd>
<dl> .dl-horizontal 水平列表(dt在左,列表項(xiàng)在右)
十、代碼：
<code> </code> 灰底紅字
<pre>```</pre> 原樣輸出(如代碼段)
十一、表格：
<table> .table 表格樣式 (后面的樣式必須基于此樣式)
.table-bordered 加邊框的表格
.table-striped 條紋表格(隔行換色效果)
.table-hover 鼠標(biāo)經(jīng)過(guò)效果
.table-condensed 緊縮表格(讓表格變得緊湊)
.table-responsive 響應(yīng)式表格(將div.table-responsive包裹table)
<tr> (<td>也適用) .active 灰色
.danger 紅色
.warning 淺黃色
.success 淺綠色
十二、表單：
<div>顏色 .form-group 用于包裹一組表單控件(如: 用戶(hù)名為一組 密碼為一組)
.has-success 綠色
.has-error 紅色
.has-warning 黃色
<input>
.form-control (用于text password textarea select)
.input-sm 小
.input-md 中等大小(默認(rèn))
.input-lg 大
<label> .control-label
<p> .help-block 灰色文字(用于提示)
多選框 用div.checkbox包裹label label包裹input[type=checkbox]
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" />記住密碼
</label>
<div>
</div>
或者div.form-group下直接用label.checkbox包裹input[type=checkbox]
單選框 div.checkbox改成div.radio 或者 label.checkbox改成label.radio
水平多選框 div.checkbox 改成 div.checkbox-inline 或者 label.checkbox改成label.checkbox-inline
水平單選框 div.radio改成div.radio-inline 或者label.radio改成label.radio-inline
表單占位 input標(biāo)簽中添加屬性 placeholder="要顯示的內(nèi)容"
內(nèi)聯(lián)表單 form.form-inline
水平表單 form.horizontal
再把div.form-group中的元素使用div柵格系統(tǒng)控制
靜態(tài)控件 p.form-control-static
表單禁用 input標(biāo)簽添加disabled屬性
十三、顯示和隱藏：
.show 顯示
.hidden 隱藏
.sr-only 隱藏
十四、按鈕：
用于button(兼容性好) input[type=button submit reset] a標(biāo)簽
.btn 基礎(chǔ)樣式
.btn-default 灰色
.btn-primary 藍(lán)色
.btn-success 綠色
.btn-info 淺藍(lán)色
.btn-warning 黃色
.btn-danger 紅色
.btn-link 類(lèi)似a標(biāo)簽樣式的按鈕
.btn-xs 最小
.btn-sm 小按鈕
.btn-md 中等大小(默認(rèn))
.btn-lg 大按鈕
按鈕變成塊元素 .btn-block
按鈕的活動(dòng)狀態(tài) .active
按鈕的禁用狀態(tài) .disabled
十五、img圖片：
.img-rounded 圓角矩形 (IE8不支持圓角)
.img-circle 橢圓
.img-thumbnail 縮略圖
十六、響應(yīng)式圖片：
.img-responsive 根據(jù)瀏覽器窗口大小調(diào)整
關(guān)閉按鈕 (位于父容器的右上角)
span.close
<span class="close">×</span>
十六、向下箭頭：
span.caret
<span class="caret"></span>
lyphicons圖標(biāo) 用于span
.glyphicon 基本樣式
.glyphicon-align-left
十七、下拉菜單：
下拉菜單項(xiàng)右對(duì)齊
ui.dropdown-menu pull-right
禁用菜單項(xiàng)
ul.dropdown-menu下的li加上.disabled樣式
十八、按鈕組：
用帶有.btn-group的div包裹所有按鈕
十九、按鈕工具欄：
用帶有.btn-toolbar的div包裹div.btn-group
二十、按鈕組尺寸
.btn-group-lg
.btn-group-md
.btn-group-sm
.btn-group-xs
按鈕組和下拉菜單嵌套
使用btn-group的話 用于下拉的按鈕必須加上dropdown-toggle
按鈕組垂直排列
.btn-group-vertical
兩端對(duì)齊的按鈕組 (只適用于a元素,不適用于button元素)
div.btn-group btn-group-justifed
向上彈出式菜單
div.btn-group加上.dropup樣式
輸入框組
用div.input-group包裹span.input-group-addon和input.form-control
可以有多個(gè)
二十一、輸入框組尺寸：
給div.input-group加上.input-group-lg md sm
二十二、將單選框或復(fù)選框放入輸入框組：
將<input type="checkbox" />讓span.input-group-addon中
將<input type="radio" />讓span.input-group-addon中
帶有下拉菜單的輸入框組
下拉菜單組這一塊不用加div.btn-group
分段按鈕
這一塊不用加div.btn-group
二十三：標(biāo)簽頁(yè)(選項(xiàng)頁(yè))：
用ul.nav nav-tabs包裹li li.active表示當(dāng)前選中的選項(xiàng)卡
二十四、膠囊式標(biāo)簽頁(yè)：
ul.nav nav-pills
li li.active表示當(dāng)前選中的選項(xiàng)卡
二十五、堆疊式選項(xiàng)卡(豎向 只能和膠囊式標(biāo)簽頁(yè)配合)：
ul.nav nav-pills加上 .nav-stacked
兩端對(duì)齊的導(dǎo)航(可用于tabs和pills)
ul.nav nav-pills加上 .nav-justified
禁用的鏈接(標(biāo)簽)
li.disableds
帶下拉菜單的導(dǎo)航
導(dǎo)航條
使導(dǎo)航條固定在頂部 在div.navbar加上.navbar-fixed-top (需要為body設(shè)置padding)
使導(dǎo)航條固定在底部 在div.navbar加上.navbar-fixed-bottom
導(dǎo)航條靜止在頂部(默認(rèn)) div.navbar加上.navbar-static-top
反色導(dǎo)航條
div.navbar navbar-inverse
導(dǎo)航條按鈕
button.btn btn-primary navbar-btn
導(dǎo)航條中的文本
p.navbar-text
導(dǎo)航條中的鏈接
a.navbar-link
面包屑導(dǎo)航 (ul和ol都適用)
ol.breadcrumb
li li加上.active表示當(dāng)前頁(yè)面
默認(rèn)分頁(yè)(上一頁(yè)123456下一頁(yè))
ul.pagination
<li><a>?</a><li>上一頁(yè)
<li><a>1</a><li>
<li><a>2</a><li>
<li><a>3</a><li>
<li><a>?</a><li>下一頁(yè)
激活狀態(tài)(當(dāng)前頁(yè)) li.active
禁用狀態(tài) li.disabled
翻頁(yè) ui.pager
<li class="previous"><a>上一頁(yè)</a></li>
<li class="next"><a>下一頁(yè)</a></li>
禁用狀態(tài) li.disabled
標(biāo)簽 span.label
顏色 label-default
label-primary
label-info
label-success
label-warning
label-danger
徽章 span.badge (建議放置于a標(biāo)簽內(nèi))
大屏幕 div.jumbotron
此時(shí)建議將div.container放置于div.jumbotron中
頁(yè)面標(biāo)題(灰色小線條)
h1.page-header
縮略圖 a.thumbnail中放置img標(biāo)簽
定制內(nèi)容 將div.caption放置于div.thumbnail里面
<div class="thumbnail">
<img />
<div class='caption'>
內(nèi)容
</div>
</div>
警告框 div.alert
警告框顏色 alert-success info warning danger
可關(guān)閉的警告框
將button.close (需要加上屬性 data-dismiss='alert')放到div.alert中
警告框中的鏈接
div.alert中放入a.alert-link
進(jìn)度條 div.progress
<div class='progress'>
<div class='progress-bar' style='width:80%'>
</div>
</div>
進(jìn)度條顏色 progress-bar-success info warning danger
條紋進(jìn)度條 div.progress加上progress-striped樣式
激活的進(jìn)度條 div.progress progress-striped active
進(jìn)度條堆疊 將多個(gè)div.progress-bar放入div.progress
列表組
ul.list-group
li.list-group-item {.active}
在此可以使用徽章(加上span.badge)
也可以使用標(biāo)簽(加上span.label label-info pull-right)
鏈接列表
div.list-group
a.list-group-item
也可以用上面列表組的方法實(shí)現(xiàn)(li中添加a標(biāo)簽)
面板
div.panel panel-default (其他顏色primary success info warning danger)
{div.panel-heading} 面板標(biāo)題
div.panel-body 面板內(nèi)容
{div.panel-footer} 面板底部
Well墻 div.well 灰色圓角背景
well尺寸 div.well well-sm
div.well well-lg
判斷IE瀏覽器版本加載不同樣式表##
因?yàn)镮E各版本的瀏覽器對(duì)我們制作的WEB標(biāo)準(zhǔn)的頁(yè)面解釋不一樣，具體就是對(duì)CSS的解釋不同，我們?yōu)榱思嫒葸@些，可運(yùn)用條件注釋來(lái)各自定義，最終達(dá)到兼容的目的。比如：
<!– 默認(rèn)先調(diào)用css.css樣式表 –>##
<link rel=”stylesheet” type=”text/css” href=”css.css” />
<!–[if IE 7]>
<!– 如果IE瀏覽器版是7,調(diào)用ie7.css樣式表 –>##
<link rel=”stylesheet” type=”text/css” href=”ie7.css” />
<![endif]–>
<!–[if lte IE 6]>
<!– 如果IE瀏覽器版本小于等于6,調(diào)用ie.css樣式表 –>##
<link rel=”stylesheet” type=”text/css” href=”ie.css” />
<![endif]–>
這其中就區(qū)分了IE7和IE6向下的瀏覽器對(duì)CSS的執(zhí)行，達(dá)到兼容的目的。同時(shí)，首行默認(rèn)的css.css還能與其他非IE瀏覽器實(shí)現(xiàn)兼容。
注意：默認(rèn)的CSS樣式應(yīng)該位于HTML文檔的首行，進(jìn)行條件注釋判斷的所有內(nèi)容必須位于該默認(rèn)樣式之后。
這也是所謂的css hack技術(shù)…
