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

資訊專欄INFORMATION COLUMN

使用SCSS擴(kuò)展Bootstrap4

Vultr / 2873人閱讀

摘要：對(duì)于非前后端分離應(yīng)用來說，應(yīng)該是目前的最佳前端框架之一了。所以下文中默認(rèn)使用的語(yǔ)法?？梢允褂玫慕M件特性，來擴(kuò)展，這樣會(huì)在編輯的源碼，更加的有結(jié)構(gòu)引用引用編譯自定義源碼編譯自定義源碼參考參考

摘要

因?yàn)榇蛩銓懸粋€(gè)小網(wǎng)站，而個(gè)人時(shí)間又不是那么充裕，所以沒有選擇前后端分離的架構(gòu)。

對(duì)于非前后端分離應(yīng)用來說，Bootstrap應(yīng)該是目前的最佳前端框架之一了。

而Bootstrap4，是Bootstrap的最新版本，其更新內(nèi)容中，有關(guān)自定義擴(kuò)展的支持，相對(duì)來說要比以前方便很多。

注：SCSS與SASS本質(zhì)上是一樣的，只不過在語(yǔ)法層面上來說，SCSS相對(duì)更加貼近SASS。所以下文中默認(rèn)使用SCSS的語(yǔ)法。

準(zhǔn)備

安裝環(huán)境

  • 安裝npm
  • 安裝SASS

下載源碼

npm install bootstrap

Tips:

  • 不要執(zhí)行npm install bootstrap4，必須是bootstrap

目錄結(jié)構(gòu)

  • 必須保持下面的目錄結(jié)構(gòu)
your-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

擴(kuò)展

  • 使用SASS編譯完成自定義的擴(kuò)展代碼后，會(huì)將原bootstrap也打包在一起，然后只要引入這一個(gè)文件就可以了。
  • 可以使用SASS的組件特性，來擴(kuò)展bootstrap，這樣會(huì)在編輯的源碼，更加的有結(jié)構(gòu)

引用Bootstrap

@import "node_modules/bootstrap/scss/bootstrap";

編譯自定義源碼

sass

參考

  • Theming Bootstrap
  • SASS

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

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

相關(guān)文章

  • bootstrap4.0 css架構(gòu)

    摘要：原子性的默認(rèn)變量一般是用來設(shè)置默認(rèn)值，然后根據(jù)需求來覆蓋的。語(yǔ)義化的變量名，值為直接的屬性值。組件文件互不引用。組合有幾個(gè)入口文件對(duì)組件進(jìn)行按順序的引入，形成不同的專用，形成完整可用的樣式，注意引用順序。 原子性 sass的默認(rèn)變量一般是用來設(shè)置默認(rèn)值，然后根據(jù)需求來覆蓋的。覆蓋的方式也很簡(jiǎn)單，只需要在默認(rèn)變量之前重新聲明下變量即可 存放變量的文件。語(yǔ)義化的變量名，值為直接的屬性值。 ...

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

  • 挑逗Bootstrap4源代碼 - Grid篇（下）

    摘要：在這里面有一個(gè)新定義的類，它這個(gè)嵌入式展開后是，從結(jié)構(gòu)可以看出來，它就是加在元素上的，可以取消列的默認(rèn)間距。在這里我提供一個(gè)自定義的，名字也很簡(jiǎn)單。寫的時(shí)候注意順序，要按照升序排列，小的放在上面，即在上面，寫反了將失效。 本文所引用的版本為Bootstrap 4 Beta版，閱讀者請(qǐng)先下載好相關(guān)源文件。 時(shí)光荏苒，若后續(xù)版本代碼發(fā)生變化，將看心情進(jìn)行更新補(bǔ)充。如果你覺得本文不錯(cuò)，歡迎...

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

  • 挑逗Bootstrap4源代碼 - Grid篇（上）

    摘要：候補(bǔ)，分別代表兩種寬度之間和僅在一種寬度下的情形。這里是一個(gè)很重要的變化，大家可以注意到，這里的變成了，這也是主要的改進(jìn)之一，這個(gè)基礎(chǔ)構(gòu)建的變化意味著整個(gè)框架在很大程度上都會(huì)建立在的基礎(chǔ)上滾蛋吧。 本文所引用的版本為Bootstrap 4 Beta版，閱讀者請(qǐng)先下載好相關(guān)源文件。 時(shí)光荏苒，若后續(xù)版本代碼發(fā)生變化，將看心情進(jìn)行更新補(bǔ)充。如果你覺得本文不錯(cuò)，歡迎評(píng)論支持，如需轉(zhuǎn)載請(qǐng)標(biāo)明...

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

  • bootstrap4源碼閱讀體會(huì)

    摘要：通過閱讀發(fā)現(xiàn)了不少知識(shí)的盲點(diǎn)和誤解，對(duì)有了更深入的理解?？偨Y(jié)幾點(diǎn)印象較深的體會(huì)，分享給大家。但是通過閱讀源碼改變了這種認(rèn)識(shí)模塊化很簡(jiǎn)單靈活，這是其優(yōu)點(diǎn)，同時(shí)也是一個(gè)缺點(diǎn)。 歡迎到個(gè)人博客參觀: 點(diǎn)擊這里 bootstrap已經(jīng)使用了很長(zhǎng)時(shí)間，但是從來沒有好好研究過其設(shè)計(jì)結(jié)構(gòu)，春節(jié)期間閑來無事就閱讀了源碼。通過閱讀發(fā)現(xiàn)了不少知識(shí)的盲點(diǎn)和誤解，對(duì)css有了更深入的理解?？偨Y(jié)幾點(diǎn)印象較深的體...

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

  • Mac系統(tǒng)使用VS Code編譯Bootstrap 4

    摘要：使用，已改為使用，所以首先解決編譯問題。編譯與無關(guān)，需要在系統(tǒng)中安裝編譯環(huán)境。使用編譯源碼結(jié)構(gòu)簡(jiǎn)單分析源碼，其中文件夾包含了所有樣式文件源碼，部件和工具都是單獨(dú)的文件，很清晰?？梢钥吹矫钜殉晒\(yùn)行，及文件已經(jīng)生成。 環(huán)境： macOS 10.13.6 node.js 8.11.3 sass 1.10.3 bootstrap 4.1.3 vs code 1.25.1 ...

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

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

0條評(píng)論

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