Bootstrap5 网格系统

最新推荐文章于 2024-10-02 09:00:00 发布

Gary jie

最新推荐文章于 2024-10-02 09:00:00 发布

阅读量479

点赞数 1

分类专栏：前端 Bootstrap5 文章标签： bootstrap 前端 html

本文链接：https://blog.csdn.net/qq_44174346/article/details/126015878

版权

前端 Bootstrap5 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

Bootstrap5 安装使用

Bootstrap5 CDN

<!-- 新 Bootstrap5 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
 
<!--  popper.min.js 用于弹窗、提示、下拉菜单 -->
<script src="https://cdn.staticfile.org/popper.js/2.9.3/umd/popper.min.js"></script>
 
<!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.min.js"></script>

移动设备优先

为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签

width=device-width 表示宽度是设备屏幕的宽度。
initial-scale=1 表示初始的缩放比例。

<!DOCTYPE html>
<html>
  <head>
    <meta  name="viewport" content="width=device-width,initial-scale=1"charset="utf-8"> 
  </head>
</html>

容器类

.container 类用于固定宽度并支持响应式布局的容器。
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

<head>
  <title>Bootstrap5 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>

<body>
<div class="container">
  <h1>我的第一个 Bootstrap 页面</h1>
  <p>这是一些文本。</p> 
</div>

<div class="container-fluid">
  <h1>我的第一个 Bootstrap 页面</h1>
  <p>使用了 .container-fluid，100% 宽度，占据全部视口（viewport）的容器。</p> 
</div>
</body>

容器内边距

<div class="container p-5 my-5 border bg-primary
text-white ">
 <p>填充顶部内边距  边框 蓝背景 白字</p></div>

响应式容器

<div class="container-md mt-3 border">.container-md</div>

Bootstrap5 网格系统

在这里插入图片描述

创建相等宽度的列，Bootstrap 自动布局

<div class="container-fluid mt-3">
  <h1>创建相等宽度的列</h1>
  <p>创建三个相等宽度的列! 尝试在 class="row" 的 div 中添加新的 class="col" div，会显示四个等宽的列。</p>
  <div class="row">
    <div class="col p-3 bg-primary text-white">.col</div>
    <div class="col p-3 bg-dark text-white">.col</div>
    <div class="col p-3 bg-primary text-white">.col</div>
  </div>
</div>

等宽响应式列

<div class="container-fluid mt-3">
  <h1>等宽响应式列</h1>
  <p>重置浏览器大小查效果。</p>
  <p> 在移动设备上，即屏幕宽度小于 576px 时，四个列将会上下堆叠排版。</p>
  <div class="row">
    <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>

不等宽响应式列

<div class="container-fluid mt-3">
  <h1>不等宽响应式列</h1>
  <p>重置浏览器大小查效果。</p>
  <p>在移动设备上，即屏幕宽度小于 576px 时，四个列将会上下堆叠排版。</p>
  <div class="row">
    <div class="col-sm-4 p-3 bg-primary text-white">.col</div>
    <div class="col-sm-8 p-3 bg-dark text-white">.col</div>
  </div>
</div>

设置某一列宽度⭐

<div class="container-fluid mt-3">
  <h2>设置某一列宽度</h2>
  <p>如果只设置一列的宽度，其他列会自动均分剩下的宽度。 以下实例将列宽度为 25%、50%、25%：</p>
  <div class="row">
    <div class="col bg-success">.col</div>
    <div class="col-6 bg-warning">.col-6</div>
    <div class="col bg-success">.col</div>
  </div>
</div>

偏移列

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

嵌套列

<div class="container-fluid">
  <div class="row">
    <div class="col-8 bg-warning p-4">
      col-8
      
      <div class="row">
        <div class="col-6 bg-light p-2">col-6</div>
        <div class="col-6 bg-secondary p-2">col-6</div>
      </div>
    </div>

    <div class="col-4 bg-success p-4">col-4</div>
  </div>
</div>

平板、桌面、大桌面显示器、超大桌面显示器⭐

<div class="container-fluid mt-3">
  <h1>平板、桌面、大桌面显示器、超大桌面显示器</h1>
  <p>以下实例在平板、桌面、大桌面显示器、超大桌面显示器的宽度比例为分别为：25%/75%、50%/50%、33.33%/66.67%、16.67/83.33%, 在移动手机等小型设备上会堆叠显示。</p>
  <p>重置浏览器窗口大小，查看效果。</p>
  <div class="row">
    <div class="col-sm-3 col-md-6 col-lg-4 col-xl-2 p-3 bg-primary text-white">.col</div>
    <div class="col-sm-9 col-md-6 col-lg-8 col-xl-10 p-3 bg-dark text-white">.col</div>
  </div>
</div>