如何使用Bootstrap正确创建blockquote（块引用）

嘿，我来帮你搞定最新版Bootstrap里的blockquote正确用法～ 先给你梳理下基础用法和进阶优化的方式，再把你的代码修正成正确的样子。

基础正确写法 #

最新版Bootstrap对<blockquote>有默认的样式支持，你只需要确保标签结构正确，也可以配合Bootstrap的类来增强样式。先看修正后的完整代码：

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Grid System</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <link href="CustomStyle.css" rel="stylesheet" />
</head>
<body>
    <div class="container">
        <div class="row">
            <!-- 基础的Bootstrap blockquote -->
            <blockquote class="blockquote">
                <p class="mb-0">这里是你要引用的文本内容，比如："设计不仅仅看起来要好看，它更要好用。"</p>
            </blockquote>
        </div>
    </div>
</body>
</html>

这里要注意：

• 给<blockquote>加上blockquote类，Bootstrap会应用默认的左边框、内边距等样式
• 引用的文本放在<p>里，加上mb-0类可以去掉默认的底部外边距，让排版更紧凑

进阶优化用法 #

1. 添加引用来源 #

如果需要标注引用的作者或出处，可以用<footer>标签配合blockquote-footer类：

<blockquote class="blockquote">
    <p class="mb-0">设计不仅仅看起来要好看，它更要好用。</p>
    <footer class="blockquote-footer">出自 <cite title="Source Title">史蒂夫·乔布斯</cite></footer>
</blockquote>

Bootstrap会自动把来源文本设置成灰色小字号，排版更规范。

2. 调整对齐方式 #

如果你需要改变引用的对齐方向，给<blockquote>加上文本对齐类即可：

• 右对齐：blockquote text-end
• 居中对齐：blockquote text-center
• 左对齐（默认）：blockquote text-start

示例：

<blockquote class="blockquote text-center">
    <p class="mb-0">设计不仅仅看起来要好看，它更要好用。</p>
    <footer class="blockquote-footer">出自 <cite title="Source Title">史蒂夫·乔布斯</cite></footer>
</blockquote>

3. 自定义样式（可选） #

如果默认样式不符合需求，你可以在CustomStyle.css里覆盖样式，比如修改左边框颜色：

.blockquote {
    border-left: 0.25rem solid #ff6b6b; /* 改成你想要的颜色 */
}

内容的提问来源于stack exchange，提问作者sikka karma