เรื่องแรกๆ ที่มักจะอธิบายในช่วงเริ่มต้นเขียนโปรแกรม ส่วนใหญ่มักจะหยิบเอาเรื่อง typography มาบอกเล่า คำว่า typography ปัจจุบันถ้าเปิดในพจนานุกรมมักจะได้คำตอบว่าคือ “การพิมพ์” ถ้าจะให้อธิบายง่ายๆ ก็คือการแสดงข้อความตัวอักษรในหน้าจอนั้นๆ หรือถ้าจะเอาแบบชัดๆ ก็คือ การออกแบบตัวอักษรและการจัดวางฟอนต์ให้เหมาะสม สวยงาม กับพื้นที่ว่างและองค์ประกอบต่างๆ ในหน้านั้นๆ (ถ้าใครสนใจสามารถอ่านเพิ่มเติมได้ที่ Typography หมายความว่าอย่างไรกันแน่?)
ใน Bootstrap นั้นมีการเตรียมชุด class สำหรับงาน typography ไว้หลายคำสั่ง ซึ่งผมจะอธิบายทีละตัวนะครับ

Heading หรือ หัวเรื่อง

การกำหนดหัวเรื่องของหน้าเว็บที่สร้างด้วย Bootstrap นั้น ทาง Bootstrap ได้ไปใช้คำสั่งของ html ปกติครับ ก็คือ <h1>…<h6>

เท่าที่มีมาแต่ดั้งเดิม แต่ก็มีการปรับปรุงขนาดตัวอักษรให้เหมาะสมใน Bootstrap นี้ครับ โดยมีขนาดดังรูปต่อไปนี้
null
ส่วนการใช้งานก็ใช้แบบเดิมไม่มีอะไรเปลี่ยนแปลงครับ
<h1>หัวเรื่องขนาด 1</h1>
<h2>หัวเรื่องขนาด 2</h2>
<h3>หัวเรื่องขนาด 3</h3>
<h4>หัวเรื่องขนาด 4</h4>
<h5>หัวเรื่องขนาด 5</h5>
<h6>หัวเรื่องขนาด 6</h6>

กรณีที่ต้องการให้ส่วนหัวเรื่องมีขนาดตัวอักษรที่แตกต่างกัน 2 ระดับ ซึ่งปกติจะได้ขนาดเดียว แต่ Bootstrap สามารถทำให้หัวเรื่องมี 2 ระดับในหัวเรื่องชุดเดียวกันได้ โดยให้ใช้ <small> ช่วย ดังรูป
null

การใช้งานก็เพียงแทรก <small> เข้าไปใน <h…> ขนาดของข้อความนั้นก็จะย่อลงเพื่อให้ต่างจากขนาดปกติ ซึ่งขนาดของข้อความใน <small> จะขึ้นกับขนาดของ <h…> ครับ เช่นตัวอย่าง

<h3>หัวเรื่องปกติ <small>หัวเรื่องขนาดเล็ก</small></h3>

Paragraph หรือ ย่อหน้า ตอนหนึ่งของบทความ

ส่วนของย่อหน้านี้ก็ใช้ <p> ตามเดิมครับ เป็นคำสั่งดั้งเดิมของ html

<p>เนื้อเรื่อง....<p>

โดยขนาดตัวอักษร default เป็น 14px แต่ Bootstrap ก็เพิ่ม class มาใหม่ในกรณีที่ต้องการให้ตัวอักษรใน <p> มีขนาดที่ใหญ่กว่าปกติ เพื่อเน้นหรือระบุเป็นข้อความเริ่มต้นที่มีความสำคัญ ให้ใส่ class “lead” เข้าไปครับ ดั่งตัวอย่าง

<p class="lead">เนื้อเรื่อง....<p>

Inline text elements

เป็นชุดคำสั่งในการจัดการกับประโยค หรือ ข้อความต่างๆ ให้มีการแสดงผลที่แตกต่างกันไป ซึ่งที่เป็น inline หมายความว่าจะมีผลต่อส่วนที่ใช้เท่านั้นและเมื่อจบคำสั่ง ข้อความถัดไปก็จะขึ้นต่อเลยไม่มีการขึ้นบรรทัดใหม่ครับ คำสั่งต่างๆ มีดังต่อไปนี้

  • Marked text <mark>

เป็นการเน้นข้อความนั้นว่าสำคัญ เหมือนกับการทำ highlight ด้วยปากกาเน้นข้อความ เช่น

การแข่งขันครั้งนี้ <mark>นักเตะคือกุญแจสำคัญ</mark> ที่นำไปสู่ความสำเร็จ
null

  • Deleted text <del> และ Strikethrough text <s>

ทั้งสองคำสั่งได้ผลเหมือนกันคือมีเส้นขีดทับข้อความ แต่ความหมายต่างกัน ถ้าเราใช้ <del> จะมีความหมายถึงว่าข้อความนี้ถูกลบไปแล้ว ถูกยกเลิกการใช้ เป็นต้น ส่วน <s>มีความหมายว่า ข้อความนี้ไม่ถูกต้องอีกต่อไปแล้ว เลยต้องถูกขีดฆ่า เป็นต้น การใช้งานดังตัวอย่าง

<del>ข้อความนี้ถูกลบ</del>
null

<s>ข้อความนี้ไม่ถูกต้อง</s>
null

และความต่างอีกอย่างของสองคำสั่งนี้ <del> ต้องปิดใน element นั้นเลย ไม่สามารถข้ามไปปิดอีก element หนึ่งได้ แต่ <s> สามารถทำได้ เช่น

<p><s>ประโยคนี้ผิด</p>
<p>ขอยกเลิก</s></p>

  • Inserted text <ins> และ Underlined text <u>

ผลของ 2 คำสั่งนี้เหมือนกัน คือมีการขีดเส้นใต้ที่ข้อความหรือประโยคนั้นๆ โดย <ins> ใช้ในความหมายว่า ข้อความนี้ ประโยคนี้ ถูกเพิ่มเติมเข้าไปในเนื้อหา ส่วน <u> ก็คือการขีดเส้นใต้เฉยๆ เพื่อเน้นข้อความหรือประโยคนั้นเท่านั้น การใช้งานดังตัวอย่าง

<ins>มีการเพิ่มเติมเนื้อหา</ins>
null
<u>มีการขีดเส้นใต้เนื้อหา</u>
null

  • Small text <small>, Bold <strong>และ Italics <em>

ชุดนี้ก็คือ การทำให้ตัวอักษรเล็กกว่าขนาดปกติ การทำให้ตัวอักษรดูแข็งแรงหรือง่ายๆ ก็คือดูหนาขึ้น และสุดท้ายก็คือทำให้เป็นตัวเอียง มีการใช้งานดังตัวอย่างครับ

<small>ตัวอักษรเล็กกว่าปกติ</small>
null
<strong>ตัวอักษรดูแข็งแรง</strong>
null
<em>ตัวอักษรเอียง</em>
null

จากที่กล่าวมา จริงๆ ก็คือ tag ดั้งเดิมทั้งของ html 4 และ 5 ครับ เพียงแต่ Bootstrap มากำหนดคุณสมบัติบางอย่างเพิ่มเติมเข้าไป เพื่อให้การแสดงผลดูเหมาะสมมากขึ้นครับ

Comments are closed.