Okuwandiika ebitabo

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

Ku muko guno

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, tukozesa ekikolo kya bbulawuzi ekisookerwako font-size(ekitera okuba 16px) abagenyi basobole okulongoosa ebisookerwako bya bbulawuzi zaabwe 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-color.
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

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>

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

html

<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

Okwolesebwa 5

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

Emitwe gy’okulaga gitegekebwa nga giyita mu $display-font-sizesmaapu ya Sass n’enkyukakyuka bbiri, $display-font-weightne $display-line-height.

Emitwe gy’okulaga gisobola okukyusibwa okuyita mu nkyukakyuka bbiri, $display-font-familyne $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;

Okukulembera

Akatundu kafuule ak’enjawulo ng’ogattako .lead.

Kano katundu akakulembera. Kyawukana ku butundu obwa bulijjo.

html

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

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>

Weegendereze nti tags ezo zirina okukozesebwa olw’ekigendererwa eky’amakulu:

ekiikirira ebiwandiiko ebiteekeddwako akabonero oba ebiragiddwa okusobola okujuliza oba okuwandiika.
ekiikirira ebigambo ebiri ku mabbali n’ebiwandiiko ebitonotono, nga copyright n’ebiwandiiko eby’amateeka.
<s>ekiikirira elementi ezitakyakwatagana oba ezitakyali ntuufu.
ekiikirira span y’ekiwandiiko ekiri mu layini ekirina okuvvuunulwa mu ngeri eraga nti kirina obugambo obutali bwa biwandiiko.

Bw’oba oyagala okukola sitayiro y’ekiwandiiko kyo, olina okukozesa ebika bino wammanga mu kifo ky’ekyo:

.markejja kukozesa emisono gye gimu nga .
.smallejja kukozesa emisono gye gimu nga .
.text-decoration-underlineejja kukozesa emisono gye gimu nga .
.text-decoration-line-throughejja kukozesa emisono gye gimu nga <s>.

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

Ebikozesebwa mu biwandiiko

Kyusa okulaganya ebiwandiiko, okukyusa, sitayiro, obuzito, layini-obugulumivu, okuyooyoota 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

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 <blockquote class="blockquote">HTML yonna nga quote.

Ekijuliziddwa ekimanyiddwa ennyo, ekiri mu elementi ya blockquote.

html

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

Okutuuma ensibuko erinnya

HTML spec yeetaaga nti blockquote attribution eteekebwe ebweru wa <blockquote>. Nga ogaba attribution, wrap your <blockquote>mu a <figure>era okozese a <figcaption>oba block level element (okugeza, ) ne .blockquote-footerclass. Kakasa nti ozinga erinnya ly'omulimu gw'ensibuko <cite>nayo.

Ekijuliziddwa ekimanyiddwa ennyo, ekiri mu elementi 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>

Okukwatagana

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

Ekijuliziddwa ekimanyiddwa ennyo, ekiri mu elementi 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>

Ekijuliziddwa ekimanyiddwa ennyo, ekiri mu elementi 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>

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.

Luno lukalala.
Kirabika nga tekirina sitayiro yonna.
Mu nsengeka, ekyali lukalala.
Naye, sitayiro eno ekwata ku elementi z’omwana ez’amangu zokka.
Enkalala eziteekeddwa mu kiyumba:
- tebakwatibwako sitayiro eno
- ajja kukyalaga essasi
- era nga balina margin ya kkono esaanira
Kino kiyinza okuba nga kikyayamba mu mbeera ezimu.

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>

Mu layini

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

Kino kintu kya lukalala.
N’omulala.
Naye ziragibwa mu layini.

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>

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.

Ekisanja

Ennyonyola y’ekigambo.

Era ebirala ebimu ebiwandiiko ebitegeeza ekifo.

Ekisanja ekirala

Ennyonyola eno nnyimpi, kale tewali butundu bwa kwongerako oba ekintu kyonna.

Ekigambo ekisaliddwako kisaliddwako

Kino kiyinza okuba eky’omugaso ng’ekifo kifunda. Ku nkomerero ayongerako ekifaananyi ekiyitibwa ellipsis.

Okuzimba ebisu

Olukalala lw'ennyonnyola eziteekeddwa mu kiyumba: Mpulidde nga oyagala enkalala za definition. Ka nteeke olukalala lw’ennyonnyola munda mu lukalala lwo olw’ennyonnyola.

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>

Enkula z’empandiika eziddamu

Mu Bootstrap 5, tusobozesezza obunene bw’empandiika obuddamu nga bwe kibadde, okusobozesa ebiwandiiko okugerageranya mu ngeri ey’obutonde mu sayizi z’ekyuma n’ekifo eky’okulaba. Laba ku mukutu gwa RFS omanye engeri kino gye kikola.

Sass nga bwe kiri

Enkyukakyuka ezikyukakyuka

Emitwe girina enkyukakyuka ezimu eziweereddwayo ku sayizi n’okuteeka ebanga.

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

Ebintu eby’enjawulo eby’okuwandiika ebikwatibwako wano ne mu Reboot nabyo birina enkyukakyuka eziweereddwayo.

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

Ebirungo ebitabuddwa

Tewali mixins eziweereddwayo ku kuwandiika, naye Bootstrap ekozesa Responsive Font Sizing (RFS) .