in English

Typografi (Typografi) (Typographie).

Sɛbɛnw ni misaliw Bootstrap sɛbɛnnikɛlan kan, i n’a fɔ diɲɛ sigicogo, kunkankow, farikolo sɛbɛnniw, lisiw ani fɛn wɛrɛw.

Nin ɲɛ in kan

Duniya bɛɛ ka sigidaw

Bootstrap bɛ diɲɛ jiracogo jɔnjɔnw, sɛbɛnnikɛcogo ani ɲɔgɔndan kɛcogoyaw sigi sen kan. Ni kunnafoni caman ka kan ka kɛ, aw ye sɛbɛnni nafama kalanw lajɛ .

Baara kɛ ni sɛbɛnnibolo nafama dɔ ye min bɛ fɛn bɛɛ la ɲuman sugandi font-familyOS ni minɛn kelen-kelen bɛɛ kama.
Walasa ka suguya sɛgɛsɛgɛli min bɛ bɛɛ lajɛlen na ani min bɛ se ka sɔrɔ, an bɛ baara kɛ ni navigatɔrɔ ka root default ye font-size(a ka c’a la 16px) walasa taamakɛlaw ka se k’u ka navigatɔrɔ defaults ladilan i n’a fɔ a mago bɛ cogo min na.
Baara kɛ ni $font-family-base, $font-size-base, ani $line-height-basefɛnw ye i n' a fɔ an ka sɛbɛnnikɛlan basigilen min bɛ tali kɛ <body>.
Segin diɲɛ ɲɔgɔndan kulɛri kan $link-color.
Baara kɛ ni $body-bga ye ka a sigi ( ka background-colorda a kan).<body>#fff

o cogoyaw bɛ se ka sɔrɔ kɔnɔ _reboot.scss, wa diɲɛ fɛn caman bɛrɛbɛrɛw ɲɛfɔlen don _variables.scss. Aw ye aw jija ka $font-size-basesigi rem.

Kumakunw

HTML kunkankow bɛɛ, <h1>ka t’a fɛ <h6>, olu bɛ sɔrɔ.

Kumakun	Misaliya
`<h1></h1>`	h1. Bootstrap ka kumasen
`<h2></h2>`	h2. Bootstrap ka kumasen
`<h3></h3>`	h3. Bootstrap ka kumasen
`<h4></h4>`	h4. Bootstrap ka kumasen
`<h5></h5>`	h5. Bootstrap ka kumasen
`<h6></h6>`	h6. Bootstrap ka kumasen

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

.h1through .h6classes fana bɛ sɔrɔ, bawo n’i b’a fɛ ka bɛn barokun dɔ sɛbɛnnibolo cogoya ma nka i tɛ se ka baara kɛ ni HTML yɔrɔ ye min bɛ tali kɛ a la.

h1. Bootstrap ka kumasen

h2. Bootstrap ka kumasen

h3. Bootstrap ka kumasen

h4. Bootstrap ka kumasen

h5. Bootstrap ka kumasen

h6. Bootstrap ka kumasen

html ye

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

Ka barokunw kɛ ka kɛɲɛ ni mɔgɔw sago ye

Baara kɛ ni nafama-kalansow ye minnu bɛ a kɔnɔ walasa ka filanan-kuncɛ-sɛbɛn misɛnninw Dabɔ kokura ka Bɔ Bootstrap 3 la.

Fancy display heading Ni sɛbɛnni filanan faded

html ye

<h3>
  Fancy display heading
  <small class="text-muted">With faded secondary text</small>
</h3>

Kumakunw jira

Laadalata dakunw dabɔra walasa u ka baara kɛ ka ɲɛ i ka ɲɛ kɔnɔkow sogo la. Ni i mago bɛ barokun dɔ la walasa a ka bɔ kɛnɛ kan, i k’a lajɛ ka baara kɛ ni jiralan ye —kunkansɛbɛn min ka bon, min bɛ hakilinaw di dɔɔnin.

A jiracogo 1

Ɲɛjirali 2nan

Ɲɛjirali 3nan

Ɲɛjirali 4nan

Ɲɛjirali 5nan

Ɲɛjirali 6nan

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

Ɲɛjirali kuncɛw bɛ labɛn $display-font-sizesSass karti fɛ ani fɛn caman ɲɔgɔnna fila fɛ, $display-font-weightani $display-line-height.

Ɲɛjirali kuncɛw bɛ se ka ladilan fɛn fila fɛ, $display-font-familyani $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;

Ka ɲɛminɛ

Aw ye dakun dɔ kɛ fɛn ye min bɛ bɔ kɛnɛ kan ni aw ye a fara a kan .lead.

Nin ye dakun ɲɛminɛbaga ye. A bɛ bɔ dakunw na minnu bɛ kɛ tuma bɛɛ.

html ye

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</p>

