《Bootstrap开发精解:原理、技术、工具及最佳实践》一2.5 Bootstrap的深度定制

  1. 云栖社区>
  2. 华章计算机>
  3. 博客>
  4. 正文

《Bootstrap开发精解:原理、技术、工具及最佳实践》一2.5 Bootstrap的深度定制

华章计算机 2017-05-02 14:04:00 浏览1158

本节书摘来自华章出版社《Bootstrap开发精解:原理、技术、工具及最佳实践》一书中的第2章,第2.5节,作者[美] 亚拉文·谢诺伊(Aravind Shenoy)乌尔里希·索松(Ulrich Sossou),更多章节内容可以访问云栖社区“华章计算机”公众号查看

2.5 Bootstrap的深度定制

如果我们要快速地实现一些东西,或者只是稍微修改一下Bootstrap,那么添加自己的样式表就已经足够了。如果要对Bootstrap进行较大的定制,就必须使用未编译的Bootstrap源代码。Bootstrap的CSS源代码是用LESS编写的,使用了一些变量和mixin,使得我们可以轻松地实现定制。
LESS是一个开源的CSS预处理程序,具有非常优良的特性,可以提升我们的开发速度。LESS使得我们的工作变得高效率和模块化,可以更加轻松地对项目中的CSS样式进行维护。
在LESS中使用变量的好处很多,我们可以多次重用相同的代码,从而实现一次编写,随处使用。这些变量还可以进行全局声明,这样就可以在一个专门的地方指定变量的值。如果这些值需要改变的话,只要更新一次就行了。
LESS变量还允许我们在一个单独的文件中指定一些被广泛使用的值,比如颜色、字体系列和大小等。所以,我们只要修改一个单独的变量,它的变化将在所有使用到该变量的Bootstrap组件上反映出来。例如,如果我们要将body元素的背景色修改为绿色(绿色的十六进制值是#00FF00),只要对Bootstrap中一个名为@body-bg的变量值进行修改就可以了,代码如下:
image

mixin的作用与变量类似,但它针对的是整个类。mixin允许我们将一个类的属性嵌入到另一个类中,使得我们可以将多行代码一起放在一个组中,从而可以在整个样式表中多次使用。mixin也可以搭配变量和函数一起使用,从而实现多重继承。例如,如果我们要为一篇文章添加clearfix,可以使用表2-1左列显示的.clearfix mixin,它相当于表2-1右列中显示的已编译CSS代码中包含的所有clearfix声明。
image

clearfix mixin可以让元素自动地清除它后面的东西, 这样就不需要添加额外的标记。它通常只是在浮动布局中使用,在这种布局中元素将会被水平浮动堆放。