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 e tagata asiasi ona fa'avasega a latou su'ega fa'aletonu 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'aupuga i le <body>.
  • Seti le lanu o feso'ota'iga fa'avaomalo e ala $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ʻamalamalamaina i le _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.

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.

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 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>

.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 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 .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'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.

  • 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 faiga fa'avasega (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>

Lomitusi tali

O lo'o fa'atatau i le fa'avasegaina o tusitusiga ma vaega e ala i le na'o le fetu'una'i o le a'a elemene i font-sizetotonu o se fa'asologa o fesili fa'asalalau. E le faia e Bootstrap lenei mea mo oe, ae e faigofie lava ona faʻaopoopo pe a e manaʻomia.

O se fa'ata'ita'iga lea i le fa'atinoga. Filifili so'o font-sizese s ma fa'asalalauga fesili e te mana'o ai.

html {
  font-size: 1rem;
}

@include media-breakpoint-up(sm) {
  html {
    font-size: 1.2rem;
  }
}

@include media-breakpoint-up(md) {
  html {
    font-size: 1.4rem;
  }
}

@include media-breakpoint-up(lg) {
  html {
    font-size: 1.6rem;
  }
}