BootStrap經(jīng)常被用作css框架泳桦,它有很多的使用價值和學(xué)習(xí)價值娩缰。當(dāng)其本身的樣式并不符合自身的開發(fā)需求時,在熟悉其源碼的情況下浮毯,我們可以對其進(jìn)行改裝泰鸡,整理成適合自己使用的框架。又或者是通過分析其源碼的編寫盛龄,學(xué)習(xí)其css的結(jié)構(gòu)層次以及對sass的靈活使用。
下載了BootStrap4的源碼之后啊鸭,可以找到bootstrap.scss這個文件欧芽,該文件為總文件,下面將簡要說明一下這個文件的結(jié)構(gòu):
// Core variables and mixins
@import "variables"; //存放全局用到的變量千扔,其中包含了下面具體樣式要用到的變量(顏色憎妙、字體等)以及用于全局判斷(設(shè)置)的變量
@import "mixins"; //存放Mixin以及function,類似于公用的方法
@import "custom"; //存放用戶自定義的樣式厘唾,可以在此覆蓋上面變量、方法
// Reset and dependencies
@import "normalize"; //樣式重置抚垃,類似于reset
@import "print"; //設(shè)置打印的樣式,例如把陰影去掉铣焊,a元素顯示下劃線罕伯,調(diào)整段落換行等
// Core CSS
@import "reboot"; //樣式重置,這是BootStrap4的新特性追他,在normalize之上添加或是覆蓋一些初始化的規(guī)則
@import "type"; //排版樣式,包括標(biāo)題懈糯、段落单雾、各種類型的文本的樣式
@import "images"; //響應(yīng)圖片樣式,BootStrap2和4才有铁坎,確保圖像不超出父親的圖像,此樣式可能會和其他第三方小部件產(chǎn)生沖突扩所,謹(jǐn)慎使用
@import "code"; //代碼樣式
@import "grid"; //柵格樣式朴乖,實現(xiàn)響應(yīng)式、移動設(shè)備優(yōu)先的流式柵格系統(tǒng)
@import "tables"; //表格樣式
@import "forms"; //表單樣式
@import "buttons"; //按鈕樣式
// Components
@import "transitions"; //過度效果插件袁勺,BootStrap4新特性
@import "dropdown"; //下拉菜單組件
@import "button-group"; //按鈕組
@import "input-group"; //輸入框組
@import "custom-forms"; //自定義表單
@import "nav"; //導(dǎo)航
@import "navbar"; //導(dǎo)航條
@import "card"; //卡片(替代了BootStrap3的面板畜普、well、縮略圖)
@import "breadcrumb"; //面包屑(有層次結(jié)構(gòu)的導(dǎo)航欄)
@import "pagination"; //分頁
@import "badge"; //徽章,對標(biāo)簽的補充提示街立,一般用于展示新的或未讀的信息條目
@import "jumbotron"; //巨幕埠通,能延伸至整個瀏覽器視口來展示網(wǎng)站上的關(guān)鍵內(nèi)容
@import "alert"; //提示框
@import "progress"; //進(jìn)度條
@import "media"; //多媒體,一般用于編排文字與圖片的混合展示
@import "list-group"; //列表組
@import "responsive-embed"; //相應(yīng)嵌端辱,具有響應(yīng)式特性的嵌入內(nèi)容,創(chuàng)建一個固定的比例荣病,使得嵌入內(nèi)容根據(jù)比例自動適配喷鸽,一般用于視頻的嵌入
@import "close"; //彈窗關(guān)閉按鈕的樣式補充
// Components w/ JavaScript
@import "modal"; //模態(tài)框(彈窗)
@import "tooltip"; //提示冒泡,例如鼠標(biāo)在按鈕上懸浮是的提示框做祝,一般為單行的文字
@import "popover"; //彈出框鸡岗,和上面的提示冒泡類似,這個彈出框有標(biāo)題声登,內(nèi)容可為多行
@import "carousel"; //輪播圖
// Utility classes
@import "utilities"; //工具集揣苏,例如各種大小的外邊框,字體對齊卸察,清除浮動等
根據(jù)自身需求,在對應(yīng)的scss文件上進(jìn)行修改也是很方便的合武,修改后將這個scss文件編譯成壓縮的css文件涡扼。