文档章节

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

dhb_oschina
 dhb_oschina
发布于 2016/05/21 17:20
字数 1251
阅读 333
收藏 2

一、定制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、参考&引用

© 著作权归作者所有

dhb_oschina
粉丝 10
博文 221
码字总数 190651
作品 0
程序员
私信 提问
Sass和LESS-动态CSS技术

一、简介 二、Sass/Scss的使用 变量 注释 中注释的作用包括帮助你组织样式、以后你看自己的代码时明白为什么这样写,以及简单的样式说明。但是,你也并不希望每个浏览网站源码的人都能看到所...

dhb_oschina
2016/05/17
117
0
Bootstrap中的段落和强调内容

段落是排版中另一个重要元素之一。在Bootstrap中为文本设置了一个全局的文本样式(这里所说的文本是指正文文本): 1、全局文本字号为14px(font-size)。 2、行高为1.42857143(line-height)...

9秒教育
2015/12/04
152
0
5 个不用 Bootstrap 的理由

在以前我们的博客文章中,我们讨论了在web设计和开发项目中使用Twitter Bootstrap的好处。 Twitter Bootstrap也有很多的缺点。让我们看看这些主要的问题: 1,它不遵循最佳实践 我们在使用T...

William
2014/04/20
24.5K
81
Extjs学习(5):Extjs主题

需求准备 SenchaCmd 6+ ; Java JRE 1.7+;(可选,但是建议) Extjs 2. 创建工作空间:workspace(可选) $ sencha -sdk /home/jalenchu/Jalenchu/Tools/extjs/EXTJS/ext-6.0.0 generate w......

储明城
2016/02/19
260
0
【AngularJs学习笔记五】AngularJS从构建项目开始

AngularJs学习笔记 【AngularJs学习笔记一】Bower解决js的依赖管理 【AngularJs学习笔记二】Yeoman自动构建js项目 【AngularJs学习笔记三】Grunt任务管理器 【AngularJs学习笔记四】Grunt +...

陶邦仁
2016/01/26
404
0

没有更多内容

加载失败,请刷新页面

加载更多

大数据最核心的关键技术——32个算法,记得收藏!

奥地利符号计算研究所的Christoph Koutschan博士在自己的页面上发布了一篇文章,提到他做了一个调查,参与者大多数是计算机科学家,他请这些科学家投票选出最重要的算法,以下是这次调查的结...

大数据金罗
9分钟前
3
0
spring boot The server time zone value 'PDT' is unrecognized or represents more than one time zone.

spring boot启动项目时,发现数据库抛如下错误 Caused by: com.mysql.cj.exceptions.InvalidConnectionAttributeException: The server time zone value 'PDT' is unrecognized or represen......

huangkejie
29分钟前
1
0
正则表达式匹配

请实现一个函数用来匹配包括 '.' 和 '*' 的正则表达式。模式中的字符 '.' 表示任意一个字符,而 '*' 表示它前面的字符可以出现任意次(包含 0 次)。 在本题中,匹配是指字符串的所有字符匹配...

Garphy
今天
7
0
Laravel 5.1的多路由文件的配置

默认的路由配置文件只有一个, \app\Http\routes.php。 在同一个文件中写路由容易起冲突,文件会越来越大,就需要定义多个路由文件。 找到加载\app\Http\routes.php的文件, 打开\app\Provid...

mdoo
今天
5
0
Hibernate 5 开始使用指南前言

同时在面向对象软件和关系型数据库进行工作,可能会非常复杂和费时。数据在对象和数据库之间可能会不一致,然后导致开发成本会非常高。 Hibernate 是一个针对 Java 环境的对象关系映射(Obj...

honeymoose
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部