Bootstrap简介

什么是 Bootstrap？

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

历史

Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。

Bootstrap优势

1.移动设备优先
Bootstrap 开发的网站对移动设备确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. 支持的浏览器
   浏览器
   *Bootstrap 支持 Internet Explorer 8 及更高版本的 IE 浏览器

• 容易上手
• 响应式设计
• 为开发人员创建接口提供简洁统一的解决方案。
• 包含了功能强大的内置组件，易于定制
• 提供了基于 Web 的定制
• 是开源的

文件结构

预编译的 Bootstrap
Bootstrap 源代码

• less/、js/ 和 fonts/ 下的文件分别是 Bootstrap CSS、JS 和图标字体的源代码。
• dist/ 文件夹包含了上面预编译下载部分中所列的文件和文件夹。
• docs-assets/、examples/ 和所有的 *.html 文件是 Bootstrap 文档。

Bootstrap CDN 推荐

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 
<!-- 可选的Bootstrap主题文件（一般不使用） -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"></script>
 
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
 
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Bootstrap网格系统

响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列

网格示例

• 行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）
• 使用行来创建列的水平组
• 内容应该放置在列内，且唯有列可以是行的直接子元素
• 预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局
• 网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。

媒体查询

@media (min-width: @screen-sm-min) { ... }

/* 中型设备（台式电脑，992px 起） */
@media (min-width: @screen-md-min) { ... }

/* 大型设备（大台式电脑，1200px 起） */
@media (min-width: @screen-lg-min) { ... }

image.png