Bootstrap

一、Bootstrap3和Bootstrap4区别

转载自：https://blog.csdn.net/miaomiao_1024/article/details/83418352

*）不同点：

*）Bootstrap3的4种栅格：

特小（col-xs-） 适配手机(<768px)
小（col-sm-） 适配平板(≥768px)
中（col-md-） 适配电脑(≥992px)
大（col-lg-） 适配宽屏电脑(≥1200px)

*）Bootstrap4的5种栅格：

特小（col-）(<576px)
小（col-sm-）(≥576px)
中（col-md-）(≥768px)
大（col-lg-） (≥992px)
特大（col-xl-）（≥1200px）（只有bootstrap4里面有xl）

*）Bootstrap4特点：

新增网格层适配了移动端；
全面引入ES6新特性（重写所有JavaScript插件）；
css文件减少了至少40%；
所有文档都用Markdown编辑器重写；
放弃对IE8的支持

---

以下内容参考自官方文档：https://v3.bootcss.com/css/#grid
二、容器

.container 类用于固定宽度并支持响应式布局的容器。.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

三、栅格

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：

• “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
• 通过“行（row）”在水平方向创建一组“列（column）”。
• 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
• 类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
• 通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。(参考：https://blog.csdn.net/weixin_42041193/article/details/81068002 的内容：工作原理：.container实现固定的宽度并居中呈现,并和其它网格实现对齐 行(.row)是列(.col-*)的横向组合和父容器(它们有效组织在.row下), 每列都有水平的padding值，用于控制它们之间的间隔，同时在负边距的行上抵消，从而实现列中的所有内容在视觉上是左侧对齐的体验。）
• 负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
• 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
• 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
• 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-md-*栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-lg-*不存在， 也影响大屏幕设备。

*）响应式 （参考：http://www.runoob.com/bootstrap/bootstrap-v2-responsive-design.html

　　　　　　　　http://www.runoob.com/bootstrap/bootstrap-responsive-utilities.html）

##）什么是响应式 Web 设计：

响应式 Web 设计是一个让用户通过各种尺寸的设备浏览网站获得良好的视觉效果的方法。例如，您先在计算机显示器上浏览一个网站，然后在智能手机上浏览，智能手机的屏幕尺寸远小于计算机显示器，但是你却没有感觉到任何差别，两者的用户体验几乎一样，这说明这个网站在响应式设计方面做得很好。

##）响应式 Web 设计工作原理：

为了应用响应式 Web 设计，您需要创建一个包含适应各种设备尺寸样式的 CSS。一旦页面在特定的设备上加载，该页面上使用了各种字体和 Web 开发技术，比如媒体查询（Media Queries），此时，会先检测设备的视口大小，然后加载特定于设备的样式。

##）响应式web设计的CSS

必须在网页头部加：

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

（解析：

视口的 meta 标签，重写了默认的视口，并帮助加载与特定视口相关的样式。

width 属性设置屏幕宽度。它包含一个值，比如 320，表示 320 像素，或者值为 'device-width'，用来告诉浏览器使用原始的分辨率，device-width 可以确保它能正确呈现在不同设备上。

initial-scale 属性是视口最初的比例。当设置为 1.0 时，将呈现设备的原始宽度。）

引入bootstrap的CSS：

<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

 ##）响应式样式：

响应式图像，在img上加：class="img-responsive"

响应式表格，在table上加：增加class="table-responsive"

##)响应式还提供了一些工具类：参考：https://v3.bootcss.com/css/#responsive-utilities

.visible-xs-4  ：只对xs级别的显示屏可见

.hidden-xs   ： 只对xs级别的显示屏隐藏

.visible-xs-block  ：对xs级别的可见，并且block显示

.visible-print-block：可见--对打印机（对浏览器隐藏）

.hidden-print：隐藏-对打印机（对浏览器可见）

*）列偏移

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。

*）列嵌套

为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）。

*）列排序

.col-md-push-* 和 .col-md-pull-*

pull：把栅格往前拉

push：把栅格子往后推