Bootstrap网格系统的一个简单实例

脑子不好真君

于 2024-08-05 13:19:50 发布

阅读量1k

点赞数 19

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

本文链接：https://blog.csdn.net/naozibuok/article/details/140913432

版权

Web 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

一、代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>xxxx</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <style>
    .province {
      text-align: center;
      margin-bottom: 16px;
      font-size: 24px;
    }
    .card-body {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
      padding: 16px 0 0 0;
    }
    .card-content {
      text-align: center;
      width: 100px; /* Adjust the width as needed */
      height: 100px; /* Adjust the height as needed */
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .card-content img {
      width: 50px;
      height: 50px;
    }
    .card-content p {
      font-size: 16px; /* Set a common font size */
      margin: 0; /* Remove default margins */
    }

     /* Media queries for different screen sizes */
     @media (max-width: 1000px) {
      .col-md-4 {
        flex: 0 0 50%;
        max-width: 50%;
      }
    }
  </style>
</head>
<body>
  <div class="container mt-5">
    <h1 class="text-center mb-5">xxxx</h1>
    <div class="row">

      <div class="col-md-4 mb-4">
        <div class="card">
          <div class="card-body">
            <div class="card-content">
              <img src="../Bootstrap/pic/zj_la_logo.png" alt="xxxx">
              <h5 class="card-title">xxxx</h5>
            </div>
            <div class="card-content">
              <img src="../Bootstrap/pic/zj_la_logo.png" alt="xxxx">
              <h5 class="card-title">xxxx</h5>
            </div>
          </div>
          <div class="province">xxxx</div>
        </div>
      </div>

      <div class="col-md-4 mb-4">
        <div class="card">
          <div class="card-body">
            <div class="card-content">
              <img src="../Bootstrap/pic/zj_la_logo.png" alt="xxxx">
              <h5 class="card-title">xxxx</h5>
            </div>
            <div class="card-content">
              <img src="../Bootstrap/pic/zj_la_logo.png" alt="xxxx">
              <h5 class="card-title">xxxx</h5>
            </div>
          </div>
          <div class="province">xxxx</div>
        </div>
      </div>

      <div class="col-md-4 mb-4">
        <div class="card">
          <div class="card-body">
            <div class="card-content">
              <img src="../Bootstrap/pic/zj_la_logo.png" alt="xxxx">
              <h5 class="card-title">xxxx</h5>
            </div>
            <div class="card-content">
              <img src="../Bootstrap/pic/zj_la_logo.png" alt="xxxx">
              <h5 class="card-title">xxxx</h5>
            </div>
          </div>
          <div class="province">xxxx</div>
        </div>
      </div>

      <div class="col-md-4 mb-4">
        <div class="card">
          <div class="card-body">
            <div class="card-content">
              <img src="../Bootstrap/pic/zj_la_logo.png" alt="xxxx">
              <h5 class="card-title">xxxx</h5>
            </div>
            <div class="card-content">
              <img src="../Bootstrap/pic/zj_la_logo.png" alt="xxxx">
              <h5 class="card-title">xxxx</h5>
            </div>
          </div>
          <div class="province">xxxx</div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

二、效果图

三、bootstrap栅格系统

Bootstrap 的栅格系统（Grid System）是其核心特性之一，旨在帮助开发者创建灵活、响应式的布局。该系统基于一行（row）包含 12 个等宽的栅格（column）的概念，允许开发者根据需要将这些栅格分配给不同的列，以便在各种设备和屏幕尺寸上实现一致的布局。

基本概念

1. 容器（Container）

容器用于包裹行和列，并提供必要的内边距（padding）以对齐内容。Bootstrap 提供两种容器：

.container：一个固定宽度的响应式容器。
.container-fluid：一个宽度为 100% 的流体容器。

2. 行（Row）

行是列的容器，使用 .row 类来创建。行在水平方向上排列列，并具有负外边距以抵消容器的内边距。

3. 列（Column）

列使用 .col-* 类来创建，表示列的宽度占据总栅格数的比例。Bootstrap 的栅格系统是基于 12 栅格的，因此列宽度的总和应该为 12。

栅格类

Bootstrap 提供了以下响应式栅格类，允许在不同的屏幕尺寸上进行布局：

.col-：超小屏幕（< 576px）
.col-sm-：小屏幕（≥ 576px）
.col-md-：中等屏幕（≥ 768px）
.col-lg-：大屏幕（≥ 992px）
.col-xl-：超大屏幕（≥ 1200px）

进而<div class="col-md-4 mb-4">中 col-md-4 类的含义如下：
col: 表示这是一个栅格列（column）。md: 表示这个类适用于中等及更大屏幕尺寸（md 表示 medium，适用于屏幕宽度 ≥ 768px）。4: 表示这个列占据了 12 栅格系统中的 4 个栅格，那么一个<div class="card">占据4 个栅格，所以每个 div 元素占据了整个行宽度的 1/3，进而一行由这三个元素等分。

另外举一个例子：（一个包含 col-9 列的布局）

<div class="container">
  <div class="row">
    <div class="col-9">Column 1</div>
    <div class="col-3">Column 2</div>
  </div>
</div>

在这个例子中：
Column 1 占据 9 个栅格（即整行宽度的 75%）。
Column 2 占据 3 个栅格（即整行宽度的 25%）。
由于这两个列的栅格总和为 12（9+3=12），它们在同一行内并排显示。

四、.row的大小怎么确定

.row的大小怎么确定这是也许是一个简单又复杂的问题。起初我纠结于bootstrap的源代码，后来顿悟。

.row 类的大小（宽度）是由其父容器（例如 .container 或 .container-fluid）的宽度以及列（.col-*）的数量和宽度确定的，所以假如是col-md-4，那么.row的大小为：

在不同屏幕尺寸上的宽度：

小于 576px（超小屏幕）：
- 父容器 .container 是流体的，宽度为视口宽度。
- 列 .col-md-4 占据 100% 宽度，列在垂直方向上堆叠。
576px 及以上（小屏幕）：
- 若父容器 .container 宽度为 540px。
- 列 .col-md-4 仍然占据 100% 宽度，因为中等断点是 768px。
768px 及以上（中等屏幕）：
- 若父容器 .container 宽度为 720px。
- 列 .col-md-4 每个占据 1/3 的宽度，即 240px。
992px 及以上（大屏幕）：
- 若父容器 .container 宽度为 960px。
- 列 .col-md-4 每个占据 1/3 的宽度，即 320px。
1200px 及以上（超大屏幕）：
- 若父容器 .container 宽度为 1140px。
- 列 .col-md-4 每个占据 1/3 的宽度，即 380px。