Bootstrap 整体架构

标签：快速   使用   屏幕尺寸   系统   原因   响应   trap   直接   导航   

• 12栅格系统——就是将屏幕平分12份（列）。使用行(row)来组织元素（每一行都包括12个列），然后将内容放在列内。通过col-md-offset-*来控制列偏移。
• 基础布局组件——Bootstrap提供了多种基础布局组件。如排版、代码、表格、按钮、表单等。
• Jquery——Bootstrap所有的JavaScript插件都依赖于Jquery的。如果要使用这些JS插件，就必须引用Jquery库。这也是为什么我们在除了要引用Bootstrap的JS文件和CSS文件外，还需要引用Jquery库的原因，两者是依赖关系。
• CSS组件——Bootstrap为我们预实现了很多CSS组件。如下拉框、按钮组、导航等。也就是说Bootstrap内容帮我们定义好了很多CSS样式，你可以将这些样式直接应用到之前的下拉框等元素里。
• JavaScript插件——Bootstrap也为我们实现了一些JS插件，我们可以用其提供的插件要完成一些常用功能，而不需要我们再重新写JS代码来实现像提示框，模态窗口这样的效果了。
• 响应式设计——这就是一个设计理念。响应式的意思就是它会根据屏幕尺寸来自动调整页面，使得前端页面在不同尺寸的屏幕上都可以表现很好。

　　Bootstrap就是由上面几部分组成的。上面已经都每个组成部分做了一个简单的介绍，接下来的内容无非是通过一些实例来对每个组成部分进行一个详细的介绍罢了。

Bootstrap定义12栅格系统，就是为了更好的布局。每个前端框架都首先要定义好的就是布局系统。在Bootstrap里面，就是利用行和列来创建页面布局的。其布局有几个原则：

• 行（row）必须包含在.container(固定宽度)或.container-fluid(100%宽度)中
• 每行都包含12列
• 将内容放置在每列中　

　　在bootstrap的栅格系统中，根据宽度将浏览器分为4种。其值分别是：自动（100%）、750px、970px、 1170px。

　　对应的样式为超小（xs）、小型（sm）、中型屏幕 （md）、大型 （lg）

　　其本就是通过媒体查询定义最小宽度实现。所以，Bootstrap做出来的网页向大兼容，向小不兼容！

　　在Bootstrap框架内，已预先定义好了屏幕大小的分界值，其分界值得定义就是通过媒体查询来定义的。

Bootstrap其实只不过是一个样式框架罢了。利用它我们可以快速方便地构建Web页面。

Bootstrap 整体架构

标签：快速   使用   屏幕尺寸   系统   原因   响应   trap   直接   导航   

原文地址：http://www.cnblogs.com/dqn--/p/7366845.html