bootstrap快速入门笔记(二)-栅格系统,响应式类

一,栅格系统大致有以下:

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)

列排序

四,响应式工具类

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

超小屏幕手机 (<768px)

小屏幕平板 (≥768px)

中等屏幕桌面 (≥992px)

大屏幕桌面 (≥1200px)

.visible-xs-*

可见

隐藏

隐藏

隐藏

.visible-sm-*

隐藏

可见

隐藏

隐藏

.visible-md-*

隐藏

隐藏

可见

隐藏

.visible-lg-*

隐藏

隐藏

隐藏

可见

.hidden-xs

隐藏

可见

可见

可见

.hidden-sm

可见

隐藏

可见

可见

.hidden-md

可见

可见

隐藏

可见

.hidden-lg

可见

可见

可见

隐藏

打印类

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

class

浏览器

打印机

.visible-print-block.visible-print-inline.visible-print-inline-block

隐藏

可见

.hidden-print

可见

隐藏

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏小程序之家

如何在小程序中实现视频播放

在如何使用小程序媒体组件这篇文章中,我们简单介绍了video视频组件的使用,这篇文章中,将对视频播放做一些补充,同时介绍API的使用。

18.3K30
来自专栏破晓之歌

高德地图开放平台 原

平台地址:http://lbs.amap.com/api/javascript-api/example/amap-ui-districtcluster/cust...

2.1K20
来自专栏web前端

用jQuery+easyUI遇到的几个插件与文件详解

很早就开始跟着老师学习jQuery课程,那时候是要求熟练使用jQuery中的easyUI插件中的控件,包括textbox、combobox、panel、chec...

197100
来自专栏韩东吉的Unity杂货铺

零基础入门 14: UGUI 打字机效果实现

如上图,效果大概就是这样,有一段文字,和音频,文字要这种显示效果,并且在文字出现的时候,要有背景键盘音效的声音,来模拟打字机的效果。最好还可以调整文字的出现速度...

19320
来自专栏用户画像

jQuery之datetimepicker控件(时间单位精确到分钟)

11430
来自专栏前端探索

理解 React Hooks

Sophie Alpert 和 Dan Abramov 在 React Conf 2018 中 提出了 hooks 这个概念,让我们一起来看看 Hooks 在解...

2.3K140
来自专栏青玉伏案

窥探Swift编程之在Playground上尽情的玩耍

  自从苹果公司发布Swift的时候,Xcode上又多了一样新的东西---"Playground"。Playground就像操场一样,可以供我们在代码的世界里尽...

22180
来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

轻松搞定MarkDown

MarkDown是什么? MarkDown是一种轻量级标记语言,创始人为约翰·格鲁伯(John Gruber)。它允许人们“使用易读易写的纯文本格式编写文档。M...

49350
来自专栏木子墨的前端日常

vue中mixin的一点理解

  vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用。最开始我一度认为这个和组件好像没啥区别。。后来发现错了。下面我们来看看mixin...

27020
来自专栏DeveWork

WooCommerce 结算页面自定义(删除/添加)表单元素

最近在接触WooCommerce 开发,突然发现国内有关WooCommerce 的中文资料少的可怜,但还好有谷歌。这篇文章意在记录一个问题,在默认的WooCom...

31880

扫码关注云+社区

领取腾讯云代金券