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>

 

这样子就很清晰了。

完结