Bootstrap 的基本用法和语法主要涉及 HTML 标记和 CSS 类的使用。下面是 Bootstrap 的一些基本用法和语法示例：
1. 引入 Bootstrap 样式表和 JavaScript 文件：
在 HTML 文档的 <head> 标签中引入 Bootstrap 样式表和 JavaScript 文件：
<!-- 引入 Bootstrap 样式表 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<!-- 引入 Bootstrap JavaScript 文件（包含 jQuery 和 Popper.js） -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>2. 使用 Bootstrap CSS 类：
通过添加 Bootstrap 的 CSS 类来应用样式和组件：
<!-- Bootstrap 按钮 -->
<button type="button" class="btn btn-primary">Primary按钮</button>
<!-- Bootstrap 表格 -->
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">标题</th>
<th scope="col">内容</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>项目 1</td>
<td>内容 1</td>
</tr>
<tr>
<th scope="row">2</th>
<td>项目 2</td>
<td>内容 2</td>
</tr>
</tbody>
</table>显示为：
3. 使用 Bootstrap 栅格系统：
Bootstrap 的栅格系统用于创建响应式布局，将页面划分为行和列。以下是一个简单的栅格示例：
<div class="container">
<div class="row">
<div class="col">
栅格列 1
</div>
<div class="col">
栅格列 2
</div>
<div class="col">
栅格列 3
</div>
</div>
</div>显示为：
4. 使用 Bootstrap 组件：
Bootstrap 提供了丰富的组件，例如导航、卡片、模态框等。以下是一个导航和卡片组件的示例：
<!-- 导航 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</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">
<a class="nav-link active" aria-current="page" 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>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- 卡片 -->
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" 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>显示为：
以上是 Bootstrap 的一些基本用法和语法示例。通过使用 Bootstrap 提供的各种组件和工具，可以快速构建出现代化、响应式的网站和 Web 应用程序。
评论