in English

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 type oyo esangisi bato nyonso mpe oyo ekoki kozwama, tosalelaka root ya navigateur par défaut font-size(typiquement 16px) mpo ba visiteurs bakoka ko personnaliser ba défauts ya navigateur na bango soki esengeli.
Salelá bizaleli $font-family-base, $font-size-base, mpe $line-height-baselokola 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. Bozala na makanisi ete mitó ya makambo oyo ezali koyanola te na ndenge ya libela, kasi ezali na nzela ya kofungola bonene ya makomi oyo ezali koyanola .

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.

Oyo ezali paragrafe ya liboso. Ezali komonana polele na baparagrafe oyo esalemaka mbala na mbala.

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</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.

Citation oyo eyebani malamu, oyo ezali na kati ya élément ya blockquote.

<blockquote class="blockquote">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</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>.

Citation oyo eyebani malamu, oyo ezali na kati ya élément ya blockquote.

Moto moko ya lokumu na Source Title

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

Kobongisa makambo

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

Citation oyo eyebani malamu, oyo ezali na kati ya élément ya blockquote.

Moto moko ya lokumu na Source Title

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

Citation oyo eyebani malamu, oyo ezali na kati ya élément ya blockquote.

Moto moko ya lokumu na Source Title

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

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.

Oyo ezali liste.
Emonani mpenza kozanga kosala style.
Na ndenge ya structure, ezali kaka liste.
Kasi, style oyo etali kaka ba éléments ya mwana ya mbala moko.
Ba liste oyo ekangami na kati:
- bazali na bopusi te na lolenge oyo
- ekolakisama kaka lisasi
- mpe kozala na marge gauche oyo ebongi
Yango ekoki kaka kozala na ntina na makambo mosusu.

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

Na kati ya molongo

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

Oyo ezali eloko ya liste.
Mpe mosusu.
Kasi bazali kolakisa yango na kati ya molɔngɔ.

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

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.

Liloba

Ndimbola mpo na liloba yango.

Mpe mwa makomi mosusu ya ndimbola ya esika ya kofanda.

Liloba mosusu

Ndimbola oyo ezali mokuse, yango wana ba paragraphes ya kobakisa to eloko moko te.

Terme oyo ekatami ekatami

Yango ekoki kozala na ntina ntango esika ezali mingi te. Abakisi ellipse moko na nsuka.

Kosala zumbu

Liste ya ndimbola oyo ekangami: Nayoki bino lokola ba liste ya ba définitions. Tika natia liste ya bandimbola na kati ya liste ya bandimbola na yo.

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

Ba taille ya ba fonts oyo ezo répondre

Kobanda na v4.3.0, Bootstrap etindi na option ya ko activer ba taille ya ba fonts oyo ezo répondre, ko permettre texte e échelle plus naturelle na ba taille ya appareil na ya port de vue. RFS ekoki kozala activé na ko changer $enable-responsive-font-sizesvariable ya Sass na truempe ko recompiler Bootstrap.

Pona ko soutenir RFS , tosalelaka mixin ya Sass pona ko remplacer ba font-sizepropriétés na biso ya normal. Ba taille ya ba fonts oyo ezo répondre ekozala compilé na calc()ba fonctions na mélange ya remna ba unité ya viewport pona ko permettre comportement ya échelle responsive. Makambo mingi na ntina ya RFS mpe bobongisi na yango ekoki kozwama na ebombelo na yango ya GitHub .