html栅格系统格式,Bootstrap的栅格系统是什么?栅格系统详解

本篇文章就给大家带来Bootstrap的栅格系统是什么?栅格系统详解,让大家了解Bootstrap栅格系统、栅格参数是什么,列偏移、列嵌套怎么设置。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。如果大家想要学习和获取更多的bootstrap相关视频教程也可以访问:bootstrap教程!

什么是栅格系统?

Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列。

栅格系统用于通过一系列的行(row)与列(col)的组合来创建页面布局,内容就可以放入这些创建好的布局中

注意:

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

我是文本

我是文本

我是文本

我是文本

表示一个 p 占3列。

栅格参数超小屏幕 手机 (<768px)小屏幕 平板 (≥768px)中等屏幕 桌面显示器 (≥992px)大屏幕 大桌面显示器 (≥1200px)栅格系统行为总是水平排列开始是堆叠在一起的,当大于这些阈值时将变为水平排列C

.container 最大宽度None (自动)750px970px1170px

类前缀.col-xs-.col-sm-.col-md-.col-lg-

列(column)数12

最大列(column)宽自动~62px~81px~97px

槽(gutter)宽30px (每列左右均有 15px)

可嵌套是

偏移(Offsets)是

列排序是

现在有一个需求:

如果是大屏幕,一行显示6列

如果是中屏幕,一行显示4列

如果是小屏幕,一行显示3列

如果是超小屏幕,一行显2列

我是文本

我是文本

我是文本

我是文本

我是文本

我是文本

列偏移

.col-lg-offset-*

" *" 偏移几个位置

我是文本

在大屏幕的页面下偏移两个格子

列嵌套

我是文本

我是文本

在列里面再进行一次嵌套,会把列的大小平均分成12份再计算。

总结:以上就是本篇文的全部内容,希望能对大家的学习有所帮助。

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值