Source

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-familymo OS ma masini ta'itasi.
Mo le fa'aaofia ma fa'aogaina ituaiga fua, matou te fa'apea o le browser default root font-size(e masani lava 16px) ina ia mafai ai e tagata asiasi ona fa'avasega a latou fa'aletonu su'esu'e pe a mana'omia.
Fa'aaoga le $font-family-base, $font-size-base, ma $line-height-baseuiga e pei ona fa'aoga lo tatou fa'asologa i le <body>.
Seti le lanu o feso'ota'iga a le lalolagi e ala i $link-colorma fa'aoga laina vase feso'ota'iga na'o luga ole :hover.
Fa'aoga $body-bge seti ai se background-colori luga ole <body>( #fffe 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ʻamatalaina i totonu _variables.scss. Ia mautinoa e seti $font-size-basei 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>

.h1e ala i .h6vasega 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 i le faaopoopo .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, o le mea lea e le masani ai.

<p class="lead">
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</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 e fa'atatauina o ni tusitusiga ua tapeina.~~

~~O lenei laina o tusitusiga ua fa'atatau ina ia 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>

.markma .smallo 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 fa'aopoopo 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'apena o le <abbr>elemene HTML 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 tagata fa'aoga tekinolosi fesoasoani.

Fa'aopoopo .initialismi 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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</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>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

O se tasi lauiloa i le Source Title

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

O se tasi lauiloa i le Source Title

<blockquote class="blockquote text-center">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

O se tasi lauiloa i le Source Title

<blockquote class="blockquote text-right">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</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-stylema le itu agavale i luga o mea lisi (na'o tamaiti vave). E na'o le fa'atatau i 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.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem ma masa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean nofo amet erat nunc
Eget porttitor lorem

<ul class="list-unstyled">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
      <li>Ac tristique libero volutpat at</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ul>

I totonu

Aveese pulu o se lisi ma faaaoga sina malamalama margini se tuufaatasiga o vasega e lua, .list-inlinema .list-inline-item.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

<ul class="list-inline">
  <li class="list-inline-item">Lorem ipsum</li>
  <li class="list-inline-item">Phasellus iaculis</li>
  <li class="list-inline-item">Nulla volutpat</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 fa'asologa (po'o semantic mixins). Mo taimi uumi, e mafai ona e fa'aopoopoina se .text-truncatevasega e tipi le tusitusiga i se ellipsis.

Lisi fa'amatalaga

Ole lisi fa'amatalaga e lelei atoatoa mo le fa'amalamalamaina o upu.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida and eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Ua tipi le upu ua tipi

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Faamoega

Lisi fa'amatalaga fa'aputu: Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.

<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">Euismod</dt>
  <dd class="col-sm-9">
    <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
    <p>Donec id elit non mi porta gravida at eget metus.</p>
  </dd>

  <dt class="col-sm-3">Malesuada porta</dt>
  <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</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">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
    </dl>
  </dd>
</dl>

Tele mata'itusi tali

Bootstrap v4.3 va'a fa'atasi ai ma le filifiliga e fa'aagaioi ai le tele o vaimoa tali, fa'ataga ai tusitusiga e fua fa'anatura i le masini ma le tele o va'aiga. E mafai ona faʻaogaina le RFS$enable-responsive-font-sizes e ala i le suia o le fesuiaiga o Sass truema toe faʻapipiʻi Bootstrap.

Ina ia lagolagoina le RFS , matou te faʻaogaina le Sass mixin e sui ai a matou font-sizemeatotino masani. Ole tele ole mata'itusi tali o le a tu'ufa'atasia i calc()galuega fa'atasi ma le fa'afefiloi o remiunite 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 .