Bootstrap5 网格系统-JavaScript中文网-JavaScript教程资源分享门户

Bootstrap 5 的网格系统是构建响应式布局的基础。它使用了灵活的容器和列来创建复杂的布局结构，适用于各种屏幕尺寸。网格系统的核心是行和列，通过这些组件可以轻松地调整布局，使其在不同设备上看起来都很好。

基础概念

容器

容器是网格系统的中心容器，用于限制页面宽度并居中内容。Bootstrap 5 提供了两种类型的容器：.container 和 .container-fluid。.container 类型会根据断点提供固定宽度，并且居中显示。.container-fluid 则是全宽容器，不设置最大宽度，适合需要占据全部宽度的设计。

// www.javascriptcn.com code example
<div class="container">
    <div class="row">
        <div class="col">Column</div>
    </div>
</div>

<div class="container-fluid">
    <div class="row">
        <div class="col">Column</div>
    </div>
</div>

行

行是网格系统中的水平组，用于包裹列。每个行中的列总和不能超过 12 列，否则会导致布局错乱。行应该放在容器中，以确保它们正确对齐。

<div class="container">
    <div class="row">
        <div class="col-6">Half</div>
        <div class="col-6">Half</div>
    </div>
</div>

列

列是实际内容放置的地方，它们可以嵌套在其他列内，从而创建更复杂的布局。列可以通过不同的类来定义其宽度，如 .col-4、.col-md-3 等。

<div class="container">
    <div class="row">
        <div class="col-4">One Third</div>
        <div class="col-4">One Third</div>
        <div class="col-4">One Third</div>
    </div>
</div>

响应式网格系统

Bootstrap 5 的网格系统是响应式的，这意味着你可以为不同的屏幕尺寸指定不同的列宽。通过添加前缀（如 sm, md, lg, xl, xxl），你可以为特定的断点设置列宽。

<div class="container">
    <div class="row">
        <div class="col-sm-6 col-md-4">Column</div>
        <div class="col-sm-6 col-md-8">Column</div>
    </div>
</div>

自动布局列

除了固定的列宽之外，你还可以使用自动布局列来填充剩余的空间。例如，使用 .col 类可以让列自动扩展到可用空间。

<div class="container">
    <div class="row">
        <div class="col">Column</div>
        <div class="col">Column</div>
        <div class="col">Column</div>
    </div>
</div>

嵌套列

在 Bootstrap 5 中，你可以将列嵌套在其他列中，以创建更复杂的布局。只需在需要嵌套的列内部添加一个新的行和列即可。

// www.javascriptcn.com code example
<div class="container">
    <div class="row">
        <div class="col-9">
            Primary content
            <div class="row">
                <div class="col-6">Nested Column</div>
                <div class="col-6">Nested Column</div>
            </div>
        </div>
        <div class="col-3">Sidebar</div>
    </div>
</div>

偏移列

有时你可能希望某些列与相邻的列之间留出一些空白。Bootstrap 5 提供了 .offset-* 类来实现这一效果。这些类会增加列的左侧边距，从而创建空隙。

<div class="container">
    <div class="row">
        <div class="col-4">Column</div>
        <div class="col-4 offset-4">Column</div>
    </div>
</div>

列排序

通过使用 .order-* 类，你可以控制列在小屏幕上的顺序。这些类允许你在不同断点下改变列的顺序，而不改变 HTML 结构。

<div class="container">
    <div class="row">
        <div class="col order-md-2">First on small screens</div>
        <div class="col order-md-1">Second on small screens</div>
    </div>
</div>

混合布局

你也可以混合使用固定宽度和自动布局列，以适应特定的设计需求。这种灵活性使得 Bootstrap 5 成为一个强大的工具，可以帮助开发者快速构建出美观且功能丰富的网站。

<div class="container">
    <div class="row">
        <div class="col-4">Fixed Width</div>
        <div class="col">Auto Layout</div>
        <div class="col-4">Fixed Width</div>
    </div>
</div>

结束

以上内容详细介绍了 Bootstrap 5 的网格系统，包括容器、行、列的基本概念，以及如何使用响应式网格系统来创建适应不同屏幕尺寸的布局。通过这些技巧，你可以构建出既美观又实用的网页布局。