由浅入深 定制Bootstrap开发自己网站的六种方法

对于Bootstrap这个CSS框架,很多程序员持鄙视的态度,就如鄙视jQuery一般。诚然,就算不用这个框架,而是纯手写,或者借助JS框架的模板,一样可以写出一套页面,至于页面的精良程度、是否可二次开发、是否主流浏览器全兼容、是否可复用、可扩展、那就看开发者的个人能力了——如果一些人拿着公司的高额薪水或者甲方的高额酬金,却干着一锤子的买卖,代码不可复用,不可扩展,不可二次开发,浏览器不全兼容,他只是非常快速的胡七八凑了一套页面,应付到上线,然后潇洒的鄙视一下Bootstrap,我只能对这种人说俩字:呵呵。

言归正传,定制Bootstrap的方法,从简单到复杂,大致有下面这么几种,前几种方法虽然简单,但有时候其实够用了。另外,本文涉及的Bootstrap版本其实有点乱,因为v4版在Alpha阶段,本文涉及的官网页面都是v3的,所以,凡是说源代码的场合,都是在讲v4,凡是说官网页面,都是针对v3,因为我相信v4会在2016年内或者2017年年第一季度正式发布,这时候本文读起来才是正常的。现在凑合看吧。

一、从官网抄代码

直接从官网文档抄代码片段,需要什么组件就copy什么组件的代码,然后稍微修改一下HTML就完工。做出来的页面,大约只是DEMO级的,或者是企业主页站级的。

二、利用官网给组件做减法定制

这里假设你不懂Sass,所以你只能利用官网的Customize and download功能定制Bootstrap。这里定制又分成两种:给组件做减法定制,和修改变量定制。

先说给组件做减法定制,就是给Common CSS、Components、JavaScript components以及jQuery plugins做减法,页面下方的变量一律保持默认。这种定制要求你清楚这些可定制项各自代表的涵义,这种定制的意义在于减小CSS文件和JS文件的字节数。

再说修改变量定制,这其实还是需要你学习Sass才能看得懂这些变量的值。然而,你如果已经掌握Sass,反而不用在官网页面修改变量,因为非常的低效,你只需看本文第五节。

三、套用网上优秀模板

直接套用互联网上的优秀模板。当你暂时没有自己制作模板的能力的时候,上网寻找优秀的模板是一个好主意,GitHub、Google上搜索Bootstrap template有很多精品,down下来之后,把区块、组件挪挪位置搬搬家,就成了为自己所用的新页面。

四、另创建CSS文件覆盖Bootstrap或模板的CSS声明

这种定制方式就是按部就班加载Bootstrap或模板的相关文件之后,再加载你的另写的CSS文件,这种开发方式已经可以满足架构简单的网站的开发了,甚至在你掌握了Sass之后,你依然可以仍采用这种方式开发网站,只不过明显的缺陷就是另写的CSS文件产生了更多的HTTP请求,以及更多的文件加载,当然不是大型网站应该采用的方式。

五、利用Sass删减组件以及修改变量值

使用Sass以及使用构建工具Grunt的教程,请另参考我的以构建Bootstrap v4为例练习使用Grunt,这里假设你熟练掌握了Sass和Grunt,所以我只说删减组件和修改变量值的过程。

1、利用Sass删减组件
  • 删减各种CSS组件:scss\bootstrap.scss文件是Bootstrap的主文件,将希望删减的组件用//注释掉即可。
  • 删减CSS组件配套的JS组件、删减jQuery组件:官方推荐的是用Grunt来合并所有JS组件,当然前提是你需要学习掌握Grunt。如果你并不想学习Grunt,那么利用官网定制页面来定制也是可以的。

2、利用Sass修改变量

1、我可以修改哪些变量?

借助官网的Customize and download我们可以清晰的看到我们能修改哪些变量。或者打开scss\_variables.scss也可以看到所有的变量。

2、根据变量名,我如何弄清变量指代的CSS属性值?

