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

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

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

เมื่อใช้ Bootstrap 5 ในการตกแต่งเว็บไซต์ โดยค่าเริ่มต้นขนาดตัวอักษรจะถูกกำหนดไว้ที่ 1rem (16px) และความสูงของบรรทัดจะอยู่ที่ 1.5rem

ถ้าเราใช้แท็ก <p> ค่าเริ่มต้นของระยะห่างด้านบน หรือ margin-top จะเป็น 0 ส่วนระยะห่างด้านล่าง หรือ margin-bottom จะถูกกำหนดไว้ที่ 1rem

Heading

การทำหัวเรื่อง หรือ Heading สามารถใช้แท็ก <h1> ถึง <h6> ได้ตามปกติ ซึ่ง Heading ของ Bootstrap 5 จะแสดงผลเป็นตัวหนา และแสดงผลแบบ Responsive คือปรับการแสดงผลตามขนาดของหน้าจอ

ตัวอย่างการใช้แท็ก <p> และ Heading

<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>

ผลลัพธ์

หรือเราสามารถใช้แท็กอื่น ๆ ทำเป็นหัวเรื่องก็ได้ โดยให้ระบุคลาส .h1 ถึง .h6 กำกับแท็กนั้น ๆ ไว้ เพื่อทำให้เป็น Heading ก็จะได้รูปแบบของข้อความที่เป็น Heading เหมือนกันกับการใช้แท็ก <h1> ถึง <h6> ดังตัวอย่าง

<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>

Display Headings

ถ้าต้องการ Heading ที่มีลักษณะแตกต่างไปจากการใช้แท็ก <h1> ถึง <h6> หรือการใช้คลาส .h1 ถึง .h6 เราสามารถใช้งาน Display Headings แทนได้ โดยการใช้คลาส .display-1 ถึง .display-6 ซึ่งรูปแบบตัวอักษรที่ได้จะมีขนาดใหญ่กว่าแต่บางกว่า ดังตัวอย่าง

<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>

แท็ก <small>

เราสามารถใช้แท็ก <small> หรือคลาส .small ร่วมกับ Heading เพื่อสร้างข้อความที่มีขนาดรองลงมา (Secondary text) ได้

ตัวอย่างการใช้แท็ก <small>

<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>

ตัวอย่างการใช้คลาส .small

<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>

ผลลัพธ์ที่ได้จะเหมือนกัน

เน้นข้อความด้วยแท็ก <mark>

ถ้าต้องการเน้นข้อความ สามารถใช้แท็ก <mark> หรือคลาส .mark มาช่วยได้ โดยจะได้ข้อความที่มีพื้นหลังเป็นสีเหลือง ลักษณะเป็นการเน้นข้อความ ดังตัวอย่าง

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

ไม่ว่าจะใช้แท็ก <mark> หรือจะใช้คลาส .mark ก็จะได้ผลลัพธ์เหมือนกัน

สังเกตที่คำว่า ดีครับดอทคอม มีพื้นหลังสีเหลือง เป็นการเน้นข้อความ

แสดงคำอธิบายคำย่อด้วยแท็ก <abbr>

แท็ก <abbr> ใช้สำหรับแสดงคำอธิบายคำย่อ (เมื่อนำเมาส์พอยเตอร์ไปชี้ที่คำย่อนั้น) โดยเราจะใส่คำอธิบายหรือคำเต็มไว้ในแอททริบิวต์ title

รูปแบบการแสดงผลของแท็ก <abbr> จะมีเส้นที่เป็นจุดไข่ปลาอยู่ใต้คำย่อนั้น เมื่อนำเมาส์พอยเตอร์ไปชี้ก็จะแสดงคำเต็มหรือคำอธิบายออกมา

ตัวอย่างการใช้งานแท็ก <abbr>

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

สิ่งที่ Bootstrap จัดรูปแบบให้แท็ก <abbr> คือ เมื่อนำเมาส์ไปชี้ที่ข้อความที่ใช้แท็กนี้ เคอร์เซอร์จะเป็นลูกศรพร้อมทั้งมีเครื่องหมายคำถามอยู่ท้ายลูกศรด้วย

ตกแต่งแท็ก <blockquote>

