Bootstrap 5 ng Text/Typesetting
- Nakaraang pahina Mga batayan ng grid ng BS5
- Susunod na pahina Mga kulay ng BS5
Bootstrap 5 默认设置
Bootstrap 5 默认 font-size
为 1rem(默认为 16px),line-height
为 1.5。
此外,所有 <p>
元素都设置了 margin-top: 0
Bootstrap 5 ay maggamit ng kulay ng bakod na dilaw at ilan pang panig sa loob para sa: margin-bottom: 1rem
(默认为 16px)。
<h1> - <h6>
Bootstrap 5 把 HTML 标题(<h1>
到 <h6>
)的样式设置为有更粗的 font-weight 以及响应式的 font-size。
Halimbawa
如果需要,您还可以在其他元素上使用 .h1
到 .h6
类,使它们表现为标题:
Halimbawa
<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>
display 标题
display 标题用于比普通标题更突出(更大的 font-size 和更细的 font-weight),有六个类可供选择:.display-1
到 .display-6
:
Halimbawa
Bootstrap 5 将使用黄色背景颜色和一些内边距来设置 Bootstrap 5 ay maggamit ng kulay ng bakod na dilaw at ilan pang panig sa loob para sa:
<mark>
at
Halimbawa
Bootstrap 5 ay magtatakda ng HTML sa pamamagitan ng:
.mark Bootstrap 5 ay magtatakda ng HTML sa pamamagitan ng:
<abbr>
Halimbawa
<blockquote>
Kapag binubunyag ang nilalaman ng ibang pinagmulan, ilagay ang estilo ng elemento sa: .blockquote
Magdagdag ng uri sa: <blockquote>
. Kapag binubunyag ang pinagmulan, tulad ng sa websayt ng World Wide Fund for Nature, gamitin ang: .blockquote-footer
Uri:
Halimbawa
<dl>
Bootstrap 5 ay magtatakda ng HTML sa pamamagitan ng: <dl>
Estilo ng elemento:
Halimbawa
<code>
Bootstrap 5 ay magtatakda ng HTML sa pamamagitan ng: <code>
Estilo ng elemento:
Halimbawa
<kbd>
Bootstrap 5 ay magtatakda ng HTML sa pamamagitan ng: <kbd>
Estilo ng elemento:
Halimbawa
<pre>
Bootstrap 5 ay magtatakda ng HTML sa pamamagitan ng: <pre>
Estilo ng elemento:
Halimbawa
Mga iba pang uri ng pagbabalangkas
Ang mga uri ng Bootstrap 5 na ito ay maaaring idagdag sa estilo ng HTML elemento:
Uri | Paglalarawan | Halimbawa |
---|---|---|
.lead |
Pakikilala ang paragrapo. | Subukan |
.text-left |
Tuturuan ang teksto na magkalagay sa kaliwa. | Subukan |
.text-break |
Iwasan ang pagkasira ng luwang ng mahabang teksto. | Subukan |
.text-center |
Tuturuan ang teksto na magkalagay sa gitna. | Subukan |
.text-decoration-none |
Alisin ang underline sa link. | Subukan |
.text-end |
Tuturuan ang teksto na magkalagay sa kanan. | Subukan |
.text-nowrap |
Tuturuan ang teksto na hindi mawawala sa pagsusunod-sunod. | Subukan |
.text-lowercase |
Tuturuan ang teksto na may maliliit na teksto. | Subukan |
.text-uppercase |
Tuturuan ang teksto na may malalaking teksto. | Subukan |
.text-capitalize |
Tuturuan ang teksto na may malalaking teksto. | Subukan |
.initialism |
Ipakita ang teksto sa loob ng <abbr> na may maliliit na font. | Subukan |
.list-unstyled |
Alisin ang default na list-style at left margin ng listahan (aplikable sa <ul> at <ol>). Ang uri na ito ay gagamitin lamang para sa direktang mga sangay ng listahan. Kung gusto mong alisin ang default na estilo ng listahan mula sa anumang nakakabit na listahan, ilagay din ito sa mga nakakabit na listahan. |
Subukan |
.list-inline |
Ilagay ang lahat ng mga sangay ng listahan sa isang linya. Gamitin ang .list-inline-item na kasama ang bawat <li> elemento. |
Subukan |
- Nakaraang pahina Mga batayan ng grid ng BS5
- Susunod na pahina Mga kulay ng BS5