02Bootstrap5网格系统

最新推荐文章于 2023-10-08 18:09:40 发布

心醉瑶瑾前

最新推荐文章于 2023-10-08 18:09:40 发布

阅读量384

点赞数

分类专栏： Bootstrap5 文章标签： bootstrap

本文链接：https://blog.csdn.net/qq_46452300/article/details/121800297

版权

Bootstrap5 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

02Bootstrap5网格系统

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>菜鸟教程Bootstrap5网格系统</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body>
<!--移动设备优先的流式网格系统，会随着屏幕或视口（viewport）尺寸的增加系统自动分为最多12列-->
<!--同时可以自定义列数，必须确保每一行中列的总和等于或小于12-->
<!--
网格类
Bootstrap 5 网格系统有以下 6 个类:
.col- 针对所有设备。
.col-sm- 平板 - 屏幕宽度等于或大于 576px。
.col-md- 桌面显示器 - 屏幕宽度等于或大于 768px。
.col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px。
.col-xl- 特大桌面显示器 - 屏幕宽度等于或大于 1200px。
.col-xxl- 超大桌面显示器 - 屏幕宽度等于或大于 1400px。
-->

<!--相等宽度的列，Bootstrap自动布局-->
<div class="row">
    <div class="col bg-dark text-white">你好</div>
    <div class="col bg-primary text-white">你好</div>
    <div class="col bg-dark text-white">你好</div>
    <div class="col bg-primary text-white">你好</div>
</div>

<!--等宽响应式布局-->
<div class="row">
    <!--sm平板，小于576px时会重叠-->
    <div class="col-sm-3 p-3 bg-primary text-white">.col</div>
    <div class="col-sm-3 p-3 bg-dark text-white">.col</div>
    <div class="col-sm-3 p-3 bg-primary text-white">.col</div>
    <div class="col-sm-3 p-3 bg-dark text-white">.col</div>
</div>

<!--不等宽响应式列-->
<div class="row">
    <div class="col-sm-4 bg-primary text-white">你好</div>
    <div class="col-sm-8 bg-dark text-white">你好</div>
</div>

<!--
平板、桌面、大桌面显示器、超大桌面显示器
以下实例在平板、桌面、大桌面显示器、超大桌面显示器的宽度比例为分别为
：25%/75%、50%/50%、33.33%/66.67%、16.67/83.33%,
在移动手机等小型设备上会堆叠显示。
-->
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3 col-md-6 col-lg-4 col-xl-2 bg-primary text-white">你好</div>
        <div class="col-sm-9 col-md-6 col-lg-8 col-xl-10 bg-dark text-white">你好</div>
    </div>
</div>
<br>

<!--
偏移列
偏移列通过 offset-*-* 类来设置。第一个星号( * )可以是 sm、md、lg、xl，
表示屏幕设备类型，第二个星号( * )可以是 1 到 11 的数字。
为了在大屏幕显示器上使用偏移，请使用 .offset-md-* 类。
这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11。
例如：.offset-md-4 是把.col-md-4 往右移了四列格。
-->

<div class="container-fluid mt-3">
    <h1>偏移列</h1>
    <p>.offset-md-4 是把.col-md-4 往右移了四列格。</p>
    <div class="row">
        <div class="col-md-1 p-3 bg-dark text-white">.col-md-1</div>
    </div>
    <div class="row">
        <div class="col-md-4 p-3 bg-primary text-white">.col-md-4</div>
        <div class="col-md-4 p-3 offset-md-4 bg-dark text-white">.col-md-4 .offset-md-4</div>
    </div>
    <div class="row">
        <div class="col-md-3 offset-md-3 bg-primary text-white">.col-md-3 .offset-md-3</div>
        <div class="col-md-3 offset-md-3 bg-dark text-white">.col-md-3 .offset-md-3</div>
    </div>
    <div class="row">
        <div class="col-md-6 offset-md-3 bg-primary text-white">.col-md-6 .offset-md-3</div>
    </div>
</div>
</body>
</html>

在这里插入图片描述

心醉瑶瑾前

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
02Bootstrap5网格系统

02Bootstrap5网格系统<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>菜鸟教程Bootstrap5网格系统</title> <link rel=
复制链接

扫一扫