Bootstrap来写个好看的文本内容

最新推荐文章于 2025-09-30 22:59:59 发布

原创最新推荐文章于 2025-09-30 22:59:59 发布 · 328 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #前端 #javascript

BootStrap笔记专栏收录该内容

10 篇文章

订阅专栏

博客围绕前端排版展开，介绍了不同引用样式的设置方法。如将classes的text-center改成text-end可实现特定效果，还可利用figure标签特性设置文本对齐，在figure标签上设classes为figure，在figcaption标签上设为figure-cation text-end。

Typography

Quote-center

      <figure class="text-center">
        <blockquote class="blockquote">
          <p>A well-known quote, contained in a blockquote element.</p>
        </blockquote>
        <figcaption class="blockquote-footer">
          Someone famous in
           <cite title="Source Title">Source Title</cite>
        </figcaption>
      </figure>

Quote-right

把classes：text-center改成text-end就可以了

<figure class="text-end">
        <blockquote class="blockquote">
          <p>A well-known quote, contained in a blockquote element.</p>
        </blockquote>
        <figcaption class="blockquote-footer">
          Someone famous in 
          <cite title="Source Title">Source Title</cite>
        </figcaption>
      </figure>

Quote-left & footer-end

利用figure标签的特性将文本对齐

在figure标签上设置classes：figure

在figcaption标签上设置classes：figure-cation text-end

      <figure class="figure text-start">
        <blockquote class="blockquote">
          <p>A well-known quote, contained in a blockquote element.</p>
        </blockquote>
        <figcaption class="figure-cation blockquote-footer text-end">
          Someone famous in 
          <cite title="Source Title">Source Title</cite>
        </figcaption>
      </figure>