Tusitala
Faʻamaumauga ma faʻataʻitaʻiga mo Bootstrap typography, e aofia ai faʻasalalauga faʻavaomalo, ulutala, tino tusitusiga, lisi, ma isi mea.
Fa'atonuga fa'alelalolagi
Ua setiina e Bootstrap le fa'aaliga fa'alelalolagi, fa'asologa, ma sitaili feso'ota'iga. A mana'omia nisi fa'atonuga, siaki le vasega fa'aoga tusitusi .
- Fa'aaogā se fa'aputugā vaitusi fa'ale-aganu'u e filifilia le mea sili
font-family
mo OS ma masini ta'itasi. - Mo se fua fa'aaofia ma faigofie ona maua, matou te fa'aogaina le a'a fa'aletonu ole su'esu'ega
font-size
(e masani lava 16px) ina ia mafai ai e tagata asiasi ona fa'avasega a latou fa'aletonu ole su'esu'ega pe a mana'omia. - Fa'aaoga le
$font-family-base
,$font-size-base
, ma$line-height-base
uiga e pei ona fa'aoga lo tatou fa'aupuga i le<body>
. - Seti le lanu o feso'ota'iga fa'avaomalo e ala
$link-color
ma fa'aoga laina vase feso'ota'iga na'o luga ole:hover
. - Fa'aoga
$body-bg
e seti ai sebackground-color
i luga ole<body>
(#fff
e ala i le faaletonu).
O nei sitaili e mafai ona maua i totonu _reboot.scss
, ma o fesuiaiga o le lalolagi o loʻo faʻamalamalamaina i le _variables.scss
. Ia mautinoa e seti $font-size-base
i totonu rem
.
Ulutala
O ulutala HTML uma, <h1>
e ala i le <h6>
, e avanoa.
Ulutala | Faataitaiga |
---|---|
<h1></h1> |
h1. Ulutala Bootstrap |
<h2></h2> |
h2. Ulutala Bootstrap |
<h3></h3> |
h3. Ulutala Bootstrap |
<h4></h4> |
h4. Ulutala Bootstrap |
<h5></h5> |
h5. Ulutala Bootstrap |
<h6></h6> |
h6. Ulutala 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
e ala i .h6
vasega o loʻo avanoa foʻi, aua pe a e manaʻo e faʻafetaui le faʻasologa o le vai papatisoga o se ulutala ae le mafai ona faʻaogaina le elemene HTML fesoʻotaʻi.
h1. Ulutala Bootstrap
h2. Ulutala Bootstrap
h3. Ulutala Bootstrap
h4. Ulutala Bootstrap
h5. Ulutala Bootstrap
h6. Ulutala 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>
Fa'asinomaga ulutala
Fa'aoga vasega fa'aoga fa'atasi e toe fa'atupu ai le tama'i ulutala lona lua tusitusiga mai le Bootstrap 3.
Ulutala fa'aali mata'utia Fa'atasi ai ma tusitusiga lona lua ua mou atu
<h3>
Fancy display heading
<small class="text-muted">With faded secondary text</small>
</h3>
Fa'aali ulutala
O elemene ulutala masani ua mamanuina ina ia sili ona aoga i aano o lau itulau itulau. Pe a e manaʻomia se ulutala e mataʻina ai, mafaufau e faʻaaoga se ulutala faʻaalia -se lapoʻa lapoʻa, sili atu ona faʻaalia manatu. Ia manatua o nei ulutala e le o tali mai e ala i le faaletonu, ae e mafai ona mafai ona tali le tele o le font .
Fa'aaliga 1 |
Fa'aaliga 2 |
Fa'aaliga 3 |
Fa'aaliga 4 |
<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>
Ta'ita'i
Fai se palakalafa e tu matilatila e ala i le faaopoopo .lead
.
Ole parakalafa ta'imua lea. E tulaga ese mai parakalafa masani.
<p class="lead">
This is a lead paragraph. It stands out from regular paragraphs.
</p>
Elemene o tusitusiga i totonu
Fa'ailoga mo elemene HTML5 masani ile laina.
E mafai ona e fa'aogaina le fa'ailoga fa'ailoga efa'ailogatusitusiga.
O le laina lea o tusitusiga o lo'o fa'atatauina o ni tusitusiga ua tapeina.
O lenei laina o tusitusiga ua fa'amoemoe e fa'apea ua le toe sa'o.
O lenei laina o tusitusiga e tatau ona faʻaogaina o se faʻaopoopoga i le pepa.
Ole laina ole tusitusiga ole a fa'aalia e pei ona vaseina
O lenei laina o tusitusiga e fa'atatau ia fa'atatauina o ni lolomi lelei.
O le laina lea ua fa'aliliuina o ni tusitusiga mata'utia.
O le laina lea ua fa'aliliuina o ni tusitusiga fa'asisilima.
<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>
.mark
ma .small
o lo'o avanoa fo'i vasega e fa'aoga tutusa sitaili <mark>
ma <small>
a'o 'alo'ese mai so'o se fa'auigaga fa'amana'omia fa'apea e aumai e pine.
E ui e le o faʻaalia i luga, lagona le saoloto e faʻaoga <b>
ma <i>
ile HTML5. <b>
e fa'atatau e fa'amanino ai upu po'o fasifuaitau e aunoa ma le fa'ailoaina atu o le taua ae <i>
tele lava mo leo, upu fa'apitoa, ma isi.
Fa'aoga tusitusiga
Suia le faʻaogaina o tusitusiga, suiga, sitaili, mamafa, ma lanu faʻatasi ma a matou mea faʻaoga tusitusi ma faʻaoga lanu .
Faapuupuuga
Fa'ata'ita'iga fa'atusa o le elemene HTML <abbr>
mo fa'apu'upu'u ma fa'apuupuuga e fa'aalia ai le fa'alauteleina o fa'amatalaga i luga o le fa'afefe. O fa'apuupuuga e iai le laina vase fa'aletonu ma maua ai se fa'ailo fesoasoani e tu'uina atu ai fa'amatalaga fa'aopoopo i luga o le fa'afefe ma i latou o lo'o fa'aogaina tekinolosi fesoasoani.
Fa'aopoopo .initialism
i se fa'apu'upu'u mo se fa'atama'i la'ititi laititi.
attr
HTML
<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
Blockquotes
Mo le siiina mai o poloka o mataupu mai se isi punaoa i totonu o lau pepa. Afifi <blockquote class="blockquote">
so'o se HTML e pei o le upusii.
O se upusii ta'uta'ua, o lo'o i totonu o se elemene poloka upusii.
<blockquote class="blockquote">
<p class="mb-0">A well-known quote, contained in a blockquote element.</p>
</blockquote>
Fa'aigoa o se puna
Fa'aopoopo le a <footer class="blockquote-footer">
mo le fa'ailoaina o le puna. Afi le igoa o le galuega puna i totonu <cite>
.
O se upusii ta'uta'ua, o lo'o i totonu o se elemene poloka upusii.
<blockquote class="blockquote">
<p class="mb-0">A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
Fa'atonuga
Fa'aoga mea fa'aoga tusitusi pe a mana'omia e sui ai le fa'aogaina o lau poloka upusii.
O se upusii ta'uta'ua, o lo'o i totonu o se elemene poloka upusii.
<blockquote class="blockquote text-center">
<p class="mb-0">A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
O se upusii ta'uta'ua, o lo'o i totonu o se elemene poloka upusii.
<blockquote class="blockquote text-right">
<p class="mb-0">A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
Lisi
Le fa'ailoga
Aveese le fa'aletonu list-style
ma le itu agavale i luga o mea lisi (na'o tamaiti vave). E na'o le fa'aogaina o mea ole lisi a tamaiti , o lona uiga e te mana'omia le fa'aopoopoina o le vasega mo so'o se lisi fa'amoega.
- Ole lisi lea.
- E foliga mai e matua le'i fa'ailogaina.
- I le faʻatulagaina, o loʻo avea pea ma lisi.
- Ae ui i lea, o lenei sitaili e naʻo mea e faʻaoga vave tamaiti.
- Lisi fa'aputu:
- e le afaina i lenei faiga
- o le a faʻaalia pea se pulufana
- ma ia i ai le itu tauagavale talafeagai
- Atonu e aoga pea lenei mea i nisi tulaga.
<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>
I totonu
Aveese pulu o se lisi ma faaaoga sina malamalama margin
i se tuufaatasiga o vasega e lua, .list-inline
ma .list-inline-item
.
- Ole mea lea ole lisi.
- Ma le isi.
- Ae o loʻo faʻaalia i totonu.
<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>
Fa'asologa o lisi o fa'amatalaga
Fa'asa'o fa'aupuga ma fa'amatalaga fa'alava e ala i le fa'aogaina o vasega fa'ata'atia a le matou faiga fa'avasega (po'o semantic mixins). Mo taimi uumi, e mafai ona e fa'aopoopoina se .text-truncate
vasega e tipi le tusitusiga i se ellipsis.
- Lisi fa'amatalaga
- Ole lisi fa'amatalaga e lelei atoatoa mo le fa'amalamalamaina o upu.
- Vaitaimi
-
Uiga mo le upu.
Ma nisi fa'amatalaga fa'amalamalamaga fa'apipi'i.
- O le isi faaupuga
- O lenei faauigaga e puupuu, o lea e leai ni parakalafa faaopoopo poʻo se mea.
- Ua tipi le upu ua tipi
- E mafai ona aoga lenei mea pe a fufusi avanoa. Fa'aopoopo se ellipsis ile pito.
- Faamoega
-
- Lisi fa'amatalaga fa'aputu
- Na ou faalogo e te fiafia i lisi o faʻamatalaga. Se'i ou tu'u se lisi o fa'amatalaga i totonu o lau lisi fa'amatalaga.
<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>
Tele mata'itusi tali
E pei o le v4.3.0, Bootstrap vaʻa ma le filifiliga e mafai ai ona tali le tele o mataitusi, faʻatagaina tusitusiga e fua faʻanatura i luga o masini ma vaʻaiga tele. E mafai ona faʻaogaina le RFS$enable-responsive-font-sizes
e ala i le suia o le fesuiaiga o Sass true
ma toe faʻapipiʻi Bootstrap.
Ina ia lagolagoina le RFS , matou te faʻaogaina le Sass mixin e sui ai a matou font-size
meatotino masani. Ole tele ole mata'itusi tali o le a tu'ufa'atasia i calc()
galuega fa'atasi ma le fa'afefiloi o rem
iunite va'ava'ai e mafai ai ona fa'agasolo le fa'agasologa o amioga. E tele faʻamatalaga e uiga i le RFS ma lona faʻatulagaina e mafai ona maua i luga o lona fale teu oloa GitHub .