通过对boostrap.css源码简单的阅读,了解Boostrap的核心设计理念。
为了增强浏览的兼容性,Boostrap内整合了Normalize.css(链接)这个文件的重要内容,从该版本boostrap.css的第6行一直到262行都主要是Normalize.css的内容,这在boostrap.css文件的第6行的代码注释上有明确标明。
从代码263到1067行都是Boostrap对“Glyphicon Halflings”这个字体图标的使用,这个一个收费的字体图标,在Boostrap的官网上的“组件”导航内第一节“Glyphicons 字体图标”有描述。若你不喜欢这个字体图标,想使用其它字体图标(如:Font Awesome、Iconfont、Iconmoon、Ionicons等),可以将这部分的代码删除掉,或者是在以后对Boostrap足够熟悉之后去进行Boostrap的自定义构建,使boostrap.css文件最小化。
从1068行开始到1614是Bootstrap的一些自己的样式初始化以及一些自定义的Class样式类进行设置(包含了部分样式的响应式设置)的部分。
从1615行一直到2250行为止都是Boostrap被很多人“误会”为核心功能的“栅格化布局”部分。不过对于单纯对行布局的CSS代码来讲,600多行的代码也算是比较重视了。
而后续的代码都是对表格、表单、按钮、图片,以及自己的一些组件如下拉菜单、按钮组、输入框组、导航等样式类的设置了,另外还包含对这些样式类的响应式设计。
需要注意的是,对于Boostrap的组件部分来讲,很多样式类都是用了Glyphicons字体图标,若没有引用字体图标,某些组件的样式可能无法正常显示。
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。