bootstrap5网格布局

109次阅读
没有评论

Bootstrap 的 Grid system 是用来创建响应式布局的强大工具。通过将页面布局划分为 12 列网格,可以轻松地创建响应式布局,以适应各种屏幕尺寸和设备。

下面是一个使用 Bootstrap 5 的 Grid system 的完整示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap Grid Example</title>
    <!-- 引入 Bootstrap 样式文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
    <h1>Bootstrap Grid Example</h1>
    <p>Resize the browser window to see the effect.</p>
    <div class="row">
        <div class="col-sm-6 col-md-4 col-lg-3 bg-primary text-white">
            <p>Column 1</p>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-3 bg-secondary text-white">
            <p>Column 2</p>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-3 bg-info text-white">
            <p>Column 3</p>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-3 bg-success text-white">
            <p>Column 4</p>
        </div>
    </div>
</div>
<!-- 引入 Bootstrap JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js"></script>
</body>
</html>

在这个示例中,我们将页面布局划分为一个带有 4 列网格的行,每列分别占据了不同数量的网格,即第一列占据 6 个网格,第二列占据 4 个网格,第三列占据 3 个网格,第四列占据 3 个网格。这些网格的大小会根据屏幕尺寸的变化而自动调整,以适应不同的设备。

注意,在这个示例中,我们使用了 Bootstrap 的 Grid system 的响应式工具类 col-sm-*、col-md-* 和 col-lg-*,它们分别表示在小、中和大屏幕上要占据多少列。例如,col-sm-6 表示在小屏幕上要占据 6 个列,而在中等和大屏幕上将占据相同的 6 个列。

另外,我们还为每个列添加了一个不同的背景颜色和文本颜色,以便更好地展示 Grid system 的效果。

现在保存文件并在浏览器中打开,可以看到在调整浏览器窗口大小时,列的大小和排列方式会自动调整,以适应不同的屏幕尺寸。

正文完
 
评论(没有评论)