国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

bootstrap4源碼閱讀體會(huì)

incredible / 1131人閱讀

摘要：通過閱讀發(fā)現(xiàn)了不少知識(shí)的盲點(diǎn)和誤解，對(duì)有了更深入的理解。總結(jié)幾點(diǎn)印象較深的體會(huì)，分享給大家。但是通過閱讀源碼改變了這種認(rèn)識(shí)模塊化很簡(jiǎn)單靈活，這是其優(yōu)點(diǎn)，同時(shí)也是一個(gè)缺點(diǎn)。

歡迎到個(gè)人博客參觀: 點(diǎn)擊這里

bootstrap已經(jīng)使用了很長時(shí)間，但是從來沒有好好研究過其設(shè)計(jì)結(jié)構(gòu)，春節(jié)期間閑來無事就閱讀了源碼。通過閱讀發(fā)現(xiàn)了不少知識(shí)的盲點(diǎn)和誤解，對(duì)css有了更深入的理解。總結(jié)幾點(diǎn)印象較深的體會(huì)，分享給大家。

1. 移動(dòng)優(yōu)先

在移動(dòng)互聯(lián)網(wǎng)時(shí)代，很多公司都堅(jiān)持移動(dòng)端優(yōu)先的原則，bootstrap也迎合了這種需求，具體表現(xiàn)在如下方面:

相對(duì)單位: %、rem的大量使用

grid系統(tǒng): 為了使用不同的設(shè)備，grid系統(tǒng)對(duì)xs、sm、md、lg、xl進(jìn)行了響應(yīng)式設(shè)計(jì)，通過media query做到適配

支持flexbox: mobile應(yīng)該很快就可以使用flexbox

2. 代碼結(jié)構(gòu) 2.1 從less到saas

使用sass作為bootstrap的css預(yù)處理器，以前對(duì)預(yù)處理器不是很感冒，認(rèn)為將簡(jiǎn)單問題復(fù)雜化了。但是通過閱讀源碼改變了這種認(rèn)識(shí):

css模塊化: css很簡(jiǎn)單、靈活，這是其優(yōu)點(diǎn)，同時(shí)也是一個(gè)缺點(diǎn)。通過sass預(yù)處理器，可以根據(jù)功能將css模塊化，便于css的管理

復(fù)用: 變量、mixin、function等技術(shù)，可以方便地進(jìn)行代碼復(fù)用

簡(jiǎn)潔: 支持each、if等語法，動(dòng)態(tài)輸出內(nèi)容，例如繁瑣的grid系統(tǒng)，是通過少量的sass代碼做到的

2.2 代碼層次

根據(jù)代碼的層次，sass的源碼分為如下幾部分:

支撐部分: 包括變量定義、大量的mixin文件，這是整個(gè)bootstrap的基礎(chǔ)代碼，也是進(jìn)行個(gè)性化定制的其實(shí)位置

全局部分: normalize.scss用于覆蓋各種瀏覽器的默認(rèn)行為，保證起始樣式的一致性

基礎(chǔ)樣式部分: 包含了reboot、typography、images、code、table、forms、buttons等，主要是一些常用的基礎(chǔ)html元素

grid部分: 選擇性支持flexbox，默認(rèn)情況下是關(guān)閉的，只要將$enable-flex=true就可以使用flexbox完成頁面的柵格布局

組件部分: 包含大量常用的基礎(chǔ)組件，有些需要添加jQuery plugin

工具類部分: 常用的簡(jiǎn)單樣式，例如間距、文本對(duì)齊、字體加粗等

3. Grid

Grid用于頁面的整體布局，同時(shí)css3也在起草grid布局模塊。Grid也可以多帶帶使用，bootstrap4提供了一個(gè)多帶帶的文件(bootstrap-grid.scss)來實(shí)現(xiàn)柵格系統(tǒng)，具體來說Grid有如下特點(diǎn):

默認(rèn)情況下是12柵格

柵格可以嵌套使用

支持5種尺寸下的響應(yīng)式樣式

5個(gè)尺寸可以組合使用，適配不同終端下終端

支持使用flexbox

4. flexbox

flexbox目前還處于草案階段，不過高級(jí)瀏覽器已經(jīng)開始支持，如果只考慮高版本瀏覽器的話，可以啟動(dòng)通過$enable-flex=true來啟動(dòng)flexbox。

flexbox是未來布局的趨勢(shì)，尤其是在復(fù)雜頁面布局上，總得來說具有如下幾個(gè)優(yōu)點(diǎn):

可伸縮性: 通過flex來實(shí)現(xiàn)空間的伸縮，在響應(yīng)式設(shè)計(jì)中更加靈活(無需關(guān)注margin、padding、border等)

順序定制: flexbox的一大亮點(diǎn)，通過order指定元素的顯示順序

輕松對(duì)齊: 通過jsutify-content、align-items可以方便實(shí)現(xiàn)元素的對(duì)齊

方向性: 通過flex-flow方便確定布局的方向

