in English

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-familykuri 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-basena $line-height-baseIbiranga Nka Imyandikire Yibanze Kuri Kuri <body>.
Shiraho ibara ryisi yose unyuze $link-colorkandi ushyire kumurongo uhuza gusa :hover.
Koresha $body-bggushiraho a background-colorkuri <body>( #fffkubisanzwe).

Izi njyana zirashobora kuboneka imbere _reboot.scss, kandi impinduka zisi zirasobanuwe muri _variables.scss. Witondere $font-size-basegushiramo 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>

.h1binyuze .h6mumasomo 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. Wibuke iyi mitwe ntabwo isubiza muburyo budasanzwe, ariko birashoboka gushoboza ingano yimyandikire .

Erekana 1

Erekana 2

Erekana 3

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

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>

.markn'amasomo .smallnayo arahari kugirango akoreshe uburyo bumwe nkigihe <mark>kandi <small>yirinze ikintu icyo aricyo cyose kidakenewe ibisobanuro tagi yazana.

Mugihe biterekanwa hejuru, umva gukoresha <b>no <i>muri HTML5. <b>igamije kwerekana amagambo cyangwa interuro uterekanye akamaro kiyongereye mugihe <i>ahanini ari ijwi, amagambo ya tekiniki, nibindi.

Ibikorwa byingirakamaro

Hindura inyandiko ihuza, uhindure, imiterere, uburemere, namabara 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 .initialismmu 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 class="mb-0">A well-known quote, contained in a blockquote element.</p>
</blockquote>

Kwita izina isoko

Ongeraho a <footer class="blockquote-footer">kugirango umenye inkomoko. Kuzuza izina ryinkomoko akazi <cite>.

Amagambo azwi cyane, akubiye mubintu byahagaritswe.

Umuntu uzwi muri Source Umutwe

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

Guhuza

Koresha inyandiko zingirakamaro nkuko bikenewe kugirango uhindure guhuza bloquote yawe.

Amagambo azwi cyane, akubiye mubintu byahagaritswe.

Umuntu uzwi muri Source Umutwe

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

Amagambo azwi cyane, akubiye mubintu byahagaritswe.

Umuntu uzwi muri Source Umutwe

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

Urutonde

Unstyled

Kuraho ibisanzwe list-stylen'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 marginhamwe nuruvange rwibyiciro bibiri, .list-inlinena .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-truncaterwo 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

Nko kuri v4.3.0, Bootstrap yoherejwe hamwe nuburyo bwo gukora ingano yimyandikire yitabiriwe, yemerera inyandiko kwipimisha muburyo busanzwe mubikoresho nubunini bwo kureba. RFS irashobora guhindurwa muguhindura $enable-responsive-font-sizesSass ihinduka kuri trueno gusubiramo Bootstrap.

Kugirango dushyigikire RFS , dukoresha Sass ivanga kugirango dusimbuze ibintu bisanzwe font-size. Ingano yimyandikire yubunini izakusanyirizwa calc()mumikorere hamwe no kuvanga remno kureba ibice kugirango bishoboze imyitwarire yo gupima. Ibindi bijyanye na RFS nibisobanuro byayo murashobora kubisanga mububiko bwayo bwa GitHub .