深入理解bootstrap框架之第二章整體架構(gòu)
一. 整體架構(gòu)
1. CSS-12柵格系統(tǒng)
把網(wǎng)頁(yè)寬度均分為12等分（保留15位精度）——這是bootstrap的核心功能。
2.基礎(chǔ)布局組件
包括排版、按鈕、表格、布局、表單等等。
3.jQuery
bootstrap插件的基礎(chǔ)
4.響應(yīng)式設(shè)計(jì)
兼容多個(gè)終端。這是bootstrap的終極理念。
5.css插件
提供豐富的樣式。
6.js插件
二. 柵格系統(tǒng)
1.基本實(shí)現(xiàn)過程
定義容器的大小——跳轉(zhuǎn)邊距——媒詢
有以下要求：
（1）一行（row）數(shù)據(jù)必須包含在.container中。
.container默認(rèn)居中。寬度分為4種，超小屏（100%），小屏（750px），中屏（970px），大屏（1170px）。row的邊距（左右margin，下同）是-15px。
（2）有了row，才能搭建列（col）。所有組件必須放在col內(nèi)，只有col才能作為row的直接子元素。
.col的左右內(nèi)邊距（padding-left,right）為15px。也就是說，最小的col有30px。
（3）在以上基礎(chǔ)上快速搭建布局
（4）col之間是木有邊距的，應(yīng)當(dāng)使用padding來產(chǎn)生col的視覺距離。這樣做會(huì)導(dǎo)致一個(gè)row容不下12個(gè)col，這時(shí)應(yīng)當(dāng)用負(fù)的margin來抵消padding的影響。
（5）柵格系統(tǒng)是通過指定1-12的值來設(shè)定范圍的。對(duì)于col的規(guī)格，開發(fā)者指定了4個(gè)不同的屏幕
如圖，在<body class="container">內(nèi)包含若干個(gè)<div class="col-md-“1-12數(shù)字”">col-md-“1-12數(shù)字”></div>效果是
小結(jié)： col組合其實(shí)就用了兩個(gè)屬性：float:left和width%。
2. 實(shí)現(xiàn)方案
（1）偏移（.col-尺寸大小-offset-*）
把整個(gè)col向右邊偏移，在源碼實(shí)現(xiàn)上，.col-尺寸大小-offset-x 就是margin-left:8.33333333333...*x；
情景一：頁(yè)面主體只占據(jù)container的66%，而且居中。
解決方案：col-md-offset-2——向右偏移了2個(gè)col。
<div class="col-md-8 col-md-offset-2">col-md8</div>
情景二：寬度足夠的情況下，我不想所有的col緊緊挨在一起。兩個(gè)要有1個(gè)col的距離。
<div class="col-md-8">col-md8</div> <div class="col-md-3 col-md-offset-1">col-md3</div>
（2）嵌套
柵格系統(tǒng)的col是可以針對(duì)父級(jí)的row進(jìn)一步再進(jìn)行百分比的劃分，比如說：
<div class="row"> <div class="col-sm-12">我是整行<br> <div class="col-sm-6">我是一半 <div class="row"> <div class="col-sm-6">我是6/12*6/12=1/4</div> </div> </div> <div class="col-sm-6"></div> </div> </div>
（3）排序
強(qiáng)行把當(dāng)前列向左或者向右推拉
只有兩個(gè)語句：col-尺寸大小-push-*（）和col-尺寸大小-pull-*（）
<div class="row"> <div class="col-sm-3 col-sm-push-6" style="background: #abc">col3</div> </div>
col3被強(qiáng)行推了6格。同理<div class="col-sm-3 col-sm-pull-1" style="background: #abc">col3</div>是向左拉了一格。
效果相當(dāng)于絕對(duì)定位。在源碼實(shí)現(xiàn)上，也是做定位：
.col-md-pull-8 { right: 66.66666666666666%;}
3.響應(yīng)式柵格若干問題
看起來12列柵格布局實(shí)現(xiàn)得很死板，但是組合屏幕尺寸，方案就非常多了
（1）跨設(shè)備組合
比如我要為自己的網(wǎng)頁(yè)做一適配小屏和中屏的版本，可以把類疊加到class上。
<div class="col-sm-6 col-md-3" style="background: #abc">col3</div>
在中屏表現(xiàn)是1/4。
到了小屏，表現(xiàn)為1/2
如果我定義一個(gè)
<div class="col-xs-3" style="background: #abc">col3</div>
到了大屏，依然占25%。
結(jié)論：屏幕尺寸向大兼容。向小肯定不兼容！
（2）清除浮動(dòng)
情景：在小屏幕上一行顯示4個(gè)col3，在超小屏幕上一行顯示2個(gè)col6，代碼如何實(shí)現(xiàn)？
代碼應(yīng)該是這樣的
<div class="col-xs-6 col-sm-3" style="background: #abc">col</div> <div class="col-xs-6 col-sm-3" style="background: #abc">col</div> <div class="col-xs-6 col-sm-3" style="background: #abc">col</div> <div class="col-xs-6 col-sm-3" style="background: #abc">col</div>
看起來也沒問題。
如果把第一個(gè)div改為
<div class="col-xs-6 col-sm-3" style="background: #abc">col<br>我胖了</div>
效果不佳。
這時(shí)應(yīng)該加一個(gè)清除浮動(dòng)的div到第2/3個(gè)div之間第四個(gè)就不會(huì)飄上去了
<div class="col-xs-6 col-sm-3" style="background: #abc">col<br>我胖了</div> <div class="col-xs-6 col-sm-3" style="background: #abc">col</div> <div class="clearfix visible-xs"></div> <div class="col-xs-6 col-sm-3" style="background: #abc">col</div> <div class="col-xs-6 col-sm-3" style="background: #abc">col</div>
所謂class="clearfix visible-xs"，前者表示清除浮動(dòng)，后者表示在超小屏生效
（3）“強(qiáng)大”的偏移和排序——組合應(yīng)用的demo
<div class="row"> <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div> <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0 </div> </div> <div class="row"> <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div> <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lgoffset-0">col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lgoffset-0</div> </div>
布置類似這樣的代碼，可以很快實(shí)現(xiàn)不同設(shè)備寬度下的樣式。
4.重復(fù)代碼
作者認(rèn)為bootstrap的代碼重復(fù)率相當(dāng)之高。
三.CSS組件架構(gòu)的設(shè)計(jì)思想
作者把 bootstrap的CSS組件內(nèi)容總結(jié)為8類
（1）基礎(chǔ)樣式
包括字體、內(nèi)外邊距，display方式，邊框等。
（2）顏色
包括5中最基本的顏色
如果在Bootstrap官方網(wǎng)站看過btn按鈕或者alert警告框的樣例，你會(huì)發(fā)現(xiàn)，Bootstrap默認(rèn)為很多組件都提供了5種顏色的樣式，這5種顏色分別是：primary（重點(diǎn)藍(lán)）、success（成功綠）、info（信息藍(lán)）、warning（警告橙）、danger（危險(xiǎn)紅）。定義規(guī)則是：組件名稱-顏色類型，如btn-primary、alert-info。以按鈕（btn為例）
也就是說根據(jù)組件特性來定義顏色信息1.
（3）尺寸
一般組件都有對(duì)應(yīng)屏幕的4種尺寸，表示方式為：組件-尺寸，比如btn-lg、well-sm等等
實(shí)現(xiàn)方式為padding、圓角，行距及字體大小
（4）狀態(tài)
涉及到陰影、透明度、虛框等
（5）特殊元素
（6）并列元素
（7）嵌套元素
（8）動(dòng)畫樣式
主要用在進(jìn)度條，在progress樣式基礎(chǔ)上再加一個(gè)active
<div class="progress progress-striped active"> <div class="progress-bar" style="width: 45%"> <span class="sr-only">45% Complete</span> </div> </div>
定義動(dòng)畫主要是指定animattion和動(dòng)畫時(shí)間。
.progress.active .progress-bar {
-webkit-animation: progress-bar-stripes 2s linear infinite;/* 2秒過度40像素，無限循環(huán) */
animation: progress-bar-stripes 2s linear infinite;/* 其他瀏覽器 */
}
最后，需要說明，順序很重要。否則樣式大亂套。
四.插件架構(gòu)
基本規(guī)則
（1）布局規(guī)則——基于元素自定義屬性
（2）js實(shí)現(xiàn)步驟——向jQuery看齊
（3）可以是js聲明，也可以是js調(diào)用
1.布局規(guī)則：
js會(huì)檢測(cè)到html中相應(yīng)的屬性，自動(dòng)綁定事件，而無需額外的js代碼。
比如說
<div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 我的書籍 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">JavaScript編程精解</a></li> <li><a href="#">JavaScript設(shè)計(jì)模式</a></li> <li><a href="#">JavaScript啟示錄</a></li> <li class="divider"></li> <li><a href="#">深入理解Bootstrap3</a></li> </ul> </div> <ul class="nav nav-tabs" id="myTab"> <li class="active"><a data-toggle="tab" href="#home">首頁(yè)</a></li> <li class=""><a data-toggle="tab" href="#profile">個(gè)人資料</a></li> <li class="dropdown"> <!-- 單擊"我的書籍"時(shí),彈出下拉菜單 --> <a data-toggle="dropdown" href="#" class="dropdown-toggle"> 我的書籍 <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a data-toggle="tab" href="#dropdown1">JavaScript編程精解</a></li> <li><a data-toggle="tab" href="#dropdown2">JavaScript設(shè)計(jì)模式</a></li> <li><a data-toggle="tab" href="#dropdown3">JavaScript啟示錄</a></li> <li><a data-toggle="tab" href="#dropdown4">深入理解Bootstrap</a></li> </ul> </li> </ul> <div class="tab-content" id="myTabContent"> <div id="home" class="tab-pane fade active in"> <p>單擊"首頁(yè)"時(shí)顯示該區(qū)域</p> </div> <div id="profile" class="tab-pane fade"> <p>單擊"個(gè)人資料"時(shí)顯示該區(qū)域</p> </div> <div id="dropdown1" class="tab-pane fade"> <p>單擊"JavaScript編程精解"時(shí)顯示該區(qū)域</p> </div> <div id="dropdown2" class="tab-pane fade"> <p>單擊"JavaScript設(shè)計(jì)模式"時(shí)顯示該區(qū)域</p> </div> <div id="dropdown3" class="tab-pane fade"> <p>單擊"JavaScript啟示錄"時(shí)顯示該區(qū)域</p> </div> <div id="dropdown4" class="tab-pane fade"> <p>單擊"深入理解Bootstrap3"時(shí)顯示該區(qū)域</p> </div> </div>
2.JavaScript的實(shí)現(xiàn)步驟
函數(shù)聲明后馬上調(diào)用——面向?qū)ο蟮姆椒ā猨Query的插件改進(jìn)重構(gòu)——防止沖突處理——綁定事件
3.通用技術(shù)
可以通過禁用命名空間的方式禁用插件的默認(rèn)行為
五.禁用響應(yīng)式布局
刪除媒詢、為.container定寬，用col-xs-*替代sm，md和lg。
以上所述是小編給大家介紹的深入理解bootstrap框架之第二章整體架構(gòu)，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
- 深入理解bootstrap框架之入門準(zhǔn)備
- 基于BootStrap Metronic開發(fā)框架經(jīng)驗(yàn)小結(jié)【九】實(shí)現(xiàn)Web頁(yè)面內(nèi)容的打印預(yù)覽和保存操作
- 基于BootStrap Metronic開發(fā)框架經(jīng)驗(yàn)小結(jié)【八】框架功能總體界面介紹
- 基于BootStrap Metronic開發(fā)框架經(jīng)驗(yàn)小結(jié)【七】數(shù)據(jù)的導(dǎo)入、導(dǎo)出及附件的查看處理
- 基于BootStrap Metronic開發(fā)框架經(jīng)驗(yàn)小結(jié)【六】對(duì)話框及提示框的處理和優(yōu)化
相關(guān)文章
Easyui使用Dialog行內(nèi)按鈕布局的實(shí)例
下面小編就為大家?guī)硪黄狤asyui使用Dialog行內(nèi)按鈕布局的實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
ASP.NET jQuery 實(shí)例2 (表單中使用回車在TextBox之間向下移動(dòng))
每次當(dāng)用戶在一個(gè)文本框輸入完數(shù)據(jù)后，更希望在敲入回車鍵后，焦點(diǎn)會(huì)自動(dòng)移動(dòng)到下一個(gè)文本框2012-01-01
jQuery的Ajax接收java返回?cái)?shù)據(jù)方法
今天小編就為大家分享一篇jQuery的Ajax接收java返回?cái)?shù)據(jù)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
最近在做一個(gè)項(xiàng)目，里面需要js 異步請(qǐng)求的時(shí)候，把上一次的的請(qǐng)求取消2010-10-10
Jquery實(shí)現(xiàn)遮罩層的簡(jiǎn)單實(shí)例(就是彈出DIV周圍都灰色不能操作)
下面小編就為大家?guī)硪黄狫query實(shí)現(xiàn)遮罩層的簡(jiǎn)單實(shí)例(就是彈出DIV周圍都灰色不能操作)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07
jQuery實(shí)現(xiàn)仿騰訊微博滑出效果報(bào)告每日天氣的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)仿騰訊微博滑出效果報(bào)告每日天氣的方法,涉及jQuery鼠標(biāo)事件及css樣式操作技巧,需要的朋友可以參考下2015-05-05
jQuery事件綁定用法詳解(附bind和live的區(qū)別)
這篇文章主要介紹了jQuery事件綁定用法,結(jié)合實(shí)例形式較為詳細(xì)的分析了jQuery事件綁定的實(shí)現(xiàn)原理與相關(guān)注意事項(xiàng),并附帶了相關(guān)綁定方法的使用說明,重點(diǎn)介紹了bind和live的區(qū)別,需要的朋友可以參考下2016-01-01
這篇文章主要介紹了詳解jQuery中的元素的屬性和相關(guān)操作,jQuery是最為流行的JavaScript庫(kù),需要的朋友可以參考下2015-08-08
jQuery EasyUI datagrid實(shí)現(xiàn)本地分頁(yè)的方法
這篇文章主要介紹了jQuery EasyUI datagrid實(shí)現(xiàn)本地分頁(yè)的方法,以實(shí)例形式較為詳細(xì)的分析了本地分頁(yè)的原理與相關(guān)的實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-02-02
jquery validate.js表單驗(yàn)證的基本用法入門
jquery.validate.js是jquery下的一個(gè)驗(yàn)證插件，功能比較強(qiáng)大，早就有所耳聞但是一只沒有動(dòng)手用過，現(xiàn)在在于能夠研究一下了。2010-05-05