📅 最后修改于: 2023-12-03 15:29:38.707000 🧑 作者: Mango
Bootstrap 4是一个开源的前端框架，它可以帮助你快速的构建现代化的、响应式的Web界面。本文将对Bootstrap 4进行全面介绍，包括它的基础结构、组件、工具、样式、布局等方面。
Bootstrap 4的基础结构主要由HTML、CSS和JavaScript组成。
Bootstrap 4的HTML使用了一些特殊的类名和标记，这些类名和标记被称作“Bootstrap组件”。通过这些组件，你可以快速地创建表格、表单、导航、面包屑、按钮等常见组件。
以下是一个简单的HTML结构示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Hello, Bootstrap!</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>Hello, Bootstrap!</h1>
<p>This is a simple Bootstrap 4 example.</p>
</div>
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
Bootstrap 4的CSS包含了大量的样式类，这些样式类可以用于修改HTML的外观和行为。你可以通过添加和移除这些类来达到你的目的。
以下是一个简单的样式类使用示例：
<div class="bg-primary text-white p-3">
This is a blue box with white text and some padding.
</div>
这里的.bg-primary表示背景为Bootstrap定义的蓝色，.text-white表示文字为白色，.p-3表示添加了3个单位的padding。
Bootstrap 4的JavaScript用于增强网站的交互性和动态性。它提供了丰富的组件，包括滚动条、折叠面板、模态框、弹出框等。
以下是一个简单的JavaScript使用示例：
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open Modal
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="myModalLabel">Modal Title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
This is a Bootstrap 4 modal.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script>
$('#myModal').on('shown.bs.modal', function () {
$('#myModal input').first().focus()
})
</script>
这里的代码定义了一个按钮，当点击按钮时会打开一个模态框（使用了data-toggle和data-target属性）。模态框中包含了一个标题、一个Close按钮以及一个Save changes按钮。
Bootstrap 4的组件分为基础组件、JavaScript插件和表单组件三种类型。
基础组件包括很多常见的HTML元素和公共实用程序（utility classes），例如列表、表格、图片、滑块、进度条、警告框等常见组件。
以下是一个简单的组件使用示例：
<ul class="list-group">
<li class="list-group-item active">Active item</li>
<li class="list-group-item">Regular item</li>
<li class="list-group-item disabled">Disabled item</li>
</ul>
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
这里的代码定义了一个列表和一个警告框，分别用到了.list-group和.alert两个基础组件。
Bootstrap 4的JavaScript插件包括模态框、滚动条、折叠面板、弹出框等一系列交互组件。
以下是一个简单的组件使用示例：
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open Modal
</button>
<div class="collapse" id="myCollapse">
<div class="card card-body">
This is a Bootstrap 4 collapse.
</div>
</div>
<script>
$('#myCollapse').on('shown.bs.collapse', function () {
$('#myCollapse input').first().focus()
})
</script>
这里的代码定义了一个模态框和一个折叠面板，分别用到了data-toggle和.collapse两个JavaScript插件。
表单组件包括各种表单控件和相关组件，例如输入框、选择框、日期选择器、多选框、单选框等。
以下是一个简单的表单使用示例：
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
这里的代码定义了一个表单，其中包括了输入框、密码框、选择框和一个提交按钮。
Bootstrap 4提供了大量的工具类，用于快速实现一些常见的CSS效果和布局风格，例如间距、排列、对齐、文本颜色、背景颜色、边框等。
以下是一个简单的工具类使用示例：
<div class="container">
<div class="row">
<div class="col-sm-4">
<p class="text-center text-success">Green text</p>
</div>
<div class="col-sm-4">
<p class="text-center text-danger">Red text</p>
</div>
<div class="col-sm-4">
<p class="text-center text-warning">Yellow text</p>
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-3">
<div class="bg-primary text-white p-3">
This is a blue box with white text and some padding.
</div>
</div>
<div class="col-sm-3">
<div class="bg-secondary text-white p-3">
This is a gray box with white text and some padding.
</div>
</div>
<div class="col-sm-3">
<div class="bg-success text-white p-3">
This is a green box with white text and some padding.
</div>
</div>
<div class="col-sm-3">
<div class="bg-danger text-white p-3">
This is a red box with white text and some padding.
</div>
</div>
</div>
</div>
这里的代码使用了.text-center、.text-success、.bg-primary等一系列工具类，来实现文本对齐、文本颜色、背景颜色等效果。其中，.text-success表示文字为绿色，.bg-primary表示背景为Bootstrap定义的蓝色。
Bootstrap 4的样式包括颜色、字体、排版等一系列特征。
以下是一个简单的样式使用示例：
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
这里的代码使用了.display-1、.display-2、.display-3、.display-4这四种样式，分别用于设置不同尺寸的标题字体大小。
Bootstrap 4的布局基于灵活的网格系统，通过将屏幕区域分割成12列，你可以轻松地创造出复杂的布局。
以下是一个简单的布局使用示例：
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="bg-primary text-white p-3">
This is a blue box with white text and some padding.
</div>
</div>
<div class="col-sm-4">
<div class="bg-secondary text-white p-3">
This is a gray box with white text and some padding.
</div>
</div>
<div class="col-sm-4">
<div class="bg-success text-white p-3">
This is a green box with white text and some padding.
</div>
</div>
</div>
</div>
这里的代码使用了.container、.row、.col-sm-4等一系列布局类，来实现三列相等宽度的响应式布局。其中，.col-sm-4表示在小屏幕（<768px）的情况下每列占据屏幕的1/3宽度。
到此为止，本文对Bootstrap 4进行了全面的介绍，包括了它的基础结构、组件、工具、样式、布局等方面。希望你能够通过本文掌握Bootstrap 4的基本用法，并基于此开发出优秀的Web界面。