方法一,从字面猜。没错,由于变量名并不对应具体的类名或者元素名,而是比类名或者元素名更具体,所以猜是一个好主意,比如@font-size-h6是什么意思?猜的话肯定是h6元素的字体大小,事实上也是这样。接着看,@font-size-h6的默认值是ceil((@font-size-base * 0.85)),也就是@font-size-base的值(14px)乘以0.85,得到11.9px,再经过ceil运算,也就是向上取整计算,得到12px。假设你的项目中的h6元素的字体大小想改成跟@font-size-base的值(14px)一样,那么就改成@font-size-base就算定制完了。

方法二,从Bootstrap源文件的customize.min.js文件里查找变量名。比如@breadcrumb-padding-vertical,假设你看不懂它代表的属性值,那么可以在customize.min.js文件里查找一下,然后可以找到两处,第一处是.breadcrumb {padding: @breadcrumb-padding-vertical @breadcrumb-padding-horizontal;},第二处是@breadcrumb-padding-vertical: 8px;,可见,@breadcrumb-padding-vertical表示的就是.breadcrumb元素的上下内间距,默认值为8px。改成你希望的值就算定制成功。

3、怎么利用Sass重置变量:

Bootstrap官方给的方案是修改scss\_custom.scss,看看官方的注释:

Bootstrap overrides Copy variables from _variables.scss to this file to override default values without modifying source files.

所以,从_variables.scss文件拷贝所有内容到本文件内,然后就可以复写变量的默认值了。

当变量修改OK了,利用Grunt就可以生成生产环境需要的css和js文件了。

六、自己写模板

Bootstrap使用者的终极形态:能够自己写模板。

很多人看不起Bootstrap的主要原因,就是用bs做出来的页面一眼就能看出是利用bs制作的,所以,你需要达到的能力就是让人看不出这是一套Bootstrap模板。

从优秀的模板文件我们可以看出,模板项目可以分为下面几个文件夹,我的举例仅供参考,并不是标准。

boostrap - 存放bs源文件,其中dist文件夹内的文件就是你先定制、后编译后的css和js文件,当然你也可以选择不定制,而是另写CSS文件覆盖bs的声明,虽然会加大几K的体积,但更好维护,而且几K的体积增加并不是大问题。 pages - 你的模板html,按页面名称分文件。 js - 你的模板js文件,按模块分文件,可以有一个common文件夹放公共文件。 css - 你的模板css文件,按模块分文件,可以有一个common文件夹放公共文件。 img - 你的模板涉及的图片,按模块分子文件夹,可以有一个common文件夹放公共文件。 plugins - 存放第三方插件、组件的文件夹,内部按插件名、组件名给文件夹命名。

强调一下关于css的定制,从上文可以看到,定制分为两个部分,一部分是修改bs自身的css变量值,另一部分是写模板专用的css。从实践来看,这两种修改不要同时进行,可以先只写模板专用的css,等做出一两个页面,形成了自己模板统一的合理的风格之后,再总结出对bs的css变量的修改,然后再去改bs的css变量。

css类的命名,尽量按照BEM规范命名。

bs的js组件方面,尽量不要修改bs自身的js组件,只需要补充bs没有的js组件,比如更华丽的焦点图效果、更漂亮的手风琴效果,等等。如果你认为一些bs的官方js组件确实很不好用或是很丑,那么也没必要加工它,而是可以直接另写一个,官方的该组件就直接减掉即可。

我们自己写模板可以从制作首页开始,首页从制作顶部导航开始,做出一个让人无法看出这是用Bootstrap制作的导航,接下来可以是制作BANNER模块,以及BANNER下方的导航模块,然后是正文第一屏、第二屏,直到页脚模块。

比如首页我们命名为index.html,顶部导航用header元素,然后内部逐级构建代码。接着是nav元素,然后是#wrap元素,然后是footer元素,最后是#fixed元素(用于漂浮、弹出层等),不再细说。

原文发布于微信公众号 - Tech爬虫(php_pachong)

原文发表时间:2019-04-08

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券