การออกแบบตัวอักษร (Typography) และการแสดงประโยคของ Bootstrap

Booststap Knowledge ความรู้สำหรับการออกเว็บเพื่อให้แสดงผล ได้ดี ทุกหน้าจอ

Moderator: mindphp, ผู้ดูแลกระดาน

m038
PHP Sr. Member
PHP Sr. Member
โพสต์: 59
ลงทะเบียนเมื่อ: 29/07/2016 10:40 am

การออกแบบตัวอักษร (Typography) และการแสดงประโยคของ Bootstrap

โพสต์ที่ยังไม่ได้อ่าน โดย m038 »

การออกแบบตัวอักษร (Typography) และการแสดงประโยคของ Bootstrap
ซึ่งการออกแบบตัวอักษรที่จะแสดงผลมีหลายรูปแบบด้วยกัน โดยจะแสดงลักษณะประโยคที่แตกต่างกันไป ดังนี้

1. คำสั่งแสดงหัวเรื่องต่างๆ ซึ่งจะแสดงขนาดที่แตกต่างกันออกไปดังนี้

โค้ด: เลือกทั้งหมด

<h1>หัวเรื่องขนาด 1</h1>
<h2>หัวเรื่องขนาด 2</h2>
<h3>หัวเรื่องขนาด 3</h3>
<h4>หัวเรื่องขนาด 4</h4>
<h5>หัวเรื่องขนาด 5</h5>
<h6>หัวเรื่องขนาด 6</h6>
- แสดงผลดังภาพ
aaa.png
aaa.png (37.44 KiB) Viewed 975 times
2. ถ้าเกิดในข้อความมีขนาดแตกต่างกัน 2 ระดับ จะใช้คำสั่ง <small>ในการแทรกข้อความ

โค้ด: เลือกทั้งหมด

<h3>หัวเรื่องปกติ <small>หัวเรื่องขนาดเล็ก</small></h3>
- แสดงผลดังภาพ
bbb.png
bbb.png (15.1 KiB) Viewed 975 times
3. การใส่ Paragraph หรือ ย่อหน้า

โค้ด: เลือกทั้งหมด

<p>เนื้อเรื่อง....<p>
<p class="lead">เนื้อเรื่อง....<p>
- โดยการใส่ <p> โดยไม่ใส่ class นั้นเป็นการกำหนด Paragraph หรือ ย่อหน้า แบบไม่เน้นข้อความ
- แต่ถ้าต้องการเน้นข้อความจะใส่ <p class="lead"> ระบุ class เข้าไปด้วย
- แสดงผลดังภาพ
ccc.png
ccc.png (13.08 KiB) Viewed 975 times
4. การเน้นข้อความที่สำคัญหรือการ highlight โดยจะเป็นคำสั่งที่จะเน้นเฉพาะจุดที่เราต้องการจะเน้นข้อความที่สำคัญ

โค้ด: เลือกทั้งหมด

การที่จะทำให้งานสำเร็จ<mark> ทีมที่ดีเป็นสิ่งสำคัญ </mark> ในการที่จะทำงานให้ไปสู่ความสำเร็จ
- แสดงผลดังภาพ
ddd.png
ddd.png (16.84 KiB) Viewed 975 times
5. คำสั่งข้อความที่ถูกลบที่ต้องการแสดงผล และคำสั่งข้อความที่ไม่ถูกต้อง โดยจะมีเส้นขีดทับทับข้อความ

โค้ด: เลือกทั้งหมด

<del>ข้อความนี้ถูกลบ</del>
null<s>ข้อความนี้ไม่ถูกต้อง</s>
- แสดงผลดังภาพ
eee.png
eee.png (16.77 KiB) Viewed 975 times
ุ6. คำสั่งของตัวอักษรที่มีขนาดที่แตกต่างกัน ตัวอักษรเล็กกว่าปกติ ตัวอักษรดูแข็งแรง และตัวอักษรเอียง

โค้ด: เลือกทั้งหมด

<small> ตัวอักษรเล็กกว่าปกติ</small>

<strong> ตัวอักษรดูแข็งแรง (หนา)</strong>

<em> ตัวอักษรเอียง</em>
- แสดงผลดังภาพ
fff.png
fff.png (11.87 KiB) Viewed 975 times
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 64