Tipografi
Dokumentasi lan conto tipografi Bootstrap, kalebu setelan global, judhul, teks awak, dhaptar, lan liya-liyane.
Setelan global
Bootstrap nyetel tampilan global dhasar, tipografi, lan gaya link. Yen kontrol luwih dibutuhake, priksa kelas sarana teks .
- Gunakake tumpukan font asli sing milih sing paling apik
font-family
kanggo saben OS lan piranti. - Kanggo skala jinis sing luwih inklusif lan bisa diakses, kita nggunakake root default browser
font-size
(biasane 16px) supaya pengunjung bisa ngatur standar browser sing dibutuhake. - Gunakake
$font-family-base
,$font-size-base
, lan$line-height-base
atribut minangka basis tipografi sing ditrapake ing<body>
. - Setel warna link global liwat
$link-color
. - Gunakake
$body-bg
kanggo nyetelbackground-color
ing<body>
(#fff
kanthi standar).
Gaya iki bisa ditemokake ing _reboot.scss
, lan variabel global ditetepake ing _variables.scss
. Priksa manawa kanggo nyetel $font-size-base
ing rem
.
Judhul
Kabeh judhul HTML, <h1>
liwat <h6>
, kasedhiya.
judhul | Tuladha |
---|---|
<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
liwat .h6
kelas uga kasedhiya, kanggo nalika sampeyan pengin cocog gaya font saka judhul nanging ora bisa nggunakake unsur HTML gadhah.
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>
Ngatur judhul
Gunakake kelas utilitas sing kalebu kanggo nggawé ulang teks judhul sekunder cilik saka Bootstrap 3.
Judhul tampilan apik Kanthi teks sekunder sing luntur
<h3>
Fancy display heading
<small class="text-muted">With faded secondary text</small>
</h3>
Tampilan judhul
Unsur judhul tradisional dirancang supaya bisa digunakake paling apik ing isi konten kaca sampeyan. Yen sampeyan butuh judhul supaya bisa katon, coba gunakake judhul tampilan - gaya judhul sing luwih gedhe lan luwih apik.
<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>
Judhul tampilan dikonfigurasi liwat $display-font-sizes
peta Sass lan rong variabel, $display-font-weight
lan $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;
timbal
Gawea paragraf kanthi nambahake .lead
.
Iki minangka paragraf utama. Iku stands metu saka paragraf biasa.
<p class="lead">
This is a lead paragraph. It stands out from regular paragraphs.
</p>
Unsur teks inline
Styling kanggo unsur HTML5 inline umum.
Sampeyan bisa nggunakake tandha tandha kanggosorotteks.
Baris teks iki kudu dianggep minangka teks sing wis dibusak.
Baris teks iki kudu dianggep ora akurat maneh.
Baris teks iki kudu dianggep minangka tambahan kanggo dokumen kasebut.
Baris teks iki bakal ditampilake minangka garis ngisor.
Baris teks iki kudu dianggep minangka cetakan sing apik.
Baris iki digawe minangka teks kandel.
Baris iki digawe minangka teks 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>
Ati-ati manawa tag kasebut kudu digunakake kanggo tujuan semantik:
<mark>
nggambarake teks sing ditandhani utawa disorot kanggo tujuan referensi utawa notasi.<small>
nuduhake komentar sisih lan cetakan cilik, kayata hak cipta lan teks legal.<s>
nggambarake unsur sing ora relevan utawa ora akurat maneh.<u>
makili span saka teks inline sing kudu diterjemahake kanthi cara sing nuduhake yen ana anotasi non-teks.
Yen sampeyan pengin nggawe gaya teks, sampeyan kudu nggunakake kelas ing ngisor iki:
.mark
bakal ngetrapake gaya sing padha karo<mark>
..small
bakal ngetrapake gaya sing padha karo<small>
..text-decoration-underline
bakal ngetrapake gaya sing padha karo<u>
..text-decoration-line-through
bakal ngetrapake gaya sing padha karo<s>
.
Nalika ora ditampilake ing ndhuwur, aja ragu-ragu nggunakake <b>
lan <i>
ing HTML5. <b>
tegese kanggo nyorot tembung utawa frasa tanpa menehi wigati tambahan, nanging <i>
biasane kanggo swara, istilah teknis, lsp.
Utilitas teks
Ganti keselarasan teks, transformasi, gaya, bobot, dhuwur garis, dekorasi lan warna nganggo utilitas teks lan utilitas warna .
Singkatan
Implementasi gaya saka <abbr>
unsur HTML kanggo singkatan lan akronim kanggo nuduhake versi ditambahi ing hover. Singkatan duwe garis ngisor standar lan entuk kursor bantuan kanggo nyedhiyakake konteks tambahan babagan hover lan pangguna teknologi pitulung.
Tambah .initialism
menyang singkatan kanggo ukuran font sing rada cilik.
attr
HTML
<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
Blockquotes
Kanggo ngutip blok konten saka sumber liya ing dokumen sampeyan. Bungkus HTML<blockquote class="blockquote">
apa wae minangka kutipan.
Kutipan kondhang, sing ana ing unsur blockquote.
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
Jeneng sumber
Spesifikasi HTML mbutuhake atribusi blockquote diselehake ing njaba <blockquote>
. Nalika nyedhiyakake atribusi, bungkus sampeyan <blockquote>
ing a <figure>
lan gunakake <figcaption>
unsur level blok (contone, <p>
) karo .blockquote-footer
kelas. Priksa manawa kanggo mbungkus jeneng karya sumber <cite>
uga.
<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>
Alignment
Gunakake utilitas teks yen perlu kanggo ngganti alignment blockquote sampeyan.
<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>
Dhaptar
Tanpa gaya
Mbusak wates gawan list-style
lan kiwa ing dhaptar item (mung anak langsung). Iki mung ditrapake kanggo item dhaptar bocah langsung , tegese sampeyan uga kudu nambah kelas kanggo dhaptar bersarang.
- Iki minangka dhaptar.
- Katon rampung unstyled.
- Secara struktural, iki isih dadi dhaptar.
- Nanging, gaya iki mung ditrapake kanggo unsur anak langsung.
- Daftar Nested:
- ora kena pengaruh gaya iki
- isih bakal nuduhake peluru
- lan duwe margin kiwa sing cocog
- Iki isih bisa migunani ing sawetara kahanan.
<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>
Inline
Mbusak peluru dhaftar lan aplikasi sawetara cahya margin
karo kombinasi saka rong kelas, .list-inline
lan .list-inline-item
.
- Iki minangka item dhaptar.
- Lan siji liyane.
- Nanging lagi ditampilake 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 dhaptar deskripsi
Selarasake istilah lan katrangan kanthi horisontal kanthi nggunakake kelas sing wis ditemtokake sistem kothak (utawa campuran semantik). Kanggo istilah sing luwih dawa, sampeyan bisa nambah .text-truncate
kelas kanggo ngethok teks kanthi elipsis.
- Dhaptar katrangan
- Dhaptar deskripsi sampurna kanggo nemtokake istilah.
- istilahe
-
Definisi kanggo istilah.
Lan sawetara teks definisi placeholder liyane.
- Istilah liyane
- Definisi iki cendhak, mula ora ana paragraf tambahan utawa apa wae.
- Istilah sing dicekak dicekak
- Iki bisa migunani nalika papan nyenyet. Nambahake elipsis ing pungkasan.
- nyarang
-
- Dhaptar definisi nested
- Aku krungu sampeyan seneng dhaptar definisi. Ayo kula sijine dhaptar definisi ing dhaptar definisi sampeyan.
<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
Ing Bootstrap 5, kita wis ngaktifake ukuran font responsif minangka standar, ngidini teks kanggo ukuran luwih alamiah antarane piranti lan ukuran viewport. Deleng kaca RFS kanggo ngerteni cara kerjane.
Sass
Variabel
Heading duwe sawetara variabel khusus kanggo ukuran lan spasi.
$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;
Elemen tipografi maneka warna ing kene lan ing Urip maneh uga duwe 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
Ora ana campuran khusus kanggo tipografi, nanging Bootstrap nggunakake Responsive Font Sizing (RFS) .