标签：src 元数据 间隔 pre 定义类 屏幕 width oom http
全局 CSS 样式
基本的 HTML 元素均可以通过 class 设置样式并得到增强效果；还有先进的栅格系统。
使用H5 与Bootstrap进行组合使用
Bootstrap 的重大变革：
Bootstrap 2 中，对框架中的某些关键部分增加了对移动设备友好的样式。
Bootstrap 3 中，重写了整个框架，直接将移动样式融合进了框架的内核中，使移动设备的样式融合进了框架的每个角落。
现在的Bootstrap是移动设备优先的。
移动设备上注意：
为了确保适当的绘制和触屏缩放，需要在<head>中添加viewport元数据标签。
<meta name="viewport" content="width=device-width, initial-scale=1">
在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。
这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
栅格系统
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局,
定义： 用于一系列的行（row）与列（column） 的组合来创建页面布局，内容就可以放到创建好的布局中。
工作原理：
1 “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。 2 通过“行（row）”在水平方向创建一组“列（column）”。 3 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。 4 类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。 5 通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。 6 负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。 7 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。 8 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。 9 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-lg-* 不存在， 也影响大屏幕设备。
注意：
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。
提供了两个作此用处的类，由于 padding 等属性的原因，这两种 容器类不能互相嵌套
container 类用于固定宽度并支持响应式布局的容器。 <div class="container"> ... </div> container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。 <div class="container-fluid"> ... </div>
Bootstrap 是移动设备优先的，会先从屏幕小的设备开始（如手机、平板）扩展到大屏幕设备（笔记本电脑、台式电脑）。
由不同的的参数进行表示：如 常用的两种格式 手机端（col- xs-*） 与电脑端 （col-md-*）
其中*号表示数字 1~12之内，中的数字，1表示1个格子，一行有12个
媒体查询：有条件的css 规则，什么样的身体穿什么衣服
标签：src 元数据 间隔 pre 定义类 屏幕 width oom http
原文地址：https://www.cnblogs.com/obge/p/11944330.html
