bootstrap基础应用

1.解决兼容性问题:

在IE9之前的版本会加上

<!--[if lt IE 9]>

      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>

      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>

<![endif]-->

2.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> //不能够缩放

在移动设备浏览器上，通过为视口（viewport）设置meta属性为 user-scalable=no 可以禁用其缩放（zooming）功能。

3.栅格布局

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

它包含了易于使用的预定义类，还有强大的mixin用于生成更具语义的布局。

重点：不论什么时候分割父容器时、父容器永远是12分

          如果本身没有对应的样式是，会在本身上找最接近的样式显示（它本身有时，用本身的，本身没有时，找比它小的，本身更小时，用div原来的宽度100%）

4.表格的样式

列重置：列重置解决的空隙/白问题（重叠问题）visible-xs-block它只在xs上使用，其他地方看不到.

visible-xs-block意思是手机浏览时时显示为块元素， 同理.visible-xs-inline则为行内元素。

所有的响应式布局都是基于媒体查询的。

注意：在写代码时，不要行里面套行、否则内容会被覆盖列偏移使用 .col-md-offset-* 类可以将列向右侧偏移。

这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。

例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。

col-sm-offset-0没有列偏移、row-no-gutters没有间距、列排序通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序、push左边、pull右边、

push和pull允许填东西，前提是加起来为12份，如果超了会换行。

5.字体样式

排版h1和div.h1样式是一样的小号文本(<small> ) 

sub(下标)和sup(上标)<em>和i是一样的是斜体标签

text-lowercase全改成小写

text-uppercase全改成大写

text-capitalize驼峰式命名（单词的首字母大写）

列表：有序、无序、自定义：dt/dl/dd默认情况下：dd和dt不在一行