其他分享
首页 > 其他分享> > Bootstrap4.x学习笔记【二】

Bootstrap4.x学习笔记【二】

作者:互联网

                  布局系统

一、布局介绍

1. 对于容器布局,Bootstrap4.x 提供了.container 和.container-fluid 两种;
2. 这两种样式是启用布局栅格系统最基本的要素;
3. .contianer 是固体自适应方式,.container-fluid 是流体 100%自适应方式;
4. 容器布局可以嵌套,但一般来说,不推荐且很少使用到:
5. 自适应对应的响应式方式如下 media:
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
6. 从响应式的 media 可以看出,Bootstrap4 是以移动端为优先的。

二、栅格系统

栅格系统有点像田字格本子,大小整齐划一。

 

1. Bootstrap4.x 的栅格系统是一个以移动为优先的网格系统;
2. 基于 12 列的布局、5 种响应尺寸(面向不同屏幕设备);
3. 完全使用 flexbox 流式布局构建的,完全支持响应式标准;
4. 具体采用 div 容器的行、列和对齐内容来构建响应式布局;

三、栅格系统展示

 

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>布局系统</title>

	<!-- 引入Bootstrap CSS -->
	<link rel="stylesheet" href="../css/bootstrap.css">

	<!-- 移动设备优先 -->
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <!-- 为了显示的更加清楚,可以给行列加对比鲜明的 CSS 来观察 -->
	<style>
		.row {
			border: dashed 1px red;
		}
		.col-sm,.col-sm-4,.col-sm-8,.col-sm-2 {
			border: solid 1px blue;
		}
	</style>
</head>
<body>
	
<div class="container">
	<div class="row">
		<div class="col-sm">第一列</div>
		<div class="col-sm">第二列</div>
		<div class="col-sm">第三列</div>
	</div>
</div>

<br/>
<!-- 采用.container-fluid,那么会 100%占用屏幕宽度 -->
<div class="container-fluid">
	<div class="row">
		<div class="col-sm">第一列</div>
		<div class="col-sm">第二列</div>
		<div class="col-sm">第三列</div>
	</div>
</div>

<br/>
<!-- sm是屏幕类型 之一-->
<!-- 在.col-sm-*的星号位置,还可以强制设定每列所占有的栅格列; -->
<div class="container-fluid">
	<div class="row">
		<div class="col-sm-4">第一列</div>
		<div class="col-sm-4">第二列</div>
		<div class="col-sm-2">第三列</div>
	</div>
</div>

<br/>

<div class="container-fluid">
	<div class="row">
		<div class="col-sm-8">第一列</div>
		<div class="col-sm-4">第二列</div>
	</div>
</div>


<!-- 引入jQuery文件 -->
<script src="../js/jquery-3.5.1.js"></script>
<script src="../js/bootstrap.js"></script>
</body>
</html>

 

 

四、栅格等级

 

栅格系统中有五个栅格等级,具体如下表:

 

超小屏幕

<576px

小屏幕

>=576px

中等屏幕

>=768px

大屏幕

>=992px

超大屏幕

>=1200px

前缀 .col- .col-sm- .col-md- .col-lg- .col-xl-
列数               12列

如果同时是使用两个或以上的级别,并且比例相同,则遵循移动端优先的原则;

使用.w-100 可以切割栅格栏位,进行分行操作;


<div class="container"> <div class="row"> <div class="c col">第一列</div> <div class="c col">第二列</div> <div class="w-100"></div> <div class="c col">第三列</div> <div class="c col">第四列</div> </div> </div>

如果强制设置了 col-3 数值,那切割后,将不会自动填充;

<div class="container">
	<div class="row">
		<div class="c col-sm-4 col-xl-12 col-lg-6">第一列</div>
		<div class="c col-sm-4 col-xl-12 col-lg-6">第二列</div>
		<div class="c col-sm-4 col-xl-12 col-lg-12">第三列</div>
	</div>
</div>

 

标签:media,第二列,笔记,学习,栅格,第三列,Bootstrap4,第一列,col
来源: https://www.cnblogs.com/Small-Windmill/p/13321158.html