Bootstrap5 文字排版

最新推荐文章于 2024-04-19 04:22:51 发布

Gary jie

最新推荐文章于 2024-04-19 04:22:51 发布

阅读量292

点赞数

分类专栏：前端 Bootstrap5 文章标签： bootstrap 前端 html

本文链接：https://blog.csdn.net/qq_44174346/article/details/126017913

版权

前端 Bootstrap5 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

标题

<div class="container">
  <h1>h1 Bootstrap 标题</h1>
  <!-- .h1  -->
  <p class="h1">h1  Bootstrap</p>
  </div>

Display 标题类

'<h1 class="display-6

<div class="container mt-3">
  <h1>Display 标题</h1>
  <p>Display 标题可以输出更大更粗的字体样式。</p>
  <h1 class="display-1">Display 1</h1>
  </div>

small

<div class="container mt-3">
  <h1>更小文本标题</h1>
  <p>small 元素用于字号更小的颜色更浅的文本:</p>       
  <h1>h1 标题 <small>副标题</small></h1>

mark 高亮

使用 mark 元素来高亮文本。

abbr 虚线

The WHO was founded in 1948.

blockquote 引用

 <blockquote class="blockquote">
    <p>For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.</p>
    <footer class="blockquote-footer">From WWF's website</footer>
  </blockquote>

For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.

From WWF's website

小的介绍⭐

<dl>
    <dt>Coffee</dt>
    <dd>- black hot drink</dd>
    <dt>Milk</dt>
    <dd>- white cold drink</dd>
  </dl>

Coffee

- black hot drink

Milk

- white cold drink

code 红色

The following HTML elements: span, section, and div defines a section in a document.

pre 固定格式

<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks.
</pre>

Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks.

.lead

<p class="lead">这个段落更突出。</p>

使用 .lead 类让段落更突出：

这个段落更突出。

排版⭐

<div class="container mt-3">
  <h2>排版</h2>
  <p class="text-start">左对齐</p>
  <p class="text-end">右对齐</p>      
  <p class="text-center">居中对齐文本</p>
  
  <p class="text-justify">设定文本对齐,段落中超出屏幕部分文字自动换行</p>      
  <p class="text-nowrap">段落中超出屏幕部分不换行</p>
  <p><strong>提示:</strong> 重置浏览器窗口大小查看换行效果。</p>      
</div>

单词首字母大写

<div class="container mt-3">
  <h2>排版</h2>
  <p class="text-lowercase">Lowercased text.</p>
  <p class="text-uppercase">Uppercased text.</p>      
  <p class="text-capitalize">Capitalized text.</p>
</div>