5. 組件設(shè)計(jì)

bootstrap里面提供了大量的常用組件，可以直接使用或者簡(jiǎn)單進(jìn)行二次開發(fā)，加快日常業(yè)務(wù)的開發(fā)速度。同時(shí)，有些組件需要跟js(jQuery)配合，實(shí)現(xiàn)組件的交互效果。

里面的組件按是否需要js，可以分為兩類:

無需js配合: Button系列、Form、Input系列、DropDown、Jumbotron、Label、Alert、Cards、Nav系列、Breadcrumb、Pagination、Progress、List

需js配合: Modal、Tooltips、Popovers、Carousels

需要注意的是Cards是bootstrap4新增的組件。

6. 參考

http://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/115037.html

相關(guān)文章

  • 使用SCSS擴(kuò)展Bootstrap4

    摘要：對(duì)于非前后端分離應(yīng)用來說，應(yīng)該是目前的最佳前端框架之一了。所以下文中默認(rèn)使用的語法。可以使用的組件特性，來擴(kuò)展，這樣會(huì)在編輯的源碼，更加的有結(jié)構(gòu)引用引用編譯自定義源碼編譯自定義源碼參考參考摘要 因?yàn)榇蛩銓懸粋€(gè)小網(wǎng)站，而個(gè)人時(shí)間又不是那么充裕，所以沒有選擇前后端分離的架構(gòu)。 對(duì)于非前后端分離應(yīng)用來說，Bootstrap應(yīng)該是目前的最佳前端框架之一了。 而Bootstrap4，是Bootstra...

    Vultr 評(píng)論0 收藏0

  • 挑逗Bootstrap4源代碼 - Grid篇（下）

    摘要：在這里面有一個(gè)新定義的類，它這個(gè)嵌入式展開后是，從結(jié)構(gòu)可以看出來，它就是加在元素上的，可以取消列的默認(rèn)間距。在這里我提供一個(gè)自定義的，名字也很簡(jiǎn)單。寫的時(shí)候注意順序，要按照升序排列，小的放在上面，即在上面，寫反了將失效。 本文所引用的版本為Bootstrap 4 Beta版，閱讀者請(qǐng)先下載好相關(guān)源文件。 時(shí)光荏苒，若后續(xù)版本代碼發(fā)生變化，將看心情進(jìn)行更新補(bǔ)充。如果你覺得本文不錯(cuò)，歡迎...

    fobnn 評(píng)論0 收藏0

  • Bootstrap4響應(yīng)式布局之柵格系統(tǒng)

    摘要：前面說了的下載和簡(jiǎn)單使用，現(xiàn)在我們接著往下學(xué)習(xí)，的響應(yīng)式布局主要依靠柵格系統(tǒng)來實(shí)現(xiàn)的。好了，柵格系統(tǒng)暫時(shí)先介紹到這了，有什么不懂的可以給老留言哦。前面說了Bootstrap4的下載和簡(jiǎn)單使用，現(xiàn)在我們接著往下學(xué)習(xí)，Bootstrap4的響應(yīng)式布局主要依靠柵格系統(tǒng)來實(shí)現(xiàn)的。面老K先來講解一下Bootstrap4的柵格系統(tǒng)，讓你能夠更快的了解Bootstrap4.（PS：更詳細(xì)的介紹請(qǐng)?jiān)L問原K先...

    Donald 評(píng)論0 收藏0

  • Mac系統(tǒng)使用VS Code編譯Bootstrap 4

    摘要：使用，已改為使用，所以首先解決編譯問題。編譯與無關(guān)，需要在系統(tǒng)中安裝編譯環(huán)境。使用編譯源碼結(jié)構(gòu)簡(jiǎn)單分析源碼，其中文件夾包含了所有樣式文件源碼，部件和工具都是單獨(dú)的文件，很清晰。可以看到命令已成功運(yùn)行，及文件已經(jīng)生成。 環(huán)境： macOS 10.13.6 node.js 8.11.3 sass 1.10.3 bootstrap 4.1.3 vs code 1.25.1 ...

    simpleapples 評(píng)論0 收藏0

  • Bootstrap4 正式發(fā)布

    摘要：歷經(jīng)三年開發(fā)，前端框架正式發(fā)布了。支持發(fā)布時(shí)，曾放棄了對(duì)版本的支持，給很多用戶造成了麻煩，同樣的錯(cuò)誤不會(huì)犯第二次。在不久的將來，開發(fā)團(tuán)隊(duì)還會(huì)繼續(xù)修復(fù)的，改進(jìn)文檔。最終發(fā)布之后，的文檔也不會(huì)下線。除了發(fā)布外，官方還發(fā)布了主題。 歷經(jīng)三年開發(fā)，前端框架Bootstrap 4正式發(fā)布了。然而今天的Web世界已經(jīng)和當(dāng)初Mark Otto發(fā)布Bootstrap時(shí)的情況大為不同，一些開發(fā)者由此質(zhì)疑...

    monw3c 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<