Tipografi
Dokuméntasi sareng conto tipografi Bootstrap, kalebet setélan global, judul, téks awak, daptar, sareng seueur deui.
Setélan global
Bootstrap nyetél tampilan global dasar, tipografi, sareng gaya tautan. Nalika langkung seueur kontrol diperyogikeun, pariksa kelas utilitas tékstual .
- Anggo tumpukan font asli anu milih anu pangsaéna
font-family
pikeun unggal OS sareng alat. - Pikeun skala tipe anu langkung inklusif sareng tiasa diaksés, kami nganggo akar standar browser
font-size
(biasana 16px) supados sémah tiasa ngaluyukeun standar browserna upami diperyogikeun. - Anggo
$font-family-base
,$font-size-base
, sareng$line-height-base
atribut salaku dasar tipografi urang dilarapkeun kana<body>
. - Setel warna link global via
$link-color
. - Anggo
$body-bg
pikeun nyetélbackground-color
dina<body>
(#fff
sacara standar).
gaya ieu bisa kapanggih dina _reboot.scss
, jeung variabel global diartikeun dina _variables.scss
. Pastikeun pikeun $font-size-base
nyetél rem
.
lulugu
Kabéh lulugu HTML, <h1>
ngaliwatan <h6>
, sadia.
Judul | Contona |
---|---|
<h1></h1> |
h1. Judul Bootstrap |
<h2></h2> |
h2. Judul Bootstrap |
<h3></h3> |
h3. Judul Bootstrap |
<h4></h4> |
h4. Judul Bootstrap |
<h5></h5> |
h5. Judul Bootstrap |
<h6></h6> |
h6. Judul Bootstrap |
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
.h1
ngaliwatan .h6
kelas oge sadia, keur nalika rék cocog styling font tina hiji judul tapi teu bisa make unsur HTML pakait.
h1. Judul Bootstrap
h2. Judul Bootstrap
h3. Judul Bootstrap
h4. Judul Bootstrap
h5. Judul Bootstrap
h6. Judul Bootstrap
<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>
Ngaropea judul
Anggo kelas utiliti anu kalebet pikeun nyiptakeun téks judul sekundér leutik tina Bootstrap 3.
Judul tampilan fancy Jeung téks sekundér luntur
<h3>
Fancy display heading
<small class="text-muted">With faded secondary text</small>
</h3>
Témbongkeun lulugu
elemen judul Tradisional dirancang pikeun dianggo pangalusna dina daging eusi kaca anjeun. Nalika anjeun peryogi judul pikeun menonjol, pertimbangkeun ngagunakeun judul tampilan - gaya judul anu langkung ageung, rada langkung pendapat.
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>
Judul tampilan dikonpigurasi via $display-font-sizes
peta Sass sareng dua variabel, $display-font-weight
sareng $display-line-height
.
$display-font-sizes: (
1: 5rem,
2: 4.5rem,
3: 4rem,
4: 3.5rem,
5: 3rem,
6: 2.5rem
);
$display-font-weight: 300;
$display-line-height: $headings-line-height;
Timbel
Jieun paragraf nangtung kaluar ku nambahkeun .lead
.
Ieu paragraf kalungguhan. Éta nangtung kaluar tina paragraf biasa.
<p class="lead">
This is a lead paragraph. It stands out from regular paragraphs.
</p>
Unsur téks Inline
Styling pikeun elemen HTML5 inline umum.
Anjeun tiasa make tag tanda kasorotantéks.
Baris téks ieu dimaksudkeun pikeun dianggap salaku téks dihapus.
Garis téks ieu dimaksudkeun pikeun dianggap henteu akurat deui.
Garis téks ieu dimaksudkeun pikeun diperlakukeun salaku tambahan pikeun dokumén.
Garis téks ieu bakal ditingalikeun sakumaha anu digariskeun.
Garis téks ieu dimaksudkeun pikeun diperlakukeun salaku citak anu saé.
garis ieu rendered salaku téks kandel.
garis ieu rendered salaku téks miring.
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined.</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
Waspada yén tag éta kedah dianggo pikeun tujuan semantik:
<mark>
ngagambarkeun téks anu ditandaan atanapi disorot pikeun tujuan rujukan atanapi notasi.<small>
ngagambarkeun koméntar sisi sareng citak leutik, sapertos hak cipta sareng téks hukum.<s>
ngagambarkeun unsur anu henteu relevan deui atanapi henteu akurat deui.<u>
ngagambarkeun rentang téks inline nu kudu rendered dina cara nu nunjukkeun yén éta boga annotation non-tékstual.
Upami anjeun hoyong gaya téks anjeun, anjeun kedah nganggo kelas di handap ieu:
.mark
bakal nerapkeun gaya anu sami sareng<mark>
..small
bakal nerapkeun gaya anu sami sareng<small>
..text-decoration-underline
bakal nerapkeun gaya anu sami sareng<u>
..text-decoration-line-through
bakal nerapkeun gaya anu sami sareng<s>
.
Bari teu ditémbongkeun di luhur, ngarasa Luncat ngagunakeun <b>
na <i>
HTML5. <b>
dimaksudkeun pikeun nyorot kecap atawa frasa tanpa nepikeun pentingna tambahan, sedengkeun <i>
lolobana pikeun sora, istilah teknis, jsb.
Utiliti téks
Robah alignment téks, transformasi, gaya, beurat, jangkungna garis, hiasan sareng warna nganggo utilitas téks sareng utilitas warna kami .
Singgetan
Palaksanaan gaya <abbr>
unsur HTML pikeun singketan sareng akronim pikeun nunjukkeun versi anu dilegakeun dina hover. Singketan gaduh garis ngagurat standar sareng kéngingkeun kursor pitulung pikeun nyayogikeun kontéks tambahan dina hover sareng pangguna téknologi anu ngabantosan.
Tambahkeun .initialism
ka singketan pikeun ukuran font anu rada leutik.
attr
HTML
<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
Blockquotes
Pikeun ngadugikeun blok eusi tina sumber anu sanés dina dokumén anjeun. Bungkus <blockquote class="blockquote">
sabudeureun sagala HTML salaku cutatan.
A cutatan well-dipikawanoh, dikandung dina unsur blockquote.
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
Ngaran hiji sumber
Spésifikasi HTML merlukeun attribution blockquote ditempatkeun di luar <blockquote>
. Nalika masihan atribusi, bungkus anjeun <blockquote>
sareng <figure>
nganggo <figcaption>
unsur tingkat blok (contona, <p>
) sareng .blockquote-footer
kelas. Pastikeun pikeun mungkus nami karya sumber dina <cite>
ogé.
<figure>
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>
Ngajajar
Anggo utilitas téks upami diperyogikeun pikeun ngarobih alignment blockquote anjeun.
<figure class="text-center">
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>
<figure class="text-end">
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>
Daptar
Teu gaya
Cabut wates standar list-style
sareng kénca dina daptar item (barudak saharita wungkul). Ieu ngan manglaku ka barudak langsung daptar item , hartina anjeun bakal kudu nambahan kelas pikeun sagala daptar nested ogé.
- Ieu daptar.
- Nembongan sagemblengna unstyled.
- Sacara stuktur, éta masih mangrupa daptar.
- Sanajan kitu, gaya ieu ngan manglaku ka elemen anak saharita.
- Daptar Nested:
- teu kapangaruhan ku gaya ieu
- masih bakal nembongkeun bullet a
- sarta boga margin kénca luyu
- Ieu masih tiasa dianggo dina sababaraha kaayaan.
<ul class="list-unstyled">
<li>This is a list.</li>
<li>It appears completely unstyled.</li>
<li>Structurally, it's still a list.</li>
<li>However, this style only applies to immediate child elements.</li>
<li>Nested lists:
<ul>
<li>are unaffected by this style</li>
<li>will still show a bullet</li>
<li>and have appropriate left margin</li>
</ul>
</li>
<li>This may still come in handy in some situations.</li>
</ul>
Baris
Cabut pélor daptar sareng nerapkeun sababaraha lampu margin
kalayan kombinasi dua kelas, .list-inline
sareng .list-inline-item
.
- Ieu daptar item.
- Sareng hiji deui.
- Tapi aranjeunna nuju ditampilkeun inline.
<ul class="list-inline">
<li class="list-inline-item">This is a list item.</li>
<li class="list-inline-item">And another one.</li>
<li class="list-inline-item">But they're displayed inline.</li>
</ul>
alignment daptar pedaran
Sejajarkeun istilah sareng déskripsi sacara horisontal ku cara ngagunakeun kelas anu tos ditetepkeun ku sistem grid urang (atanapi campuran semantik). Pikeun istilah anu langkung panjang, anjeun tiasa nambihan .text-truncate
kelas pikeun motong téks nganggo elipsis.
- Daptar pedaran
- Daptar pedaran sampurna pikeun nangtukeun istilah.
- istilah
-
Harti pikeun istilah.
Jeung sababaraha téks harti placeholder langkung.
- Istilah sejen
- Definisi ieu pondok, janten henteu aya paragraf tambahan atanapi naon waé.
- Istilah truncated nyaeta truncated
- Ieu tiasa mangpaat nalika rohangan ketat. Nambahkeun hiji elipsis dina tungtungna.
- Nyarang
-
- Daptar harti Nested
- Kuring ngadéngé anjeun resep daptar harti. Hayu atuh nempatkeun daptar harti jero daptar harti anjeun.
<dl class="row">
<dt class="col-sm-3">Description lists</dt>
<dd class="col-sm-9">A description list is perfect for defining terms.</dd>
<dt class="col-sm-3">Term</dt>
<dd class="col-sm-9">
<p>Definition for the term.</p>
<p>And some more placeholder definition text.</p>
</dd>
<dt class="col-sm-3">Another term</dt>
<dd class="col-sm-9">This definition is short, so no extra paragraphs or anything.</dd>
<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
<dd class="col-sm-9">This can be useful when space is tight. Adds an ellipsis at the end.</dd>
<dt class="col-sm-3">Nesting</dt>
<dd class="col-sm-9">
<dl class="row">
<dt class="col-sm-4">Nested definition list</dt>
<dd class="col-sm-8">I heard you like definition lists. Let me put a definition list inside your definition list.</dd>
</dl>
</dd>
</dl>
Ukuran font responsif
Dina Bootstrap 5, kami parantos ngaktipkeun ukuran font responsif sacara standar, ngamungkinkeun téks pikeun skala langkung alami dina ukuran alat sareng viewport. Tingali dina halaman RFS pikeun terang kumaha ieu jalan.
Sass
Variabel
Judul gaduh sababaraha variabel khusus pikeun ukuran sareng jarak.
$headings-margin-bottom: $spacer * .5;
$headings-font-family: null;
$headings-font-style: null;
$headings-font-weight: 500;
$headings-line-height: 1.2;
$headings-color: null;
Rupa-rupa elemen tipografi anu katutupan di dieu sareng di Reboot ogé ngagaduhan variabel khusus.
$lead-font-size: $font-size-base * 1.25;
$lead-font-weight: 300;
$small-font-size: .875em;
$sub-sup-font-size: .75em;
$text-muted: $gray-600;
$initialism-font-size: $small-font-size;
$blockquote-margin-y: $spacer;
$blockquote-font-size: $font-size-base * 1.25;
$blockquote-footer-color: $gray-600;
$blockquote-footer-font-size: $small-font-size;
$hr-margin-y: $spacer;
$hr-color: inherit;
$hr-height: $border-width;
$hr-opacity: .25;
$legend-margin-bottom: .5rem;
$legend-font-size: 1.5rem;
$legend-font-weight: null;
$mark-padding: .2em;
$dt-font-weight: $font-weight-bold;
$nested-kbd-font-weight: $font-weight-bold;
$list-inline-padding: .5rem;
$mark-bg: #fcf8e3;
Campuran
Henteu aya campuran khusus pikeun tipografi, tapi Bootstrap nganggo Responsive Font Sizing (RFS) .