基于Sass的BootStrap4的源碼目錄結(jié)構(gòu)-學(xué)習(xí)筆記

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文件涡扼。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市汤善,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌红淡,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,729評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件荤傲,死亡現(xiàn)場離奇詭異颈渊,居然都是意外死亡,警方通過查閱死者的電腦和手機雾家,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評論 3 399
  • 文/潘曉璐 我一進(jìn)店門绍豁,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人竹揍,你說我怎么就攤上這事∥揶郑” “怎么了昧碉?”我有些...
    開封第一講書人閱讀 169,461評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長四康。 經(jīng)常有香客問我狭握,道長,這世上最難降的妖魔是什么哥牍? 我笑而不...
    開封第一講書人閱讀 60,135評論 1 300
  • 正文 為了忘掉前任嗅辣,我火速辦了婚禮,結(jié)果婚禮上澡谭,老公的妹妹穿的比我還像新娘损俭。我一直安慰自己潘酗,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 69,130評論 6 398
  • 文/花漫 我一把揭開白布琐脏。 她就那樣靜靜地躺著缸兔,像睡著了一般。 火紅的嫁衣襯著肌膚如雪惰蜜。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,736評論 1 312
  • 那天格侯,我揣著相機與錄音财著,去河邊找鬼。 笑死撑教,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播廉嚼,決...
    沈念sama閱讀 41,179評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼怠噪,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了傍念?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,124評論 0 277
  • 序言:老撾萬榮一對情侶失蹤双藕,失蹤者是張志新(化名)和其女友劉穎阳仔,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,657評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡延蟹,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,723評論 3 342
  • 正文 我和宋清朗相戀三年阱飘,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片沥匈。...
    茶點故事閱讀 40,872評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡上枕,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出棋恼,到底是詐尸還是另有隱情,我是刑警寧澤爪飘,帶...
    沈念sama閱讀 36,533評論 5 351
  • 正文 年R本政府宣布拉背,位于F島的核電站,受9級特大地震影響妇智,放射性物質(zhì)發(fā)生泄漏婶熬。R本人自食惡果不足惜床估,卻給世界環(huán)境...
    茶點故事閱讀 42,213評論 3 336
  • 文/蒙蒙 一诱渤、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧递胧,春花似錦赡茸、人聲如沸缎脾。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽舷蒲。三九已至,卻和暖如春牲平,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背蜈抓。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評論 1 274
  • 我被黑心中介騙來泰國打工昂儒, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人渊跋。 一個月前我還...
    沈念sama閱讀 49,304評論 3 379
  • 正文 我出身青樓拾酝,卻偏偏與公主長得像燕少,于是被迫代替她去往敵國和親蒿囤。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,876評論 2 361

推薦閱讀更多精彩內(nèi)容