1.框架
1.1全局樣式
使用HTML5的doctype,scaffolding.less中定義全局樣式,從2開始使用normalize.css,並使用reset.less進行簡化
1.2默認柵格系統
940px寬12列柵格,使用row與span[NUM]的class來控制,使用offset[NUM]來控制偏移,於non-fluid可以直接嵌套,提供了四種響應式方案
1.3流動柵格系統
基於百分比,將row改爲row-fluid即可使用,內嵌注意寬度是按照父列的百分比進行計算的
1.4自定義柵格
於variables.css中改變變量,默認列12,寬60px,間隔20px,要保證響應性還得修改responsive.less中內容
1.5佈局
container爲940px居中,container-fluid則爲流體佈局
1.6 響應式設計
responsive.less中提供了一組media query:
智能手機《=480px;流式列,非固定寬度
垂直平板《=767px;流式列,非固定寬度
水平平板》=768px;42px 20px
默認》=980px; ? ? ?60px ?20px
大分辨率》=1200px;70px 30px
要求添加meta標籤,<meta name=”viewport” content=”width=device-width, initail-scale=1.0″>
有諸如.visible-phone等支持類
2.基礎CSS
2.1 排版
整個排版單位基於variables.less中@baseFontSize與@baseLineHeight兩個變量;
強調:string加粗,em傾斜,abbr縮寫【title屬性存放顯示信息,.initialism會減小縮略詞字體】,address【使用br換行】
引用:blockquote【cite屬性存放來源URL,.pull-left或right決定內容居左右】,small用於引言作者【會在內容前加入破折號】
列表:ul無序號有黑點,ul.unstyled無樣式,ol有數字序號,dl描述,dl.dl-horizontal水平描述
2.2代碼
code行級代碼,pre塊級【<>需要轉義,.pre-scrollable可以設置350px最大高度】,應用.prettyprint和.linenums來美化代碼【使用google prettify】
2.3表格
table thead【tr】 tbody【tr】tr【td或th】th【必須在thead之內】 caption;
.table行之間有水平線分割【2.0開始爲默認】 .table-borderd 【邊角爲圓角】.table-striped 奇偶分開【使用:nth-child ie7-8不支持】 .table-condensed 緊湊豎直方向padding減半 幾個可以組合使用
2.4表單
四種表單:.form-vertical【2.0後默認,控件標籤文字左對齊】.form-inline【左對齊,控件inline-block】 .form-search【文本框圓化】 .form-horizontal【左浮動,標籤與控件居於同一行且文字右對齊】
支持控件:文本輸入框,單選,複選,下拉,多選,上傳,文本域
控件組:.control-group .control-label以及.controls【默認label應該與控件在同一行?】
設計了各種控件狀態【如focus,disabled,去除webkit的outline】,包含.error .warning .success驗證樣式
擴張控件:.span*來指定輸入框大小,使用.input-mini或small或medium或big來指定input和select控件大小,2.0開始對.checkbox或.radio應用.inline即可實現行級,用label.checkbox包含input[type=checkbox]即可羅列,前置或後置文本保證.add-on與input在同行, .help-inline與.help-block設置幫助文本
2.5 按鈕
可以應用到a button及input標籤上,.btn .btn-primary .btn-info等樣式【ie9不兼容】,.btn-large small mini等尺寸,.disabled類或disabled屬性可以禁用
2.6 圖標
使用.icon-前綴設置,用<i>x顯示圖標,用.icon-white顯示反白圖標,圖標定義在sprites.less中
3.組件
3.1按鈕
3.1.1按鈕組
建議一個組裏只用一種元素<a>或<button>,使用.btn-group,組合.btn-toolbar包裝.btn-group即可合成工具條組件
3.1.2按鈕下拉菜單
下拉菜單也得嵌套在.btn-group中,使用dropdown-toggle與ul.dropdown-menu類,支持Bootstrap下拉插件,箭頭使用.caret,.dropdown-menu最近父標籤應用.dropup即可變爲上彈菜單【會改變.caret箭頭方向】
3.2導航
3.2.1默認項
基類.nav,對齊使用.pull-left或.pull-right【依賴float】,標籤頁ul.nav-tabs,膠囊鏈接ul.nav-pills
3.2.2疊放式導航
指豎直疊放ul.nav-stacked
3.2.3下拉項
綜合使用下拉按鈕【js下拉項插件】,參考3.1.2
3.2.4導航列表
<i>使用標籤,.pider空表項顯示爲水平間隔,.active選中項,.nav-header列表頭
3.2.5 標籤頁切換導航
用.tabbale的p嵌套.nav-tabs,存放容器爲.tab-content,內容頁使用.tab-pane,標籤置底用.tabs-below,標籤居左.tabs-left,居右.tabs-right
3.2.6 導航條
固定導航條div.navbar與.navbar-fixed-top【必須預留40px或更多padding】,導航項ul.nav,li.pider-vertical分隔條,項目名稱a.brand,表單.navbar-form,對form.navbar-search中輸入框使用.search-query得到搜索框,下拉菜單參考3.2.3,導航條文本使用<p>,響應式嵌套在.nav-collapse.collapse並對按鈕都應有.btn-navbar【需要js切換插件】
3.2.7麪包屑導航
ul.breadcrumb
3.2.8頁碼
div.pagination>ul,同樣使用.active與.disabled,頁碼對齊使用.pagination-centered或.pagination-right,前後頁ul.pager【居於左右端li.previous與li.next】
3.3行內標籤
span.label默認樣式,span.label.label-success成功等
3.4 標號
span.badge默認樣式,span.badge.badge-success等
3.5 排版
主角單元div.hero-unit中嵌套,標題h1,可以嵌入small,
3.6 縮略項
ul.thumbnails>li.span*>a.thumbnail>img鏈接圖像,div.thumbnail塊狀內容
3.7通知
基類div.alert【2.0開始替代.alert-message】,例子:div.alert>a.close+strong,加強.alert-block提供更大的padding而.alert-heading修飾標題,語義強化.alert-error或success或info
3.8進度條
基本div.progress>div.bar[style="width:60%"],條紋效果div.progress.progress-striped【動畫效果加上.active,使用css3漸變動畫,不支持ie】,語義加強.progress-info或success等
3.9雜項
消息牆div.well,關閉圖標a.close
4 jQuery插件
4.1對話框【bootstrap-modal.js】
$().modal({backdrop:true背景,keyboard:true支持ESC,show:true初始化顯示}) ,
觸發設置data-toggle=”modal”然後data-target=”#foo”或href=“#foo”,
對話框設置div.modal#foo即可:div.modal-header>a.close[data-dismiss="modal"]+div.modal-body+div.modal-footer【顯示動畫效果bootstrap-transition.js,對.modal應用.fade即可】,方法.modal(“toggle”)或.modal(“show”)或.modal(“hide”),事件show,shown,hide,hidden
4.2 下拉項【bootstrap-dropdown.js】
樣式應用導航欄與膠囊鏈接,方法$().dropdown(),設置data-toggle=”dropdown”【也可以使用data-target=”#foo”或href=“#foo”來關聯下拉項與鏈接】
4.3 滾動偵測【bootstrap-scrollspy.js】
$(‘#navbar’).scrollspy()
標記添加data-spy=”scroll”【導航鏈接必須有href=”#id”且對應有dom#id】,選項offset【默認爲10】
4.4 可切換的標籤頁【bootstrap-tab.js】
方法$(‘#myTab’).tab(‘show’) 標籤頁需要設置data-target=’#id’或href=’#id’
標記添加data-toggle=”tab”或data-toggle=”pill”,
事件show與shown 【event.target指向激活標籤,event.relatedTarget指向之前激活的標籤】
4.5 工具提示【bootstrap-tooltips.js】
$(‘#example’).tooltip(options) 中選項animation:true,placement:’top’,selector,title,trigger:’hover’,delay:{show:num, hide:100}
工具提示可以單獨設置data-屬性實現與js調用同樣的功能,指定一個selector即可【設置rel=”tooltip”】
方法:.tooltip(‘show’)?.tooltip(‘hide’)?.tooltip(‘toggle’)
4.6 彈出提示【bootstrap-popover.js】
$(‘#example’).popover(options)中選項animation:true,placement:’top’,selector,trigger:’hover’,title,content,delay
同樣可以單獨設置data-屬性,方法也相同
4.7 通知消息【bootstrap-alert.js】
$(“.alert”).alert()
用在通知,對關閉按鈕設置data-dismiss=”alert”即可定時關閉
方法$(“.alert”).alert(‘close’),事件close closed
4.8 按鈕【bootstrap-button.js】
應用在btn與btn-group,設置data-toggle=”button”與data-toggle=”button-checkbox”與data-toggle=”button-radio”樣式
方法$().button(‘toggle’) 按下
$().button(‘loading’) 載入文本data-loading-text屬性中
$().button(‘reset’)重置按鈕狀態
4.9 摺疊手風琴【bootstrap-collapse.js】
$().collapse({toggle:false}),事件show,shown,hide,hidden
設置data-toggle=“collapse”和data-target即可變爲摺疊式,data-target接收一個css選擇器以選取元素添加,元素上需要添加.collapse,默認打開用.in
4.10 輪播【bootstrap-carousel.js】
$().carousel({interval:5000, pause:’hover’})
標記用data-屬性提供前後翻頁,data-slide=”prev或next” 方法.carousel(‘cycle或pause或number或prev或next’) 事件slide,slid
4.11 輸入提醒【bootstrap-typeahead.js】
$().typeahead({source:[]數據源, items:8列表顯示個數, matcher:fn, sorter:fn, highlighter:fn}),
設置data-provide=”typeahead”
5. LESS
mixins.less中保存所有混合,編譯安裝npm intall -g less uglify-js lessc ./lib/bootstrap.less > bootstrap.css壓縮使用–compress,引用less.js 也可以重新編譯.less文件並進行本地存儲
轉自:http://www.csswang.com/resource/3236.html