ตกแต่งข้อความ Text/Typography ด้วย Bootstrap 5

<div class="container mt-3">
  <p>นี่คือความในแท็ก p</p>
  <h1>นี่คือข้อความในแท็ก h1</h1>
  <h2>นี่คือข้อความในแท็ก h2</h2>
  <h3>นี่คือข้อความในแท็ก h3</h3>
  <h4>นี่คือข้อความในแท็ก h4</h4>
  <h5>นี่คือข้อความในแท็ก h5</h5>
  <h6>นี่คือข้อความในแท็ก h6</h6>
</div>

<div class="container mt-3">
  <p class="h1">นี่คือข้อความในแท็ก p ที่ทำเป็น Heading ด้วยคลาส .h1</p>
  <p class="h2">นี่คือข้อความในแท็ก p ที่ทำเป็น Heading ด้วยคลาส .h2</p>
  <p class="h3">นี่คือข้อความในแท็ก p ที่ทำเป็น Heading ด้วยคลาส .h3</p>
  <p class="h4">นี่คือข้อความในแท็ก p ที่ทำเป็น Heading ด้วยคลาส .h4</p>
  <p class="h5">นี่คือข้อความในแท็ก p ที่ทำเป็น Heading ด้วยคลาส .h5</p>
  <p class="h6">นี่คือข้อความในแท็ก p ที่ทำเป็น Heading ด้วยคลาส .h6</p>
</div>

<div class="container mt-3">
  <p class="display-1">นี่คือข้อความที่ใช้คลาส .display-1</p>
  <p class="display-2">นี่คือข้อความที่ใช้คลาส .display-2</p>
  <p class="display-3">นี่คือข้อความที่ใช้คลาส .display-3</p>
  <p class="display-4">นี่คือข้อความที่ใช้คลาส .display-4</p>
  <p class="display-5">นี่คือข้อความที่ใช้คลาส .display-5</p>
  <p class="display-6">นี่คือข้อความที่ใช้คลาส .display-6</p>
</div>

<div class="container mt-3">
  <h1>นี่คือ Heding 1 <small>นี่คือ Secondary</small></h1>
  <h2>นี่คือ Heding 2 <small>นี่คือ Secondary</small></h2>
  <h3>นี่คือ Heding 3 <small>นี่คือ Secondary</small></h3>
  <h4>นี่คือ Heding 4 <small>นี่คือ Secondary</small></h4>
  <h5>นี่คือ Heding 5 <small>นี่คือ Secondary</small></h5>
  <h6>นี่คือ Heding 6 <small>นี่คือ Secondary</small></h6>
</div>

<div class="container mt-3">
  <p class="h1">นี่คือ Heding 1 <span class="small">นี่คือ Secondary</span></p>
  <p class="h2">นี่คือ Heding 2 <span class="small">นี่คือ Secondary</span></p>
  <p class="h3">นี่คือ Heding 3 <span class="small">นี่คือ Secondary</span></p>
  <p class="h4">นี่คือ Heding 4 <span class="small">นี่คือ Secondary</span></p>
  <p class="h5">นี่คือ Heding 5 <span class="small">นี่คือ Secondary</span></p>
  <p class="h6">นี่คือ Heding 6 <span class="small">นี่คือ Secondary</span></p>
</div>

<div class="container mt-3">
  <p>ยินดีต้อนรับเข้าสู่เว็บไซต์ <mark>ดีครับดอทคอม</mark> เพื่อนคู่คิด มิตรคนทำงาน</p>
  <p>ยินดีต้อนรับเข้าสู่เว็บไซต์ <span class="mark">ดีครับดอทคอม</span> เพื่อนคู่คิด มิตรคนทำงาน</p>
</div>

<div class="container mt-3">
  <p>สวัสดีครับทุกคน</p>
  <p>อยากรู้ใช่ไหมว่า <abbr title="ศูนย์บริหารสถานการณ์แพร่ระบาดของโรคติดเชื่อไวรัสโคโรนา 2019">ศบค.</abbr> ย่อมาจากอะไร ลองเอาเมาส์ชี้ที่คำว่า <abbr title="ศูนย์บริหารสถานการณ์แพร่ระบาดของโรคติดเชื่อไวรัสโคโรนา 2019">ศบค.</abbr> ดูสิ</p>
</div>

<div class="container mt-3">
  <h1>Blockquotes</h1>
  <p>แท็ก blockquote ใช้สำหรับนำเสนอข้อมูลที่มีแหล่งที่มาจากที่อื่น</p>
  <blockquote class="blockquote">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <footer class="blockquote-footer">จาก lipsum.com</footer>
  </blockquote>
</div>

<div class="container mt-3">
  <h1>พรหมวิหาร 4</h1>    
  <p>พรหมวิหาร แปลว่า ธรรมเป็นเครื่องอยู่ของผู้ประเสริฐ ประกอบด้วย</p>
  <dl>
    <dt>เมตตา</dt>
    <dd>- ความปรารถนาดีต่อผู้อื่น อยากให้เขามีความสุข</dd>
    <dt>กรุณา</dt>
    <dd>- ความสงสารอยากช่วยเหลือผู้อื่น</dd>
    <dt>มุทิตา</dt>
    <dd>- ความพลอยยินดี ไม่ริษยาผู้อื่น</dd>
    <dt>อุเบกขา</dt>
    <dd>- ความวางใจเป็นกลาง</dd>
  </dl>     
</div>

<div class="container mt-3">
  <h1>การทำเว็บไซต์</h1>
  <p>ในภาษา HTML เราใช้แท็ก <code>input</code> สำหรับสร้างช่องป้อนข้อมูล ใช้แท้ก <code>button</code> สำหรับสร้างปุ่มกด.</p>     
</div>

<div class="container mt-3">
  <h1>การใช้งานโปรแกรม Microsoft Word</h1>
  <p>เราสามารถกดปุ่ม <kbd>ctrl + o</kbd> เพื่อเปิดไฟล์เอกสารอื่น ๆ ขึ้นมาทำงานได้</p>    
</div>

<div class="container mt-3">
  <h1>แท็ก pre</h1>
  <pre>
  ข้อความในแท็ก pre 
  จะแสดงผลด้วยความกว้างคงที่หหหหหหหหหหหหหหห
  ขนาดตัวอักษรก็คงที่                  หรือ
  ตลอดจนการเว้นวรรค            หรือการ
  ขึ้นบรรทัดใหม่ ก็จะไม่เพี้ยน
  </pre>   
</div>