一网打尽Bootstrap4核心CSS样式解析与应用技巧

Bootstrap 4 是一个流行的前端框架，它提供了一系列的CSS样式和JavaScript组件，可以帮助开发者快速构建响应式、移动优先的网站。本文将深入解析Bootstrap 4的核心CSS样式，并提供一些实用的应用技巧。

1. Bootstrap 4 CSS基础

Bootstrap 4 的CSS基于Flexbox和Grid系统，这使得布局更加灵活和强大。以下是一些基础的CSS样式：

1.1 布局容器（Container）

Bootstrap 提供了两个布局容器类：.container 和 .container-fluid。

.container：固定宽度，响应式布局。
.container-fluid：全宽度布局。

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

1.2 行（Row）

.row 类用于创建水平布局。

<div class="row"> <div class="col-6">列内容</div> <div class="col-6">列内容</div> </div>

1.3 列（Col）

.col- 类用于创建列。数字代表响应式布局下的列数。

<div class="col-6">列内容</div>

2. 响应式工具类

Bootstrap 4 提供了一系列的响应式工具类，可以方便地调整元素在不同屏幕尺寸下的显示。

2.1 媒体查询（Media Queries）

@media (max-width: 768px) { .col-6 { flex: 0 0 50%; } }

2.2 响应式类

.d-block：始终显示元素。
.d-none：在指定屏幕尺寸下隐藏元素。

<div class="d-block d-md-none">只在移动设备上显示</div>

3. 表格（Table）

Bootstrap 4 提供了丰富的表格样式。

3.1 基础表格

<table class="table"> <thead> <tr> <th>标题</th> <th>标题</th> </tr> </thead> <tbody> <tr> <td>内容</td> <td>内容</td> </tr> </tbody> </table>

3.2 颜色和条纹

<table class="table table-striped table-hover"> <!-- 表格内容 --> </table>

4. 表单（Form）

Bootstrap 4 提供了丰富的表单组件和样式。

4.1 基础表单

<form> <div class="form-group"> <label for="exampleInputEmail1">邮箱地址</label> <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="请输入邮箱"> <small id="emailHelp" class="form-text text-muted">我们不会分享您的邮箱地址。</small> </div> <button type="submit" class="btn btn-primary">提交</button> </form>

4.2 内联表单

<form class="form-inline"> <div class="form-group"> <label for="exampleInputName2">名字</label> <input type="text" class="form-control" id="exampleInputName2" placeholder="请输入名字"> </div> <div class="form-group"> <label for="exampleInputPassword2">密码</label> <input type="password" class="form-control" id="exampleInputPassword2" placeholder="请输入密码"> </div> <button type="submit" class="btn btn-primary">登录</button> </form>

5. 卡片（Card）

Bootstrap 4 的卡片组件可以用于展示信息、图像等。

<div class="card" style="width: 18rem;"> <img class="card-img-top" src="..." alt="..."> <div class="card-body"> <h5 class="card-title">卡片标题</h5> <p class="card-text">这里是卡片内容。</p> <a href="#" class="btn btn-primary">点击这里</a> </div> </div>

6. 图标（Icon）

Bootstrap 4 提供了一系列的图标，可以用于增强界面。

<i class="fa fa-home"></i> 家

7. 技巧与应用

7.1 自定义主题

Bootstrap 允许开发者自定义主题，包括颜色、字体等。

// Custom SCSS $brand-primary: #007bff; $brand-success: #28a745; // Use custom variables .btn-primary { background-color: $brand-primary; border-color: $brand-primary; } .btn-success { background-color: $brand-success; border-color: $brand-success; }

7.2 自适应布局

通过合理使用响应式工具类和媒体查询，可以创建自适应的布局。

<div class="container"> <div class="row"> <div class="col-md-4">内容</div> <div class="col-md-8">更多内容</div> </div> </div>

7.3 插件和组件

Bootstrap 提供了丰富的插件和组件，如模态框、日期选择器等。

<!-- 模态框 --> <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>