bootstrap快速入门笔记（二）-栅格系统，响应式类

时间：2021-07-17 16:07:10

一，栅格系统大致有以下：

1，行row必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，一行有12列

2.“列（column）”在水平方向创建一组列col,只有列能作为行的直接子元素.row .col-xs-4

　　通过列设置padding属性，通过为.row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding

3.栅格类适用于与屏幕宽度大于或等于分界点大小的设备 .col-md-*此为栅格类

二，媒体查询

/* 超小屏幕（手机，小于 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) { ... }

三，栅格参数

通过下表可以详细查看 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） 是
列排序 是

例子：

<!-- Stack the columns on mobile by making one full-width and the other half-width -->

<div class="row">

  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>

  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>

</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->

<div class="row">

  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>

  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>

  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>

</div>

<!-- Columns are always 50% wide, on mobile and desktop -->

<div class="row">

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

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

</div>
效果：
小屏
bootstrap快速入门笔记（二）-栅格系统，响应式类
中屏

bootstrap快速入门笔记（二）-栅格系统，响应式类

bootstrap快速入门笔记（二）-栅格系统，响应式类
某些列可能会出现比别的列高的情况。为了克服这一问题，建议联合使用 .clearfix和响应式工具类
*如果在一个 .row 内包含的列（column）大于12个，包含多余列（column）的元素将作为一个整体单元被另起一行排列。
四，响应式工具类

通过单独或联合使用以下列出的类，可以针对不同屏幕尺寸隐藏或显示页面内容。

  超小屏幕手机 (<768px) 小屏幕平板 (≥768px) 中等屏幕桌面 (≥992px) 大屏幕桌面 (≥1200px)
.visible-xs-* 可见 隐藏 隐藏 隐藏
.visible-sm-* 隐藏 可见 隐藏 隐藏
.visible-md-* 隐藏 隐藏 可见 隐藏
.visible-lg-* 隐藏 隐藏 隐藏 可见
.hidden-xs 隐藏 可见 可见 可见
.hidden-sm 可见 隐藏 可见 可见
.hidden-md 可见 可见 隐藏 可见
.hidden-lg 可见 可见 可见 隐藏

从 v3.2.0 版本起，形如 .visible-*-* 的类针对每种屏幕大小都有了三种变体，每个针对 CSS 中不同的 display 属性，列表如下：

类组 CSS display
.visible-*-block display: block;
.visible-*-inline display: inline;
.visible-*-inline-block display: inline-block;

因此，以超小屏幕（xs）为例，可用的 .visible-*-* 类是：.visible-xs-block、.visible-xs-inline 和 .visible-xs-inline-block。

.visible-xs、.visible-sm、.visible-md 和 .visible-lg 类也同时存在。但是从 v3.2.0 版本开始不再建议使用。除了 <table> 相关的元素的特殊情况外，它们与 .visible-*-block 大体相同。

打印类

和常规的响应式类一样，使用下面的类可以针对打印机隐藏或显示某些内容。

class 浏览器 打印机
.visible-print-block
.visible-print-inline
.visible-print-inline-block 		隐藏 可见
.hidden-print 可见 隐藏

.visible-print 类也是存在的，但是从 v3.2.0 版本开始不建议使用。它与 .visible-print-block 类大致相同，除了 <table> 相关元素的特殊情况外。

 

相关文章