การออกแบบตัวอักษร (Typography) และการแสดงประโยคของ Bootstrap
ซึ่งการออกแบบตัวอักษรที่จะแสดงผลมีหลายรูปแบบด้วยกัน โดยจะแสดงลักษณะประโยคที่แตกต่างกันไป ดังนี้
1. คำสั่งแสดงหัวเรื่องต่างๆ ซึ่งจะแสดงขนาดที่แตกต่างกันออกไปดังนี้
โค้ด: เลือกทั้งหมด
<h1>หัวเรื่องขนาด 1</h1>
<h2>หัวเรื่องขนาด 2</h2>
<h3>หัวเรื่องขนาด 3</h3>
<h4>หัวเรื่องขนาด 4</h4>
<h5>หัวเรื่องขนาด 5</h5>
<h6>หัวเรื่องขนาด 6</h6>
- แสดงผลดังภาพ
- aaa.png (37.44 KiB) Viewed 1015 times
2. ถ้าเกิดในข้อความมีขนาดแตกต่างกัน 2 ระดับ จะใช้คำสั่ง <small>ในการแทรกข้อความ
โค้ด: เลือกทั้งหมด
<h3>หัวเรื่องปกติ <small>หัวเรื่องขนาดเล็ก</small></h3>
- แสดงผลดังภาพ
- bbb.png (15.1 KiB) Viewed 1015 times
3. การใส่ Paragraph หรือ ย่อหน้า
โค้ด: เลือกทั้งหมด
<p>เนื้อเรื่อง....<p>
<p class="lead">เนื้อเรื่อง....<p>
- โดยการใส่ <p> โดยไม่ใส่ class นั้นเป็นการกำหนด Paragraph หรือ ย่อหน้า แบบไม่เน้นข้อความ
- แต่ถ้าต้องการเน้นข้อความจะใส่ <p class="lead"> ระบุ class เข้าไปด้วย
- แสดงผลดังภาพ
- ccc.png (13.08 KiB) Viewed 1015 times
4. การเน้นข้อความที่สำคัญหรือการ highlight โดยจะเป็นคำสั่งที่จะเน้นเฉพาะจุดที่เราต้องการจะเน้นข้อความที่สำคัญ
โค้ด: เลือกทั้งหมด
การที่จะทำให้งานสำเร็จ<mark> ทีมที่ดีเป็นสิ่งสำคัญ </mark> ในการที่จะทำงานให้ไปสู่ความสำเร็จ
- แสดงผลดังภาพ
- ddd.png (16.84 KiB) Viewed 1015 times
5. คำสั่งข้อความที่ถูกลบที่ต้องการแสดงผล และคำสั่งข้อความที่ไม่ถูกต้อง โดยจะมีเส้นขีดทับทับข้อความ
โค้ด: เลือกทั้งหมด
<del>ข้อความนี้ถูกลบ</del>
null<s>ข้อความนี้ไม่ถูกต้อง</s>
- แสดงผลดังภาพ
- eee.png (16.77 KiB) Viewed 1015 times
ุ6. คำสั่งของตัวอักษรที่มีขนาดที่แตกต่างกัน ตัวอักษรเล็กกว่าปกติ ตัวอักษรดูแข็งแรง และตัวอักษรเอียง
โค้ด: เลือกทั้งหมด
<small> ตัวอักษรเล็กกว่าปกติ</small>
<strong> ตัวอักษรดูแข็งแรง (หนา)</strong>
<em> ตัวอักษรเอียง</em>
- แสดงผลดังภาพ
- fff.png (11.87 KiB) Viewed 1015 times
[b]การออกแบบตัวอักษร [url=https://www.mindphp.com/forums/viewtopic.php?f=76&t=18447&p=38535&hilit=Typography#p38535](Typography)[/url] และการแสดงประโยคของ Bootstrap[/b]
ซึ่งการออกแบบตัวอักษรที่จะแสดงผลมีหลายรูปแบบด้วยกัน โดยจะแสดงลักษณะประโยคที่แตกต่างกันไป ดังนี้
1. คำสั่งแสดงหัวเรื่องต่างๆ ซึ่งจะแสดงขนาดที่แตกต่างกันออกไปดังนี้
[code]<h1>หัวเรื่องขนาด 1</h1>
<h2>หัวเรื่องขนาด 2</h2>
<h3>หัวเรื่องขนาด 3</h3>
<h4>หัวเรื่องขนาด 4</h4>
<h5>หัวเรื่องขนาด 5</h5>
<h6>หัวเรื่องขนาด 6</h6>[/code]
- แสดงผลดังภาพ
[attachment=5]aaa.png[/attachment]
2. ถ้าเกิดในข้อความมีขนาดแตกต่างกัน 2 ระดับ จะใช้คำสั่ง <small>ในการแทรกข้อความ
[code]<h3>หัวเรื่องปกติ <small>หัวเรื่องขนาดเล็ก</small></h3>[/code]
- แสดงผลดังภาพ
[attachment=4]bbb.png[/attachment]
3. การใส่ Paragraph หรือ ย่อหน้า
[code]<p>เนื้อเรื่อง....<p>
<p class="lead">เนื้อเรื่อง....<p>[/code]
- โดยการใส่ <p> โดยไม่ใส่ class นั้นเป็นการกำหนด Paragraph หรือ ย่อหน้า แบบไม่เน้นข้อความ
- แต่ถ้าต้องการเน้นข้อความจะใส่ <p class="lead"> ระบุ class เข้าไปด้วย
- แสดงผลดังภาพ
[attachment=3]ccc.png[/attachment]
4. การเน้นข้อความที่สำคัญหรือการ highlight โดยจะเป็นคำสั่งที่จะเน้นเฉพาะจุดที่เราต้องการจะเน้นข้อความที่สำคัญ
[code]การที่จะทำให้งานสำเร็จ<mark> ทีมที่ดีเป็นสิ่งสำคัญ </mark> ในการที่จะทำงานให้ไปสู่ความสำเร็จ[/code]
- แสดงผลดังภาพ
[attachment=2]ddd.png[/attachment]
5. คำสั่งข้อความที่ถูกลบที่ต้องการแสดงผล และคำสั่งข้อความที่ไม่ถูกต้อง โดยจะมีเส้นขีดทับทับข้อความ
[code]<del>ข้อความนี้ถูกลบ</del>
null<s>ข้อความนี้ไม่ถูกต้อง</s>[/code]
- แสดงผลดังภาพ
[attachment=1]eee.png[/attachment]
ุ6. คำสั่งของตัวอักษรที่มีขนาดที่แตกต่างกัน ตัวอักษรเล็กกว่าปกติ ตัวอักษรดูแข็งแรง และตัวอักษรเอียง
[code]<small> ตัวอักษรเล็กกว่าปกติ</small>
<strong> ตัวอักษรดูแข็งแรง (หนา)</strong>
<em> ตัวอักษรเอียง</em>[/code]
- แสดงผลดังภาพ
[attachment=0]fff.png[/attachment]