Tips

在 vscode 中通过输入 lorme 去生成垃圾字符串

Container

Bootstrap5 提供了一个用以固定内容宽度的class，通过 container 类能够简单快捷的创建一个包含所有content的自适应，定宽的容器。

container 有几种宽度定义符如下：

container-fluid：满版，无论在哪种设备上都使用页面铺满的样式来呈现

一般来说

• 小于 576 是手机竖屏
• 大于等于 576 是手机竖屏
• 大于等于 768 是平板竖屏
• 大于等于 992 是平板横屏
• 大于等于 1200 是IPad Pro 的横屏
• 大于等于 1400 是PC的屏幕

Grid

Bootstrap5 最重要的就是它的栅格功能，它能够让你的页面布局以栅格的方式来快速的布局，而无需去重复编写复杂的CSS代码。

分栏大小

Bootstrap5 预设将一个 .row 分为 12 格，预设情况下一个占用一格，但是我们可以通过.col-2去改变占用格数，以实现一行多列。

<div class="container-lg">
    <div class="row">
        <div class="col-6">
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus quidem corrupti vitae assumenda ipsa repudiandae quo vero? Vel, eveniet reiciendis omnis fuga sunt ut, voluptates suscipit, ipsum nisi corrupti aspernatur!
        </div>

        <div class="col-6">
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Soluta sed exercitationem ipsam corporis, facilis neque cupiditate, fuga odio praesentium expedita nobis tenetur molestiae harum iure nemo necessitatibus ratione blanditiis aperiam.
        </div>
    </div>
</div>

基于设备

在基于 Bootstrap5 的 breakpoint 机制下， 我们还可通过 .col-md-2去设定当在 medium 平板上我们使用 2 格占位。

自动栏宽

通过定义 row 的额外参数去自定义栏宽。row-cols-md-6 意味着在横屏手机上会使用2格栏目。

在我们不设置的情况下，Bootstrap的栅格功能，会尽可能的让每排的排列能够左右对齐，如果多一个会导致该行出现不对齐的情况，bootstrap 会将它换行放置

通过 g-2 类去控制栏间距

对齐和分布

横轴对齐：

justify-content 描述了在一个容器中元素对于主轴的对齐方式

• justify-content-center： 居中对齐
• justify-content-start：左对齐
• justify-content-end：右对齐

分布

• justify-content-around：将剩余空间分配给主轴线上每个元素的两边
• justify-content-between：先将主轴线上的元素紧贴两边，然后将剩余的空间，均匀的分配给每个元素的空白处

交叉轴对齐：

• align-items-center:交叉轴中心对齐

排序

通过 order-1 这样的方式来对 col 元素进行一个排序，order 类也可以添加 md 这类的设备标签