Source

Okuwandiika ebitabo

Ebiwandiiko n'ebyokulabirako ku Bootstrap typography, omuli ensengeka z'ensi yonna, emitwe, ebiwandiiko by'omubiri, enkalala, n'ebirala.

Enteekateeka z’ensi yonna

Bootstrap eteekawo okulaga okw'ensi yonna okusookerwako, okuwandiika, n'emisono gy'okuyunga. Bwe kiba kyetaagisa okufuga okusingawo, kebera ebika by’omugaso gw’ebiwandiiko .

  • Kozesa native font stack elonda ekisinga obulungi font-familyku buli OS n’ekyuma.
  • Ku minzaani y’ekika esinga okuyingiza abantu bonna era etuukirirwa, tutwala ekikolo kya bbulawuzi ekisookerwako font-size(ekitera okuba 16px) abagenyi basobole okulongoosa enkola zaabwe eza bbulawuzi nga bwe kyetaagisa.
  • Kozesa $font-family-base, $font-size-base, $line-height-basen'ebintu nga omusingi gwaffe ogw'okuwandiika ogwakozesebwa ku <body>.
  • Teeka langi y'enkolagana ey'ensi yonna ng'oyita mu $link-colorera osiige ennyiriri z'enkolagana zokka ku :hover.
  • Kozesa $body-bgokuteeka a background-colorku <body>( #fffnga bwe kibadde).

Emisono gino gisobola okusangibwa munda mu _reboot.scss, era enkyukakyuka z'ensi yonna zitegeezebwa mu _variables.scss. Kakasa nti oteeka $font-size-basemu rem.

Emitwe

Emitwe gyonna egya HTML, <h1>okuyita mu <h6>, giriwo.

Omutwe Eky'okulabirako

<h1></h1>

 h1. Omutwe gwa bootstrap

<h2></h2>

 h2. Omutwe gwa bootstrap

<h3></h3>

 h3. Omutwe gwa bootstrap

<h4></h4>

 h4. Omutwe gwa bootstrap

<h5></h5>

 h5. Omutwe gwa bootstrap

<h6></h6>

 h6. Omutwe gwa 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>

.h1okuyita mu .h6kiraasi nazo ziriwo, kubanga bw’oyagala okukwatagana n’ensengeka y’empandiika y’omutwe naye nga tosobola kukozesa kintu kya HTML ekikwatagana.

h1. Omutwe gwa bootstrap

h2. Omutwe gwa bootstrap

h3. Omutwe gwa bootstrap

h4. Omutwe gwa bootstrap

h5. Omutwe gwa bootstrap

h6. Omutwe gwa 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>

Okulongoosa emitwe

Kozesa ebika by'omugaso ebirimu okuddamu okukola ekiwandiiko ekitono eky'omutwe ogw'okubiri okuva mu Bootstrap 3.

Omutwe gw’okulaga ogw’omulembe Nga guliko ebiwandiiko eby’okubiri ebizibye 
<h3>
  Fancy display heading
  <small class="text-muted">With faded secondary text</small>
</h3>

Laga emitwe

Ebintu eby’omutwe eby’ennono bikoleddwa okukola obulungi mu nnyama y’ebirimu ku lupapula lwo. Bw’oba ​​weetaaga omutwe okusobola okuwukana, lowooza ku ky’okukozesa omutwe ogw’okwolesebwa —omusono gw’omutwe omunene, ogulina endowooza entonotono.

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

Okukulembera

Akatundu kafuule ak’enjawulo ng’ogattako .lead.

Vivamus sagittis lacus vel augue laoreet ekika kya faucibus eky’okugula ebintu. Duis mollis, est etali ya bugagga.

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

Ebintu ebikozesebwa mu biwandiiko ebiri mu layini

Okukola sitayiro ku bintu ebya bulijjo ebya HTML5 ebiri mu layini.

Osobola okukozesa mark tag oku...omutwe omukuluokuwandiika obubaka.

Layini eno ey’ekiwandiiko etegeeza okutwalibwa ng’ekiwandiiko ekisaziddwamu.

Olunyiriri luno olw’ebiwandiiko lugendereddwamu okutwalibwa ng’olutakyali lutuufu.

Ennyiriri eno ey’ekiwandiiko etegeeza okutwalibwa ng’okugatta ku kiwandiiko.

Layini eno ey’ekiwandiiko ejja kulaga nga bwe kiragiddwa wansi

Layini eno ey’ebiwandiiko etegeeza okutwalibwa ng’ennukuta ennungi.

Layini eno evvuunuddwa ng’ebiwandiiko ebinene.

Layini eno evvuunuddwa ng’ekiwandiiko ekiwandiikiddwa mu italic.

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

.markera .smallkiraasi nazo ziriwo okukozesa emisono gye gimu nga <mark>era <small>nga bwe weewala ebigambo byonna eby’amakulu ebiteetaagisa tags ze zandireese.

Wadde nga tekiragiddwa waggulu, wulira nga oli wa ddembe okukozesa <b>era <i>mu HTML5. <b>kigendereddwamu okulaga ebigambo oba ebisoko awatali kutuusa bukulu bwa kwongerako ate nga <i>kisinga kuba kya ddoboozi, ebigambo eby’ekikugu n’ebirala.

Ebikozesebwa mu biwandiiko

Kyusa ensengeka y'ebiwandiiko, kyusa, sitayiro, obuzito, ne langi n'ebikozesebwa byaffe eby'ebiwandiiko n'ebikozesebwa mu langi .

Ebifupi ebifupi

Stylized implementation of HTML's <abbr>element for ebifupi n'enfunyiro okulaga enkyusa egaziyiziddwa ku hover. Ebifupi birina akabonero akalaga wansi era ne bifuna akabonero k’obuyambi okuwa ensonga endala ku hover n’eri abakozesa tekinologiya ayamba.

Okwongerako .initialismku kifupi okufuna font-size entono katono.

attr

HTML

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

Ebigambo ebiziyiza

Ku lw'okujuliza ebitundu by'ebirimu okuva mu nsibuko endala munda mu kiwandiiko kyo. Zinga HTML<blockquote class="blockquote"> yonna nga quote.

Lorem ipsum dolor okutuula amet, okusengejja amasavu elit. Namba enzijuvu 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>

Okutuuma ensibuko erinnya

Okwongerako a <footer class="blockquote-footer">for okuzuula ensibuko. Zinga erinnya ly'omulimu gw'ensibuko mu <cite>.

Lorem ipsum dolor okutuula amet, okusengejja amasavu elit. Namba enzijuvu posuere erat a ante.

Omuntu omututumufu mu 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>

Okukwatagana

Kozesa ebikozesebwa mu biwandiiko nga bwe kyetaagisa okukyusa ensengeka ya blockquote yo.

Lorem ipsum dolor okutuula amet, okusengejja amasavu elit. Namba enzijuvu posuere erat a ante.

Omuntu omututumufu mu 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 okutuula amet, okusengejja amasavu elit. Namba enzijuvu posuere erat a ante.

Omuntu omututumufu mu 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>

Enkalala

Etaliiko sitayiro

Ggyawo margin eyasooka list-stylen'eya kkono ku bintu eby'olukalala (abaana ab'amangu bokka). Kino kikwata ku bintu byokka eby’olukalala lw’abaana ab’amangu , ekitegeeza nti ojja kwetaaga okwongerako ekibiina ku nkalala zonna eziteekeddwa mu kiyumba nazo.

  • Lorem ipsum dolor tuula amet
  • Consectetur okusiiga elit
  • Ennamba enzijuvu molestie lorem ku massa
  • Facilisis mu kikuta kya pretium nisl
  • Nulla volutpat aliquam omubisi gw’enjuki
    • Ekitundu ekiyitibwa Phasellus iaculis neque ekiyitibwa ekimera ekiyitibwa Phasellus
    • Purus sodales eddagala eriyitibwa ultricies
    • Ekiwandiiko ekiyitibwa Vestibulum laoreet portttitor sem
    • Ac tristique libero volutpat ku bwesigwa ku
  • Faucibus porta lacus eriko ekikuta ky’omubiri ekiyitibwa fringilla vel
  • Aenean okutuula amet erat nunc
  • Eget omuwala 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>

Mu layini

Ggyawo amasasi g’olukalala era osiigeko ekitangaala ekitonotono marginng’ogatta kiraasi bbiri, .list-inlinene .list-inline-item.

  • Lorem ow’ekika kya ipsum
  • Ekitundu ekiyitibwa Phasellus iaculis ekiyitibwa ekitundu ekiyitibwa Phasellus
  • Nulla volutpat nga bwe kiri
<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>

Ennyonyola okulaganya olukalala

Laganya ebigambo n’ennyonnyola mu ngeri ey’okwesimbye nga okozesa enkola yaffe eya grid ebika ebitegekeddwa edda (oba semantic mixins). Ku biseera ebiwanvu, osobola okugattako .text-truncatekiraasi okusalako ekiwandiiko n’ekiwandiiko ekiyitibwa ellipsis.

Enkalala z’ennyonnyola
Olukalala lw’ennyonnyola lutuukiridde okunnyonnyola ebigambo.
Euismod

Ensigo id ligula porta felis euismod ensigo eget lacinia odio sem nec elit.

Donec id elit etali ya mi porta gravida ku eget metus.

Malesuada eriko ensolo
Etiam porta sem omusajja omunene ennyo omuto.
Ekigambo ekisaliddwako kisaliddwako
Fusce dapibus, tellus ac cursus commodo, tortor mauris ekizimbulukusa ekizimbulukusa, ut ekizimbulukusa masso justo okutuula amet risus.
Okuzimba ebisu
Olukalala lw'ennyonnyola eziteekeddwa mu kiyumba
Aenean posuere, tortor sed ekikolimo feugiat, omubiikira augue blandit omubiikira. 
<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>

Okuwandiika mu ngeri ey’okuddamu

Responsive typography kitegeeza okugerageranya ebiwandiiko n'ebitundu nga omala kutereeza root element's font-sizemunda mu lunyiriri lw'ebibuuzo by'emikutu. Bootstrap kino tekikukolera, naye kyangu nnyo okugattako bw’oba ​​okyetaaga.

Wano waliwo ekyokulabirako ku kyo mu nkola. Londa kyonna font-sizes ne media queries kyoyagala.

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