成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

關(guān)于BOOTSTRAP的整理和理解

zeyu / 3552人閱讀

摘要：規(guī)范名稱定義，便于維護(hù)。譬如關(guān)于的定義在格式化的中會(huì)聲明為，而在基本樣式的中又可能會(huì)聲明所以在中會(huì)出現(xiàn)多次定義。盡量減少連接數(shù)和的大小?；诎姹镜氖褂媚壳笆褂幂^廣的是版本和，其中的最新版本是的最新版本。

隨著CSS3和HTML5的流行，我們的WEB頁(yè)面不僅需要更人性化的設(shè)計(jì)理念，而且需要更酷的頁(yè)面特效和用戶體驗(yàn)。作為開發(fā)者，我們需要了解一些寶貴的CSS UI開源框架資源，它們可以幫助我們更快更好地實(shí)現(xiàn)一些現(xiàn)代化的界面，包括一些移動(dòng)設(shè)備的網(wǎng)頁(yè)界面風(fēng)格設(shè)計(jì)。接下來就是要詳解Bootstrap框架：
首先，我們要知道為什么使用框架的原理。CSS框架是一系列CSS文件的集合體，包含了基本的元素重置，頁(yè)面排版，網(wǎng)絡(luò)布局，表單樣式，通用規(guī)則等代碼塊。使用CSS框架，可以簡(jiǎn)化工作，提高工作效率。

然后，我們?yōu)槭裁匆褂肂ootstrap框架，而不使用其他CSS框架？
原因大概如下：

隨著H5，CSS3的快速火起來，用戶體驗(yàn)尤為重要，移動(dòng)設(shè)備用戶的龐大，不容小視，而恰恰，Bootstrap就是為移動(dòng)設(shè)備而開發(fā)的框架。他雖然是以移動(dòng)設(shè)備優(yōu)先，傾向于Mobile，但不是移動(dòng)設(shè)備框架。
它由規(guī)范的CSS，JavaScript插件構(gòu)成，其最大的優(yōu)勢(shì)是響應(yīng)式布局，CSS媒體查詢(Media Query)的功勞，使得開發(fā)者可以方便的讓網(wǎng)頁(yè)無論在臺(tái)式機(jī)，手機(jī)上都獲得最佳的體驗(yàn)。
1、抽象出常用的css樣式,高再可用性,高移植性
2、有固有的定義,詳細(xì)的文檔及開發(fā)特點(diǎn)
3、高兼容性,可以兼容流行的瀏覽器
4、以css為主,但不一定全部是css,可能有一些js(或者其他)腳本用于兼容瀏覽器

Bootstrap框架可以分為三類：

第一：預(yù)處理腳本：

Bootstrap的源碼是基于最流行的CSS預(yù)處理腳本-Less和Sass開發(fā)的。你可以采用預(yù)編譯的CSS文件快速開發(fā)，也可以從源碼定制自己需要的樣式。例如。如果你頁(yè)面上有很多同樣的效果。只需要寫一個(gè)效果類。然后讓用到的地方去繼承他。就不需要再寫了。

第二：一個(gè)框架，多種設(shè)備

你的網(wǎng)站和應(yīng)用能在Bootstrap的幫助下通過同一個(gè)代碼快速，有效設(shè)配手機(jī)，平板、PC設(shè)備，這都是CSS媒體查詢的功勞。

第三：特效齊全

Bootstrap提供了全面、美觀的文檔、可以找到關(guān)于HTML元素，HTML和CSS組件、jQuery插件方面的所有詳細(xì)文檔。

Bootstrap組件：

Bootstrap中包含了豐富的Web組件，根據(jù)這些組件，可以快速的搭建一個(gè)漂亮、功能完備的網(wǎng)站。比如：下拉菜單、按鈕組、按鈕下拉菜單、導(dǎo)航、導(dǎo)航條、路徑導(dǎo)航、分頁(yè)、排版、縮略圖、警告對(duì)話框、進(jìn)度條、媒體對(duì)象等。
JavaScript插件Bootstrap自帶了13個(gè)jQuery插件，這些插件為Bootstrap中的組件賦予了“生命”。其中包括：模式對(duì)話框、標(biāo)簽頁(yè)、滾動(dòng)條、彈出框等。 還有更重要的一點(diǎn)是，Bootstrap是完全開源的。它的代碼托管，開發(fā)，維護(hù)都依賴GITHub平臺(tái)。
其次：
我們看下使用Bootstrap的利弊：

