Bootstrap之移动设备优先、栅格系统、媒体查询，响应式式布局

时间：2024-03-04 08:23:25

1. html5中head标签里引入 meta 

Bootstrap 实行移动端优先原则 响应式布局

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">

2. 不需要再次引入Normalize.css

不需要重置css, Bootstrap内部已引入  如果想下载看看源码。 点这里  normalize.css下载链接

3 . 布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。

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

<div class="container">
  ...
</div>

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

<div class="container-fluid">
  ...
</div>

4.  Bootstrap 核心知识，栅格系统 响应式布局

栅格系统 主要是基于Css媒体查询  根据不同的视口宽度显示不同的样式

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中

“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中

通过“行（row）”在水平方向创建一组“列（column）”。

你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素

简单点来说，一行被分为12个列、你可以占三个，可以占五个，也可以后边空白，不管你怎么用，最后加起来都是12

容器的类 为  .container   .container-fluid 

容器下的子类就是 .row

行下的子类就根据你想显示的设备不同而不同。 例如.col-sm-数字  类 在同一  .col-sm- 类下，行内列的总和为12

栅格参数

通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。

  超小屏幕 手机 (<768px) 小屏幕 平板 (≥768px) 中等屏幕 桌面显示器 (≥992px) 大屏幕 大桌面显示器 (≥1200px)
栅格系统行为 总是水平排列 开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
.container 最大宽度 None （自动） 750px 970px 1170px
类前缀 .col-xs- .col-sm- .col-md- .col-lg-
列（column）数 12
最大列（column）宽 自动 ~62px ~81px ~97px
槽（gutter）宽 30px （每列左右均有 15px）
可嵌套 是
偏移（Offsets） 是
列排序 是

上代码，方便理解

<div class="container">    
 <div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
 </div>
 <div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
 </div>
 <div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
 </div>
 <div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
 </div>
</div>

在桌面大设备上就会这么显示

在手机端小设备会这样显示

当使用 .col-md-  这个类时从栅格参数表格可以得知，当设备宽度大于 992px 时按照水平排列，一旦小于这个值就会变成竖向排列。

这个时候就很好理解了。

当  .col-md- 和 .col-lg- 同时存在时 

当设备宽度大于 992px 时 小于 1200px 时按照  .col-md- 设定的显示， 当大于1200时按照  .col-lg- 设定的显示

看代码演示

<div class="container">
    <div class="row">
      <div class="col-md-8 col-lg-10">.col-md-8 col-lg-10</div>
      <div class="col-md-4  col-lg-2">.col-md-4  col-lg-2</div>
    </div>
    <div class="row">
      <div class="col-md-4 col-lg-2">.col-md-4 col-lg-2</div>
      <div class="col-md-4 col-lg-2">.col-md-4 col-lg-2</div>
      <div class="col-md-4 col-lg-8">.col-md-4 col-lg-8</div>
    </div>
    <div class="row">
      <div class="col-md-6">.col-md-6</div>
      <div class="col-md-6">.col-md-6</div>
    </div>
  </div>

小于992px 时

大于 992 小于 1200 时

大于 1200px 时 

所以根据 设定 超小屏幕 手机 (<768px)  .col-xs-   小屏幕 平板 (≥768px) .col-sm-  中等屏幕 桌面显示器 (≥992px)  .col-md-

大屏幕 大桌面显示器 (≥1200px)  .col-lg- 即可完成所有设备的响应式设计

如果在一个 .row 内包含的列（column）大于12个，包含多余列（column）的元素将作为一个整体单元被另起一行排列。

即便有上面给出的四组栅格class，你也不免会碰到一些问题，例如，在某些阈值时，某些列可能会出现比别的列高的情况。为了克服这一问题，建议联合使用 .clearfix

<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

 列偏移

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

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

嵌套列

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

<div class="row">
  <div class="col-sm-9">
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
  <div class="col-sm-3">
    我，。。。。
  </div>
</div>

 

这样子就很清晰了。

完结

 

相关文章