สอน PHP ASP ASP.NET C# JSP Javascript Java Perl IT Solution Opensource Source Code MVC Software Freeware Shareware
 หน้าแรก  |  ข่าวสารต่างๆ  |  ค้นหาบทความ

Bootstrap Text/Typography | รายละเอียดของ Boostrap

Bootstrap's Default Settings


ค่ามาตรฐานของขนาด font ของ bootstrap คือ 14px และความสูงของบรรทัดคือ 1.428
โดยค่านี้ถูกนำไปใช้ทั้งหมดสำหรับตัวอักษรใน tag และทุกย่อหน้า
เพิ่มเติมคือ tag

จะมี bottom margin เท่ากับครึ่งนึงของความสูงของบรรทัด ซึ่งก็คือ 10px โดยค่ามาตรฐาน

Bootstrap vs. Browser Defaults


เราจะมาพูดถึง html elements ซึ่งจะมีบางอย่างที่แตกต่างกันระหว่าง bootstrap และทั่วๆ ไป

<h1> - <h6>
โดยปกติแล้ว bootstrap จะใช้ h1 ถึง h6 โดยมีขนาด font เป็นดังนี้
h1 Bootstrap heading (36px)
h2 Bootstrap heading (30px)
h3 Bootstrap heading (24px)
h4 Bootstrap heading (18px)
h5 Bootstrap heading (14px)
h6 Bootstrap heading (12px)

<small>
ใน bootstrap จะใช้ <small> สร้างตัวหนังสือสว่างขึ้น โดยจะใช้ตามหลังหัวข้อต่างๆ
<h1>h1 heading <small>secondary text</small></h1>

<mark>
ใน bootstrap จะใช้ <mark> สำหรับทำไฮไลท์ตัวหนังสือ

<abbr>
ใน bootstrap จะใช้ <abbr> สำหรับทำขีดเส้นใต้แบบประใต้ตัวหนังสือ

<blockquote>
ใน bootstrap จะใช้ <blockquote> สำหรับทำบล็อคเขียนส่วนหนึ่งของข้อความ

<dl>
ใช้ทำ list ของข้อความต่างๆ

<code>
ใช้แสดงข้อความที่เป็น code ต่างๆ

<kbd>
ใช้แสดงข้อความ short cut บนคีย์บอร์ดเช่น Ctrl+P

<pre>
ใช้แสดงข้อความตามข้อมูลจริงๆ เช่น ถ้ามีการพิมพ์ space เข้ามาตอนเก็บข้อมูลก็จะเก็บ space จิงๆ ลงไปด้วย

การแสดงสีและพื้นหลัง (Contextual Colors and Backgrounds)
Bootstrap มีการใช้ class ที่สามารถบอกได้ถึงความหมายด้วยสี ดังนี้
.text-muted - ใช้แสดงข้อความที่ถูกระงับไว้
.text-primary - ใช้แสดงข้อความที่สำคัญ
.text-success - ใช้แสดงข้อความที่สำเร็จ
.text-info - ใช้แสดงข้อความข่าวสารรายละเอียด
.text-warning - ใช้แสดงข้อความเตือน
.text-danger - ใช้แสดงข้อความอันตราย

สำหรับการแสดงสีพื้นหลังของตัวหนังสือ ใช้ class ดังนี้
.bg-primary, .bg-success, .bg-info, .bg-warning, and .bg-danger

สำหรับ class อื่นๆ มีดังนี้
.lead - สำหรับทำตัวหนาหัวข้อย่อหน้าและทิ้งระยะห่างด้านบนและล่างของย่อหน้า
.small - ทำตัวหนังสือให้ตัวเล็กกว่าปกติ
.text-left - จัดตำแหน่งตัวหนังสือแสดงทางซ้ายมือ
.text-center - จัดตำแหน่งตัวหนังสือไว้ตรงกลาง
.text-right - จัดตำแหน่งตัวหนังสือไว้ด้านขวามือ
.text-justify
.text-nowrap - บังคับให้ไม่ตัดบรรทัดตัวหนังสือลงบรรทัดใหม่
.text-lowercase - แปลงตัวหนังสือเป็นตัวเล็กทั้งหมด
.text-uppercase - แปลงตัวหนังสือเป็นตัวใหญ่ทั้งหมด
.text-capitalize - แปลงตัวหนังสือเป็นตัวเล็กใหญ่ให้ถูกต้อง
  
แผนผังเว็บไซต์ Codethep.com
ข่าวสารต่างๆ เว็บบอร์ด ค้นหาบทความ

ติดตาม ข่าวสารจาก Codethep ผ่านช่องทางข้างล่างนี้
Codethep:  Facebook Codethep  Twitter Codethep
- เกี่ยวกับ Codethep
- ติดต่อ Codethep
- ลงโฆษณากับ Codethep
- ช่วยเหลือ