文档介绍：Bootstrap 移动设备优先。所有列默认都是左浮动为确保适当的绘制和触屏缩放,加入下面的 meta 标签<meta name="viewport" content="width=device-width, initial-scale=1"> 布局容器 Bootstrap 容器。我们提供了两个作此用处的类。注意,由于 padding 等属性的原因,这两种容器类不能互相嵌套。.container 类用于固定宽度并支持响应式布局的容器。<div class="container"></div> .container-fluid 类用于 100% 宽度,占据全部视口( viewport )的容器。<div class="container-fluid"></div> 媒体查询在栅格系统中, 我们在 Less 文件中使用以下媒体查询( media query ) 来创建关键的分界点阈值。/* 超小屏幕( 手机, 小于 768px ) *//* 没有任何媒体查询相关的代码, 因为这在 Bootstrap 中是默认的(还记得 Bootstrap 是移动设备优先的吗?) */ /* 小屏幕(平板,大于等于 768px ) */***@media (min-width: ***@screen-sm-min) { ...} /* 中等屏幕( 桌面显示器, 大于等于 992px ) */***@media (min-width: ***@screen-md-min) { ...} /* 大屏幕( 大桌面显示器, 大于等于 1200px ) */***@media (min-width: ***@screen-lg-min) { ...} 我们偶尔也会在媒体查询代码中包含 max-width 从而将 CSS 的影响限制在更小范围的屏幕大小之内。***@media (max-width: ***@screen-xs-max) { ...} ***@media (min-width: ***@screen-sm-min) and (max-width: ***@screen-sm-max) { ...} ***@media (min-width: ***@screen-md-min) and (max-width: ***@screen-md-max) { ...} ***@media (min-width: ***@screen-lg-min) { ...} 栅格参数针对超小屏幕和中等屏幕设备所定义的类吧,-xs-* -md-* 。<div class= ”.col-xs-12 .col-md-8 ”></div> 宽度相同比例 3:2 针对平板用. col-sm-* .col-xs-12 .col-sm-6 .col-md-8 宽度相同 6:3:4 -md-offset-3 【实际上是为当前元素增加左边距 margin , 使元素向右偏移 N个 column 】-md-push-* 【推】-md-pull-* 【拉】类可以改变列( column )的顺序。 Less mixin 和变量自定义样式,列宽、间距等,有意义的布局页面主体 Bootstrap 将全局 font-size 设置为 14px , line-height 设置为。这