掌握Bootstrap4核心类名，轻松构建响应式网页设计

Bootstrap是一个流行的前端框架，它可以帮助开发者快速构建响应式网页。Bootstrap4是Bootstrap的最新版本，它提供了丰富的类名和组件，使得构建网页变得更加简单。以下是Bootstrap4的核心类名，以及如何使用它们来构建响应式网页设计。

1. 容器类（Container）

Bootstrap4使用.container类来创建一个固定宽度的容器，它通常包含在.container-fluid类中，后者用于创建全宽的容器。

<div class="container"> <!-- 页面内容 --> </div>

或者

<div class="container-fluid"> <!-- 页面内容 --> </div>

2. 栅格系统（Grid）

Bootstrap4的栅格系统允许你通过类名来创建响应式布局。.row类定义了一行，而.col-*类定义了列的大小。

<div class="row"> <div class="col-md-6">左侧内容</div> <div class="col-md-6">右侧内容</div> </div>

在上面的例子中，.col-md-6表示在中等设备（如平板电脑）上，每列占据一半的宽度。

3. 响应式类

Bootstrap4提供了响应式类，如.d-*、.mx-*、.my-*等，用于在不同屏幕尺寸下调整元素的大小和间距。

<div class="d-none d-md-block">仅在中等及以上设备上显示</div> <div class="mx-auto">水平居中</div> <div class="my-3">上外边距为3rem</div>

4. 布局类

Bootstrap4的布局类可以帮助你快速创建各种布局，如卡片、列表组、媒体对象等。

<div class="card"> <img class="card-img-top" src="..." alt="..."> <div class="card-body"> <h5 class="card-title">卡片标题</h5> <p class="card-text">卡片内容...</p> </div> </div>

5. 辅助类

Bootstrap4的辅助类包括颜色、字体、边距、填充、对齐等。

<div class="text-center">文本居中</div> <div class="bg-primary text-white">背景颜色为蓝色，文本颜色为白色</div> <div class="m-3">上外边距为3rem</div>

6. 插件

Bootstrap4提供了各种插件，如模态框、下拉菜单、轮播图等。

<!-- 模态框 --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title" id="myModalLabel">模态框标题</h4> </div> <div class="modal-body"> 模态框内容... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary">保存</button> </div> </div> </div> </div>