優(yōu)點(diǎn)：

提高開發(fā)效率。

規(guī)范名稱定義，便于維護(hù)。

規(guī)范項(xiàng)目開發(fā)流程 d)css代碼更清晰、簡(jiǎn)單。html代碼更合理。

大規(guī)模項(xiàng)目中可以減少用戶下載

缺點(diǎn)：

學(xué)習(xí)成本提高。你需要了解整個(gè)框架，需要閱讀框架的文檔。

css框架對(duì)于一個(gè)小項(xiàng)目等頁(yè)面來說很臃腫?？蚣苤锌赡苡写蟛糠帜阌貌坏降拇a。

可能會(huì)無法幫助你的技術(shù)提高。太依賴框架，以至于很難排除bug。包括框架中本身就帶的bug。

選擇自己需要的框架與開發(fā)框架都很痛苦。寫到后面發(fā)現(xiàn)越來越不靈活，越來越臃腫。

1、頁(yè)面外部引用樣式過多。譬如關(guān)于ul的margin定義,在格式化的css中會(huì)聲明為0，而在基本樣式的css中又可能會(huì)聲明margin:5px 10px;所以在Yslow中會(huì)出現(xiàn)多次定義。

2、組件復(fù)用性的考量。譬如表單定義的css中定義了所有表單的修飾,而假定在注冊(cè)這個(gè)頁(yè)面中只是需要這個(gè)css的百分之三十。那是否應(yīng)切割出去那不要的百分之七十?綜合以上的二個(gè)問題，個(gè)人認(rèn)為解決的方式便是封裝，讓該有的有，不該有的沒有。盡量減少http連接數(shù)和css的大小。但如果徹底是這樣做的話，css的復(fù)用性又會(huì)變得很差，后期手工的封裝會(huì)很痛苦。

3、到底該不該支持em?可見如要支持em，最大的目的是為了在瀏覽器中可以根據(jù)用戶的分辨率大小自由縮放，對(duì)于擁有超大顯示器的用戶與小顯示器的用戶是非常有用的?？墒窃诓杉覀冇脩舻臑g覽器數(shù)據(jù)后，發(fā)現(xiàn)分辨處于這二端的用戶非常少，可想而知，為這部分的用戶多花比正常開發(fā)一倍以上的時(shí)間顯然是件不劃算的事情，當(dāng)然這是個(gè)建議，我們也希望能使用em帶給用戶最好的感受。

基于Bootstrap版本的使用：
目前使用較廣的是版本2和3，其中2的最新版本是2.3.2,3的最新版本3.3.5。
版本4最主要變化是：

1.從Less遷移到Sass（為什么？因?yàn)槟敲碨ass和LESS是一樣的，只是CSS預(yù)處理器中的一種而以。但是Less相對(duì)來說，語(yǔ)法太過嚴(yán)格，所以使用的人也就少了。）

2.改進(jìn)網(wǎng)格系統(tǒng)

3.缺省彈性框

4.支持 Dropped wells,thumbnails,and panels for cards

5.合并所有HTML resets到一個(gè)新的模塊中：Reboot 全新自定義選項(xiàng)

6.不再支持IE8

7.重寫所有的JavaScript插件

8.改進(jìn)工具提示和popovers的自動(dòng)定位

9.改進(jìn)文檔

10.其他大量改進(jìn)

總結(jié)：如果有前端技術(shù)的博友們，應(yīng)該都不是問題。初學(xué)者是有點(diǎn)難度的。

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

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

