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所示:
2、选择组件。在页面左侧页内导航栏中,单击“1. 选择组件”,切换到组件选择区。组件包括脚手架、基本CSS样式、组件、JS组件、杂项、响应式,每部分又包含若干个条目。可以单击右上角的“全选”按钮,取消勾选所有选项,然后根据需要勾选组件。如图 1‑3所示:
3、选择jQuery插件。在页面左侧页内导航栏中,单击“2. 选择jQuery插件”,切换到jQuery插件选择区。可以单击右上角的“全选”按钮,取消勾选所有选项,然后根据需要勾选组件。如图 1‑4所示:
所有被选中的插件,都会被集中编译成一个单独的bootstrap.js文件。并且,它们都依赖于最新版本的 jQuery。
4、定制变量。在页面左侧页内导航栏中,单击“3. 定制变量”,切换到Less变量配置区。然后根据需要,重设变量的值。在设置过程中,可以单击右上角的“Reset to defaults” (重置为默认)按钮,将所有变量恢复为默认值。如图 1‑5所示:
5、打包下载。定制完成后,点击页面左侧页内导航栏中“4. 下载”按钮,切换到下载按钮位置。然后,单击“Customize and Download”(定制并下载)按钮,下载定制后的Bootstrap压缩包,其中包括编译后的CSS、编译并压缩的CSS、编译并压缩的jQuery插件。