概述:Bootstrap5 与 Bootstrap 3 & 4
1、Bootstrap5 支持所有主要的最新稳定版本浏览器,但不支持 Internet Explorer 11 及以下版本。
2、Bootstrap5 和 Bootstrap 3 & 4 的主要区别在于 Bootstrap5 不再依赖 jQuery,使用了原生的 JavaScript,当然我们如果要想用也可以引入 jQuery。
创建第一个 Bootstrap 5 页面
移动设备优先
为了让 Bootstrap 开发的网站对移动设备友好,确保适当的绘制和触屏缩放,需要在网页的 head 之中添加 viewport meta 标签
width=device-width
表示宽度是设备屏幕的宽度。
initial-scale=1
表示初始的缩放比例。
容器类
需要一个容器元素来包裹网站的内容。
使用以下两个容器类:
- .container 类用于固定宽度并支持响应式布局的容器。
- .container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器
固定宽度
.container 类用于创建固定宽度的响应式页面。
注意:宽度 (max-width) 会根据屏幕宽度同比例放大或缩小。
注意:超级大屏幕 (≥1400px) 是 Bootstrap 5 新增加的, Bootstrap 4 最大的是特大屏幕 (≥1200px)。
100% 宽度
.container-fluid 类用于创建一个全屏幕尺寸的容器,容器始终跨越整个屏幕宽度(width 始终为 100%):
容器内边距
默认情况下,容器都有填充左右内边距,顶部和底部没有填充内边距。 Bootstrap 提供了一些间距类用于填充边距。 比如 .pt-5 就是用于填充顶部内边距:
容器的边框和颜色
边框(border)和颜色(bg-dark、bg-primary等)类用于设置容器的样式
响应式容器
你可以使用 .container-sm|md|lg|xl 类来创建响应式容器。
容器的 max-width 属性值会根据屏幕的大小来改变。
Bootstrap5 网格系统
Bootstrap 提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多 12 列。
网格类
网格系统规则
- 需要放在设置了
.container
(固定宽度) 或.container-fluid
(全屏宽度) 类的容器,这样就可以自动设置一些外边距与内边距。 - 网格列是通过跨越指定的 12 个列来创建。 例如,设置三个相等的列,需要使用三个 .col-sm-4 来设置。
- Bootstrap 5 和 Bootstrap 4 使用 flexbox(弹性盒子) 而不是浮动。 Flexbox 的一大优势是,没有指定宽度的网格列将自动设置为等宽与等高列 。
Bootstrap 5 网格的基本结构
( .col-*-* 类中设置)。 第一个星号 (*) 表示响应的设备: sm, md, lg 或 xl, 第二个星号 (*) 表示一个数字, 同一行的数字相加为 12。
不在每个 col 上添加数字,让 bootstrap 自动处理布局,同一行的每个列宽度相等
两个 "col" ,每个就为 50% 的宽度。三个 "col"每个就为 33.33% 的宽度,四个 "col"每个就为 25% 的宽度
等宽响应式列
在移动设备上,即屏幕宽度小于 576px 【sm大于等于576】时,四个列将会上下堆叠排版:
不等宽响应式列
平板和桌面端
在桌面设备的显示器上两个列的宽度各占 50%,如果在平板端则左边的宽度为 25%,右边的宽度为 75%, 在移动手机等小型设备上会堆叠显示。
嵌套列
创建两列布局,其中一列内嵌套着另外两列:
偏移列
偏移列通过 offset-*-* 类来设置。第一个星号( * )可以是 sm、md、lg、xl,表示屏幕设备类型,第二个星号( * )可以是 1 到 11 的数字。
为了在大屏幕显示器上使用偏移,请使用 .offset-md-* 类。这些类会把一个列的左外边距(margin)增加 * 列,其中 * 范围是从 1 到 11。
例如:.offset-md-4 是把.col-md-4 往右移了四列格。