Bootstrap3实用教程
1.6 定制BootStrap
阅读(

Bootstrap基础

Bootstrap简介

下载Bootstrap3

Bootstrap的文件结构

安装Bootstrap

编译Bootstrap

定制Bootstrap

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

访问BootStrap官网的BootStrap 3 主页 https://getbootstrap.com/docs/3.3/,点击顶部导航栏中的“Customize”,进入定制页面。

BootStrap 3提供两种定制方式,一种是通过配置文件定制,一种是直接自定义制组件、jQuery插件和变量的定制。

如果你有自己的配置文件 config.json,上传并导入该文件进行定制。你可以将文件拖拽到页面的指定位置,或点击“manually upload”手动上传文件。如图 1‑6所示:

定制BootStrap
图1-6 定制BootStrap

如果你没有自己的配置文件 config.json,就需要在页面上通过打勾的方式来进行定制,这种定制方式一目了然,不再赘述。

定制完成后,点击页面最下方的“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 经验