Bootstrap栅格系统如何使用
时间:2021-07-29

本文关键为大伙儿展现了“Bootstrap栅格系统如何使用”,內容简而通俗易懂,条理清楚,期待可以协助大伙儿处理疑虑,下边让我领着大伙儿一起科学研究并学习培训一下“Bootstrap栅格系统如何使用”本文吧。

假如你之前应用过Bootstrap2或是掌握过响应式网站技术性,那麼毫无疑问对Bootstrap栅格系统并不生疏,因为栅格系统的引进,促使Bootstrap的跨机器设备合理布局表明越来越很有可能。

什么叫栅格系统

栅格系统就是指,将网页布局区划为等宽的列,随后根据列数的定义来模块化设计网页布局。

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在pc端访问起來是二行(每排都占有12列栅格数据),而在移动端电脑浏览器来是一行多列(每列占有6列栅格数据)。

根据这类方式,就能很便捷地应用栅格系统订制自身的运用合理布局了。

别的信息内容

除开之上的操作方法以外,还能应用“列偏位类”来迅速对自身的栅格数据开展精准定位,操作方法相近

依照那样的书写,这一div便会在pc端往右边偏位 3列。

应用BootStrap中的栅格系统后,网页页面调节形变的解决方案

在做考試网页页面时,应用简易的10-2分格合理布局。发觉变小后,div部位紊乱,如图所示

Bootstrap栅格系统怎么用

解决方法以下:

Bootstrap栅格系统怎么用

为每一个应用到栅格数据的class加上全部的显示屏特性,完成响应式

Bootstrap栅格系统怎么用

实际效果如图所示

Bootstrap栅格系统怎么用

之上是“Bootstrap栅格系统如何使用”本文的全部內容,谢谢诸位的阅读文章!坚信大家都拥有一定的掌握,期待共享的內容对大伙儿有一定的协助,假如还想学习培训大量专业知识,热烈欢迎关心程序猿领域文化频道!