Bootstrap 是一个流行的开源前端框架,它提供了一系列的CSS组件和JavaScript插件,用于快速开发响应式、移动优先的网站和应用程序。以下是Bootstrap中20个必备的CSS组件指南,帮助您更好地利用这个框架。
1. 按钮(Buttons)
Bootstrap 提供了多种按钮样式,包括默认、主要、成功、危险、信息等。
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</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-info">Info</button>
2. 表格(Tables)
Bootstrap 的表格组件具有丰富的功能,包括边框、条纹、缩略等。
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1</td>
<td>Row 1</td>
<td>Row 1</td>
</tr>
<tr>
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td>
</tr>
</tbody>
</table>
3. 表单(Forms)
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="check1">
<label class="form-check-label" for="check1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
4. 面包屑(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>
5. 分页(Pagination)
Bootstrap 提供了分页组件,方便用户在列表中翻页。
<nav aria-label="Page navigation">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></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>
6. 响应式工具栏(Navbar)
Bootstrap 的工具栏组件支持响应式设计,适用于各种设备。
”`html
<span class="navbar-toggler-icon"></span>
<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>
</