booksrap的积累
1:bookstrap的发展史
- Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
- Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。
- 自 Bootstrap 3 起,框架包含了贯穿于整个库的移动设备优先的样式。
- Bootstrap4 放弃了对 IE8 以及 iOS 6 的支持,现在仅仅支持 IE9 以上 以及 iOS 7 以上版本的浏览器。如果对于其中需要用到以前的浏览器,那么请使用 Bootstrap3
- bookstrap的下载地址:http://getbootstrap.com/
2:使用小细节
- <!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
- <!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 -->
- <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
- <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]-->
3:使用bookstrap的时候,引用JS和CSS文件的顺序
- <!-- 新 Bootstrap 核心 CSS 文件 --> <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
- !-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
- <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
- 为了对网页更好的兼容:使用<meta name="viewport" content="width=device-width, initial-scale=1.0">
- 当然,为了兼容还用不常用的方式:<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">,user-scalabe=no是为了禁止zooming的功能
- 为了避免浏览器的不一致,bookstrap使用Normalize.css 是一个很小的 CSS 文件
- :before 伪元素防止上边距崩塌,:after 伪元素清除浮动。
4:Bookstrap网格系统
- 网格最多分为12行。
- 注意事项:
- 行必须放置在 .container class 内,以便获得适当的对齐(alignment)和内边距(padding)。

浙公网安备 33010602011771号