Bootstrap
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
使用bootstrap的好处
1.移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
2.浏览器支持：所有的主流浏览器都支持 Bootstrap。
3.容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。
4.响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。
Bootstrap 包的内容
1.基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。
2.CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。
3.组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在 布局组件 部分详细讲解。
4.JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。
栅格系统
Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。
网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。
在使用的时候大家可以根据实际情况重新编译LESS（或Sass）源码来修改12这个数值（也就是换成24或32，当然你也可以分成更多，但不建议这样使用）。
20160329123809757.jpg
bootstrap把根据屏幕大小把屏幕分为了4个层级，小于768像素的为超小屏幕，大于等于768像素的为小屏幕，大于等于992像素的为中等屏幕，大于等于1200像素的则为大屏幕，相应的类前缀见图或查看官方文档，根据栅格参数，我们看下下面这幅图：
20160329124043797.jpg
响应式图像
<img src="..." class="img-responsive" alt="响应式图像">
容器（Container）
<div class="container">
...
</div>
网友评论