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

简介:

本节书摘来自华章出版社《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可以让元素自动地清除它后面的东西, 这样就不需要添加额外的标记。它通常只是在浮动布局中使用,在这种布局中元素将会被水平浮动堆放。

相关文章
|
6月前
|
前端开发 JavaScript
Web前端之移动端课程开发之06.bootstrap
Web前端之移动端课程开发之06.bootstrap
73 0
|
存储 前端开发 JavaScript
|
21天前
|
JSON 缓存 前端开发
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
29 3
|
2月前
|
JSON 缓存 前端开发
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
27 2
|
4月前
|
开发框架 前端开发 JavaScript
在Bootstrap开发框架基础上增加WebApi+Vue&Element的前端
在Bootstrap开发框架基础上增加WebApi+Vue&Element的前端
|
3月前
|
存储 JavaScript 前端开发
【Vue.js的神秘力量】一键解锁:如何让Bootstrap和Vuex成为你的开发超能力?
【8月更文挑战第30天】Vue.js是一个轻量且灵活的JavaScript框架,易于上手且功能强大。为提高开发效率和应用交互性,常需集成第三方库。本文介绍如何在Vue.js项目中集成Bootstrap和Vuex,及其它常见第三方库。Bootstrap提供响应式设计和预制组件,通过安装插件和引入CSS/JS即可集成;Vuex作为官方状态管理库,通过安装并创建store来管理组件状态。此外,Vue.js还可轻松集成Axios和Vue Router等库,提升HTTP请求和页面路由功能。合理选择和集成第三方库能显著提升开发效率,但需保持代码可维护性和可读性。
33 0
|
4月前
|
开发框架 前端开发 JavaScript
循序渐进BootstrapVue,开发公司门户网站(1)---基于Bootstrap网站模板构建组件界面
循序渐进BootstrapVue,开发公司门户网站(1)---基于Bootstrap网站模板构建组件界面
|
6月前
|
编解码 前端开发 JavaScript
BootStrap 响应式布局技术教程简介
BootStrap 响应式布局技术教程简介
139 1
|
前端开发 开发者 容器
Bootstrap- 响应式工具|学习笔记
快速学习 Bootstrap- 响应式工具
145 0
Bootstrap- 响应式工具|学习笔记
|
前端开发 JavaScript
Javascript知识【BootStrap技术实现商品页面】(下)
Javascript知识【BootStrap技术实现商品页面】
下一篇
无影云桌面