掌握Bootstrap5，轻松搭建响应式网页——组件使用攻略全解析

1. 引言

Bootstrap 5 是一个流行的前端框架，它提供了一系列的组件和工具，帮助开发者快速搭建响应式网页。本文将详细介绍 Bootstrap 5 的主要组件，并通过实例展示如何使用它们来构建美观且功能齐全的网页。

2. Bootstrap 5 简介

Bootstrap 5 是 Bootstrap 框架的最新版本，它带来了许多新特性和改进。以下是一些 Bootstrap 5 的关键特点：

响应式设计：Bootstrap 5 支持多种设备屏幕尺寸，确保网页在各种设备上都能良好显示。
组件丰富：Bootstrap 5 提供了丰富的 UI 组件，如按钮、表单、导航栏等。
易于定制：通过变量和配置文件，可以轻松定制 Bootstrap 5 的样式和组件。

3. Bootstrap 5 组件使用攻略

3.1 基础组件

3.1.1 按钮（Button）

<button class="btn btn-primary">Primary Button</button> <button class="btn btn-secondary">Secondary Button</button> <button class="btn btn-success">Success Button</button> <button class="btn btn-danger">Danger Button</button> <button class="btn btn-warning">Warning Button</button> <button class="btn btn-info">Info Button</button> <button class="btn btn-light">Light Button</button> <button class="btn btn-dark">Dark Button</button>

3.1.2 输入框（Input）

<input type="text" class="form-control" placeholder="Enter your name">

3.2 导航组件

3.2.1 导航栏（Navbar）

<nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Brand</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> </ul> </div> </nav>

3.3 表格组件

3.3.1 标准表格（Table）

<table class="table table-bordered"> <thead> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Username</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jane</td> <td>Doe</td> <td>@Jordy</td> </tr> </tbody> </table>

3.4 响应式组件

3.4.1 纵向媒体对象（Media Object）

<div class="media"> <img src="image.jpg" class="media-object mr-3" alt="..."> <div class="media-body"> <h5 class="media-heading">Title</h5> <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </div> </div>