Inline sɛbɛnni kɔnɔfɛnw

Styling for common inline HTML5 fɛnw.

Aw bɛ se ka baara kɛ ni taamasiyɛn taamasiyɛn ye walasa kaka faranfasiyamasalabolo.

~~Nin sɛbɛnni zana in kun ye ka jate i n’a fɔ sɛbɛn bɔlen.~~

~~Nin sɛbɛnni zana in kun ye ka jate iko a tɛ tiɲɛ ye tugun.~~

Nin sɛbɛnni zana in kun ye ka jate i n’a fɔ farali sɛbɛn kan.

Nin sɛbɛnni tigɛli bɛna kɛ i n’a fɔ a ɲɛfɔlen bɛ cogo min na.

Nin sɛbɛnni zana in kun ye ka jate i n’a fɔ sɛbɛnni ɲumanw.

Nin zana in jirala i n’a fɔ sɛbɛnni jɛmanw.

Nin zana in bɛ baara kɛ i n’a fɔ sɛbɛnni minnu sɛbɛnnen don ni italiki ye.

html ye

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

Aw ye aw janto o taamasiyɛnw ka kan ka baara kɛ ni kɔrɔko ye:

bɛ sɛbɛnni jira min taamasiyɛn kɛra walima min ɲɛfɔlen don walasa ka kunnafoni sɔrɔ walima ka sɛbɛnni kɛ.
bɛ kɛrɛfɛ kumaw ni sɛbɛnni misɛnninw jira, i n’a fɔ sɛbɛnnikɛlaw ka josariyaw ani sariya sɛbɛnw.
<s>bɛ fɛn dɔ jira min tɛ nafa sɔrɔ tugun walima minnu tɛ tiɲɛ ye tuguni.
bɛ sɛbɛnnibolo dɔ jira min ka kan ka baara kɛ cogo la min b’a jira ko ɲɛfɔli min tɛ sɛbɛnni ye, o b’a la.

N’i b’a fɛ k’i ka sɛbɛnni kɛcogo ɲɛ, i ka kan ka baara kɛ ni nin kalansen ninnu ye o nɔ na:

.markbɛna kɛcogo kelenw de waleya i n' a fɔ .
.smallbɛna kɛcogo kelenw de waleya i n' a fɔ .
.text-decoration-underlinebɛna kɛcogo kelenw de waleya i n' a fɔ .
.text-decoration-line-throughbɛna kɛcogo kelenw de waleya i n' a fɔ <s>.

Hali ni a ma jira sanfɛ, aw kana siga ka baara kɛ ni HTML5 ye. kɔrɔ ye ka daɲɛw walima kumasenw Bɔ kɛnɛ kan k’a sɔrɔ a ma nafa wɛrɛ Lase, k’a sɔrɔ a fanba ye kumakan, fɛɛrɛko daɲɛw, a ɲɔgɔnnaw de ye.

Sɛbɛnni nafamafɛnw

Sɛbɛnni ɲɔgɔndan, fɛn caman tigɛli, cogoya, girinya, tigɛli-janya, finidoncogo ani kulɛri Changer ni an ka sɛbɛnni nafamafɛnw ani kulɛri nafamafɛnw ye .

Kuma surunw

HTML ka <abbr>element (yɔrɔ) waleyali cogo la min bɛ Kɛ ka surunya ni daɲɛ surunw ye walasa ka a jiracogo bonyalen jira hover kan. Kuma surunw bɛ ni jatebɔlan ye min bɛ daminɛ ani ka dɛmɛ taamasiyɛn sɔrɔ walasa ka kunnafoni wɛrɛw di hover kan ani dɛmɛni fɛɛrɛw baarakɛlaw ma.

A bɛ Fàra .initialismdaɲɛ surun dɔ kan walasa ka sɛbɛnnibolo-yɔrɔ fitinin dɔ Sɔrɔ.

attr

HTML ye

html ye

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

Blokiw ka kumaw

Walasa ka kunnafoni blokiw fɔ ka bɔ yɔrɔ wɛrɛ la i ka sɛbɛn kɔnɔ. Aw <blockquote class="blockquote">bɛ HTML o HTML lamini i n’a fɔ quote.

Kumasen dɔnnen dɔ, min bɛ sɔrɔ blockquote element dɔ kɔnɔ.

html ye

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

Tɔgɔ dali source dɔ kan

HTML spec b' a ɲini ko blockquote attribution ka bila kɛnɛma <blockquote>. Ni aw bɛ attribution di, aw bɛ aw ka a siri <blockquote>a la <figure>ani ka baara kɛ ni a <figcaption>walima block level element ye (misali la, ) ni .blockquote-footerkalasi ye. Aw ye aw jija ka sɔrɔyɔrɔ baara tɔgɔ siri a kɔnɔ <cite>fana.

