工具类与主题

Bootstrap 教程 · 第 7 章 · 7 次浏览

Bootstrap 5 提供了一批实用工具类，覆盖间距、文字、背景、边框、圆角、阴影等，日常改样式基本够用。

常用工具类

间距：mt-1 ~ mt-5、ps-3、mx-auto（auto 居中）
背景：bg-primary、bg-success、bg-transparent、bg-opacity-25
文字：text-success、text-danger、text-truncate（单行省略）
边框：border、border-top、rounded、rounded-circle、rounded-pill
阴影：shadow-sm、shadow、shadow-lg
显示：d-none、d-md-block、d-flex、visually-hidden

自定义主题

用 npm 安装源码版（bootstrap/scss），修改变量后重新编译，可以换掉主色、圆角、字体等整套主题。CDN 版不能改主题。

代码示例

<div class="container mt-4">
    <div class="p-4 mb-3 bg-primary bg-opacity-10 border border-primary rounded">
        <h4 class="text-primary">主色主题块</h4>
        <p class="mb-0">用 bg-opacity 控制透明度，配合边框做出浅色块效果。</p>
    </div>

    <span class="badge rounded-pill text-bg-success">已通过</span>
    <span class="badge rounded-pill text-bg-warning">进行中</span>

    <div class="mt-3">
        <img src="avatar.png" class="rounded-circle shadow-sm" width="64" alt="头像">
    </div>
</div>

📚 HTML 标签速查

常用条目速查，完整版见对应教程章节。可复制代码到在线运行中测试。

写法 / 语法	作用
`<h1>-<h6>`	标题，h1 最高，每页只用一个 h1
`<p>`	段落，自动加前后间距
`<a href="">`	链接，href 是目标地址
`<img src="" alt="">`	图片，src 地址，alt 替代文字
`<ul> / <li>`	无序列表
`<ol> / <li>`	有序列表，数字编号
`<dl> / <dt> / <dd>`	自定义列表：术语 + 说明
`<table> / <tr> / <td> / <th>`	表格：行 / 单元格 / 表头
`<form action="" method="">`	表单，action 提交地址，method 提交方式
`<input type="">`	输入控件，type 有 text/password/email/number 等
`<textarea>`	多行文本输入
`<select> / <option>`	下拉框及选项
`<button type="submit">`	按钮，submit 提交表单
`<strong> / <em>`	加粗（重要）/ 斜体（强调）
`<div> / <span>`	区块容器 / 行内容器
`<header> <nav> <main>`	语义化：页眉 / 导航 / 主体
`<section> <article> <aside>`	语义化：分节 / 独立内容 / 侧栏
`<footer>`	页脚：版权、备案
`<video> / <audio>`	HTML5 视频 / 音频，加 controls 显示控制条
`<iframe src="">`	嵌入其他网页
`<!-- 注释 -->`	HTML 注释，不显示在页面
`<br> / <hr>`	换行 / 水平分割线
`<pre>`	保留空格和换行，原样显示
`<blockquote> / <q>`	块级引用 / 行内引用
`<figure> / <figcaption>`	图文组合及说明