【Bootstrap学习 day1】

Bootstrap5 网格的基本结构

等宽响应式列
Bootstrap 5 网格系统有6个类：
.col-针对所有设备
·col-sm平板-屏幕宽度等于或大于576px。
.col-md-桌面显示器，屏幕宽度等于或大于768px
·col-lg大桌面显示器，屏幕宽度等于或大于992px
·col-xl特大桌面显示器，屏幕宽度等于或大于1200px
·col-xxl超大桌面显示器，屏幕宽度等于或大于1400px

	
	

		
1
		
2
		
3
		
		
4
		
5
		
6
		
7
		
8
		
9
		
		
10
		
11
		
12
	

	
	

		
1
		
2
		
3
		
	

不等宽响应式列

	
	

		
1
		
2
		
	

进行栅格系统操作的步骤：
① 创建栅格系统容器
② 由“container”和“row”共同组成栅格容器，“row”代表的是一行。
③ 创建栅格容器后，设置名为col-md的div，当尾数为1时，表示每个div的宽度占1/12，所以每行最多可以防止12个子div，如果超过12个，则会在下一行显示。
网格系统规则
① 网格每一行需要放在设置了.container（固定宽度）或.container-fluid（全屏宽度）类的容器中，这样就可以自动设置一些外边距与内边距。
② 使用行来创建水平的列组。
③ 内容需要放置在列中，并且只有列可以是行的直接子节点。
④ 预定义的类，如.row和.col-sm-4可用于快速制作网格布局。
嵌套列
在原始列宽划分的基础上，对列进行进一步划分

	

		

			
1
			
2
		
		

			
1
			
2
		

网格偏移列（offset）

	
1
	

	
居中

网格列顺序
※ 需要交换位置的列只有与被交换位置的列二者同时发生顺序改变时，列顺序的变更才会生效

	
1
	
2
	
3

	
1
	
2
	
3

网格排序规则
first、last关键字排序优先级别>默认顺序>数字

	
1
	
order-first2
	
order-last3
	
order-1(4)
	
order-2(5)
	
6
	
7
	
8