读书频道 > 网站 > 网页设计 > Bootstrap实战
2.1.2 定制Bootstrap
2013-11-02 14:11:04     我来说两句 
收藏    我要投稿   

本文所属图书 > Bootstrap实战

本书由国内资深前端工程师撰写,是目前内容最为全面和深入的Bootstrap专著。它不仅系统讲解了Bootstrap的各项功能和使用方法,详细讲解了Bootstrap的组件、插件和扩展技术,而且深度解析了Bootstrap的内核源代码  立即去当当网订购

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

定制Bootstrap可以有效降低页面加载的负担和执行效率,降低潜在的源码冲突。定制的具体方法如下。

第1步:访问http://twitter.github.io/bootstrap/页面,在顶部导航栏中单击Customize(定制)选项卡,切换到定制页面,如图2-3所示。

 

第2步:选择组件。在页面左侧页内导航栏中单击“1.Choose components”(1.选择组件)选项,切换到组件选择区,如图2-4所示。单击右上角的Toggle all(切换全部)按钮,取消勾选所有选项,然后根据需要勾选组件。

 

组件包括如下几个部分,每部分又包含多个项目,这些部分将在后面几章中进行详细讲解。其中脚手架是用来设置页面基本样式和布局的,根据需要必须选择。

Scaffolding(脚手架)

Base CSS(基本CSS样式)

Components(组件)

JS Components(JS组件)

Miscellaneous(杂项)

Responsive(响应式交互)

第3步:选择jQuery插件。在页面左侧页内导航栏中单击“2.Select jQuery plugins”(选择jQuery插件)选项,切换到jQuery插件选择区,如图2-5所示。单击右上角的Toggle all按钮,取消勾选所有选项,然后根据需要勾选jQuery插件。

 

所有被勾选的插件将被编译成一个文件bootstrap.js。所有的插件都需要导入最新版本的jQuery库文件作为底层技术支撑。

第4步:定制变量。在页面左侧页内导航栏中单击“3.Customize variables”(定制变量)选项,切换到LESS变量配置区,如图2-6所示。如果在设置过程中需要恢复默认值,则单击右上角的Reset to defaults(重置为默认)按钮,取消对所有CSS变量的设置,然后根据需要重设变量的名称。有关动态CSS技术的详细讲解可参阅后面章节内容。

第5步:打包下载。在页面左侧页内导航栏中单击“4.Download”(下载)选项,切换到下载按钮位置,如图2-7所示。单击“Customize and Download”(定制并下载)按钮,下载定制后的Bootstrap压缩包。

下载的文件包括编译的动态CSS、整理和压缩的CSS样式表,以及编译的jQuery插件,它们都很好地包装在一个zip文件中。

 

例如,如果仅需要表格样式效果,则可以在第2步中仅勾选两项:“Scaffolding”(脚手架)子项中的“Normalize and reset”和“Base CSS”(基础CSS样式表)子项中的“Tables”,如图2-8所示。

在第3步中,取消勾选所有选项,即不下载任何jQuery插件。在第4步中,保持所有动态CSS变量的默认值。然后,单击“Customize and Download”按钮,下载定制后的Bootstrap压缩包(bootstrap.zip),该文件大小仅有38KB,文件结构如图2-9所示。

如果直接下载默认编译好的压缩包,大小为375KB,当页面不需要全部效果和交互行为时,这种做法显然就不妥了。


 

点击复制链接 与好友分享!回本站首页
分享到: 更多
您对本文章有什么意见或着疑问吗?请到论坛讨论您的关注和建议是我们前行的参考和动力  
上一篇:2.1.1 下载Bootstrap
下一篇:2.2.1 源码版Bootstrap文件结构
相关文章
图文推荐
JavaScript网页动画设
1.9 响应式
1.8 登陆页式
1.7 主题式
排行
热门
文章
下载
读书

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训
版权所有: 红黑联盟--致力于做最好的IT技术学习网站