Bootstrap介紹

簡介

4.0之前用less編寫源碼，4.0之後用sass進行編寫源碼，如今4.0之前版本的sass方案是後面遷移過去的。4.0之後將再也不兼容IE8

less學習地址：http://lesscss.cn/

安裝less

經過node.js的包管理器進行安裝(要提早安裝node.js環境)

lessss官方有一款基於node.js的庫用於編譯less
使用時首先安裝less
全局安裝：npm install -g less
本地安裝：npm install less(要先定位到你要安裝的目錄)

編譯less—css

輸入lessc命令能夠查看less轉css的參數

編譯less爲cass

輸出爲bootstrap.css

2.經過idea或者webstrom安裝lessc-plugin進行安裝後，能夠經過該編譯器進行編譯

1.打開菜單欄 —> 點擊 Intellij IDEA —> 選擇Preferences，左側搜索框 搜索Plugins，
再點擊右下方的「Install plugin from disk…」按鈕

2.找到本地已下載好的less-plugin.zip壓縮包 (我已經下地址：./lessc-plugin.rar)

3.選擇以後 —> Plugins下多了一個LESS CSS Compiler選項，點擊apply

3.能夠經過其餘專門的編譯器進行編譯。

bootsrtap優缺點

優勢：

1. 快速搭建一個網站前端，界面風格比較統一（假設沒用美工的前提下這是一個不錯的解決方案）
 2. 自適應多種瀏覽器終端
 3. 開源，有本身的一套前端機制，本身能夠進行修改甚至定製

缺點：

1. 在長時間的產品開發過程當中，可能會引入其餘第三方框架，致使項目難以維護。
2. 更加偏向於樣式的的顯示和調整對數據加載方面沒有其餘框架有優點。

定製本身的boostrap

1.覆蓋css

使用CSS覆蓋

最直接的方式是用CSS覆蓋掉Bootstrap的默認樣式。能夠經過針對Bootstrap中使用的class編寫你本身的樣式來實現。好比說，能夠經過增長如下代碼來使你的按鈕變得更圓滑：

優勢：

會改變你的工做流程。你能夠快速直接修改你的樣式，即便是你的網站引用了其餘的相似bootstrap的框架樣式，你均可以在同一個地方進行統一的定製。

缺點：

這種覆蓋樣式更像是一種打補丁式的解決方案，若是碰到要修改比較大的地方，改動量會比較大，最樣式表的體積也會增大

2.生成一個自定義構建

一個替代方案是建立一個完全的自定義構建。藉助官方的生成器，你能夠將框架內使用的關鍵變量設置成本身須要的值，好比說 @linkColor，@navbarHeight 和 @baseFontFamily。點擊生成器頁面底部的大按鈕就能夠下載最終的樣式表。你甚至還能對框架包含的組件進行挑選，這樣可以減小文件的體積。
定製好你的變量後點擊download按鈕就會生成一套屬於你的bootstrap框架了。同時，網上還有不少相似定製bootstrap的網站，若是你不習慣官網的能夠去這其它的網站試試，好比Bootswatchr網站使用變量來組織，而StyleBootstrap則使用組件。BootTheme添加了扔骰子特性來隨機設置值。若是幸運女神不站在你這邊，Lavish可以根據你提供的任何圖片來生成一個主題，PaintStrap則是根據已有的配色方案來生成

優勢：

相比上一種方法，它簡便了你對總體網站的修改。

缺點：

首先你很難一開始就肯定網站全部的樣式風格，固然你能夠在肯定好了後再生成一個最終版本。因此這就引入一個問題，若是你還要時不時更換你的樣式，你一樣須要找到bootstrap樣式源文件編輯，你可能還要用到第一種方法，好比我要使用圓角的帶陰影的button，光定製就不能知足個人需求，再者，若是面對bootstrap升級的問題，你還須要從新根據你的樣式構建一個新版本的bootstrap，這樣要真的作起來，會很是的麻煩。

3.深度定製bootstrap less

打開源碼，你會發現Bootstrap的樣式是用LESS而不是CSS寫的。LESS 是一種動態樣式表語言，相比於CSS，它支持多種優秀特性，包括選擇器嵌套，建立變量(就像在上面生成器中使用的)。一旦寫完，你能夠選擇將LESS代碼預先或在運行時編譯成 CSS。若是你喜歡 Sass，可使用這個適用於Sass的Bootstrap。
實際上，bootstrap是經過編譯bootstrap.less這一個文件而生成整個bootstrap.css文件的。咱們看到bootstrap.less的做用僅僅是引入其餘文件

