bootstrap4.0 css架构

solocoder 发布于2019-08-30 15:53 / 3515人阅读

摘要：原子性的默认变量一般是用来设置默认值，然后根据需求来覆盖的。语义化的变量名，值为直接的属性值。组件文件互不引用。组合有几个入口文件对组件进行按顺序的引入，形成不同的专用，形成完整可用的样式，注意引用顺序。

原子性

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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