天天看点

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

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

如果我们要快速地实现一些东西,或者只是稍微修改一下bootstrap,那么添加自己的样式表就已经足够了。如果要对bootstrap进行较大的定制,就必须使用未编译的bootstrap源代码。bootstrap的css源代码是用less编写的,使用了一些变量和mixin,使得我们可以轻松地实现定制。

less是一个开源的css预处理程序,具有非常优良的特性,可以提升我们的开发速度。less使得我们的工作变得高效率和模块化,可以更加轻松地对项目中的css样式进行维护。

在less中使用变量的好处很多,我们可以多次重用相同的代码,从而实现一次编写,随处使用。这些变量还可以进行全局声明,这样就可以在一个专门的地方指定变量的值。如果这些值需要改变的话,只要更新一次就行了。

less变量还允许我们在一个单独的文件中指定一些被广泛使用的值,比如颜色、字体系列和大小等。所以,我们只要修改一个单独的变量,它的变化将在所有使用到该变量的bootstrap组件上反映出来。例如,如果我们要将body元素的背景色修改为绿色(绿色的十六进制值是#00ff00),只要对bootstrap中一个名为@body-bg的变量值进行修改就可以了,代码如下:

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

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

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

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