Bootstrap 5 teksti/käsikirjoitus

Bootstrap 5 默认设置

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

此外，所有 <p> 元素都设置了 margin-top: 0 ja margin-bottom: 1rem （默认为 16px）。

<h1> - <h6>

Bootstrap 5 把 HTML 标题（<h1> 到 <h6>）的样式设置为有更粗的 font-weight 以及响应式的 font-size。

Esimerkki

Kokeile itse

如果需要，您还可以在其他元素上使用 .h1 到 .h6 类，使它们表现为标题：

Esimerkki

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

Kokeile itse

display 标题

display 标题用于比普通标题更突出（更大的 font-size 和更细的 font-weight），有六个类可供选择：.display-1 到 .display-6：

Esimerkki

Kokeile itse

<small>

在 Bootstrap 5 中，HTML <small> 元素（和 .small 用于在任何标题中创建较小的辅助文本：

Esimerkki

Kokeile itse

<mark>

Bootstrap 5 käyttää keltaista taustaväriä ja jonkin verran sisäpiirteitä asettaakseen <mark> ja .mark tyyliä:

Esimerkki

Kokeile itse

<abbr>

Bootstrap 5 asettaa HTML: <abbr> Elementin tyylejä asetetaan alareunaan viivakäyrä reunus ja kysymysmerkki-syötteellä hiiren osoitin hiiren osoittimen yllä:

Esimerkki

Kokeile itse

<blockquote>

Kun lainataan muiden lähde内容的块， .blockquote Luokkaa lisätään <blockquote>Kun mainitaan lähde, kuten "Verkkosivusto, joka on tuottanut Maailman luonnonvarainrahasto", käytä: .blockquote-footer Luokka:

Esimerkki

Kokeile itse

<dl>

Bootstrap 5 asettaa HTML: <dl> Elementin tyylejä:

Esimerkki

Kokeile itse

<code>

Bootstrap 5 asettaa HTML: <code> Elementin tyylejä:

Esimerkki

Kokeile itse

<kbd>

Bootstrap 5 asettaa HTML: <kbd> Elementin tyylejä:

Esimerkki

Kokeile itse

<pre>

Bootstrap 5 asettaa HTML: <pre> Elementin tyylejä:

Esimerkki

Kokeile itse

Lisää muotoiluluokat

Seuraavat Bootstrap 5 -luokat voidaan lisätä HTML-elementin tyyleihin:

Luokka Kuvaus Esimerkki
.lead Korosta kappale. Kokeile itse
.text-left Määritä vasemmalle tasatettu teksti. Kokeile itse
.text-break Estä pitkien tekstien rikkoutuminen asettamalla. Kokeile itse
.text-center Määritä keskelle tasatettu teksti. Kokeile itse
.text-decoration-none Poista linkin alla oleva viiva. Kokeile itse
.text-end Määritä oikealle tasalle asetettu teksti. Kokeile itse
.text-nowrap Määritä teksti ei-vaihda rivejä. Kokeile itse
.text-lowercase Määritä pienikirjainteksti. Kokeile itse
.text-uppercase Määritä isojen kirjainten teksti. Kokeile itse
.text-capitalize Määritä isojen kirjainten teksti. Kokeile itse
.initialism Näytä <abbr> -elementin teksti pienemmällä kirjasinnolla. Kokeile itse
.list-unstyled Poista luettelolistojen oletusluettelostyylit ja vasemman reunan ulkoreuna (soveltuu <ul> ja <ol>).
Tämä tyylejä sovelletaan vain suoraan alaisiin luettelolistoihin.
Jos haluat poistaa minkä tahansa sisäkkäisen luettelon oletusluettelostylin, sovelta tämä myös sisäkkäisiin luetteloihin.		 Kokeile itse
.list-inline Sijoita kaikki luetteloitemet riviin.
Käytä yhdessä jokaisen <li> -elementin kanssa .list-inline-item.		 Kokeile itse