相關(guān)文章

  • 關(guān)于BOOTSTRAP的整理和理解

    摘要：規(guī)范名稱定義，便于維護(hù)。譬如關(guān)于的定義在格式化的中會(huì)聲明為，而在基本樣式的中又可能會(huì)聲明所以在中會(huì)出現(xiàn)多次定義。盡量減少連接數(shù)和的大小?；诎姹镜氖褂媚壳笆褂幂^廣的是版本和，其中的最新版本是的最新版本。 隨著CSS3和HTML5的流行，我們的WEB頁(yè)面不僅需要更人性化的設(shè)計(jì)理念，而且需要更酷的頁(yè)面特效和用戶體驗(yàn)。作為開發(fā)者，我們需要了解一些寶貴的CSS UI開源框架資源，它們可以幫助我...

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

  • 關(guān)于BOOTSTRAP的整理和理解

    摘要：規(guī)范名稱定義，便于維護(hù)。譬如關(guān)于的定義在格式化的中會(huì)聲明為，而在基本樣式的中又可能會(huì)聲明所以在中會(huì)出現(xiàn)多次定義。盡量減少連接數(shù)和的大小。基于版本的使用目前使用較廣的是版本和，其中的最新版本是的最新版本。 隨著CSS3和HTML5的流行，我們的WEB頁(yè)面不僅需要更人性化的設(shè)計(jì)理念，而且需要更酷的頁(yè)面特效和用戶體驗(yàn)。作為開發(fā)者，我們需要了解一些寶貴的CSS UI開源框架資源，它們可以幫助我...

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

  • 前端面試知識(shí)點(diǎn)目錄整理

    摘要：寫在前面金三銀四又到了一年一度的跳槽季相信大家都在準(zhǔn)備自己面試筆記我也針對(duì)自己工作中所掌握或了解的一些東西做了一個(gè)目錄總結(jié)方便自己復(fù)習(xí)詳細(xì)內(nèi)容會(huì)在之后一一對(duì)應(yīng)地補(bǔ)充上去有些在我的個(gè)人主頁(yè)筆記中也有相關(guān)記錄這里暫且放一個(gè)我的面試知識(shí)點(diǎn)目錄大家 寫在前面: 金三銀四, 又到了一年一度的跳槽季, 相信大家都在準(zhǔn)備自己面試筆記, 我也針對(duì)自己工作中所掌握或了解的一些東西做了一個(gè)目錄總結(jié),方便自...

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

  • 前端面試知識(shí)點(diǎn)目錄整理

    摘要：寫在前面金三銀四又到了一年一度的跳槽季相信大家都在準(zhǔn)備自己面試筆記我也針對(duì)自己工作中所掌握或了解的一些東西做了一個(gè)目錄總結(jié)方便自己復(fù)習(xí)詳細(xì)內(nèi)容會(huì)在之后一一對(duì)應(yīng)地補(bǔ)充上去有些在我的個(gè)人主頁(yè)筆記中也有相關(guān)記錄這里暫且放一個(gè)我的面試知識(shí)點(diǎn)目錄大家 寫在前面: 金三銀四, 又到了一年一度的跳槽季, 相信大家都在準(zhǔn)備自己面試筆記, 我也針對(duì)自己工作中所掌握或了解的一些東西做了一個(gè)目錄總結(jié),方便自...

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

  • 前端要給力 — 平凡之路

    摘要：平凡之路前端發(fā)展了十幾年，現(xiàn)在幾乎到達(dá)頂峰的速度了，近兩年推出的框架層出不窮，早已不是一統(tǒng)江湖了。模板和數(shù)據(jù)分離也好，狀態(tài)和表現(xiàn)分離也好，我越來越體會(huì)到分是為了合這條平凡之路，還會(huì)頻繁的發(fā)展和融合下去。 一直想總結(jié)下自己摸打滾爬的前端經(jīng)歷，3年，從一個(gè)極討厭前端的人，變成一個(gè)吃前端飯碗的人。沒有人帶過我，跌跌撞撞的緩慢前進(jìn)，但我很喜歡分享，喜歡一起進(jìn)步，這會(huì)是我以后一直樂意做的事情。 ...

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

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

0條評(píng)論

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