通过Bootstrap设计的PC端网格布局，给你的代码加加速

blzlh
VIP.1 初学乍练
241 阅读3分钟

这次，我们将主要讲解 Bootstrap PC端的网格系统。

Bootstrap 简介

先来了解一下Bootstrap

Bootstrap 是由 Twitter 开发并于 2011 年开源的一个前端框架，旨在帮助开发者快速构建响应式、移动优先的网站。它不仅提供了一套完整的 CSS 类，还包括了多个 JavaScript 插件，极大地简化了前端开发的流程。

Bootstrap 中文网

Bootstrap 的主要优势包括：

  • 移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。

  • 浏览器支持：所有的主流浏览器都支持 Bootstrap。

  • 容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。

  • 响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。

  • 响应式设计： 它为开发人员创建接口提供了一个简洁统一的解决方案，包含了功能强大的内置组件，易于定制。它还提供了基于 Web 的定制，是开源的。

Bootstrap网格系统

这里我们引用一下Bootstrap 官方文档中对网格系统的解释：

Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。

image.png 在网页设计中使用网格结构能够让网页方便使用者浏览，并且能够降低用户端的负载，提高开发效率，增强可访问性。

基本结构

以下是Bootstrap PC端网格系统的基本格式：

<div class="container">
   <div class="row">
      <div class="col-md-*"></div>
      <div class="col-md-*"></div>      
   </div>
   <div class="row">...</div>
</div>
<div class="container">

我们通过浏览器检查css样式可以看到各个类的设置情况

  1. container：image.png 是 Bootstrap 中最常用的布局容器之一，是网页的主体部分。正如常见的网页布局设计，它将.container水平居中，并设置了左右内边距。
  2. row：image.png使用row来分行，每个row被分成12份。
  3. col-md-*： 在row内部，把外面的row均分成*份

实例

好了，现在我们已经了解了Bootstrap的大致结构，我直接给出一个例子来加深对Bootstrap网格系统的理解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Coze Logo AIGC</title>
      <!-- 使用外部链接引入Bootstrap.min.css -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">     <!-- 主要容器 -->
        <div class="row">
            <!-- 分栏 页面布局 -->
            <!-- 一行总共十二份  -->
            <!-- 这里使用两个"col-md-6"将其均分，你可以根据你自己的情况来自行改变 -->
            <div class="col-md-6"> <!-- 六份  -->
                <form name="appForm">
                    <div class="form-group">
                        <label for="titleInput">Bot名称：</label>
                        <input type="text" name="title" id='titleInput' class="form-control" placeholder="请输入名称">
                    </div>
                    <div class="form-group">
                        <label for="titleInput">Bot描述：</label>                     <textarea name="desc" class="form-control" placeholder="请输入描述" rows=""></textarea>
                    </div>
                    <div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-default btn-primary">生成图标</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="col-md-6"> <!-- 六份  -->
                右列
            </div>
        </div>
    </div>
</body>
</html>

下面请看结果图

image.png

嵌套列

可以在内容中嵌套新的网格，来实现更为复杂的网页结构。被嵌套的行应包含一组列，这组列个数不能超过12（其实，没有要求你必须占满12列）。我们修改了部分代码来解释这一部分

<div class="col-md-6"> <!-- 左侧  -->
                <form name="appForm">
                    <div class="form-group">
                        <label for="titleInput">Bot名称：</label>
                        <input type="text" name="title" id='titleInput' class="form-control" placeholder="请输入名称">
                    </div>
                    <div class="form-group">
                        <label for="titleInput">Bot描述：</label>
                        <textarea name="desc" class="form-control" placeholder="请输入描述" rows=""></textarea>
                    </div>
                    <div>
                    
                    
                     <!-- 主要修改部分  -->
                      <!-- 添加成一个新行 -->
                        <div class="form-group rows">
                            <div class="col-md-4"><button type="submit" class="btn btn-default btn-primary">生成图标</button></div>
                        </div>
                        <div class="col-md-4"><button type="submit" class="btn btn-default btn-primary">生成图标</button>
                        </div>
                        <div class="col-md-4"><button type="submit" class="btn btn-default btn-primary">生成图标</button>
                        </div>
                    </div>
                </form>
            </div>

我们将下面的按钮部分添加了一个新的row类名，使它变成一个新的内部的行，并且在该row中均分成三个四份。添加了两个相同的按钮。 以下是改变后的结果

image.png

结论

网格结构是现代网页设计不可或缺的一部分。我们初步使用了Bootstrap创建网页，在了解了Bootstrap的网格结构之后，我们可以高效地构建出既美观又实用的网页。熟练使用一些框架，对我们之后的学习和工作有着非常大的帮助。希望这篇文章能够帮助到你，提升前端开发的效率和质量。

avatar
文章
阅读
粉丝