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