读书频道 > 网站 > 网页设计 > Bootstrap实战
1.2.2 Bootstrap主要功能
2013-11-02 13:33:19     我来说两句 
收藏    我要投稿   

本文所属图书 > Bootstrap实战

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

Bootstrap的目的是提供一个便捷工具,方便快速开发项目,样式部分使用LESS写就,也提供了一些jQuery插件形式的扩展。

在样式方面,Bootstrap提供了如下解决方案:

栅格系统

栅格系统与著名的960 Grid大同小异,不过960 Grid默认是16栏、940像素宽,由于LESS带来的动态语言特性(变量、函数等),可以通过配置几个参数,自定义栅格。因为抛弃了对老旧浏览器的支持,可以直接用:last-child将最后一栏的margin-right去掉,这也是它与960 Grid的区别之一。

布局

布局主要包括一个固定宽度的居中,一个可变宽度的浮动布局。

字体样式

字体风格比较明显,标题、<em>、<strong>、<b>、<i>以及<address>和<blockquote>等语义标签都配了一些默认样式。然后是列表,通过.unstyled类样式获得样式充值效果,这个方式比较实用,特别是网站是以内容为主的时候。代码块也比较朴素,借鉴了Google Code Prettify风格。

标签样式设计得比较贴心,风格趋于内敛,效果如图1-2所示。

 

多媒体展现

多媒体列表其实也比较简单,定义了3种缩略图尺寸:330像素×230像素、210像素×150像素和90像素×90像素。表格的样式也是简约风格。

表单

Bootstrap对表单进行了比较充分的定制,风格比较鲜明,label左浮动,圆角输入框,正确、错误的状态,表单legend的字号,前缀字符,输入、复选框等。文件选择比较朴素,没有提供更个性的解决方案,要想实现更个性的解决方案,需要与JavaScript配合设计。表单的按钮也十分细致,效果如图1-3所示。

 

导航等

网站的全局导航栏保持一致,使用样式实现背景色渐变,固定在头部,因此不需要考虑浏览器兼容问题。此外,还实现了提示、警告、弹出对话框设计风格的统一。

以上样式的部分是Bootstrap框架的核心。在代码上,基本把样式重置与定制都做了,上述内容,除了比较明显的组件(如面包屑、翻页等),基本都直接用标签作选择器。

有许多风格是利用CSS3样式属性设计出来的,最明显的莫过于背景色渐变与圆角。因此,对于图省事、不介意早期浏览器的效果,不需要考虑IE6的开发者,Bootstrap是个好选择,因为它省时省力,而且美观大方。

在样式之外,Bootstrap还提供了十几个常用的JavaScript插件,如模态对话框、下拉菜单、滚动监听、标签页、工具提示等jQuery插件。

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

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