什么是bootstrap栅格系统

 我来答
百里拐弯儿
2017-08-28 · TA获得超过221个赞
知道小有建树答主
回答量:220
采纳率:100%
帮助的人:129万
展开全部

什么是栅格系统

栅格系统是指,将页面布局划分为等宽的列,然后通过列数的定义来模块化页面布局。
Bootstrap的栅格系统采用了1-12列的模式,并且通过比例计算来设置你定义的列宽。
例如你这一行想要采用两列的布局模式,那么每列的宽度都为外容器的50%,不管你用什么设备浏览,它都会采用这样的比例进行展示。
不过如果当设备宽度小于你设定的最小宽度,那么这两列就会并排成为一列。

Bootstrap的栅格系统

在Bootstrap中使用栅格系统非常简单方便,只需要在你的div中引入它们已经定义好的类即可。
我们先看看Bootstrap有几种栅格类可以使用:
1. .col-xs-* 这是超小屏幕类(<768px),类似手机等设备。
2. .col-sm-* 这是小屏幕设备类(≥768px且<992px),类似平板设备。
3. .col-md-* 这是中型设备类(≥992px且<1200px)。
4. .col-lg-* 这是大型设备类(≥1200px)。

如何使用Bootstrap栅格系统

你可以通过使用这些对应设备的栅格类来决定自己应用在不同设备上的布局样式。
例如:<div class="col-xs-6 col-md-12"></div><div class="col-xs-6 col-md-12"></div>这种编码的结果就是,这两个div在pc端浏览起来是两行(每行都占据12列栅格),而在手机端浏览器来是一行两列(每列占据6列栅格)。
通过这种形式,就能很方便地使用栅格系统定制自己的应用布局了。

其他信息

除了以上的使用方法之外,还能使用“列偏移类”来快速对自己的栅格进行定位,使用方法类似<div
class=".col-md-8 .col-md-offset-3"></div>按照这样的写法,这个div就会在pc端向右偏移 3列。

光点科技
2023-08-15 广告
通常情况下,我们会按照结构模型把系统产生的数据分为三种类型:结构化数据、半结构化数据和非结构化数据。结构化数据,即行数据,是存储在数据库里,可以用二维表结构来逻辑表达实现的数据。最常见的就是数字数据和文本数据,它们可以某种标准格式存在于文件... 点击进入详情页
本回答由光点科技提供
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式