Source

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.

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’a miiri ko navigatɔrɔ default root 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>.
Set global link color via $link-colorani ka link underlines dɔrɔn de kɛ :hover.
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

<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

<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

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

Ka ɲɛminɛ

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

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor ye fɛn ye min bɛ se ka kɛ fɛn ye min bɛ se ka kɛ fɛn ye. Duis mollis, est min tɛ fɛn caman ye.

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

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

.markani .smallkalanw fana bɛ sɔrɔ walasa ka cogoya kelenw waleya i n’a fɔ <mark>ani <small>k’a sɔrɔ k’i yɛrɛ tanga kɔrɔko nɔfɛkow ma minnu man ɲi, taamasiyɛnw tun bɛna na ni minnu ye.

Hali ni a ma jira sanfɛ, aw kana siga ka baara kɛ <b>ni <i>HTML5 ye. <b>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ɔ <i>a fanba bɛ kumakan, fɛɛrɛko daɲɛw, a ɲɔgɔnnaw de kan.

Sɛbɛnni nafamafɛnw

Sɛbɛnni ɲɔgɔndan, fɛn caman tigɛli, cogoya, girinya 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

<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 bɛ HTML o HTML<blockquote class="blockquote"> lamini i n’a fɔ quote.

Lorem ipsum dolor sigilen amet, consectetur adipiscing elit. Jateden dafalen 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>

Tɔgɔ dali source dɔ kan

A fara a <footer class="blockquote-footer">kan walasa ka sɔrɔyɔrɔ dɔn. Aw bɛ sɔrɔyɔrɔ baara tɔgɔ siri <cite>.

Lorem ipsum dolor sigilen amet, consectetur adipiscing elit. Jateden dafalen posuere erat a ante.

Mɔgɔ min tɔgɔ bɔra Source Title kɔnɔ

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

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.

Lorem ipsum dolor sigilen amet, consectetur adipiscing elit. Jateden dafalen posuere erat a ante.

Mɔgɔ min tɔgɔ bɔra Source Title kɔnɔ

<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 sigilen amet, consectetur adipiscing elit. Jateden dafalen posuere erat a ante.

Mɔgɔ min tɔgɔ bɔra Source Title kɔnɔ

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

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.

Lorem ipsum dolor sigi amet
Consectetur ye farikolojidɛsɛ ye
Jateden dafalen molestie lorem ka mass
Fasilisi bɛ sɔrɔ pretium nisl aliquet la
Nulla volutpat ye aliquam ye
- Fasellus iaculis ye jiri ye
- Purus sodales bɛ sɔgɔsɔgɔninjɛ furakɛ
- Vestibulu laoreet porttitor sem.. Bamako, Mali
- Ac tristique libero volutpat ka baara kɛ
Faucibus porta lacus ye jiri ye min bɛ wele ko fringilla vel
Aenean sigi amet erat nunc
Eget porttitor ka lorem

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

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.

Lorem ye ipsum ye
Fasellus iaculis (banakisɛfagalan).
Nulla volutpat ye

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

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

Euismod ye

Vestibulum id ligula porta felis euismod cɛya bɛ sɔrɔ lacinia odio sem nec elit.

Donec id elit non mi porta gravida ye eget metus ye.

Malesuada ka porta

Etiam porta sem cɛmanba min bɛ wele ko magna mollis euismod.

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

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sigi amet risus.

Nesting (kɔnɔnafili).

Nested ɲɛfɔli lisi: Aenean posuere, tortor sed cursus feugiat, muso min bɛ wele ko augue blandit muso.

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

Typografi min bɛ jaabi di

Responsive typography bɛ tali Kɛ sɛbɛnniw ni yɔrɔw sɛgɛsɛgɛli la ni root element's ladilanni dɔrɔn ye font-sizemedia ɲininkaliw 'kɔnɔ. Bootstrap tɛ nin kɛ i ye, nka a ka nɔgɔn kosɛbɛ ka fara a kan ni i mago bɛ a la.

A misali dɔ filɛ nin ye waleyali la. I font-sizeb’a fɛ ka s ni media ɲininkali minnu kɛ, i ka olu sugandi.

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