一、 BootStrap
1．起步
引入CSS：
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
引入js：
bootstrap是依赖jquery的，所以必须在自己的js之前引入jquery。
引入自己的js：
如果需要主体：
模板：
Bootstrap 101 Template
你好，世界！
2．禁止响应式
移除 此 CSS 文档中提到的设置浏览器视口（viewport）的标签：。
通过为 .container 类设置一个 width 值从而覆盖框架的默认 width 设置，例如 width: 970px !important; 。请确保这些设置全部放在默认的 Bootstrap CSS 文件的后面。注意，如果你把它放到媒体查询中，也可以略去 !important 。
如果使用了导航条，需要移除所有导航条的折叠和展开行为。
对于栅格布局，额外增加 .col-xs-* 类或替换掉 .col-md-* 和 .col-lg-*。 不要担心，针对超小屏幕设备的栅格系统能够在所有分辨率的环境下展开。
3．IE8 与 IE9的支持情况
4．IE的兼容
Bootstrap 不支持 IE 古老的兼容模式。为了让 IE 浏览器运行最新的渲染模式下，建议将此 标签加入到你的页面中：
5．国产浏览器的支持
国内浏览器厂商一般都支持兼容模式（即 IE 内核）和高速模式（即 webkit 内核），不幸的是，所有国产浏览器都是默认使用兼容模式，这就造成由于低版本 IE （IE8 及以下）内核让基于 Bootstrap 构建的网站展现效果很糟糕的情况。幸运的是，国内浏览器厂商逐渐意识到了这一点，某些厂商已经开始有所作为了！
目前只有360浏览器支持此 标签。希望更多国内浏览器尽快采取行动、尽快进入高速时代！
6．Windows 8 中的 Internet Explorer 10 和 Windows Phone 8
Internet Explorer 10 并没有对 屏幕的宽度 和 视口（viewport）的宽度 进行区分，这就导致 Bootstrap 中的媒体查询并不能很好的发挥作用。
在CSS里面添加一下代码：
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }
再添加一下的js代码：
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
var msViewportStyle = document.createElement('style')
msViewportStyle.appendChild(
document.createTextNode(
'@-ms-viewport{width:auto!important}'
)
)
document.querySelector('head').appendChild(msViewportStyle)
}
二、 CSS
1．避免跨浏览器的不一致
Normalize.css 是一个很小的 CSS 文件，在 HTML 元素的默认样式中提供了更好的跨浏览器一致性。
[https://github.com/necolas/normalize.css/](https://github.com/necolas/normalize.css/)
2．容器
Bootstrap 3 的 container class 用于包裹页面上的内容。让我们一起来看看 bootstrap.css 文件中的这个 .container class。
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
注意：由于内边距（padding）是固定宽度，默认情况下容器是不可嵌套的。
如果使用container-fluid则改变容器的固定大小变为默认占满100%布局。
3．网格系统（栅格系统）
Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
基本格式
...
row：行
col-lg-* : 大屏幕（大于1200）
col-md-*:中等屏幕（大于992）
col-sm-*：小屏幕(大于768)
col-xs-*: 超小屏(小于768)
@media screen and(min-width=1200){
//大屏幕设置
}
@media screen and(min-width=992){
//中屏幕设置
}
@media screen and(min-width=768){
//小屏幕设置
}
col-XX-offset-* :表示偏移量
col-XX-pull-*： 表示向前拽
col-XX-push-*：表示向后推
三、 移动端布局
单位：
Px：css像素
Pt：像素单位
Em：相对于父级的一个字体大小
Rem：相对于html的字体大小
Deg：角度
%：百分号
Rad：弧度
移动端适用布局的单位：rem
Vw，vh适口的宽度和高度