bootstrap栅格化框架

bootstrap栅格化框架

1．Bootstrap引用方法：使用链接在线引用，或将dist文件夹下的文件复制到开发文件夹下引用。
2．Bootstrap栅格化系统：Bootstrap 的栅格化系统采用将页面布局分为12列，再根据页面宽度采用预定义类控制模块占用宽度比例的思想，实现响应式布局。
布局容器：container或container-fluid(占据100%窗口)先声明一个盒子作为容器，注意由于padding等属性，两个容器不能互相嵌套。
3．一个container可以包含多个row，每个row被默认分为12个列，每个row可以包含多个行。
4．列偏移：偏移列通过 offset-- 类来设置。第一个星号( * )可以是 sm、md、lg、xl，表示屏幕设备类型，第二个星号( * )可以是 1 到 11 的数字。
为了在大屏幕显示器上使用偏移，请使用 .offset-md-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11。
例如：.offset-md-4 是把.col-md-4 往右移了四列格。
注意：对较小的屏幕设置的列偏移在屏幕放大时也适用。

5．媒体查询：使用 @media 查询，可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是设置设计响应式的页面，@media是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。