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.

Na lokasa oyo

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á $font-family-base, $font-size-base, mpe $line-height-basebizaleli lokola moboko na biso ya konyata oyo esalelami na <body>.
Bobongisa langi ya lien ya mokili mobimba na nzela ya $link-color.
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

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>

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

html

<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

Elakiseli 5

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

Mitó ya makambo ya kolakisa ebongisami na nzela ya $display-font-sizeskarte ya Sass mpe ba variables mibale, $display-font-weightmpe $display-line-height.

Mitó ya makambo ya kolakisa ekoki kobongisama na nzela ya ba variables mibale, $display-font-familympe $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;

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.

html

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

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>

Kebá ete esengeli kosalela bilembo yango mpo na ntina ya sémantique:

ezali komonisa makomi oyo batye elembo to oyo batye elembo mpo na kotalela to kosala banɔti.
ezali komonisa makanisi ya mopanzi mpe makomi ya mikemike, lokola lotomo ya moto oyo akomi mpe makomi ya mibeko.
<s>ezali komonisa eloko oyo ezali lisusu na ntina te to oyo ezali lisusu na bosikisiki te.
ezali komonisa eteni ya makomi oyo ezali na kati ya molɔngɔ oyo esengeli kobongola yango na ndenge oyo ezali komonisa ete ezali na annotation oyo ezali ya makomi te.

Soki olingi kosala style ya texte na yo, esengeli osalela ba classes oyo elandi na esika na yango:

.markekosalela ba styles ndenge moko na .
.smallekosalela ba styles ndenge moko na .
.text-decoration-underlineekosalela ba styles ndenge moko na .
.text-decoration-line-throughekosalela ba styles ndenge moko na <s>.

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

Ba utilitaires ya texte

Bobongola alignment ya texte, transformer, style, poids, hauteur ya ligne, décoration na couleur na ba utilitaires na biso ya texte na 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

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 <blockquote class="blockquote">HTML nyonso lokola citatio.

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

html

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

Kopesa nkombo ya source moko

Spec ya HTML esengi ete attribution ya blockquote ezala na libanda ya <blockquote>. Ntango ozali kopesa attribution, envelopper ya yo <blockquote>na a <figure>mpe salela a <figcaption>to élément ya niveau ya bloc (par exemple, ) na .blockquote-footerclasse. Bozala sûr ya ko envelopper kombo ya mosala ya source na kati <cite>lokola.

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

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>

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.

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>

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

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>

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

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>

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

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>

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.

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>

Ba taille ya ba fonts oyo ezo répondre

Na Bootstrap 5, tofungolaki bonene ya makomi oyo eyanolaka na ndenge ya libela, kopesaka nzela na makomi ekóma na bonene ya ndenge ya bomoto na kati ya bonene ya aparɛyi mpe ya port de vue. Tala na lokasa ya RFS mpo na koyeba ndenge nini yango esalaka.

Sass oyo azali

Ba variables oyo ezali

Mitó ya makambo ezali na mwa ba variables dédiées mpo na dimensionnement mpe espacement.

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

Ba éléments ya typographie ndenge na ndenge oyo etalisami awa mpe na Reboot ezali mpe na ba variables dédiées.

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

Ba mixins

Ezali na ba mixins oyo epesameli te mpo na typographie, kasi Bootstrap esalelaka Responsive Font Sizing (RFS) .