Tipograpia
Dokumentasion ken dagiti pagarigan para iti tipograpia ti Bootstrap, a mairaman dagiti sangalubongan a panagitunos, dagiti paulo, ti bagi a teksto, dagiti listaan, ken dadduma pay.
Sangalubongan a setting
Ti Bootstrap ket mangikeddeng kadagiti batayan a sangalubongan a panagiparang, tipograpia, ken dagiti estilo ti silpo. No kasapulan ti ad-adu a panangtengngel, kitaen dagiti klase ti tekstual a utilidad .
- Usaren ti native font stack a mangpili iti kasayaatan
font-family
para iti tunggal OS ken device. - Para iti ad-adu a nairaman ken madanon a sukog ti kita, usarenmi ti default a ramut ti browser
font-size
(kadawyan a 16px) tapno dagiti bisita ket mabalinda nga ipasadaan dagiti default ti browserda no kasapulan. - Usaren ti
$font-family-base
,$font-size-base
, ken$line-height-base
dagiti attribute a kas ti tipograpiko a batayantayo a naipakat iti<body>
. - Itakderan ti sangalubongan a kolor ti silpo babaen ti
$link-color
. - Usaren
$body-bg
a mangikeddeng ti abackground-color
iti<body>
(#fff
babaen ti default).
Dagitoy nga estilo ket mabalin a masarakan iti uneg ti _reboot.scss
, ken dagiti sangalubongan a variable ket naikeddeng iti _variables.scss
. Siguraduenyo nga i-set $font-size-base
in rem
.
Dagiti Paulo
Amin a paulo ti HTML, <h1>
babaen ti <h6>
, ket magun-od.
Paulo | Pagwadan |
---|---|
<h1></h1> |
h1. Bootstrap nga paulo |
<h2></h2> |
h2. Bootstrap nga paulo |
<h3></h3> |
h3. Bootstrap nga paulo |
<h4></h4> |
h4. Bootstrap nga paulo |
<h5></h5> |
h5. Bootstrap nga paulo |
<h6></h6> |
h6. Bootstrap nga paulo |
<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
babaen .h6
dagiti klase ket magun-od pay, para no kayatmo a maipada ti estilo ti letra ti maysa a paulo ngem saanmo nga usaren ti nainaig nga elemento ti HTML.
h1. Bootstrap nga paulo
h2. Bootstrap nga paulo
h3. Bootstrap nga paulo
h4. Bootstrap nga paulo
h5. Bootstrap nga paulo
h6. Bootstrap nga paulo
<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>
Panangpasayaat kadagiti paulo
Usaren dagiti nairaman a klase ti utilidad tapno mangpartuat manen ti bassit a sekondario a teksto ti paulo manipud iti Bootstrap 3.
Magarbo a paulo ti display Adda nakusnaw a sekondario a teksto
<h3>
Fancy display heading
<small class="text-muted">With faded secondary text</small>
</h3>
Ipakita dagiti paulo
Dagiti tradisional nga elemento ti paulo ket nadisenio a kasayaatan nga agtrabaho iti karne ti linaon ti panidmo. No kasapulam ti maysa a paulo tapno agminar, ibilangmo ti panangusar iti paulo a maiparang —maysa a dakdakkel, ad-adu bassit ti opinionna nga estilo ti paulo.
<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>
Dagiti paulo ti display ket naikonfigura babaen ti $display-font-sizes
mapa ti Sass ken dua a variable, $display-font-weight
ken $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;
Idaulo
Pagbalinem a naisangsangayan ti maysa a parapo babaen ti pananginayonmo iti .lead
.
Daytoy ket maysa a mangidaulo a parapo. Agminar dayta kadagiti regular a parapo.
<p class="lead">
This is a lead paragraph. It stands out from regular paragraphs.
</p>
Inline nga elemento ti teksto
Estilo para kadagiti gagangay nga elemento ti inline HTML5.
Mabalinmo nga usaren ti mark tag tapnoikkan ti talmegteksto.
Daytoy a linia ti teksto ket nairanta a matrato a kas naikkat a teksto.
Daytoy a linia ti teksto ket nairanta a matrato a kas saanen nga umiso.
Daytoy a linia ti teksto ket nairanta a matrato a kas maysa a kanayonan iti dokumento.
Daytoy a linia ti teksto ket mangiparang a kas iti nagurit.
Daytoy a linia ti teksto ket nairanta a matrato a kas napino a letra.
Daytoy a linia ket naiparang a kas nalukmeg a teksto.
Daytoy a linia ket naiparang a kas naitaliko a teksto.
<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>
Agannad a dagita nga etiketa ket rumbeng a mausar para iti semantiko a panggep:
<mark>
irepresentarna ti teksto a namarkaan wenno nai-highlight para kadagiti panggep ti reperensia wenno notasion.<small>
irepresentarna dagiti side-comments ken babassit a letra, kas iti copyright ken legal a teksto.<s>
irepresentarna ti elemento a saanen a mainaig wenno saanen nga umiso.<u>
irepresentarna ti maysa a span ti inline a teksto a rumbeng a maiparang iti wagas a mangipakita nga addaan daytoy iti saan a tekstual nga anotasion.
No kayatmo nga estilo ti tekstom, rumbeng nga usarem ketdi dagiti sumaganad a klase:
.mark
iyaplikarto dagiti isu met laeng nga estilo a kas iti<mark>
..small
iyaplikarto dagiti isu met laeng nga estilo a kas iti<small>
..text-decoration-underline
iyaplikarto dagiti isu met laeng nga estilo a kas iti<u>
..text-decoration-line-through
iyaplikarto dagiti isu met laeng nga estilo a kas iti<s>
.
Bayat a saan a naipakita iti ngato, agwayawaya nga agusar <b>
ken <i>
iti HTML5. <b>
ket nairanta a mangitag-ay kadagiti balikas wenno ragup ti sasao a saan a mangipaay iti kanayonan a kinapateg, idinto <i>
a kaaduanna ket para iti timek, teknikal a termino, kdpy.
Dagiti utilidad ti teksto
Baliwan ti panagtunos ti teksto, panagbalbaliw, estilo, dagsen, line-height, dekorasion ken kolor babaen dagiti utilidad ti teksto ken dagiti utilidad ti kolortayo .
Dagiti abbreviation
Estilo a pannakaipatungpal ti <abbr>
elemento ti HTML para kadagiti abbreviation ken acronym tapno maipakita ti napalawa a bersion iti hover. Dagiti abbreviation ket addaan iti default a underline ken makagun-od ti kursor ti tulong tapno mangipaay ti kanayonan a konteksto iti hover ken kadagiti agar-aramat kadagiti makatulong a teknolohia.
Inayon .initialism
iti abbreviation para iti basbassit bassit a font-size.
attr nga
HTML nga
<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
Dagiti sitas ti bloke
Para iti panangadaw kadagiti bloke ti linaon manipud iti sabali a taudan iti uneg ti dokumentom. Balkoten <blockquote class="blockquote">
ti aniaman nga HTML kas quote.
Maysa a nalatak a sitas, a linaon ti elemento ti blockquote.
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
Panagnagan iti maysa a gubuayan
Ti HTML spec ket agkasapulan a ti blockquote attribution ket maikabil iti ruar ti <blockquote>
. No mangipaay ti attribution, baluten ti mo <blockquote>
iti a <figure>
ken usaren ti maysa <figcaption>
wenno maysa nga elemento ti lebel ti bloke (kas pagarigan, <p>
) a kadua ti .blockquote-footer
klase. Siguraduen nga ibalkot ti nagan ti taudan nga obra iti <cite>
kasta met.
<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>
Panagtunos
Usaren dagiti utilidad ti teksto no kasapulan tapno baliwan ti panagtunos ti blockquote-mo.
<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>
Dagiti Listaan
Saan nga estilo
Ikkaten ti default list-style
ken kannigid a margin kadagiti banag ti listaan (dagiti dagus nga ubbing laeng). Daytoy ket agaplikar laeng kadagiti dagus a banag ti listaan dagiti ubbing , kayatna a sawen a kasapulam nga inayon ti klase para kadagiti ania man a naisanglad a listaan pay.
- Daytoy ket maysa a listaan.
- Agparang a naan-anay a di naestilo dayta.
- Iti estruktura, maysa pay laeng a listaan.
- Nupay kasta, daytoy nga estilo ket agaplikar laeng kadagiti dagus nga ubing nga elemento.
- Dagiti naisanglad a listaan:
- saan a maapektaran iti daytoy nga estilo
- ipakitana latta ti bala
- ken addaan iti maitutop a kannigid a pingir
- Mabalin a makatulong latta daytoy iti dadduma a kasasaad.
<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 nga
Ikkaten dagiti bala ti maysa a listaan ken mangikabil iti sumagmamano a lawag margin
babaen ti kombinasion ti dua a klase, .list-inline
ken .list-inline-item
.
- Daytoy ket maysa a banag ti listaan.
- Ket sabali pay.
- Ngem maiparang dagitoy iti 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>
Panagtunos ti listaan ti deskripsion
Itunos dagiti termino ken deskripsion a paidasig babaen ti panagusar kadagiti nasakbay a naikeddeng a klase (wenno semantiko a mixin) ti sistema ti gridtayo. Para kadagiti at-atiddog a termino, mabalinmo a pagpilian ti manginayon ti .text-truncate
klase tapno putden ti teksto babaen ti elipsis.
- Dagiti listaan ti panangiladawan
- Ti listaan ti panangiladawan ket perpekto para iti panangdepinar kadagiti termino.
- Termino
-
Depinasion para iti termino.
Ket sumagmamano pay a teksto ti depinasion ti placeholder.
- Sabali pay a termino
- Ababa daytoy a depinasion, isu nga awan dagiti ekstra a parapo wenno aniaman.
- Ti naputolan a termino ket naputolan
- Mabalin a makatulong daytoy no nailet ti espasio. Mangnayon iti elipsis iti ngudona.
- Panag-umok
-
- Naisanglad a listaan ti depinasion
- Nangngegko a kasla dagiti listaan ti depinasion. Bay-anyo nga ikabilko ti listaan ti depinasion iti uneg ti listaan ti depinasionyo.
<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>
Dagiti makasungbat a kadakkel ti letra
Iti Bootstrap 5, pinalubosanmi dagiti makasungbat a kadakkel ti letra babaen ti default, a mangipalubos ti teksto nga ad-adda a natural nga ag-scale iti ballasiw dagiti kadakkel ti alikamen ken viewport. Kitaen ti panid ti RFS tapno maammuan no kasano nga agtrabaho daytoy.
Sass nga
Dagiti Variable
Dagiti paulo ket addaan kadagiti sumagmamano a naisangsangayan a variable para iti panagdakkel ken panagsisina.
$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;
Dagiti nadumaduma nga elemento ti tipograpia a nasaklaw ditoy ken iti Reboot ket addaan pay kadagiti naisangsangayan a variable.
$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;
Dagiti mixin
Awan dagiti naisangsangayan a mixin para iti tipograpia, ngem ti Bootstrap ket agus-usar ti Responsive Font Sizing (RFS) .