เมื่อใช้แท็ก <blockquote> เพื่ออ้างอิงคำพูดของผู้อื่น เราสามารถตกแต่งแท็กนี้โดยเพิ่มคลาส .blockquote เข้าไป และเมื่อกล่าวถึงแหล่งที่มา ให้ใช้คลาส .blockquote-footer จะทำให้การแสดงผลน่าสนใจมากขึ้น

<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>

Description Lists

เมื่อใช้แท็ก <dl> เพื่อทำ Description Lists เพื่อทำรายการเชิงอธิบาย Bootstrap 5 จะตกแต่งรูปแบบการแสดงผลให้ดูน่าสนใจขึ้น ดังตัวอย่าง

<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>

แท็ก <code>

เมื่อใช้แท็ก <code> เพื่อกำหนดส่วนที่เป็นโค้ดในข้อความให้แตกต่างจากคำอื่น ๆ Bootstrap 5 จะจัดรูปแบบส่วนที่อยู่ภายในแท็ก <code> ใด้ดูแตกต่างจากข้อความอื่น ๆ อย่างเด่นชัด

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

แท็ก <kbd>

เมื่อใช้แท็ก <kbd> เพื่ออธิบายสิ่งที่ป้อนเข้ามาทางคีย์บอร์ด Bootstrap 5 จะตกแต่งรูปแบบสิ่งที่อยู่ภายในแท็ก <kbd> ให้ดูเหมือนปุ่มคีย์บอร์ด ทำให้แลดูโดดเด่นน่าสนใจ

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

แท็ก <pre>

เมื่อใช้แท็ก <pre> เพื่อแทรกโค้ดหลาย ๆ บรรทัดเข้าไปในหน้าเว็บเพจ Bootstrap 5 ก็จะตกแต่งรูปแบบให้ดูง่ายสบายตา

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

คลาสสำหรับตกแต่งข้อความอื่น ๆ ที่น่าสนใจใน Bootstrap 5

ใน Bootstrap 5 ยังมีคลาสสำหรับการตกแต่งข้อความ Text/Typography อื่น ๆ ที่น่าสนใจอีกมาก ดังนี้

  • คลาส .lead สำหรับทำข้อความในพารากราฟให้โดดเด่นขึ้นมา
  • คลาส .text-left สำหรับจัดข้อความชิดซ้าย
  • คลาส .text-end สำหรับจัดข้อความชิดขวา
  • คลาส .text-center สำหรับจัดข้อความอยู่กึ่งกลาง
  • คลาส .text-nowrap สำหรับกำหนดข้อความไม่ให้ตัดขึ้นบรรทัดใหม่
  • คลาส .text-break สำหรับป้องกันไม่ให้ข้อความยาว ๆ แสดงผลล้นเลย์เอาต์
  • คลาส .text-decoration-none ใช้ร่วมกับแท็ก <a> เพื่อทำให้ข้อความที่เป็นลิงก์ไม่มีการขีดเส้นใต้
  • คลาส .text-uppercase ใช้กับข้อความภาษาอังกฤษ เพื่อแปลงตัวอักษรให้เป็นตัวพิมพ์ใหญ่ทั้งหมด
  • คลาส .text-lowercase ใช้กับข้อความภาษาอังกฤษ เพื่อแปลงตัวอักษรให้เป็นตัวพิมพ์เล็กทั้งหมด
  • คลาส .text-capitalize ใช้กับข้อความภาษาอังกฤษ เพื่อแปลงตัวอักษรตัวแรกของทุกคำให้เป็นตัวพิมพ์ใหญ่
  • คลาส .initialism ใช้ร่วมกับแท็ก <abbr> เพื่อทำให้ตัวอักษรภายในแท็กมีขนาดเล็กลงเล็กน้อย
  • คลาส .list-unstyled ใช้ร่วมกันแท็ก <ul> หรือ <ol> เพื่อลบรูปแบบการแสดงรายการที่เราเห็นกันทั่วไป (ลบสัญลักษณ์รายการทิ้งไป) และลบระยะห่างด้านซ้าย (left margin) ออกด้วย
  • คลาส .list-inline ใช้ร่วมกับแท็ก <ul> เพื่อทำให้รายการทั้งหมดแสดงอยู่ในแถวเดียวกัน (แท็ก <li> ต้องระบุคลาส .list-inline-item ด้วย)