通过LESS/Sass自定义Bootstrap的式样

最新推荐文章于 2022-04-27 14:28:07 发布

weixin_34234721

最新推荐文章于 2022-04-27 14:28:07 发布

阅读量519

点赞数

文章标签： javascript python 前端 ViewUI

原文链接：https://my.oschina.net/u/658505/blog/679126

版权

2019独角兽企业重金招聘Python工程师标准>>>

一、定制Bootstrap

在实际前端UI开发中，对Bootstrap的式样进行自定义是必要的。

定制Boostrap的式样的方法通常有如下几种：

覆盖原有的bootstrap式样
通过构建器，对bootstrap中的式样变量自定义。
通过bootstrap less深度定制式样。

下面我们就来分析上面的三种方法各自的优缺点。

方法一、覆盖原有的bootstrap式样

这里的“覆盖”是CSS层叠式样的覆盖的意思，具体方法是将我们的my-custom.css文件引用放到bootstrap.css文件的后面，这样我们定义的样式就会覆盖原有的样式。

优点：方便，不会变更原来的工作流程。

缺点：很明显，会导致式样不一致和臃肿，以及降低了CSS式样的可维护性。

很显然，这种方法的缺点非常明显，可以在非正式场合如测试环境中使用，但是在正式开发环境中是不应该使用。

方法二、使用构建器自定义bootstrap的式样变量

使用官网的定制页面 http://v3.bootcss.com/customize/ 可以自定义bootstrap的式样。

定制好你的变量后点击download按钮就会生成一套属于你的bootstrap框架了。

这种方法：

优点：简便了你对整体网站式样的更改。

缺点：项目网站的式样必定是不断变更的，这意味着你需要不断的根据你的式样重新构建bootstrap框架，不然就会重走方法一的老路。

方法三、通过bootstrap less深度定制自己的式样

Bootstrap3.0的式样是通过LESS——CSS预处理语言来实现的，当然目前Bootstrap也有了 Bootstrap 从 Less 到 Sass 的源码移植项目并且Boostrap4.0开始官网已经从Less迁移到Sass了，因此还是建议直接入手Sass。CSS预处理语言LESS/SCSS，写法类似CSS但是相比于CSS，提供了变量、函数、运算和选择器嵌套等语言特性。通过编译我们的LESS/SCSS文件，就可以动态生成CSS式样。

优点：定制的变化与原有库代码很好的隔离，却又不失可维护性。并且通过Grunt等JavaScript构建工具还可以动态编译LESS/SCSS文件。

缺点：需要一定的学习成本。

二、Bootstrap Less

关于Booststrp less的介绍参考Bootstrap less官方中文文档。

2.1 bootstrap less 目录结构

在Bootstrap官网Github项目上，通过查看Less文件夹bootstrap/less 可以发现一系列的.less后缀结尾的文件。

首先，找到4个关键的文件，分别是：

其中，bootstrap.less是bootstrap的主文件，包括所有的.less组件式样，通过LESS编译该文件后，就生成我们自己的bootstrap.css文件。

variable.less是变量定义文件，上述官网的定制页面 http://v3.bootcss.com/customize/中修改的其实就是这里定义的变量内容。

utilities.less是实用工具文件，包括通用的清除浮动.clearfix、左浮动和右浮动等式样。

最后，便是mixins 文件夹了，mixins文件中定义了各种组件的中式样的"基类"或者是通用的规则定义，bootstrap/less/mixins/labels.less 文件中定义的label-variant(@color)，就被上一级目录的同名文件中的bootstrap/less/labels.less所引用。

2.2 如何编译和使用

安装和使用LESS环境很简单，参考文档http://www.bootcss.com/p/lesscss/#guide 。

不过，在正式的开发环境中，通常的做法是结合Grunt工具进行自动构建。

http://www.w3cplus.com/preprocessor/nodejs-and-grunt-compile-sass-to-css.html

三、Bootstrap Sass

3.1 Bootstrap Sass

Bootstrap2和Bootstrap3都是用Less来编译的CSS，但是从Bootstrap4开始，官方也已经从Lass迁移到Sass了。Sass的出现要比LESS早，虽然LESS发展迅猛且上手迅速，但是Sass也在快速跟进，并且因为相比于LESS，Sass已经是一个成熟的框架，提供了更多的功能以及更全面又规范的文档。因此，虽然Sass的学习曲线比LESS更陡一些，还是建议使用Sass作为CSS的预编译语言。

关于Sass的介绍，参考Sass和Less-CSS预处理语言

3.2 Bootstrap 3 Sass目录结构

通过查看Github上的Bootstrap 从 Less 到 Sass 的源码移植项目的目录，Boostrap 3 Sass的相关式样文件放置在bootstrap-sass/assets/ 目录下：

assets
 ├fonts/bootstrap/              ==> glyphicons
 ├images/                       ==> image folder   
 ├javascripts/                  ==> Javascript folder
 └stylesheets/                  ==> .scss files folder

其中，关于bootstrap的式样文件.scss就存放在bootstrap-sass/assets/stylesheets/ 目录下。

接下来的结构就和Bootstrap Less一致了，4个关键的文件，分别是：

顾名思义，参考2.1，这里就不在冗述了。