Source

Typographie

Mikanda mpe bandakisa mpo na typographie ya Bootstrap, bakisa mpe ba paramètres ya mokili mobimba, mitó ya makambo, makomi ya nzoto, baliste, mpe mingi mosusu.

Ba paramètres ya mokili mobimba

Bootstrap etie ba styles ya moboko ya elakiseli ya mokili mobimba, typographie, mpe ya lien. Ntango esengeli kozala na bokonzi mingi, talá bakelasi ya utilité textuelle .

  • Salelá stack ya bafonte native oyo eponaka oyo eleki malamu font-familympo na OS mpe aparɛyi mokomoko.
  • Mpo na échelle ya lolenge oyo esangisi bato nyonso mpe oyo ekoki kozwama, tokanisi ete root ya navigateur na ndenge ya liboso font-size(mingimingi 16px) mpo ete bapaya bákoka kosala ba défauts ya navigateur na bango soki esengeli.
  • Salelá $font-family-base, $font-size-base, mpe $line-height-basebizaleli lokola moboko na biso ya konyata oyo esalelami na <body>.
  • Botia langi ya lien ya mokili mobimba na nzela $link-colormpe salelá ba soulignes ya lien kaka na :hover.
  • Salelá $body-bgmpo na kotya a background-colorna <body>( #fffna ndenge ya libela).

Ba styles oyo ekoki kozwama na kati ya _reboot.scss, mpe ba variables mondiales elimbolami na _variables.scss. Salá makasi okɔtisa $font-size-basena rem.

Mitó ya makambo

Mitó ya makambo nyonso ya HTML, <h1>na nzela ya <h6>, ezali.

Motó ya likambo Ndakisa

<h1></h1>

 h1. Motó ya likambo ya bootstrap

<h2></h2>

 h2. Motó ya likambo ya bootstrap

<h3></h3>

 h3. Motó ya likambo ya bootstrap

<h4></h4>

 h4. Motó ya likambo ya bootstrap

<h5></h5>

 h5. Motó ya likambo ya bootstrap

<h6></h6>

 h6. Motó ya likambo ya 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>

.h1na nzela ya .h6bakelasi ezali mpe, mpo na ntango olingi kokokana na lolenge ya makomi ya motó ya likambo kasi okoki te kosalela eleman HTML oyo esangisi yango.

h1. Motó ya likambo ya bootstrap

h2. Motó ya likambo ya bootstrap

h3. Motó ya likambo ya bootstrap

h4. Motó ya likambo ya bootstrap

h5. Motó ya likambo ya bootstrap

h6. Motó ya likambo ya 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>

Kobongisa mitó ya makambo na ndenge ya moto ye moko

Salelá bakelasi ya utilitaire oyo ezali na kati mpo na kosala lisusu makomi ya moke ya motó ya likambo ya mibale oyo euti na Bootstrap 3.

Fancy display heading Na makomi ya mibale oyo esili kosila 
<h3>
  Fancy display heading
  <small class="text-muted">With faded secondary text</small>
</h3>

Lakisa mitó ya makambo

Ba éléments ya motó ya likambo ya bonkɔkɔ ebongisami mpo na kosala malamu koleka na misuni ya makambo ya lokasa na yo. Ntango ozali na mposa ya motó ya likambo mpo na komonana polele, kanisá kosalela motó ya likambo oyo ezali kolakisa —lolenge ya motó ya likambo oyo ezali monene, oyo ezali na mwa makanisi mingi.

Elakiseli 1
Elakiseli 2
Elakiseli 3
Elakiseli 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>

Plomb

Salá ete paragrafe moko ezala polele na kobakisáká .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor motɛkisi ya mbongo. Duis mollis, est oyo ezali na mbongo te.

<p class="lead">
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</p>

Elementos de texto en línea

Styling mpo na ba éléments HTML5 inline communs.

Okoki kosalela elembo ya elembo mpo nakobeta nsetenkoma.

Molongo oyo ya makomi ezali mpo na kotalela yango lokola makomi oyo elongolami.

Molongo oyo ya makomi ezali mpo na kotalela yango lokola oyo ezali lisusu na bosikisiki te.

Molongo oyo ya makomi ezali mpo na kotalela yango lokola kobakisa na mokanda.

Molongo oyo ya makomi ekobongola ndenge batye yango na nse

Molongo oyo ya makomi ezali mpo na kotalela yango lokola makomi ya mikemike.

Molongo oyo ebongolami lokola makomi ya moindo makasi.

Molongo oyo ebongolami lokola makomi oyo ezali na italike.

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

.markmpe .smallba classes ezali mpe mpo na kosalela ba styles ndenge moko na <mark>mpe <small>tout en éviter ba implications sémantiques nionso oyo elingi te oyo ba balises elingaki komema.

Atako elakisami likolo te, zala na bonsomi ya kosalela <b>mpe <i>na HTML5. <b>ezali mpo na kobimisa maloba to bafraze kozanga kopesa ntina mosusu nzokande <i>ezali mingimingi mpo na mongongo, maloba ya tekiniki, mpe bongo na bongo.

Ba utilitaires ya texte

Bobongola alignment ya texte, transformer, style, poids, mpe couleur na ba utilitaires na biso ya texte mpe ba utilitaires ya couleur .

Maloba ya mokuse

Implémentation stylisée ya <abbr>élément ya HTML pona ba abréviations na ba sigles pona kolakisa version élargie na hover. Ba abréviations ezali na souligné par défaut mpe ezuaka curseur ya lisungi mpo na kopesa contexte ya kobakisa na hover mpe na basaleli ya ba technologies ya lisungi.

Bakisa .initialismna abréviation mpo na font-size ya mwa moke.

attr

HTML

<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>

Ba citations ya bloc

Mpo na kozongela ba blocs ya contenus oyo ewutaki na source mosusu na kati ya mokanda na yo. Zinga HTML<blockquote class="blockquote"> nyonso lokola citatio.

Lorem ipsum dolor vanda amet, consectetur elit oyo ezo boma nzoto. Motango mobimba 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>

Kopesa nkombo ya source moko

Bakisa a <footer class="blockquote-footer">mpo na koyeba esika oyo euti. Zinga kombo ya mosala ya source na <cite>.

Lorem ipsum dolor vanda amet, consectetur elit oyo ezo boma nzoto. Motango mobimba posuere erat a ante.

Moto moko ya lokumu na 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>

Kobongisa makambo

Salelá ba utilitaires ya texte ndenge esengeli mpo na kobongola alignment ya blockquote na yo.

Lorem ipsum dolor vanda amet, consectetur elit oyo ezo boma nzoto. Motango mobimba posuere erat a ante.

Moto moko ya lokumu na 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 vanda amet, consectetur elit oyo ezo boma nzoto. Motango mobimba posuere erat a ante.

Moto moko ya lokumu na 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>

Ba liste

Kozanga style

Longola marge par défaut list-stylempe ya gauche na biloko ya liste (kaka bana ya mbala moko). Yango etali kaka biloko ya liste ya bana ya mbala moko , elingi koloba okozala na mposa ya kobakisa kelasi mpo na baliste nyonso oyo ekangami lokola.

  • Lorem ipsum dolor vanda amet
  • Consectetur elit oyo ezali na mafuta
  • Moléstie ya motángo mobimba lorem na massa
  • Facilisis na aliquet ya nisl ya prétium
  • Nulla volutpat azali na nzoto kolɔngɔnɔ
    • Eloko oyo babengi Phasellus iaculis neque
    • Ba sodales ya purus ba ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libéré volutpat na
  • Faucibus porta lacus oyo ezali na mpɛmbɛ
  • Aenean afanda amet erat nunc
  • Eget porttitor lorem na kombo ya nzambe
<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>

Na kati ya molongo

Longola masasi ya liste moko mpe pakola mwa pole marginna kosangisa bakelasi mibale, .list-inlinempe .list-inline-item.

  • Lorem ipsum ezalaka
  • Eloko oyo babengi Phasellus iaculis
  • Nulla volutpat ezali bongo
<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>

Bolimbisi ya liste ya alignment

Bobongisa maloba mpe bandimbola na ndenge ya horizontal na kosalelaka ba kelasi oyo esili kolimbolama ya système na biso ya grille (to ba mixins sémantiques). Mpo na ntango molai, okoki kobakisa .text-truncatekelasi na bolingi mpo na kokata makomi na ellipse.

Ba liste ya bandimbola
Liste ya kolimbola ezali malamu mpenza mpo na kolimbola maloba.
Euismod

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

Donec id elit non mi porta gravida na eget metus.

Malesuada ezali porta
Etiam porta sem malesuada ya monene ya mollis euismod.
Terme oyo ekatami ekatami
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa kaka kofanda amet risus.
Kosala zumbu
Liste ya ndimbola oyo ekangami
Aenean posuere, tortor sed elakeli mabe feugiat, mokonzi ya mwasi augue blandit mokonzi. 
<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>

Typographie oyo ezo répondre

Typographie réponsive ezali kolobela kosala échelle ya texte na ba composants na ko ajuster kaka ba éléments root's font-sizena kati ya série ya ba requêtes ya média. Bootstrap esalaka boye te pona yo, mais eza assez facile ya kobakisa soki oza na besoin na yango.

Tala ndakisa na yango na misala. Pona font-sizeba queries nionso ya s na media oyo olingi.

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