Bootstrap2用户指南
1.4 定制Bootstrap
阅读(

Bootstrap基础

Bootstrap简介

下载Bootstrap

Bootstrap的文件结构

定制Bootstrap

BootStrap库文件很大,把所有效果和插件都导入页面,一方面会增加带宽负荷,影响页面的响应速度;另一方面,众多的CSS类样式和JavaScript源代码,可能会与页面的样式和脚本发生冲突,影响解析时的执行效率和页面显示效果。因此,如果仅仅使用其中的个别效果或特定插件,建议通过定制方式使用BootStrap。

随着Bootstrap3的推出,对Bootstrap-2.3.2版本,官网不再提供定制支持。不过,国内的好多镜像网站,如bootcss.com、bootstrap.kinghack.com 等,依然提供定制功能。

BootStrap的定制功能包括定制组件、jQuery插件和变量。下面以 bootcss.com 网站为例进行说明,具体方法如下:

1、访问 http://v2.bootcss.com/customize.html 页面,点击顶部导航栏中的“定制”,进入定制页面。如图 1‑2所示:

定制Bootstrap
图1-2 定制Bootstrap

2、选择组件。在页面左侧页内导航栏中,单击“1. 选择组件”,切换到组件选择区。组件包括脚手架、基本CSS样式、组件、JS组件、杂项、响应式,每部分又包含若干个条目。可以单击右上角的“全选”按钮,取消勾选所有选项,然后根据需要勾选组件。如图 1‑3所示:

定制Bootstrap组件
图1-3 定制Bootstrap组件

3、选择jQuery插件。在页面左侧页内导航栏中,单击“2. 选择jQuery插件”,切换到jQuery插件选择区。可以单击右上角的“全选”按钮,取消勾选所有选项,然后根据需要勾选组件。如图 1‑4所示:

定制jQuery组件
图1-4 定制jQuery组件

所有被选中的插件,都会被集中编译成一个单独的bootstrap.js文件。并且,它们都依赖于最新版本的 jQuery。

4、定制变量。在页面左侧页内导航栏中,单击“3. 定制变量”,切换到Less变量配置区。然后根据需要,重设变量的值。在设置过程中,可以单击右上角的“Reset to defaults” (重置为默认)按钮,将所有变量恢复为默认值。如图 1‑5所示:

定制Less变量
图1-5 定制Less变量

5、打包下载。定制完成后,点击页面左侧页内导航栏中“4. 下载”按钮,切换到下载按钮位置。然后,单击“Customize and Download”(定制并下载)按钮,下载定制后的Bootstrap压缩包,其中包括编译后的CSS、编译并压缩的CSS、编译并压缩的jQuery插件。

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验