Bootstrap总结

响应式布局：一套代码可以适配多个终端。

适用于后台管理系统等简约类的网站。

原理仍是媒体查询。

xs 超小屏：0-768px

sm 小 屏：768-992px

md 中 屏：992px-1200px

lg大 屏：1200px-无穷

栅格系统： 是BS实现响应式的核心所在 其底层也是媒体查询

首先考虑网格系统在不同屏幕的变化

如在小屏隐藏，则给父盒子设置hidden-sm,则其在小屏和超小屏均隐藏（覆盖式）

再者看子盒子在不同屏幕的变化，首先看一排有几个盒子，如在大屏中一排有三个盒子，则每个盒子占四列（）；但在中屏中一排有两个盒子则每个盒子占6列。这时给每个子盒子设置 col-lg-4

col-md-6.

会自动换行，即在大屏的时候是两排，在中屏的时候是三排

如果一排中的盒子宽度不一时，则每排的各个盒子的col自行调整，相加=12

即这一排卡UN度比例为3:4:5

其他：

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

看版面是不是要设置版心：

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。默认带了15px的padding值。

.container 类用于固定宽度并支持响应式布局的容器。

消除默认15px的内边距，添加.row,其默认{

margin-right: -15px; margin-left: -15px;

}

即布局样式可写成：