📌  相关文章
📜  引导网格 2 行 - Html (1)

📅  最后修改于: 2023-12-03 15:09:49.878000             🧑  作者: Mango

引导网格 2 行 - HTML

在Web开发中，Bootstrap是最受欢迎的前端框架之一，用于构建响应式和移动设备优化的Web应用程序和网站。Bootstrap包含了很多网格系统，其中最基础的是2列网格系统。本文将介绍如何使用Bootstrap在HTML中创建2行网格系统。

步骤
  1. 首先，在HTML <head> 标签中添加Bootstrap的CSS和JavaScript文件。
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>
</head>
  1. 接下来，在HTML中创建2个<div>元素，一个为<div class="row">，另一个为<div class="col">。<div class="row">用于创建行，而<div class="col">用于创建列。
<div class="row">
  <div class="col">
    ...
  </div>
  <div class="col">
    ...
  </div>
</div>
  1. 现在，我们可以在每个 <div class="col">中添加内容，比如一个图片和一段文字。
<div class="row">
  <div class="col">
    <img src="img1.jpg" alt="图片1">
    <p>这是图片1的描述。</p>
  </div>
  <div class="col">
    <img src="img2.jpg" alt="图片2">
    <p>这是图片2的描述。</p>
  </div>
</div>
效果

这是一个简单的2行网格系统，其中包含两列。每列中有一张图片和一段文字。

效果图

总结

Bootstrap网格系统提供了一种方便的方式来创建网页布局。在本文中，我们介绍了如何使用Bootstrap在HTML中创建一个基本的2列网格系统。我们希望这篇文章对您有所帮助，并帮助您更好地理解Bootstrap的网格系统。