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

原创
2016/05/21 17:20
阅读数 1.2K

一、定制Bootstrap

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

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

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

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

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

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

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

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

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

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

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

image

定制好你的变量后点击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,这里就不在冗述了。

3.3 如何编译和使用

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

 

XX、参考&引用

展开阅读全文
打赏
2
2 收藏
分享
加载中
更多评论
打赏
0 评论
2 收藏
2
分享
返回顶部
顶部