【新東網(wǎng)技術(shù)大咖帶您走進(jìn)BootStrap】其實(shí)BootStrap就干一件事
發(fā)布時(shí)間: 2016-08-12 09:58:41
文 / 李壯相 技術(shù)總監(jiān)
新東網(wǎng)自2001年成立以來,掌握大數(shù)據(jù)、云計(jì)算、通信、物聯(lián)網(wǎng)及區(qū)塊鏈等領(lǐng)先信息技術(shù),擁有一支逾16年經(jīng)驗(yàn)的強(qiáng)大IT團(tuán)隊(duì)。為沉淀企業(yè)技術(shù)實(shí)力,繼續(xù)發(fā)揮行業(yè)優(yōu)勢(shì),《東網(wǎng)快訊》特邀新東網(wǎng)技術(shù)大咖帶您走進(jìn)這些先進(jìn)信息技術(shù),揭秘新東網(wǎng)16年來的技術(shù)成果,每周五發(fā)布。
新東網(wǎng)技術(shù)內(nèi)幕大揭秘開始啦~首篇帶您走進(jìn)BootStrap,看看BootStrap究竟干了什么事?
一、什么是BootStrap
在蘋果推出視網(wǎng)膜屏幕的iPhone的時(shí)候,全世界的人都震驚了,其細(xì)膩的顯示表達(dá)能力,打開了一個(gè)新的視覺世界,并開始被競(jìng)爭(zhēng)對(duì)手效仿。然而很快人們就發(fā)現(xiàn)問題,微軟強(qiáng)大的兼容能力造就了大量的屏幕分辨率極度不統(tǒng)一,蘋果產(chǎn)品一家獨(dú)秀,想模仿不是一件簡(jiǎn)單的事。于是微軟想出了一個(gè)辦法,就是Metro風(fēng)格,并在Windows8得以展示。這樣醒目簡(jiǎn)單塊狀的家伙,完全消除了不同的分辨率的障礙。于是三大陣營(yíng)統(tǒng)一思路,Android、iOS 、WP,逐步消除擬物化的顯示效果,大大小小的手機(jī)開始大行其道,滿足了不同分辨率的能力。這是一種積木式的簡(jiǎn)樸思想的大獲成功。
然而成熟的B/S架構(gòu)除了宣布支持HTML5,在手機(jī)、PC上的展示能力外,總是捉襟見肘。所幸的是來自Twitter的兩個(gè)工程師Mark Otto和Jacob Thornton搗鼓了一個(gè)叫BootStrap的前端開發(fā)的開源工具。其思想和積木式的如出一轍。
BootStrap按官方的說法有三個(gè)特性說明:
A、預(yù)處理腳本
雖然可以直接使用 BootStrap 提供的 CSS 樣式表,但不要忘記 BootStrap 的源碼是基于最流行的 CSS 預(yù)處理腳本 —— Less 和 Sass 開發(fā)的。
B、一個(gè)框架、多種設(shè)備
你的網(wǎng)站和應(yīng)用能在 BootStrap 的幫助下通過同一份代碼快速、有效地適配手機(jī)、平板、PC 設(shè)備,這一切都是 CSS 媒體查詢(Media Query)的功勞。
C、特性齊全
BootStrap 提供了全面、美觀的文檔。你能在這里找到關(guān)于 HTML 元素、HTML 和 CSS 組件、jQuery 插件方面的所有詳細(xì)文檔。
二、為啥說它就干一件事
雖然BootStrap說,它干了這三件事,但是我認(rèn)為,它其實(shí)只干了一件事,就是積木!BootStrap用一個(gè)專業(yè)的名稱叫柵格系統(tǒng)(Grid System)。
BootStrap 柵格系統(tǒng)(Grid System)提供了一套響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的流式網(wǎng)格系統(tǒng)。隨著屏幕或視口(viewport)尺寸的增加,系統(tǒng)會(huì)自動(dòng)分為最多12列。
這些數(shù)字的值就是其分配的寬度的值,最大12,最小1,各種混搭。
這樣就把一個(gè)網(wǎng)頁的布局全部弄清楚了。剩余的工作就比較簡(jiǎn)單了,為了配合布局,它把按鈕、表格、縮略圖、標(biāo)簽、氣泡、下拉菜單、導(dǎo)航條、警告提示、進(jìn)度條、列表組合、面板、輪播等重新加工處理了一遍,以滿足外部容器的需要。
當(dāng)然如果您認(rèn)為事件就這么簡(jiǎn)單了,那還是小看了BootStrap,它還能夠在一個(gè)頁面里面直接說明不同的布局才是其強(qiáng)大之處。
在CSS上:
...
...
|
這事實(shí)上已經(jīng)說明3中分辨率不同的布局風(fēng)格,刪格系統(tǒng)的定義如下[注]:
超小屏幕 |
小屏幕 |
中等屏幕 |
大屏幕 |
|
手機(jī) (<768px) |
平板 (≥768px) |
桌面顯示器 (≥992px) |
大桌面顯示器 (≥1200px) |
|
柵格系統(tǒng)行為 |
總是水平排列 |
開始是堆疊在一起的,當(dāng)大于這些閾值時(shí)將變?yōu)樗脚帕蠧 |
||
.container 最大寬度 |
None (自動(dòng)) |
750px |
970px |
1170px |
類前綴 |
.col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
列(column)數(shù) |
12 |
|||
最大列(column)寬 |
自動(dòng) |
~62px |
~81px |
~97px |
槽(gutter)寬 |
30px (每列左右均有 15px) |
|||
可嵌套 |
是 |
|||
偏移(Offsets) |
是 |
|||
列排序 |
是 |
這樣,一個(gè)能夠滿足不同分辨率的簡(jiǎn)潔、直觀、強(qiáng)悍的前端開發(fā)框架被構(gòu)建出來了,讓web開發(fā)更迅速、簡(jiǎn)單。
那么另外,Less和Sass又是何種用途呢?它們的作用是能夠讓BootStrap的CSS變得更加簡(jiǎn)潔統(tǒng)一,以便于積木整個(gè)風(fēng)格的調(diào)整。Less將CSS賦予了動(dòng)態(tài)語言的特性,如變量、繼承、運(yùn)算、函數(shù)等,而Sass富于更加廣泛的循環(huán)遍歷CSS的運(yùn)算能力,也是柵格系統(tǒng)得以發(fā)揮的基礎(chǔ),未來是否均整合到Sass中,我們尚不得而知。簡(jiǎn)單的講,就是不要刻意研究Less和Sass,它們?yōu)锽ootStrap的柵格系統(tǒng)起到了重要的作用。但是都是為BootStrap干的這一件事。
從這里面我們得到的啟發(fā)是,我們把很多事情想象得太復(fù)雜了,BootStrap用一個(gè)簡(jiǎn)單的積木方式和簡(jiǎn)單的表達(dá)能力,把前端開發(fā)框架重新構(gòu)建了一下,獲得了整個(gè)互聯(lián)網(wǎng)的稱贊。這樣您弄懂了嗎?
[注]表格來自網(wǎng)頁:http://v3.bootcss.com/css/