【Bootstrap学习】

Bootstrap5 网格的基本结构

等宽响应式列

Bootstrap 5 网格系统有6个类:

.col-针对所有设备

·col-sm平板-屏幕宽度等于或大于576px。

.col-md-桌面显示器,屏幕宽度等于或大于768px

·col-lg大桌面显示器,屏幕宽度等于或大于992px

·col-xl特大桌面显示器,屏幕宽度等于或大于1200px

·col-xxl超大桌面显示器,屏幕宽度等于或大于1400px

复制代码
<div class="container">
	<!-- 等宽十二列 -->
	<div class="row">
		<div calss="col-md-1">1</div>
		<div calss="col-md-1">2</div>
		<div calss="col-md-1">3</div>		
		<div calss="col-md-1">4</div>
		<div calss="col-md-1">5</div>
		<div calss="col-md-1">6</div>
		<div calss="col-md-1">7</div>
		<div calss="col-md-1">8</div>
		<div calss="col-md-1">9</div>		
		<div calss="col-md-1">10</div>
		<div calss="col-md-1">11</div>
		<div calss="col-md-1">12</div>
	</div>
</div>

<div class="container">
	<!-- 等宽三列 -->
	<div class="row">
		<div calss="col-md-4">1</div>
		<div calss="col-md-4">2</div>
		<div calss="col-md-4">3</div>		
	</div>
</div>

不等宽响应式列

复制代码
<div class="container">
	<!-- 不等宽两列,两列分别占4格,8格 -->
	<div class="row">
		<div calss="col-md-4">1</div>
		<div calss="col-md-8">2</div>		
	</div>
</div>

进行栅格系统操作的步骤

① 创建栅格系统容器

② 由"container"和"row"共同组成栅格容器,"row"代表的是一行。

③ 创建栅格容器后,设置名为col-md的div,当尾数为1时,表示每个div的宽度占1/12,所以每行最多可以防止12个子div,如果超过12个,则会在下一行显示。
网格系统规则

① 网格每一行需要放在设置了.container(固定宽度)或.container-fluid(全屏宽度)类的容器中,这样就可以自动设置一些外边距与内边距。

② 使用行来创建水平的列组。

③ 内容需要放置在列中,并且只有列可以是行的直接子节点。

④ 预定义的类,如.row和.col-sm-4可用于快速制作网格布局。
嵌套列

在原始列宽划分的基础上,对列进行进一步划分

复制代码
<div class="container">
	<div class="col-md-9">
		<div class="row">
			<div class="col-md-6">1</div>
			<div class="col-md-6">2</div>
		</div>
		<div class="row">
			<div class="col-md-3">1</div>
			<div class="col-md-6">2</div>
		</div>


网格偏移列(offset)

复制代码
<div class="row">
	<div class="col-md-4">1</div>
	<div class="col-md-4 offset-md-4>2</div>
</div>
<div class="row">
	<div class="col-md-6 offset-md-3">居中</div>
</div>


网格列顺序

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

复制代码
<!--位置顺序不会发生改变-->
<div class="row">
	<div class="col-md-4">1</div>
	<div class="col-md-4">2</div>
	<div class="col-md-4 order-1">3</div>
</div>

<!-- 位置顺序变为2,3,1 -->
<div class="row">
	<div class="col-md-4 order-3">1</div>
	<div class="col-md-4 order-1">2</div>
	<div class="col-md-4 order-2">3</div>
</div>

网格排序规则

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

复制代码
<div class="row">
	<div class="col-md-4">1</div>
	<div class="col-md-4 order-first">order-first2</div>
	<div class="col-md-4 order-last">order-last3</div>
	<div calss="col-md-4 order-1">order-1(4)</div>
	<div class="col-md-4 order-2">order-2(5)</div>
	<div class="col-md-4">6</div>
	<div class="col-md-4">7</div>
	<div class="col-md-4">8</div>
</div>
相关推荐
musk12123 分钟前
electron 打包太大 试试 tauri , tauri 安装打包demo
前端·electron·tauri
万少1 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL1 小时前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl021 小时前
java web5(黑马)
java·开发语言·前端
Amy.Wang1 小时前
前端如何实现电子签名
前端·javascript·html5
今天又在摸鱼1 小时前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿1 小时前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再2 小时前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling5552 小时前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
拾光拾趣录2 小时前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css