in English

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, 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-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 entono. Kuuma mu birowoozo emitwe gino tegiddamu mu butonde, naye kisoboka okusobozesa obunene bw'empandiika obuddamu .

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.

Kano katundu akakulembera. Kyawukana ku butundu obwa bulijjo.

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

<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 weewala amakulu gonna agateetaagibwa 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.

Ekijuliziddwa ekimanyiddwa ennyo, ekiri mu elementi ya blockquote.

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

Okutuuma ensibuko erinnya

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

Ekijuliziddwa ekimanyiddwa ennyo, ekiri mu elementi ya blockquote.

Omuntu omututumufu mu Source Title
<blockquote class="blockquote">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</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.

Ekijuliziddwa ekimanyiddwa ennyo, ekiri mu elementi ya blockquote.

Omuntu omututumufu mu Source Title
<blockquote class="blockquote text-center">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Ekijuliziddwa ekimanyiddwa ennyo, ekiri mu elementi ya blockquote.

Omuntu omututumufu mu Source Title
<blockquote class="blockquote text-right">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</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.

  • Luno lukalala.
  • Kirabika nga tekikoleddwaako sitayiro ddala.
  • 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.
<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.
<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’okwebungulula ng’okozesa enkola yaffe ey’ekisenge (grid system’s predefined classes) (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 ebiwandiiko ebirala ebirala eby'ennyonnyola y'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.
<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

Okuva ku v4.3.0, Bootstrap esindika n'enkola y'okusobozesa obunene bw'empandiika obuddamu, okusobozesa ebiwandiiko okugerageranya mu butonde mu sayizi z'ekyuma n'ekifo eky'okulaba. RFS esobola okusobozesa nga okyusa $enable-responsive-font-sizesenkyukakyuka ya Sass okudda truen'okuddamu okukung'aanya Bootstrap.

Okuwagira RFS , tukozesa Sass mixin okukyusa eby'obugagga byaffe font-sizeebya bulijjo. Enkula z’empandiika eziddamu zijja kukuŋŋaanyizibwa mu calc()mirimu n’okutabula remn’ebitundu by’ekifo eky’okulaba okusobozesa enneeyisa y’okugerageranya eddamu. Ebisingawo ku RFS n'ensengeka yaayo osobola okubisanga ku tterekero lyayo erya GitHub .