Bootstrap——栅格系统的简单使用

最新推荐文章于 2023-03-13 00:53:22 发布

IERU

最新推荐文章于 2023-03-13 00:53:22 发布

阅读量2.9k

点赞数 4

文章标签： bootstrap

本文链接：https://blog.csdn.net/weixin_43723548/article/details/108909029

版权

Bootstrap——栅格系统的简单使用

什么是栅格系统
栅格系统的基本使用
栅格嵌套
利用栅格系统进行网页布局

什么是栅格系统

· Bootstrap包含了一套响应式、移动设备优先的流式栅格系统。利用Bootstrap，我们可以快速地完成页面布局，以及适配不同大小的屏幕。
· 栅格系统通过一系列的行（row）与列（column）的组合来创建页面布局。

栅格系统的基本使用

栅格系统的基本结构：

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
		… …   
   </div>
</div>

每一个row代表一行。每行默认最多12列

使用样例：

<div class="row" >	
	<div class="col-md-1 border py-3 "> 1 </div>
	<div class="col-md-1 border py-3 "> 1 </div>	
	<div class="col-md-1 border py-3 "> 1 </div>
	<div class="col-md-1 border py-3 "> 1 </div>	
	<div class="col-md-1 border py-3 "> 1 </div>
	<div class="col-md-1 border py-3 "> 1 </div>	
	<div class="col-md-1 border py-3 "> 1 </div>
	<div class="col-md-1 border py-3 "> 1 </div>	
	<div class="col-md-1 border py-3 "> 1 </div>
	<div class="col-md-1 border py-3 "> 1 </div>	
	<div class="col-md-1 border py-3 "> 1 </div>
	<div class="col-md-1 border py-3 "> 1 </div>	
</div>
		
<div class="row" >
	<div class="col-md-4 border py-3 "> 4 </div>
	<div class="col-md-4 border py-3 "> 4 </div>	
	<div class="col-md-4 border py-3 "> 4 </div>
</div>
		
<div class="row" >
	<div class="col-md-3 border py-3 "> 3 </div>
	<div class="col-md-9 border py-3 "> 9 </div>	
</div>

<div class="row" >
	<div class="col-md-12 border py-3 "> 12 </div>
</div>

效果图：
在这里插入图片描述
Bootstrap的栅格系统允许您根据屏幕大小调整列的宽度。
示例中的py-3为设置列宽。
示例中col-md-1中的md用来匹配 ≥992px 的设备。
除md之外，Bootstrap还支持另外三种尺寸的设备：
· lg用来匹配大型设备（桌面显示器）：≥ 1200px 的屏幕；
· sm用来匹配小型设备（平板）：≥ 768px 的屏幕；
· xs用来匹配超小设备（手机）：< 768px 的屏幕；

栅格嵌套

栅格系统的.row是可以嵌套的，借此可以完成更加复杂的布局。
在某一列中继续添加一行.row，可以再进行细分

<div class="row" >
	<div class="col-md-8 border py-3">
		<div class="row">
			<div class="col-md-8 border py-3  ">	col-8-8		</div>
			<div class="col-md-4 border py-3  ">	col-8-4		</div>
		</div>
	</div>
	<div class="col-md-4 border py-3 ">col-4</div>
	<div class="row" >
		<div class="col-md-8 border py-3 ">	   col-8	</div>
		<div class="col-md-4 border py-3 ">	   col-4  	</div>	
</div>
	
</div>

效果图：
在这里插入图片描述

利用栅格系统进行网页布局

用栅格系统布局一个如下：顶部有一个logo区域，同时跨越两栏。左栏内容，右栏导航，两栏下方还有一个footer区域。

<body class="container">
		<h3 class="mb-4">栅格系统</h3>
		<div class="row">
			<div class="col border py-3 bg-info no-gutters " style="text-align:center">	LOGO		</div>
		</div>		
		<div class="row" style="height:500px">
			<div class="col-8 border py-3 bg-info no-gutters" style="text-align:center">	文本内容	</div>
			<div class="col-4 border py-3 bg-info no-gutters" style="text-align:center">	导航栏	</div>
		</div>
		
		<footer style="text-align: center; flex-grow: 1;display: flex;align-items: flex-end;justify-content: center">
		    <p>  底部footer </p>
		</footer>
		
</body>

效果图：
在这里插入图片描述

IERU

关注

4
点赞
踩
9

收藏

觉得还不错? 一键收藏
3
评论
Bootstrap——栅格系统的简单使用

Bootstrap——栅格系统的简单使用什么是栅格系统栅格系统的基本使用栅格嵌套利用栅格系统进行网页布局什么是栅格系统· Bootstrap包含了一套响应式、移动设备优先的流式栅格系统。利用Bootstrap，我们可以快速地完成页面布局，以及适配不同大小的屏幕。· 栅格系统通过一系列的行（row）与列（column）的组合来创建页面布局。栅格系统的基本使用栅格系统的基本结构：<div class="container"> <div class="row">
复制链接

扫一扫