Kumasen dɔnnen dɔ, min bɛ sɔrɔ blockquote element dɔ kɔnɔ.

html ye

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

Alignment (labɛnni).

Baara kɛ ni sɛbɛnni nafamafɛnw ye i n’a fɔ i mago bɛ cogo min na walasa ka i ka blockquote (blokquote) labɛncogo Changer.

Kumasen dɔnnen dɔ, min bɛ sɔrɔ blockquote element dɔ kɔnɔ.

html ye

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

Kumasen dɔnnen dɔ, min bɛ sɔrɔ blockquote element dɔ kɔnɔ.

html ye

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

Lisitiw

A ma kɛ cogo min na

Aw bɛ dakun fɔlɔ list-styleni kininbolo fan dɔ bɔ lisi kɔnɔfɛnw kan (denmisɛnninw dɔrɔn). O bɛ tali kɛ denmisɛnw ka lisi fɛnw dɔrɔn de la minnu bɛ teliya , o kɔrɔ ye ko i bɛna a ɲini ka kalasi fara a kan lisi minnu bɛ sigi sen kan fana.

Nin ye lisi ye.
A bɛ i n’a fɔ a ma kɛ cogo min na pewu.
Jatebla la, a ye lisi ye halibi.
Nka, o cogoya in bɛ tali Kɛ denmisɛnninw ka fɛnw dɔrɔn de la minnu bɛ Kɛ teliya la.
Lisiti minnu bɛ sigi sen kan:
- bɛ nɔ bila o cogoya in na
- bɛna marifa dɔ jira hali bi
- ani ka kɛ ni kininbolo fan bɛnnen ye
O bɛ se ka nafa sɔrɔ hali bi ko dɔw la.

html ye

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

Inline kɔnɔ

Aw bɛ lisi dɔ ka marifaw bɔ ka yeelen dɔw marginkɛ ni kalasi fila faralen ye ɲɔgɔn kan, .list-inlineani .list-inline-item.

Nin ye lisi fɛn ye.
Ani dɔ wɛrɛ fana.
Nka u bɛ jira inline kɔnɔ.

html ye

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

Ɲɛfɔli lisi ɲɔgɔndan

Daɲɛw ni ɲɛfɔliw labɛn ɲɔgɔn kan cogo tilennen na ni an ka grid system ka kalasi ɲɛfɔlenw ye (walima kɔrɔko mixins). Walasa ka waati jan kɛ, i bɛ se ka .text-truncatekalasi dɔ fara a kan ni i yɛrɛ sago ye walasa ka sɛbɛnni tigɛ ni ellipsis ye.

Ɲɛfɔli lisiw

Ɲɛfɔli lisi dafalen don daɲɛw ɲɛfɔli kama.

Dan

Daɲɛ in ɲɛfɔli.

Ani yɔrɔ wɛrɛw ɲɛfɔli sɛbɛn dɔw.

Daɲɛ wɛrɛ

Nin ɲɛfɔli in ka surun, o la, dakun wɛrɛw walima fɛn wɛrɛ tɛ yen.

Truncated term (daɲɛ tigɛlen) bɛ tigɛ

O bɛ se ka kɛ nafa ye ni yɔrɔ ka gɛlɛn. A bɛ elipsis dɔ fara a kan a laban na.

Nesting (kɔnɔnafili).

Nested ɲɛfɔli lisi: N y'a mɛn i n'a fɔ ɲɛfɔli lisiw. A to n ka ɲɛfɔli-sɛbɛn dɔ Blà i ka ɲɛfɔli-sɛbɛn kɔnɔ.

html ye

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

Font hakɛw minnu bɛ jaabi di

Bootstrap 5 kɔnɔ, an ye jaabi-sɛbɛnni hakɛw daminɛ ka kɛɲɛ ni u daminɛ ye, o bɛ sira Di sɛbɛnniw ma u ka se ka sɛgɛsɛgɛli kɛ cogo la min bɛ kɛ ka kɛɲɛ ni u yɛrɛ ye minɛnw ni filɛlikɛyɔrɔw hakɛw kɔnɔ. Aw ye RFS ɲɛ lajɛ walasa ka a dɔn o bɛ baara kɛ cogo min na.

Sass ye

Yɛlɛma-yɛlɛmaw

Kumakunw bɛ ni fɛn dɔw ye minnu kɛrɛnkɛrɛnnen don u bonya ni u cɛ janya la.

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

Sɛbɛnni-minɛn suguya caman minnu ɲɛfɔlen dòn yan ani Reboot kɔnɔ, olu fana bɛ ni fɛn caman ɲɔgɔnna kɛrɛnkɛrɛnnenw ye.

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

Mixinw (Mixins).

Mixin kɛrɛnkɛrɛnnenw tɛ yen sɛbɛnnikɛlan kama, nka Bootstrap bɛ baara Kɛ ni Responsive Font Sizing (RFS) ye .