bootstrap5-学习笔记3-文字格式+表格+徽章

参考：
Bootstrap5 教程 | 菜鸟教程
https://www.runoob.com/bootstrap5/bootstrap5-tutorial.html

Bootstrap 入门 · Bootstrap v5 中文文档 v5.3 | Bootstrap 中文网
https://v5.bootcss.com/docs/getting-started/introduction/

---

之前用bootstrap2和3比较多，最近用到了5，发现好多地方不一样了，所以学习一下。主要写没用过的特性，随缘更新。

文字格式

<div class="container mt-3">
  <!-- 高亮文本 -->    
  <p>用 mark 元素(或 .mark 类)来 <mark>高亮</mark> 文本。</p>
  <!-- Display 标题可以输出更大更粗的字体样式, 有1-4 -->
  <h1 class="display-1">Display 1</h1>
  <!-- abbr是画虚线,title是鼠标Hover时显示的内容 -->
  <p>The <abbr title="World Health Organization">WHO</abbr> was...</p>
  <br/>
  <blockquote class="blockquote">
    <p>For 50 years, WWF has been ... globally.</p>
    <footer class="blockquote-footer">From WWF's website</footer>
  </blockquote>

  <p>The dl element indicates a description list:</p>
  <dl>
    <dt>Coffee</dt>
    <dd>- black hot drink</dd>
  </dl> 

  <!-- code类似markdown里`xxx` -->
  <code>span</code>, <code>section</code>
	
</div>

效果：

其他格式：

名称	效果	记忆方法
<kbd>	黑底白字	keyboard display
<pre>	保持原有格式
.small	更小的文本，是父元素的85%
.lead	使段落更突出	就是字更大、行距更大
.text-start	左对齐	默认从左到右，所以start表示左
.text-center	文字居中
.text-end	右对齐	跟start相反
.text-justify	段落中超出屏幕的文字自动换行
.text-nowrap	段落中超出屏幕的文字不换行
.text-lowercase, .text-uppercase，text-capitalize	设置小写、大写	字面意思
.list-inline	将所有列表项放在同一行

表格

这个变化不大。多了：

• .table-dark 黑底白框白字。如果再加.table-striped就是黑底条纹效果，加.table-hover 就是黑底悬停效果
• .table-borderless是无任何边框的表格
• .table-sm是通过减小内边距从而创建较小的表格
• 可以在<tr>上使用一些颜色类控制表格的背景色，像是.table-primary|success|info等等
  
• 也可以给表头颜色：<thead class="table-primary">
• 响应式表格用.table-responsive-sm最后的字母可以根据屏幕尺寸更换

徽章badges

徽章用于显示消息条数或者未读项，它的大小会跟随父元素的大小变化。用的时候只要加上.badge即可。<span class="badge bg-primary">主要</span>

• 颜色控制同上
• 药丸型：加rounded-pill