1. 文档结构：
- 使用 <!DOCTYPE html> 声明 HTML5 文档。
- 在 <html> 标签上添加 lang 属性来指定文档的语言，例如 lang="zh-CN"。
- 使用 <meta charset="UTF-8"> 设置字符集。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<!-- 其他头部信息 -->
</head>
<body>
<!-- 页面内容 -->
</body>
</html>
2. 引入 Bootstrap：
- 使用 CDN 或本地文件引入 Bootstrap 样式表和脚本。
<!-- 引入 Bootstrap 样式表 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- 引入 Bootstrap 脚本 -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.3/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
3. HTML 结构：
- 使用语义化的 HTML 标签，例如 <header>、<nav>、<section>、<article> 等。
- 避免使用过多的无语义 <div>，使用具有意义的类名。
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<!-- 导航内容 -->
</nav>
</header>
<section class="container">
<div class="row">
<div class="col-md-6">
<!-- 左侧内容 -->
</div>
<div class="col-md-6">
<!-- 右侧内容 -->
</div>
</div>
</section>
4. Bootstrap 类：
- 使用 Bootstrap 提供的类来快速设置样式，例如 container、row、col-md-4 等。
- 避免在相同元素上重复使用相似的类，以减少代码冗余。
<div class="container">
<div class="row">
<div class="col-md-4">
<!-- 内容1 -->
</div>
<div class="col-md-4">
<!-- 内容2 -->
</div>
<div class="col-md-4">
<!-- 内容3 -->
</div>
</div>
</div>
5. 自定义样式：
- 使用自定义类来添加特定的样式，避免直接修改 Bootstrap 的源代码。
- 在自定义样式表中组织和命名你的样式。
<style>
.custom-style {
/* 自定义样式 */
}
</style>
以上是一些使用 Bootstrap 进行 HTML 编码的一般规范。具体项目可能有特定要求，根据需要进行适当调整。
转载请注明出处：http://www.zyzy.cn/article/detail/12642/Bootstrap