这次,我们将主要讲解 Bootstrap PC端的网格系统。
Bootstrap 简介
先来了解一下Bootstrap
Bootstrap 是由 Twitter 开发并于 2011 年开源的一个前端框架,旨在帮助开发者快速构建响应式、移动优先的网站。它不仅提供了一套完整的 CSS 类,还包括了多个 JavaScript 插件,极大地简化了前端开发的流程。
Bootstrap 的主要优势包括:
-
移动设备优先:自 Bootstrap 3 起,框架包含了贯穿于整个库的移动设备优先的样式。
-
浏览器支持:所有的主流浏览器都支持 Bootstrap。
-
容易上手:只要您具备 HTML 和 CSS 的基础知识,您就可以开始学习 Bootstrap。
-
响应式设计:Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。
-
响应式设计: 它为开发人员创建接口提供了一个简洁统一的解决方案,包含了功能强大的内置组件,易于定制。它还提供了基于 Web 的定制,是开源的。
Bootstrap网格系统
这里我们引用一下Bootstrap 官方文档中对网格系统的解释:
Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统,可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类,也包含了用于生成更多语义布局的功能强大的混合类。
在网页设计中使用网格结构能够让网页方便使用者浏览,并且能够降低用户端的负载,提高开发效率,增强可访问性。
基本结构
以下是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样式可以看到各个类的设置情况
container
: 是 Bootstrap 中最常用的布局容器之一,是网页的主体部分。正如常见的网页布局设计,它将.container
水平居中,并设置了左右内边距。row
:使用row
来分行,每个row被分成12份。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>
下面请看结果图
嵌套列
可以在内容中嵌套新的网格,来实现更为复杂的网页结构。被嵌套的行应包含一组列,这组列个数不能超过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
中均分成三个四份。添加了两个相同的按钮。
以下是改变后的结果
结论
网格结构是现代网页设计不可或缺的一部分。我们初步使用了Bootstrap创建网页,在了解了Bootstrap的网格结构之后,我们可以高效地构建出既美观又实用的网页。熟练使用一些框架,对我们之后的学习和工作有着非常大的帮助。希望这篇文章能够帮助到你,提升前端开发的效率和质量。