Bootstrap4的栅格布局

本文详细介绍了Bootstrap4的栅格布局,包括栅格容器、栅格布局的步骤以及关于列的各种设置,如平均分配、指定列宽、可变列宽、列拆分、列排序、列偏移和列对齐等,帮助读者掌握Bootstrap4的响应式布局技巧。
摘要由CSDN通过智能技术生成


Bootstrap架构内置了一套响应式网格的布局系统,网格布局实际上就是把网页分成一定数量的栏数或者叫做网格,Bootstrap4的网格系统就是把网页分成12栏,如果你想让网页中的某一元素占用一定数量的栏数的宽度,你可以在该元素上添加一个类似于.col- *特定的类。

1 栅格容器

容器是Bootstrap中最基本的布局元素,在使用我们的默认网格系统时,容器是必需的。Bootstrap4提供了如下容器:
.container:任意视窗下,添加补丁,固定尺寸容器
.container-fulid:任意视窗下,100%宽度容器
.container-[sm | md | lg | xl] :100%显示到指定视窗时,固定尺寸容器

2 栅格布局的步骤

步骤1:声明栅格布局容器

<div class="container"></div>

步骤2:在容器中声明行

<div class="container">
	<div class="row"></div>
</div>

步骤3:在行中声明列

<div class="container">
	<div class="row">
		<div class="col"></div>
		<div class="col"></div>
		<div class="col"></div>
		<div class="col"></div>
	</div>
</div>

3 关于列

3.1 设置列宽

3.1.1 平均分配栅格

.col :在所有视窗下平均分配栅格数
.col-[sm | md | lg | xl]:指定视窗及以上,平均分配栅格。
请编辑以下代码,在不同视窗下显示页面效果,然后修改.col类名为.col-sm.col-md.col-lg.col-xl类名,理解Bootstrap架构的视窗断点。

<div class="container">
	<div class="row">
		<div class="col border">第1列</div>
		<div class="col border">第2列</div>
		<div class="col border">第3列</div>
	</div>
</div>

在Bootsrap4中,当我们平均分配栅格数的时候,可以在行标签添加如下类,可以指定该行所显示的列数。
.row-cols-*:任意视窗,该行所显示的列数。*代表的是1 – 6这六个数字。
.row-cols-[ sm | md | lg | xl ]-*:指定视窗及以上,该行所显示的列数

请编辑以下代码,在不同视窗下显示页面效果,然后修改`.row-cols-*`类名为`.row-cols-sm-*`,`.row-cols-md-*`,`.row-cols-lg-*`,`.row-cols-xl-*`类名,在不同视窗下显示页面的效果。
<div class="container">
	<div class="row row-cols-2">
		<div class="col border">第1列</div>
		<div class="col border">第2列</div>
		<div class="col border">第3列</div>
		<div class
  • 3
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值