Bootstrap 5 ข้อความ/การจัดเก็บ

Bootstrap 5 默認設置

Bootstrap 5 默認 font-size 為 1rem（默認為 16px），line-height 為 1.5。

此外，所有 <p> 元素都設置了 margin-top: 0 และ margin-bottom: 1rem （默認為 16px）。

<h1> - <h6>

Bootstrap 5 把 HTML 標題（<h1> 到 <h6>）的樣式設置為有更粗的 font-weight 以及響應式的 font-size。

ตัวอย่าง

ลองทำเลยด้วยตัวเอง

如果需要，您還可以在其他元素上使用 .h1 到 .h6 類，使它們表現為標題：

ตัวอย่าง

<p class="h1">h1 Bootstrap 標題</p>
<p class="h2">h2 Bootstrap 標題</p>
<p class="h3">h3 Bootstrap 標題</p>
<p class="h4">h4 Bootstrap 標題</p>
<p class="h5">h5 Bootstrap 標題</p>
<p class="h6">h6 Bootstrap 標題</p>

ลองทำเลยด้วยตัวเอง

display 標題

display 標題用於比普通標題更突出（更大的 font-size 和更細的 font-weight），有六個類可供選擇：.display-1 到 .display-6：

ตัวอย่าง

ลองทำเลยด้วยตัวเอง

<small>

在 Bootstrap 5 中，HTML <small> 元素（和 .small （類）用於在任何標題中創建較小的輔助文本：

ตัวอย่าง

ลองทำเลยด้วยตัวเอง

<mark>

Bootstrap 5 จะใช้สีพื้นหลังสีเหลืองและมีขอบเขตภายในบาง <mark> และ .mark เป็น

ตัวอย่าง

ลองทำเลยด้วยตัวเอง

<abbr>

Bootstrap 5 จะตั้งสไตล์ HTML <abbr> องค์ประกอบเป็นขอบเขตด้านล่างที่มีเส้นใต้บางและเมื่อเลื่อนเมาส์มาจะมีตายาง

ตัวอย่าง

ลองทำเลยด้วยตัวเอง

<blockquote>

เมื่ออ้างอิงเนื้อหาจากแหล่งข้อมูลอื่น ๆ ให้ตั้งสไตล์ของ .blockquote คลาสเพิ่มเข้าไปใน <blockquote>เมื่อชื่อต้นตอของที่มา ตัวอย่างเช่น “เว็บไซต์จากมูลนิธิโลกธรรมชาติ” ให้ใช้ .blockquote-footer คลาส:

ตัวอย่าง

ลองทำเลยด้วยตัวเอง

<dl>

Bootstrap 5 จะตั้งสไตล์ HTML <dl> สไตล์ขององค์ประกอบ

ตัวอย่าง

ลองทำเลยด้วยตัวเอง

<code>

Bootstrap 5 จะตั้งสไตล์ HTML <code> สไตล์ขององค์ประกอบ

ตัวอย่าง

ลองทำเลยด้วยตัวเอง

<kbd>

Bootstrap 5 จะตั้งสไตล์ HTML <kbd> สไตล์ขององค์ประกอบ

ตัวอย่าง

ลองทำเลยด้วยตัวเอง

<pre>

Bootstrap 5 จะตั้งสไตล์ HTML <pre> สไตล์ขององค์ประกอบ

ตัวอย่าง

ลองทำเลยด้วยตัวเอง

คลาสการจัดเรียงเพิ่มเติม

คลาส Bootstrap 5 ต่อไปนี้สามารถเพิ่มเข้าไปในสไตล์ขององค์ประกอบ HTML ได้

คลาส คำอธิบาย ตัวอย่าง
.lead เน้นบทความ ลองทำเลย
.text-left กำหนดข้อความเซ็นเตอร์ซ้าย ลองทำเลย
.text-break ป้องกันข้อความยาวที่จะทำลายการจัดเรียงรายการ ลองทำเลย
.text-center กำหนดข้อความเซ็นเตอร์ ลองทำเลย
.text-decoration-none ลบขอบของลิงก์ ลองทำเลย
.text-end กำหนดข้อความเซ็นเตอร์ ลองทำเลย
.text-nowrap กำหนดข้อความไม่ให้แบ่งบรรทัด ลองทำเลย
.text-lowercase กำหนดข้อความให้เป็นตัวอักษรเล็ก ลองทำเลย
.text-uppercase กำหนดข้อความให้เป็นตัวอักษรใหญ่ ลองทำเลย
.text-capitalize กำหนดข้อความให้เป็นตัวอักษรใหญ่ ลองทำเลย
.initialism แสดงข้อความด้านใน <abbr> ด้วยตัวอักษรที่เล็กกว่า ลองทำเลย
.list-unstyled ลบสไตล์รายการปริมาณต้นและขอบเขตซ้ายนอก (เหมาะกับ <ul> และ <ol>)
สไตล์นี้มีผลต่อรายการลูกโดยตรงเท่านั้น
ถ้าต้องการลบสไตล์รายการปริมาณต้นในรายการที่ฝังระดับใด ๆ ให้นำสไตล์นี้มาใช้กับรายการที่ฝังระดับนั้น		 ลองทำเลย
.list-inline จัดทำรายการให้เป็นแถวเดียว
ใช้ร่วมกับ .list-inline-item บนแถว <li> ทุกตัว		 ลองทำเลย