in English

Imyandikire

Inyandiko n'ingero kuri Bootstrap yimyandikire, harimo igenamiterere ryisi, imitwe, inyandiko yumubiri, urutonde, nibindi byinshi.

Kuriyi page

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 ukoresheje $link-color.
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

html

<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

html

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

Erekana 1

Erekana 2

Erekana 3

Erekana 4

Erekana 5

Erekana 6

<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-sizesikarita ya Sass nibihinduka bibiri, $display-font-weightna $display-line-height.

Erekana imitwe irashobora guhindurwa hakoreshejwe ibintu bibiri bihinduka, $display-font-familykandi $display-font-style.

$display-font-sizes: (
  1: 5rem,
  2: 4.5rem,
  3: 4rem,
  4: 3.5rem,
  5: 3rem,
  6: 2.5rem
);

$display-font-family: null;
$display-font-style:  null;
$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.

html

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

html

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

Yerekana inyandiko irangwa cyangwa yamuritswe kugirango yerekanwe cyangwa intego.
Yerekana-ibitekerezo-bito hamwe nicapiro rito, nkuburenganzira hamwe ninyandiko zemewe.
<s>byerekana ikintu kitagifite akamaro cyangwa kitagikwiye.
Yerekana umwanya munini winyandiko igomba gutangwa muburyo bwerekana ko ifite ibisobanuro bitari inyandiko.

Niba ushaka gutunganya inyandiko yawe, ugomba gukoresha amasomo akurikira aho:

.markKuri Koresha Nka Nka Nka .
.smallKuri Koresha Nka Nka Nka .
.text-decoration-underlineKuri Koresha Nka Nka Nka .
.text-decoration-line-throughKuri Koresha Nka Nka Nka <s>.

Mugihe biterekanwa hejuru, umva gukoresha no muri HTML5. igamije kwerekana amagambo cyangwa interuro utagaragaje akamaro kiyongereye, mugihe 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 .initialismmu magambo ahinnye yimyandikire ntoya.

attr

HTML

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.

html

<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, ) hamwe .blockquote-footernishuri. Witondere kuzinga izina ryinkomoko yakazi <cite>nayo.

Amagambo azwi cyane, akubiye mubintu byahagaritswe.

html

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

Amagambo azwi cyane, akubiye mubintu byahagaritswe.

html

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

Amagambo azwi cyane, akubiye mubintu byahagaritswe.

html

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

html

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

html

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

html

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

// fusv-disable
$hr-bg-color:                 null; // Deprecated in v5.2.0
$hr-height:                   null; // Deprecated in v5.2.0
// fusv-enable

$hr-border-color:             null; // Allows for inherited colors
$hr-border-width:             $border-width;
$hr-opacity:                  .25;

$legend-margin-bottom:        .5rem;
$legend-font-size:            1.5rem;
$legend-font-weight:          null;

$dt-font-weight:              $font-weight-bold;

$list-inline-padding:         .5rem;

$mark-padding:                .1875em;
$mark-bg:                     $yellow-100;

Imvange

Hano nta mvange zabugenewe zo kwandika, ariko Bootstrap ikoresha Imyandikire Yerekana (RFS) .