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

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

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

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

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

โพสต์โดย m038 » 01/08/2016 6:49 pm

การออกแบบตัวอักษร (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) เปิดดู 137 ครั้ง


2. ถ้าเกิดในข้อความมีขนาดแตกต่างกัน 2 ระดับ จะใช้คำสั่ง <small>ในการแทรกข้อความ

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

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

- แสดงผลดังภาพ
bbb.png
bbb.png (15.1 KiB) เปิดดู 137 ครั้ง


3. การใส่ Paragraph หรือ ย่อหน้า

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

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

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


4. การเน้นข้อความที่สำคัญหรือการ highlight โดยจะเป็นคำสั่งที่จะเน้นเฉพาะจุดที่เราต้องการจะเน้นข้อความที่สำคัญ

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

การที่จะทำให้งานสำเร็จ<mark> ทีมที่ดีเป็นสิ่งสำคัญ </mark> ในการที่จะทำงานให้ไปสู่ความสำเร็จ

- แสดงผลดังภาพ
ddd.png
ddd.png (16.84 KiB) เปิดดู 137 ครั้ง


5. คำสั่งข้อความที่ถูกลบที่ต้องการแสดงผล และคำสั่งข้อความที่ไม่ถูกต้อง โดยจะมีเส้นขีดทับทับข้อความ

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

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

- แสดงผลดังภาพ
eee.png
eee.png (16.77 KiB) เปิดดู 137 ครั้ง


ุ6. คำสั่งของตัวอักษรที่มีขนาดที่แตกต่างกัน ตัวอักษรเล็กกว่าปกติ ตัวอักษรดูแข็งแรง และตัวอักษรเอียง

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

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

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

<em> ตัวอักษรเอียง</em>

- แสดงผลดังภาพ
fff.png
fff.png (11.87 KiB) เปิดดู 137 ครั้ง

  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ย้อนกลับไปยัง

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

กำลังดูบอร์ดนี้: 1 และ บุคคลทั่วไป 0 ท่าน