Bootstrap的栅格系统是什么？栅格系统详解
导读：收集整理的这篇文章主要介绍了Bootstrap的栅格系统是什么？栅格系统详解，觉得挺不错的，现在分享给大家，也给大家做个参考。本篇文章就给大家带来Bootstrap的栅格系统是什么？栅格系统详解，让大家了解Bootstrap栅格系统、栅格参...
收集整理的这篇文章主要介绍了Bootstrap的栅格系统是什么？栅格系统详解，觉得挺不错的，现在分享给大家，也给大家做个参考。本篇文章就给大家带来Bootstrap的栅格系统是什么？栅格系统详解，让大家了解Bootstrap栅格系统、栅格参数是什么，列偏移、列嵌套怎么设置。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。如果大家想要学习和获取更多的bootstrap相关视频教程也可以访问：bootstrap教程！什么是栅格系统？
Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。
栅格系统用于通过一系列的行（row）与列（col）的组合来创建页面布局，内容就可以放入这些创建好的布局中
注意：
”行（row）“ 必须包含在 .container (固定宽度) 或 .container-fluid(100%宽度)中。
p class="container">
p class="row">
p class="col-md-3">
我是文本/p>
p class="col-md-3">
我是文本/p>
p class="col-md-3">
我是文本/p>
p class="col-md-3">
我是文本/p>
/p>
/p>
表示一个 p 占3列。
栅格参数
| 超小屏幕 手机 (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） | 是 | |||
| 列排序 | 是 |
现在有一个需求：
如果是大屏幕，一行显示6列
如果是中屏幕，一行显示4列
如果是小屏幕，一行显示3列
如果是超小屏幕，一行显2列
p class="container">
p class="row">
p class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
我是文本/p>
p class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
我是文本/p>
p class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
我是文本/p>
p class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
我是文本/p>
p class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
我是文本/p>
p class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
我是文本/p>
/p>
/p>
列偏移
.col-lg-offset-*
" * " 偏移几个位置
p class="container">
p class="row">
p class="col-lg-2 col-lg-2">
我是文本/p>
/p>
/p>
在大屏幕的页面下偏移两个格子
列嵌套
p class="container">
p class="row">
p class="col-lg-5">
p class="row">
p class="col-lg-2">
我是文本/p>
p class="col-lg-2">
我是文本/p>
/p>
/p>
/p>
/p>
在列里面再进行一次嵌套，会把列的大小平均分成12份再计算。
总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。
以上就是Bootstrap的栅格系统是什么？栅格系统详解的详细内容，更多请关注其它相关文章！
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： Bootstrap的栅格系统是什么？栅格系统详解
本文地址： https://pptw.com/jishu/590185.html