這篇文章是本人對(duì)于學(xué)習(xí)Bootstrap的一些總結(jié)岖常，在此分享給大家简僧。
1. Bootstrap是什么箩言？
Bootstrap是一個(gè)為我們構(gòu)建網(wǎng)站樣式提供方便的框架牺弄，它分為主要分為三大塊料饥。即css樣式板塊蒲犬、font字體板塊與js插件板塊。bootstrap著重于把所有樣式都實(shí)現(xiàn)好岸啡，供我們調(diào)用原叮，所以js板塊的代碼很大一部分是為了實(shí)現(xiàn)樣式的動(dòng)畫效果。而字體文件可以用于生成圖標(biāo)巡蘸，不過字體的文件比較大奋隶，一般比較少使用到。
2. Bootstrap CSS樣式
Bootstrap里的CSS樣式文件全部都是Less文件作為組件悦荒，導(dǎo)入到bootstrap.less文件中唯欣，然后再對(duì)bootstrap.less進(jìn)行編譯，得到bootstrap.css文件搬味。
以下是bootstrap.less的源碼
/*!
* Bootstrap v3.3.7 (http://getbootstrap.com)
* Copyright 2011-2016 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
/* Core variables and mixins (mixins文件夾里的less文件)*/
@import "variables.less";
@import "mixins.less";
/* 基礎(chǔ)和依賴 */
/* Reset and dependencies */
@import "normalize.less";
@import "print.less";
@import "glyphicons.less";
/* Core CSS 核心 */
@import "scaffolding.less";
@import "type.less";
@import "code.less";
@import "grid.less";
@import "tables.less";
@import "forms.less";
@import "buttons.less";
/* Components 各種組件 */
@import "component-animations.less";
@import "dropdowns.less";
@import "button-groups.less";
@import "input-groups.less";
@import "navs.less";
@import "navbar.less";
@import "breadcrumbs.less";
@import "pagination.less";
@import "pager.less";
@import "labels.less";
@import "badges.less";
@import "jumbotron.less";
@import "thumbnails.less";
@import "alerts.less";
@import "progress-bars.less";
@import "media.less";
@import "list-group.less";
@import "panels.less";
@import "responsive-embed.less";
@import "wells.less";
@import "close.less";
/* Components w/ JavaScript */
@import "modals.less";
@import "tooltip.less";
@import "popovers.less";
@import "carousel.less";
/* Utility classes */
@import "utilities.less";
@import "responsive-utilities.less";
如果想學(xué)習(xí)Less這門CSS預(yù)編譯語(yǔ)言境氢，不妨登錄他們的官網(wǎng)Less，進(jìn)行學(xué)習(xí)碰纬。
3. 自定義Bootstrap
由于Bootstrap里面的樣式都幫我們?cè)O(shè)置好了萍聊，如一個(gè)按鈕的樣式，我們只需在html文件中為此按鈕添加對(duì)應(yīng)的類名就能渲染出很好看的按鈕樣式悦析。但是如果我們要對(duì)此按鈕的樣式進(jìn)行修改就比較麻煩了寿桨。雖然比較少樣式進(jìn)行修改我們還可以寫寫行內(nèi)樣式 ，但是修改的樣式多起來(lái)時(shí)不僅修改困難她按，日后維護(hù)也將會(huì)十分困難牛隅。
綜上，我們應(yīng)該做的是學(xué)習(xí)Bootstrap的設(shè)計(jì)理念酌泰，基于這個(gè)理念來(lái)編寫我們的自定義樣式媒佣。如創(chuàng)建自己的按鈕模塊，然后在bootstrap.less中引入陵刹。同時(shí)我們已可以把項(xiàng)目中不需要的樣式從bootstrap.less中刪除對(duì)應(yīng)的組件默伍。
4. 總結(jié)
我覺得Bootstrap有兩大形態(tài)：
①原始形態(tài)。不限制頁(yè)面樣式或?qū)τ跇邮綗o(wú)要求時(shí)網(wǎng)頁(yè)的快速搭建，如后端工程師寫頁(yè)面時(shí)可以直接套用Bootstrap的默認(rèn)樣式也糊，對(duì)數(shù)據(jù)進(jìn)行簡(jiǎn)單的呈現(xiàn)炼蹦；
②高度定制化形態(tài)。有設(shè)計(jì)要求的響應(yīng)式頁(yè)面狸剃，如必須按照PSD圖進(jìn)行網(wǎng)頁(yè)的搭建時(shí)就需要前端工程師按照設(shè)計(jì)要求進(jìn)行組件的創(chuàng)建掐隐，然后引入需要的bootstrap模塊（常用的組件有g(shù)rid.less）實(shí)現(xiàn)高度定制化后的Bootstrap。
