bootstrap构成模块从大的方面可以分为布局框架、页面排版、基本组件、jquery插件以及变量编译的less等部分。
下面简单介绍一下bootstrap中各模块的功能。(推荐学习:bootstrap视频教程)
(1)页面布局
布局对于每个项目都必不可少。bootstrap在960栅格系统的基础上扩展出一套优秀的栅格布局,而在响应式布局中有更强大的功能,能让栅格布局适应各种设备。这种栅格布局使用也相当简单,只需要按照html模板应用,即可轻松构建所需的布局效果。
此外,改变模板中的类名;就能实现不同的布局风格。例如,要实现常见的固定布局,只需在html中添加container类名;而要实现流体布局,只需在html中添加container-fluid类名。
bootstrap还为开发者设计了responsive,让布局框架更为出色。开发者可以在此基础上覆盖任何样式,从而实现理想中的响应式设计。
(2)页面排版
页面排版的好坏直接影响产品风格,也就是说页面设计是不是好看。在bootstrap中,页面的排版都是从全局的概念上出发,定制了主体文本、段落文本、强调文本、标题、code风格、按钮、表单、表格等格式。
bootstrap在icon部分采用了sprites技术,为用户准备了上百种常用的icon应用。
这里有必要向读者推荐font awesome项目。它是dave gandy在bootstrap的基础上扩展而来的一个icon主题,最大的特点在于,整套图标中没有运用任何图片。font awesome项目中主要运用了css3的@font-face和伪元素一起实现。
(3)基本组件
基本组件是bootstrap的精华之一,其中都是开发者平时需要用到的交互组件。例如,网站导航、标签页、工具条、面包屑、分页栏、提示标签、产品展示、提示信息块和进度条等。这些组件都配有jquery插件,运用它们可以大幅度提高用户的交互体验,使产品不再那么呆板、无吸引力。
(4)jquery插件
bootstrap中的jquery插件主要用来帮助开发者实现与用户交互的功能,bootstrap 1提供了6种常见插件。
bootstrap 2中的jquery插件如何使用,还需要根据bootstrap所提供的文档,以及各插件的参数,具体问题具体分析。只有充分了解,才能灵活运用。
(5)动态样式语言less
less是动态css语言,它基于javascript引擎或者服务器端对传统的css进行动态扩展,具有更强大的功能和更好的灵活性。基于less,编辑css就可以像使用编程语言一样,定义变量、嵌入声明、混合模式、运算等。
bootstrap中有一套编辑好的less框架,开发者可以将其应用到自己的项目中,也可以通过less.js、less.app或node.js等方法来编辑less文件。less文件一旦编译,bootstrap框架就仅包含css样式,这意味着没有多余的图片、flash之类的元素。
更多bootstrap相关技术文章,请访问bootstrap教程栏目进行学习!
以上就是bootstrap的构成模块是什么的详细内容。