Bootstrap 5 网格的基本结构

简介: Bootstrap 5 网格系统基于 12 列布局,通过 `.row` 和 `.col-*-*` 类实现响应式设计。`.col-*-*` 中的第一个星号表示设备类型(sm, md, lg, xl),第二个星号表示列宽。不指定数字时,Bootstrap 自动均分列宽。

Bootstrap 5 网格的基本结构
以下代码为 Bootstrap 5 网格的基本结构:

Bootstrap5 网格基本结构













第一个例子:创建一行(
)。然后, 添加需要的列( .col- - 类中设置)。 第一个星号 ( ) 表示响应的设备: sm, md, lg 或 xl, 第二个星号 () 表示一个数字, 同一行的数字相加为 12。

第二个例子: 不在每个 col 上添加数字,让 bootstrap 自动处理布局,同一行的每个列宽度相等: 两个 "col" ,每个就为 50% 的宽度。三个 "col"每个就为 33.33% 的宽度,四个 "col"每个就为 25% 的宽度,以此类推。同样,你可以使用 .col-sm|md|lg|xl 来设置列的响应规则。

相关文章
|
6月前
|
编解码 移动开发 前端开发
【Bootstrap】<前端框架>Bootstrap布局容器&栅格网格系统
【1月更文挑战第17天】【Bootstrap】<前端框架>Bootstrap布局容器&栅格网格系统
|
8天前
|
前端开发
Bootstrap 5 网格的基本结构
Bootstrap 5 网格系统的基本结构包括创建行(`<div class="row">`)和列(`<div class="col-*-*">`)。第一个星号表示响应的设备大小(sm, md, lg, xl),第二个星号表示列宽,同一行的列宽总和为 12。不指定数字时,Bootstrap 会自动分配等宽的列。例如,两个 `col` 列各占 50%,三个 `col` 列各占 33.33%。
|
8天前
|
前端开发
Bootstrap 5 网格的基本结构 创建相等宽度的列,Bootstrap 自动布局
Bootstrap 自动布局允许创建响应式等宽或不等宽的列。例如,使用 `.col` 类可创建等宽列;使用 `.col-sm-*` 类可在不同屏幕尺寸上自定义列宽,如 `.col-sm-3` 表示在小屏幕及以上设备上占 1/4 宽度。未指定宽度的列将自动均分剩余空间。
|
6月前
|
前端开发 容器
Bootstrap 5 保姆级教程(一):容器 & 网格系统
Bootstrap 5 保姆级教程(一):容器 & 网格系统
|
前端开发 容器
前端基础 - Bootstrap网格系统
前端基础 - Bootstrap网格系统
54 0
|
前端开发
Bootstrap——网格布局
Bootstrap——网格布局
100 0
|
前端开发 容器
【Bootstrap】(二)Bootstrap 网格系统
【Bootstrap】(二)Bootstrap 网格系统
187 0
【Bootstrap】(二)Bootstrap 网格系统
|
前端开发 容器
Bootstrap教程(3)--容器与网格
本文目录 1. 网格的意义 2. 网格的使用 2.1 引入Bootstrap 2.2 建立容器 2.3 创建行 2.4 创建列 2.5 列的偏移 3. 小结
166 0
Bootstrap教程(3)--容器与网格
N..
|
6月前
|
开发框架 前端开发 UED
Bootstrap的CSS组件
Bootstrap的CSS组件
N..
64 0
|
前端开发 容器