Tipografi
Dokimantasyon ak egzanp pou tipografi Bootstrap, ki gen ladan anviwònman global, tit, tèks kò, lis, ak plis ankò.
Anviwònman mondyal yo
Bootstrap etabli ekspozisyon mondyal debaz, tipografi, ak estil lyen. Lè yo bezwen plis kontwòl, tcheke klas itilite tèks yo .
- Sèvi ak yon pile font natif natal ki chwazi pi bon
font-family
pou chak OS ak aparèy. - Pou yon echèl kalite ki pi enklizif ak aksesib, nou itilize rasin default navigatè a
font-size
(tipikman 16px) pou vizitè yo ka pèsonalize default navigatè yo jan sa nesesè. - Sèvi ak
$font-family-base
,$font-size-base
, ak$line-height-base
atribi yo kòm baz tipografik nou an aplike nan<body>
. - Mete koulè lyen mondyal la atravè
$link-color
. - Sèvi ak
$body-bg
pou mete yonbackground-color
sou<body>
(#fff
pa default).
Ou ka jwenn estil sa yo nan _reboot.scss
, epi varyab mondyal yo defini nan _variables.scss
. Asire w ou mete $font-size-base
nan rem
.
Tit
Tout tit HTML, <h1>
jiska <h6>
, yo disponib.
Tit | Egzanp |
---|---|
<h1></h1> |
h1. Bootstrap tit |
<h2></h2> |
h2. Bootstrap tit |
<h3></h3> |
h3. Bootstrap tit |
<h4></h4> |
h4. Bootstrap tit |
<h5></h5> |
h5. Bootstrap tit |
<h6></h6> |
h6. Bootstrap tit |
<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
atravè .h6
klas yo disponib tou, pou lè ou vle matche ak stil font nan yon tit men ou pa ka itilize eleman HTML ki asosye a.
h1. Bootstrap tit
h2. Bootstrap tit
h3. Bootstrap tit
h4. Bootstrap tit
h5. Bootstrap tit
h6. Bootstrap tit
<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>
Pèrsonalizasyon tit
Sèvi ak klas sèvis piblik ki enkli yo pou rkree ti tèks segondè tit ki soti nan Bootstrap 3.
Anpenpan tit ekspozisyon ak tèks segondè ta vle chanje koulè
<h3>
Fancy display heading
<small class="text-muted">With faded secondary text</small>
</h3>
Montre tit
Eleman tit tradisyonèl yo fèt pou travay pi byen nan vyann nan kontni paj ou a. Lè w bezwen yon tit pou w kanpe deyò, konsidere w sèvi ak yon tit ekspozisyon — yon stil tit ki pi gwo, yon ti kras plis opinyon.
<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>
Montre tit yo configuré atravè $display-font-sizes
kat Sass la ak de varyab, $display-font-weight
ak $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;
Plon
Fè yon paragraf parèt deyò lè w ajoute .lead
.
Sa a se yon paragraf plon. Li vle di soti nan paragraf regilye yo.
<p class="lead">
This is a lead paragraph. It stands out from regular paragraphs.
</p>
Eleman tèks inline
Styling pou eleman komen HTML5 inline.
Ou ka itilize tag mak la poumete aksan soutèks.
Liy tèks sa a fèt pou trete kòm tèks efase.
Liy tèks sa a fèt pou trete kòm li pa egzat ankò.
Liy tèks sa a vle di yo dwe trete kòm yon adisyon nan dokiman an.
Liy tèks sa a pral rann jan yo souliye.
Liy tèks sa a vle di ke yo dwe trete kòm bèl lèt.
Liy sa a rann kòm tèks fonse.
Liy sa a rann kòm tèks italik.
<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>
Fè atansyon ke tag sa yo ta dwe itilize pou rezon semantik:
<mark>
reprezante tèks ki make oswa make pou rezon referans oswa notasyon.<small>
reprezante kòmantè bò ak ti enprime, tankou copyright ak tèks legal.<s>
reprezante eleman ki pa enpòtan ankò oswa ki pa egzat ankò.<u>
reprezante yon seri tèks enline ki ta dwe rann nan yon fason ki endike ke li gen yon adnotasyon ki pa tèks.
Si ou vle style tèks ou a, ou ta dwe itilize klas sa yo pito:
.mark
pral aplike menm estil ak<mark>
..small
pral aplike menm estil ak<small>
..text-decoration-underline
pral aplike menm estil ak<u>
..text-decoration-line-through
pral aplike menm estil ak<s>
.
Pandan ke yo pa montre pi wo a, santi yo lib pou itilize <b>
ak <i>
nan HTML5. <b>
se vle di yo mete aksan sou mo oswa fraz san yo pa transmèt plis enpòtans, pandan y ap <i>
se sitou pou vwa, tèm teknik, elatriye.
Tèks sèvis piblik
Chanje aliyman tèks, transfòme, style, pwa, wotè liy, dekorasyon ak koulè ak sèvis piblik tèks nou yo ak sèvis piblik koulè .
Abreviyasyon yo
Enplemantasyon stilize nan <abbr>
eleman HTML pou abrevyasyon ak akwonim yo montre vèsyon an elaji sou hover. Abreviyasyon yo gen yon souliye default ak jwenn yon kurseur èd pou bay yon kontèks adisyonèl sou hover ak itilizatè teknoloji asistans.
Ajoute .initialism
nan yon abrevyasyon pou yon ti kras pi piti gwosè font.
atr
HTML
<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
Blockquotes
Pou site blòk kontni ki soti nan yon lòt sous nan dokiman w la. Anvlope <blockquote class="blockquote">
nenpòt HTML kòm quote la.
Yon quote byen koni, ki genyen nan yon eleman blockquote.
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
Bay non yon sous
Espesifikasyon HTML la mande pou yo mete atribisyon blockquote deyò <blockquote>
. Lè w bay atribisyon, vlope w <blockquote>
nan yon <figure>
epi sèvi ak yon <figcaption>
oswa yon eleman nivo blòk (egzanp, <p>
) ak .blockquote-footer
klas la. Asire w ou vlope non travay sous la <cite>
tou.
<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>
Aliyman
Sèvi ak sèvis piblik tèks yo jan sa nesesè pou chanje aliyman blockquote ou a.
<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>
Lis
Unstyled
Retire defo a list-style
ak maj gòch sou atik lis (timoun imedya sèlman). Sa a sèlman aplike pou atik imedya lis timoun yo , sa vle di w ap bezwen ajoute klas la pou nenpòt lis enbrike tou.
- Sa a se yon lis.
- Li parèt konplètman unstyled.
- Estriktirèl, li toujou yon lis.
- Sepandan, style sa a sèlman aplike nan eleman imedya timoun yo.
- Lis anbrike:
- yo pa afekte pa style sa a
- ap toujou montre yon bal
- epi gen maj gòch apwopriye
- Sa ka toujou vin an sou la men nan kèk sitiyasyon.
<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>
Nan liy
Retire bal yon lis epi aplike kèk limyè margin
ak yon konbinezon de klas, .list-inline
ak .list-inline-item
.
- Sa a se yon atik lis.
- Ak yon lòt.
- Men, yo ap parèt nan liy.
<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>
Deskripsyon aliyman lis
Aliman tèm ak deskripsyon orizontal lè w itilize klas predefini sistèm kadriyaj nou an (oswa mixin semantik). Pou tèm ki pi long, ou ka ajoute yon .text-truncate
klas pou tronpe tèks la ak yon elips.
- Lis deskripsyon yo
- Yon lis deskripsyon pafè pou defini tèm.
- Tèm
-
Definisyon pou tèm nan.
Ak kèk plis tèks definisyon placeholder.
- Yon lòt tèm
- Definisyon sa a kout, kidonk pa gen okenn paragraf siplemantè oswa anyen.
- Tèm twonke se twonke
- Sa a ka itil lè espas sere. Ajoute yon elips nan fen an.
- Nidifikasyon
-
- Lis definisyon anbre
- Mwen tande ou renmen lis definisyon. Kite m mete yon lis definisyon anndan lis definisyon w la.
<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>
Gwosè font reponn
Nan Bootstrap 5, nou te pèmèt gwosè polis ki reponn pa default, sa ki pèmèt tèks yo echèl plis natirèlman atravè gwosè aparèy ak Viewport. Gade nan paj RFS la pou w konnen kijan sa fonksyone.
Sass
Varyab
Tit gen kèk varyab dedye pou gwosè ak espas.
$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;
Eleman tipografi divès ki kouvri isit la ak nan Rdemare tou gen varyab dedye.
$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;
Mixins
Pa gen okenn mixin dedye pou tipografi, men Bootstrap itilize Sizing Font Responsive (RFS) .