如下這些文件是你要注意的：

bootstrap.less:

這個是核心文件。它用來引入其餘文件，最終由你來編譯它。

reset.less:

始終是最早引入的文件。

variables.less 和 mixins.less:

這兩個文件老是同時出現，由於其餘文件都依賴於它們。前一個文件包含了在生成器網站上使用的相同的變量。

utilities.less

這個文件老是最後引入，你能夠把想要覆蓋的類寫到這裏。

咱們定製的思路

找到咱們須要定製的組件和相對應的變量，對其修改，而後編譯成咱們本身的bootstrap.css便可。

下面講講具體實現方法。

確保你已經安裝好Less, 爲了避免讓咱們修改的內容與原始文件重合在一塊兒，咱們須要模塊化的修改。
首先下載bootstrap源碼，下載後就不須要對其作任何的改動了。咱們單獨創建一個文件夾（文件目錄只要能引用到bootstrap的less文件就能夠），取名爲custom-bootstrap，其中包含如下三個文件：

custom-variables.less:

這個文件包含你要定製的變量。

custom-other.less:

這個文件中包含了那些沒法經過修改變量完成定製的內容，好比增長或禁用button的text-shandow屬性。

custom-bootstrap.less

這是新的「核心」文件。咱們將把它編譯成CSS。與原始的 LESS文件同樣，它使用下面的命令來引入上面那兩個自定義文件（記住要保證文件正確的引用順序）

1. @import "../bootstrap/less/bootstrap.less"; //這個引用到原有的bootstrap文件
2. @import "custom-variables.less";
3. @import "custom-other.less"; 4 @import "../bootstrap/less/utilities.less"; //咱們一樣要引用原生的utilities.less，由於咱們要保證該文件始終最後一個被導入

這時，咱們只要編譯custom-bootstrap.less就能夠了。

有一些須要注意的是，custom-variables.less 不須要拷貝原有文件的全部內容，只須要拷貝和你要定製的組件相關的變量就能夠了，若是你這樣作了，單獨編譯custom-variables.less或custom-other.less會提示缺乏變量定義的錯誤，但這不要緊，你只要保證編譯custom-bootstrap.less沒有錯誤就能夠了。
這種方法的優勢在於，將定製的變化與原有庫代碼很好的隔離，卻又不失可維護性。即便從此升級bootstrap版本，咱們也不要擔憂從新構建樣式框架了。

我選擇第三種深度定製bootstrap的解決方案進行研究探索

Boostrap源碼介紹

Bootstrap總體架構

架構圖

Bootstrap源碼文件目錄介紹

custom-bootstrap：

是我本身建的目錄，裏面主要本身根據bootstrap規範定義的組件。

less、js 和 fonts ：

目錄分別包含了 CSS、JS 和字體圖標的源碼。

dist:

目錄包含了預編譯 Bootstrap 包內的全部文件。

docs：

包含了全部文檔的源碼文件，裏面examples 目錄是 Bootstrap 官方提供的實例工程。除了這些，其餘文件還包含 Bootstrap 安裝包的定義文件、許可證編。

主要文件是less和js下的源碼文件：

關鍵的文件

1.bootstrap.less

爲整個框架的入口裏面主要是加載了bootstrap框架的全部的組件的less文件，最後也是咱們編譯成bootstrap.css文件的主要文件

2.variable.less

這個是定義bootstrap的基本變量的css屬性，這裏面會用到一些less的自帶方法進行修改變量的值。

3.utilites.less

公共定義文件，也能夠理解爲公用的「動做」，由於它裏面定義了諸如「左浮動」，「右浮動」之類的動做，任何html標籤只要加上定義在此文件裏面動做，就能夠產生相應的效果可是當前源碼中這個文件定義的動做並很少。

4.mixins文件夾

你會發現mixins文件夾下的大部分文件在less下有相同的名字，即便不一樣也是有關係的，關係就是，less下的文件調用了mixins文件夾裏面的文件的方法，能夠理解爲一種另類的繼承

 

less下的alert.less文件的方法

mixins下的alert.less的方法

舉例介紹bootstrap源碼

待續。。。