Bootstrap 是一个流行的前端框架，它提供了丰富的组件和工具，帮助开发者快速构建响应式、移动优先的网页。本文将深入解析 Bootstrap 的 50 个实用组件，从基础到高级，帮助读者全面掌握这个框架。
1. 导航栏（Navbar）
导航栏是 Bootstrap 中的核心组件之一，它允许用户在网页的不同部分之间导航。以下是一个简单的导航栏示例：
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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>
2. 面包屑（Breadcrumbs）
面包屑用于显示用户当前的位置，通常位于导航栏下方。以下是一个面包屑的示例：
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active">Data</li>
</ol>
3. 卡片（Card）
卡片是 Bootstrap 中用于展示内容的常用组件。以下是一个卡片的示例：
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="..." alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
4. 表格（Table）
表格用于展示数据。以下是一个表格的示例：
<table class="table">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Position</th>
<th scope="col">Office</th>
<th scope="col">Age</th>
<th scope="col">Start date</th>
<th scope="col">Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanaka</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>25</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<!-- 更多行 -->
</tbody>
</table>
5. 表单（Form）
表单是 Bootstrap 中用于收集用户输入的组件。以下是一个表单的示例：
<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>
6. 按钮（Button）
按钮是 Bootstrap 中用于触发操作的组件。以下是一个按钮的示例：
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
7. 弹出框（Popover）
弹出框是 Bootstrap 中用于显示额外信息的组件。以下是一个弹出框的示例：
<button type="button" class="btn btn-secondary" data-toggle="popover" data-placement="top" title="Popover title" data-content="Some additional information">Popover</button>
8. 弹窗（Modal）
弹窗是 Bootstrap 中用于显示重要信息的组件。以下是一个弹窗的示例：
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">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">
...
</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>
9. 滚动条（Scrollspy）
滚动条用于跟踪滚动位置。以下是一个滚动条的示例：
<div id="navbarScroll" class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Scrollspy</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Home</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>
<div data-spy="scroll" data-target="#navbarScroll" data-offset="0" class="scrollspy-example" style="height: 200px; overflow-y: auto;">
<h4>Section 1</h4>
<p>...</p>
<h4>Section 2</h4>
<p>...</p>
<h4>Section 3</h4>
<p>...</p>
</div>
10. 按钮组（Button Group）
按钮组用于将多个按钮组合在一起。以下是一个按钮组的示例：
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-secondary">Left</button>
<button type="button" class="btn btn-secondary">Middle</button>
<button type="button" class="btn btn-secondary">Right</button>
</div>
11. 输入组（Input Group）
输入组用于将输入框与其他元素组合在一起。以下是一个输入组的示例：
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-default">@</span>
</div>
<input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
</div>
12. 翻页器（Pagination）
翻页器用于分页显示内容。以下是一个翻页器的示例：
<nav>
<ul class="pagination">
<li class="page-item disabled">
<span class="page-link">Previous</span>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
13. 列表组（List Group）
列表组用于展示列表内容。以下是一个列表组的示例：
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active">Active link</a>
<a href="#" class="list-group-item list-group-item-action">Link item</a>
<a href="#" class="list-group-item list-group-item-action">Another link item</a>
</div>
14. 折叠面板（Collapse）
折叠面板用于展示可折叠的内容。以下是一个折叠面板的示例：
<div class="card">
<h5 class="card-header" id="headingOne">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
Collapsible Group Item #1
</button>
</h5>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
15. 轮播图（Carousel）
轮播图用于展示一系列图片或内容。以下是一个轮播图的示例：
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
16. 标签页（Tab）
标签页用于展示多个可切换的内容区域。以下是一个标签页的示例：
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>
17. 模态框（Modal）
模态框用于展示重要信息。以下是一个模态框的示例：
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">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">
...
</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>
18. 滚动条（Scrollspy）
滚动条用于跟踪滚动位置。以下是一个滚动条的示例：
<div id="navbarScroll" class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Scrollspy</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Home</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>
<div data-spy="scroll" data-target="#navbarScroll" data-offset="0" class="scrollspy-example" style="height: 200px; overflow-y: auto;">
<h4>Section 1</h4>
<p>...</p>
<h4>Section 2</h4>
<p>...</p>
<h4>Section 3</h4>
<p>...</p>
</div>
19. 按钮组（Button Group）
按钮组用于将多个按钮组合在一起。以下是一个按钮组的示例：
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-secondary">Left</button>
<button type="button" class="btn btn-secondary">Middle</button>
<button type="button" class="btn btn-secondary">Right</button>
</div>
20. 输入组（Input Group）
输入组用于将输入框与其他元素组合在一起。以下是一个输入组的示例：
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-default">@</span>
</div>
<input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
</div>
21. 翻页器（Pagination）
翻页器用于分页显示内容。以下是一个翻页器的示例：
<nav>
<ul class="pagination">
<li class="page-item disabled">
<span class="page-link">Previous</span>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
22. 列表组（List Group）
列表组用于展示列表内容。以下是一个列表组的示例：
”`html
-- 展开阅读全文 --