杭州网站建设
本内容完全由佚站互联成员原创并且免费提供交流学习,如有转载,请注明出处。

在了解过Bootstrap的基本知识之后,我们就要开始真正在项目中运用Bootstrap了,首先来看看你属于以下哪一类使用Bootstrap的人:

1、你只是为了尝试采用Bootstrap内置的样式以及组件来构建自己的项目,并不想对Bootstrap的框架核心进行修改和定制。
2、你并不满足于使用官方的Bootstrap,而是想要用自己的能力来定制Bootstrap

两者区别

如果你属于第一类人,那么毫无疑问,你需要引入经过压缩的CSS以及JS文件,因为你不需要对它们的核心代码进行修改,经过压缩的文件能够大大提升网站加载速度。
如果你属于第二类人,那么你最好是引入未经压缩的CSS以及JS文件,以保证在定制的过程中能够方便直观地阅读Bootstrap核心代码。
 

如何定制自己的Bootstrap

在定制之前,我们强烈推荐你新建自己的定制CSS以及JS文件(例如custom.css和custom.js),这样即使将来升级了Bootstrap版本,也不需要一一修改。
对于Bootstrap的定制,我们分为两类,第一类是样式定制,第二类是交互定制。
样式定制主要针对CSS文件,比如button、alert、form等等。
例如Bootstrap自带的按钮样式.btn-danger,它包含了active、hover等样式,如果你想要定制自己的.btn样式,可以直接拷贝对应的Bootstrap样式到自己的custom.css文件中,再进行定制即可。
当然,有任何自己想要添加的样式也可以直接写入custom.css,注意需要在bootstrap.css之后引入custom.css,以保证你自定义样式覆盖原有样式。
交互定制主要针对JS文件,最为典型的就是modal组件以及alert组件等。
根据我们的经验来看,除非你已经很熟悉JS的使用方式,最好不要随意改动Bootstrap核心JS文件。
 

去除自己用不到的Bootstrap代码

基于Bootstrap自身的庞大,所以必然有些代码你是用不到的,如果你是一个崇尚精简的人,那么就可以直接在Bootstrap定制页面来选择自己想要引入的代码,删除没用的代码。
 

关于LESS

我们鼓励前端开发者采用LESS来进行自己的样式开发,因为它的易用性可以大大提高你的编码效率。
除此之外,你会突然发现,CSS编码原来也可以是一件高大上的事情。 

佚站互联 YEAHZAN,杭州网站建设 创新团队。本文版权所有,转载时请注明出处。

对此文章有疑问?可以留言提问,或者通过 在线联系 我们来获得帮助。