@zhongjianxin 2017-08-01T14:57:22.000000Z 字数 2139 阅读 1065

BootStrap Practice

Trainning

什么是Bootstrap？

Bootstrap 是由Twitter推出的一个用于快速开发 Web 应用程序和网站的前端框架。
基于html5、css3的bootstrap，具有下面这些诱人特性：
- 移动设备优先；
- 漂亮的设计；
- 友好的学习曲线；
- 卓越的兼容性；
- 响应式设计；
- 12列响应式栅格结构；
- 样式向导文档。
自定义JQuery插件，完整的类库，基于Less、Sass等

安装Bootstrap

Bootstrap 提供以下几种方式帮你快速上手，每一种方式针对具有不同技能等级的开发者和不同的使用场景。我们使用方法一，减少操作。

1. 使用 Bootstrap 提供的免费 CDN 加速服务

2. 下载「用于生产环境的 Bootstrap」到本地

3. 其他工具下载

现在还无需掌握，知道有这种安装方法即可
- 通过 Bower 进行安装
- 通过 npm 进行安装
- 其他

起始模板

Bootstrap标准模板

全局 CSS 样式概览

设置全局 CSS 样式；基本的 HTML 元素均可以通过 class 设置样式并得到增强效果；还有先进的栅格系统。

一边参考全局 CSS 样式 · Bootstrap 文档 概览部分，一边阅读以下部分

为什么要将页面设置为 HTML5 文档类型？

答：Bootstrap 使用到的某些 HTML 元素和 CSS 属性只有 HTML5提供。

相关问题：如何设置页面为 HTML4 文档类型？（如果不知道，可以看W3C的文档，或者用Google搜索）
怎么理解「移动设备优先」？
先满足小屏幕移动设备（手机、平板），再去扩展里面的components去满足大屏幕设备（笔记本、台式机）。

移动优先策略
1. 内容 Content
  - 决定什么是最重要的
2. 布局 Layout
  - 优先设计更小的宽度。
  - Base CSS强调移动设备；中等关注平板、电脑
3. 渐进增强 Progressive Enhancement
  - 随着屏幕大小增加而添加元素。
Bootstrap 排版、链接样式设置了基本的全局样式是什么？
Bootstrap保留和坚持部分浏览器的基础样式，解决部分潜在的问题，提升一些细节的体验，在排版、链接样式设置了基本的全局样式。具体说明如下：
- 移除body的margin声明
- 设置body的背景色为白色 background-color: #fff;
- 为排版设置了基本的字体、字号和行高
- 设置全局链接颜色，且当链接处于悬浮:hover状态时才会显示下划线样式
Bootstrap 如何在不同的浏览器表现出一样的效果？

Bootstrap框架的核心是轻量的CSS基础代码库，他并没有一味的重置样式，而是注重各浏览器基础表现，降低开发难度。
为了增强跨浏览器表现的一致性，Bootstrap使用了 Normalize.css。但没有一味全部使用该重置样式，而是在此基础之上进行了一些改良，让其更加符合Bootstrap的设计思想。
布局容器（container）是什么鬼？

顾名思义，就是放Bootstrap代码的容器，只有放在container里面的html代码才会被Bootstrap识别。

注意
我们要把Bootstrap的HTML的代码都放在带 container or container-fluid类的 <div>标签中.
.container 和 .container-fluid 都是响应式，那有什么差别？
看源码bootstrap.css可以看到container和container-fluid类本身没有设置width属性值，也就是默认100%，但是container类还设置了媒体查询：
```
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
```
也就是说container类在浏览器viewport宽度768~992px区间宽度固定为750px，在992~1200px区间宽度宽度固定为970px，大于1200px的时候宽度固定为1170px，所以container类在viewport大于768px的时候会有变化的左右margin，而container-fluid类没有媒体查询设置，所以始终是100%宽度，没有左右margin。
网络搜到一些资料：
Bootstrap Gride Practice
BootStrao Gride Layout Lecture
- 可视化布局
其他可与bootstrap搭配的工具，学有余力的同学可自学