Imyandikire
Inyandiko n'ingero kuri Bootstrap yimyandikire, harimo igenamiterere ryisi, imitwe, inyandiko yumubiri, urutonde, nibindi byinshi.
Igenamiterere ryisi yose
Bootstrap ishyiraho ibanze kwisi yose, imyandikire, hamwe nuburyo bwo guhuza. Mugihe hagenzuwe byinshi, reba ibyiciro byingirakamaro byamasomo .
- Koresha imyandikire kavukire ihitamo ibyiza
font-family
kuri buri OS nigikoresho. - Kubwinshi bwurwego rwuzuye kandi rushobora kugerwaho, dukoresha umuzi wibanze wa mushakisha
font-size
(mubisanzwe 16px) kugirango abashyitsi bashobore guhitamo amashusho yabo asanzwe nkuko bikenewe. - Koresha i
$font-family-base
,,$font-size-base
na$line-height-base
Ibiranga Nka Imyandikire Yibanze Kuri Kuri<body>
. - Shiraho ibara ryisi yose ukoresheje
$link-color
. - Koresha
$body-bg
gushiraho abackground-color
kuri<body>
(#fff
kubisanzwe).
Izi njyana zirashobora kuboneka imbere _reboot.scss
, kandi impinduka zisi zirasobanuwe muri _variables.scss
. Witondere $font-size-base
gushiramo rem
.
Imitwe
Imitwe yose ya HTML, <h1>
binyuze <h6>
, irahari.
Umutwe | Urugero |
---|---|
<h1></h1> |
h1. Umutwe wa Bootstrap |
<h2></h2> |
h2. Umutwe wa Bootstrap |
<h3></h3> |
h3. Umutwe wa Bootstrap |
<h4></h4> |
h4. Umutwe wa Bootstrap |
<h5></h5> |
h5. Umutwe wa Bootstrap |
<h6></h6> |
h6. Umutwe wa 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
binyuze .h6
mumasomo nayo arahari, kuberako mugihe ushaka guhuza imyandikire yimyandikire yumutwe ariko ntushobora gukoresha HTML ijyanye.
h1. Umutwe wa Bootstrap
h2. Umutwe wa Bootstrap
h3. Umutwe wa Bootstrap
h4. Umutwe wa Bootstrap
h5. Umutwe wa Bootstrap
h6. Umutwe wa 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>
Guhindura imitwe
Koresha ibyiciro byingirakamaro kugirango usubiremo inyandiko ntoya yumutwe wanditse kuva Bootstrap 3.
Kugaragaza neza Umutwe Hamwe ninyandiko ya kabiri yazimye
<h3>
Fancy display heading
<small class="text-muted">With faded secondary text</small>
</h3>
Erekana imitwe
Ibikoresho gakondo byateguwe kugirango bikore neza mu nyama zibirimo page yawe. Mugihe ukeneye umutwe kugirango uhagarare, tekereza gukoresha umutwe werekana - nini, nini cyane yatekerejweho imitwe.
<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>
Erekana imitwe yashyizweho hakoreshejwe $display-font-sizes
ikarita ya Sass nibihinduka bibiri, $display-font-weight
na $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;
Kuyobora
Kora igika kigaragara wongeyeho .lead
.
Iki ni igika kiyobora. Iragaragara kuva mu bika bisanzwe.
<p class="lead">
This is a lead paragraph. It stands out from regular paragraphs.
</p>
Shyiramo ibice byanditse
Igishushanyo kubintu bisanzwe bya HTML5.
Urashobora gukoresha ikirango kurishyira ahagaragarainyandiko.
Uyu murongo winyandiko ugenewe gufatwa nkumwandiko wasibwe.
Uyu murongo winyandiko ugenewe gufatwa nkibikiri ukuri.
Uyu murongo winyandiko ugenewe gufatwa nkinyongera ku nyandiko.
Uyu murongo winyandiko uzatanga nkuko byashizwe kumurongo.
Uyu murongo winyandiko ugenewe gufatwa nkicapiro ryiza.
Uyu murongo watanzwe nkumwandiko utinyutse.
Uyu murongo watanzwe nkuwanditse.
<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>
Witondere ko ibyo birango bigomba gukoreshwa muburyo bwo gusobanura:
<mark>
Yerekana inyandiko irangwa cyangwa yamuritswe kugirango yerekanwe cyangwa intego.<small>
Yerekana-ibitekerezo-bito hamwe nicapiro rito, nkuburenganzira hamwe ninyandiko zemewe.<s>
byerekana ikintu kitagifite akamaro cyangwa kitagikwiye.<u>
Yerekana umwanya munini winyandiko igomba gutangwa muburyo bwerekana ko ifite ibisobanuro bitari inyandiko.
Niba ushaka gutunganya inyandiko yawe, ugomba gukoresha amasomo akurikira aho:
.mark
Kuri Koresha Nka Nka Nka<mark>
..small
Kuri Koresha Nka Nka Nka<small>
..text-decoration-underline
Kuri Koresha Nka Nka Nka<u>
..text-decoration-line-through
Kuri Koresha Nka Nka Nka<s>
.
Mugihe biterekanwa hejuru, umva gukoresha <b>
no <i>
muri HTML5. <b>
igamije kwerekana amagambo cyangwa interuro utagaragaje akamaro kiyongereye, mugihe <i>
ahanini ari ijwi, amagambo tekinike, nibindi.
Ibikorwa byingirakamaro
Hindura inyandiko ihuza, uhindure, imiterere, uburemere, umurongo-uburebure, gushushanya amabara hamwe nibikorwa byacu byingirakamaro hamwe nibikorwa byamabara .
Amagambo ahinnye
Gushyira mubikorwa uburyo bwa HTML <abbr>
kubintu bigufi hamwe namagambo ahinnye kugirango yerekane verisiyo yagutse kuri hover. Amagambo ahinnye afite umurongo uteganijwe kandi wunguka indanga yo gutanga ibisobanuro byinyongera kuri hover no kubakoresha ikorana buhanga.
Ongeraho .initialism
mu magambo ahinnye yimyandikire ntoya.
attr
HTML
<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
Inzitizi
Kugirango usubiremo ibice bikubiye mubindi bikoresho mu nyandiko yawe. Kuzenguruka <blockquote class="blockquote">
kuri HTML iyo ari yo yose.
Amagambo azwi cyane, akubiye mubintu byahagaritswe.
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
Kwita izina isoko
HTML igaragara isaba ko blokquote ibiranga ishyirwa hanze ya <blockquote>
. Mugihe utanga ibiranga, funga ibyawe <blockquote>
muri <figure>
hanyuma ukoreshe a <figcaption>
cyangwa urwego urwego (urugero, <p>
) hamwe .blockquote-footer
nishuri. Witondere kuzinga izina ryinkomoko yakazi <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>
Guhuza
Koresha inyandiko zingirakamaro nkuko bikenewe kugirango uhindure guhuza bloquote yawe.
<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>
Urutonde
Unstyled
Kuraho ibisanzwe list-style
n'ibumoso kuruhande rwibintu (abana bahita gusa). Ibi bireba gusa abana bahita batondekanya ibintu , bivuze ko uzakenera kongeramo urwego kurutonde urwo arirwo rwose.
- Uru ni urutonde.
- Bigaragara neza.
- Muburyo, biracyari urutonde.
- Nyamara, ubu buryo bukoreshwa gusa mubintu byabana.
- Urutonde rwatoranijwe:
- ntaho bihuriye nubu buryo
- Azakomeza kwerekana isasu
- kandi ufite ibumoso bukwiye
- Ibi birashobora kuza bikenewe mubihe bimwe.
<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>
Umurongo
Kuraho urutonde rwamasasu hanyuma ukoreshe urumuri margin
hamwe nuruvange rwibyiciro bibiri, .list-inline
na .list-inline-item
.
- Uru ni urutonde.
- Undi.
- Ariko byerekanwe kumurongo.
<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>
Ibisobanuro urutonde
Huza amagambo nibisobanuro bitambitse ukoresheje sisitemu ya gride ya sisitemu yagenwe mbere (cyangwa ivangavanga). Kumagambo maremare, urashobora guhitamo kongeramo urwego .text-truncate
rwo kugabanya inyandiko hamwe na ellipsis.
- Urutonde rwibisobanuro
- Urutonde rwibisobanuro rwiza rwo gusobanura amagambo.
- Igihe
-
Ibisobanuro kuri iryo jambo.
Kandi bimwe mubindi bisobanuro byanditse.
- Irindi jambo
- Ubu busobanuro ni bugufi, ntabwo rero paragarafu yinyongera cyangwa ikindi kintu cyose.
- Ijambo ryaciwe
- Ibi birashobora kuba ingirakamaro mugihe umwanya ari muto. Ongeraho ellipsis kumpera.
- Icyari
-
- Urutonde rwibisobanuro
- Numvise ukunda urutonde rwibisobanuro. Reka nshyireho urutonde rwibisobanuro imbere yurutonde rwawe.
<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>
Ingano yimyandikire
Muri Bootstrap 5, twashoboje ingano yimyandikire yitabiriwe muburyo budasanzwe, twemerera inyandiko kwipimisha muburyo busanzwe mubikoresho nubunini bwa portport. Gira icyo ureba kuri page ya RFS kugirango umenye uko ibi bikora.
Sass
Ibihinduka
Imitwe ifite bimwe byahinduwe kubunini no gutandukanya.
$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;
Ibintu bitandukanye byandika byanditse hano no muri Reboot nabyo bifite impinduka zabigenewe.
$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;
Imvange
Hano nta mvange zabugenewe zo kwandika, ariko Bootstrap ikoresha Imyandikire Yerekana (RFS) .