一、 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的支持情况

image.png

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/

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)

col-XX-offset-* :表示偏移量

col-XX-pull-*：表示向前拽

col-XX-push-*：表示向后推

bootstrap