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-family
ku 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-base
n'ebintu nga omusingi gwaffe ogw'okuwandiika ogwakozesebwa ku<body>
. - Teeka langi y'enkolagana ey'ensi yonna ng'oyita mu
$link-color
era osiige ennyiriri z'enkolagana zokka ku:hover
. - Kozesa
$body-bg
okuteeka abackground-color
ku<body>
(#fff
nga bwe kibadde).
Emisono gino gisobola okusangibwa munda mu _reboot.scss
, era enkyukakyuka z'ensi yonna zitegeezebwa mu _variables.scss
. Kakasa nti oteeka $font-size-base
mu 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>
.h1
okuyita mu .h6
kiraasi 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>
.mark
era .small
kiraasi 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 .initialism
ku 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.
<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.
<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.
<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-style
n'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 margin
ng’ogatta kiraasi bbiri, .list-inline
ne .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-truncate
kiraasi 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-sizes
enkyukakyuka ya Sass okudda true
n'okuddamu okukung'aanya Bootstrap.
Okuwagira RFS , tukozesa Sass mixin okukyusa eby'obugagga byaffe font-size
ebya bulijjo. Enkula z’empandiika eziddamu zijja kukuŋŋaanyizibwa mu calc()
mirimu n’okutabula rem
n’ebitundu by’ekifo eky’okulaba okusobozesa enneeyisa y’okugerageranya eddamu. Ebisingawo ku RFS n'ensengeka yaayo osobola okubisanga ku tterekero lyayo erya GitHub .