bootstrap4.0 css架構

solocoder 發布于2019-08-30 15:53 / 3517人閱讀

摘要：原子性的默認變量一般是用來設置默認值，然后根據需求來覆蓋的。語義化的變量名，值為直接的屬性值。組件文件互不引用。組合有幾個入口文件對組件進行按順序的引入，形成不同的專用，形成完整可用的樣式，注意引用順序。

原子性

sass的默認變量一般是用來設置默認值，然后根據需求來覆蓋的。
覆蓋的方式也很簡單，只需要在默認變量之前重新聲明下變量即可

存放變量的文件。語義化的變量名，值為直接的屬性值。
// Table of Contents..variables.scss
//
//  1. Colors
//  2. Options
//  3. Spacing
//  4. Body
//  5. Links
//  6. Grid breakpoints
//  7. Grid containers
//  8. Grid columns
//  9. Fonts
// 10. Components
// 11. Tables
// 12. Buttons
// 13. Forms
// 14. Dropdowns
// 15. Z-index master list
// 16. Navbar
// 17. Navs
// 18. Pagination
// 19. Jumbotron
// 20. Form states and alerts
// 21. Cards
// 22. Tooltips
// 23. Popovers
// 24. Tags
// 25. Modals
// 26. Alerts
// 27. Progress bars
// 28. List group
// 29. Image thumbnails
// 30. Figures
// 31. Breadcrumbs
// 32. Media objects
// 33. Carousel
// 34. Close
// 35. Code


$gray-dark:                 #292b2c !default;
$gray:                      #464a4c !default;

組件性

不同組件的scss獨立出來。比如在_alert.scss中的.alert類中用到.variables.scss定義的對應變量。組件文件互不引用。入門文件統一管理。

_alert.scss
_animation.scss
_badge.scss

.alert {
  padding: $alert-padding-y $alert-padding-x;
  margin-bottom: $alert-margin-bottom;
  border: $alert-border-width solid transparent;
  @include border-radius($alert-border-radius);
}

組合

有幾個入口文件對組件進行按順序的引入，形成不同的專用，形成完整可用的樣式，注意引用順序。

bootstrap.scss

Core variables and mixins

custom（自定義覆蓋默認變量值）

variables

mixins

Reset and dependencies

Core CSS

Components

Components w/ JavaScript

Utility classes

bootstrap.scss
bootstrap-flex.scss
bootstrap-grid.scss
bootstrap-reboot.scss



-----bootstrap.scss
// Core variables and mixins
@import "custom";
@import "variables";
@import "mixins";

// Reset and dependencies
@import "normalize";
@import "print";

// Core CSS
@import "reboot";
@import "type";
@import "images";
@import "code";
@import "grid";
@import "tables";
@import "forms";
@import "buttons";

// Components
@import "animation";
@import "dropdown";
@import "button-group";
@import "input-group";
@import "custom-forms";
@import "nav";
@import "navbar";
@import "card";
@import "breadcrumb";
@import "pagination";
@import "badge";
@import "jumbotron";
@import "alert";
@import "progress";
@import "media";
@import "list-group";
@import "responsive-embed";
@import "close";

// Components w/ JavaScript
@import "modal";
@import "tooltip";
@import "popover";
@import "carousel";

// Utility classes
@import "utilities";

自定義變量

_custom.scss，是一個專門用來覆蓋默認變量值的文件。編譯后則是自定義出來的值。

// Copy variables from `_variables.scss` to this file to override default values
// without modifying source files.

$gray-dark:                 #cccccc;
$gray:                      #eeeeee;

工具類

最后引入的工具類，用到了前面引入的mixins

GPU云服務器云服務器 css引入css css _CSS css88

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116608.html

基于angular4+ng-bootstrap+bootstrap+scss的后臺管理系統界面

摘要：描述在剛才發布的不久，很多人不懂得怎么應用，直到現在也很多人不懂怎么用，于是我在余業時間做了這么一個后臺管理系統頁面，希望對大家有幫助從我個人的感覺來說，語法很舒服，上手起來也比較快可能是因為我有方面的經驗吧，但同這些的思想有所不同，初學者描述在angular2剛才發布的不久，很多人不懂得怎么應用，直到現在也很多人不懂怎么用，于是我在余業時間做了這么一個后臺管理系統頁面，希望對大...

spacewander 2019-08-30 13:45 評論0 收藏0
基于angular4+ng-bootstrap+bootstrap+scss的后臺管理系統界面

摘要：描述在剛才發布的不久，很多人不懂得怎么應用，直到現在也很多人不懂怎么用，于是我在余業時間做了這么一個后臺管理系統頁面，希望對大家有幫助從我個人的感覺來說，語法很舒服，上手起來也比較快可能是因為我有方面的經驗吧，但同這些的思想有所不同，初學者描述在angular2剛才發布的不久，很多人不懂得怎么應用，直到現在也很多人不懂怎么用，于是我在余業時間做了這么一個后臺管理系統頁面，希望對大...

Muninn 2019-08-01 17:47 評論0 收藏0
基于angular4+ng-bootstrap+bootstrap+scss的后臺管理系統界面

摘要：描述在剛才發布的不久，很多人不懂得怎么應用，直到現在也很多人不懂怎么用，于是我在余業時間做了這么一個后臺管理系統頁面，希望對大家有幫助從我個人的感覺來說，語法很舒服，上手起來也比較快可能是因為我有方面的經驗吧，但同這些的思想有所不同，初學者描述在angular2剛才發布的不久，很多人不懂得怎么應用，直到現在也很多人不懂怎么用，于是我在余業時間做了這么一個后臺管理系統頁面，希望對大...

Yu_Huang 2019-08-21 17:02 評論0 收藏0
響應式設計個人的一些總結

摘要：所以一個網，甚至是響應式設計，在兩個平臺上都會損害您整體的。三響應式與如果把網站作為一個單獨的網站，如果網站的內容與桌面版的內容相對缺少，導致用戶回到桌面端的網站，會記錄這種選擇，使搜索排名降低，國內百度就不知道會怎樣。一、為什么需要響應式設計（responsible web design） 1. 響應式發展背景 1、屏幕尺寸的快速變化，iphone為320x480，分辨率在未來可以...

LeoHsiun 2019-08-01 15:32 評論0 收藏0