Fa'ase'e ile anotusi autu Fa'ase'e ile su'ega fa'amatalaga
Check
in English

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.

I luga o lenei itulau

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 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-baseuiga e pei ona fa'aoga lo tatou fa'aupuga i le <body>.
  • Seti le lanu o feso'ota'iga i le lalolagi e ala i le $link-color.
  • 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

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

html 
<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
Fa'aaliga 5
Fa'aaliga 6 
<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>

O ulutala faʻaaliga e faʻapipiʻiina e ala i le $display-font-sizesfaafanua Sass ma lua fesuiaiga, $display-font-weightma $display-line-height.

O ulutala fa'aaliga e mafai ona fa'avasegaina e ala i suiga e lua, $display-font-familyma $display-font-style.

$display-font-sizes: (
  1: 5rem,
  2: 4.5rem,
  3: 4rem,
  4: 3.5rem,
  5: 3rem,
  6: 2.5rem
);

$display-font-family: null;
$display-font-style:  null;
$display-font-weight: 300;
$display-line-height: $headings-line-height;

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.

html 
<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 vase lalo.

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.

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

Faʻaeteete o na pine e tatau ona faʻaaogaina mo le faʻamoemoega faʻapitoa:

  • <mark>o lo'o fa'atusalia ai tusitusiga o lo'o fa'ailogaina pe fa'ailoga mo fa'amatalaga po'o fa'ailoga.
  • <small>o lo'o fa'atusalia fa'amatalaga i itu ma tama'i tusi, pei o le puletaofia ma tusitusiga fa'aletulafono.
  • <s>o lo'o fa'atusalia elemene ua le toe talafeagai pe ua le toe sa'o.
  • <u>o lo'o fa'atusalia ai se va'aiga o tusitusiga i totonu e tatau ona fa'ailoa i se auala e fa'ailoa mai ai e iai se fa'amatalaga e le o ni tusitusiga.

Afai e te manaʻo e faʻavasega lau tusitusiga, e tatau ona e faʻaogaina vasega nei nai lo:

  • .marko le a fa'aoga tutusa sitaili ma <mark>.
  • .smallo le a fa'aoga tutusa sitaili ma <small>.
  • .text-decoration-underlineo le a fa'aoga tutusa sitaili ma <u>.
  • .text-decoration-line-througho le a fa'aoga tutusa sitaili ma <s>.

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, laina-maualuga, teuteuga ma lanu faʻatasi ai 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

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.

html 
<blockquote class="blockquote">
  <p>A well-known quote, contained in a blockquote element.</p>
</blockquote>

Fa'aigoa o se puna

O le HTML spec e manaʻomia le tuʻuina atu o le blockquote i fafo atu o le <blockquote>. A tu'uina atu le fa'asinomaga, afifi lau <blockquote>i totonu <figure>ma fa'aoga se <figcaption>elemene tulaga poloka (fa'ata'ita'iga, <p>) ma le .blockquote-footervasega. Ia mautinoa e afifi foi le igoa o le puna o galuega <cite>.

O se upusii ta'uta'ua, o lo'o i totonu o se elemene poloka upusii.

O se tasi lauiloa i le Source Title
html 
<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>

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.

O se tasi lauiloa i le Source Title
html 
<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>

O se upusii ta'uta'ua, o lo'o i totonu o se elemene poloka upusii.

O se tasi lauiloa i le Source Title
html 
<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>

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.

  • 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.
html 
<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 margini se tuufaatasiga o vasega e lua, .list-inlinema .list-inline-item.

  • Ole mea lea ole lisi.
  • Ma le isi.
  • Ae o loʻo faʻaalia i totonu.
html 
<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-truncatevasega 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.
html 
<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

I totonu o le Bootstrap 5, ua matou fa'aogaina le tele o mata'itusi tali mai e ala i le le mafai, fa'ataga ai tusitusiga e fua fa'anatura i luga o masini ma va'aiga tele. Va'ai ile itulau RFS e su'e ai pe fa'afefea ona galue.

Sass

Fuafuaga

O ulutala o lo'o i ai ni suiga fa'apitoa mo le tele ma le va.

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

E iai fo'i fa'aliliuga tu'ufa'atasiga o elemene fa'asologa o lo'o ufiufi i'i ma Reboot .

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

// fusv-disable
$hr-bg-color:                 null; // Deprecated in v5.2.0
$hr-height:                   null; // Deprecated in v5.2.0
// fusv-enable

$hr-border-color:             null; // Allows for inherited colors
$hr-border-width:             $border-width;
$hr-opacity:                  .25;

$legend-margin-bottom:        .5rem;
$legend-font-size:            1.5rem;
$legend-font-weight:          null;

$dt-font-weight:              $font-weight-bold;

$list-inline-padding:         .5rem;

$mark-padding:                .1875em;
$mark-bg:                     $yellow-100;

Mixins

E leai ni fa'afefiloi tu'ufa'atasia mo fa'asologa, ae fa'aaoga e Bootstrap le Fa'asoa Fa'asoa Fa'amatalaga (RFS) .