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
. - 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.
<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-sizes
maapu ya Sass n’enkyukakyuka bbiri, $display-font-weight
ne $display-line-height
.
$display-font-sizes: (
1: 5rem,
2: 4.5rem,
3: 4rem,
4: 3.5rem,
5: 3rem,
6: 2.5rem
);
$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.
<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>
Weegendereze nti tags ezo zirina okukozesebwa olw’ekigendererwa eky’amakulu:
<mark>
ekiikirira ebiwandiiko ebiteekeddwako akabonero oba ebiragiddwa okusobola okujuliza oba okuwandiika.<small>
ekiikirira ebigambo ebiri ku mabbali n’ebiwandiiko ebitonotono, nga copyright n’ebiwandiiko eby’amateeka.<s>
ekiikirira elementi ezitakyakwatagana oba ezitakyali ntuufu.<u>
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:
.mark
ejja kukozesa emisono gye gimu nga<mark>
..small
ejja kukozesa emisono gye gimu nga<small>
..text-decoration-underline
ejja kukozesa emisono gye gimu nga<u>
..text-decoration-line-through
ejja kukozesa emisono gye gimu nga<s>
.
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, so nga <i>
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 .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>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, <p>
) ne .blockquote-footer
class. Kakasa nti ozinga erinnya ly'omulimu gw'ensibuko <cite>
nayo.
<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.
<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>
<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-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 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.
<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’okwesimbye nga okozesa enkola yaffe eya grid ebika ebitegekeddwa edda (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 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.
<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;
$hr-height: $border-width;
$hr-opacity: .25;
$legend-margin-bottom: .5rem;
$legend-font-size: 1.5rem;
$legend-font-weight: null;
$mark-padding: .2em;
$dt-font-weight: $font-weight-bold;
$nested-kbd-font-weight: $font-weight-bold;
$list-inline-padding: .5rem;
$mark-bg: #fcf8e3;
Ebirungo ebitabuddwa
Tewali mixins eziweereddwayo ku kuwandiika, naye Bootstrap ekozesa Responsive Font Sizing (RFS) .