Go thaepa

Ditokomane le mehlala ya go thaepa ya Bootstrap, go akaretšwa dipeakanyo tša lefase ka bophara, dihlogo, sengwalwa sa mmele, mananeo, le tše dingwe.

Letlakaleng le

Dipeakanyo tša lefase ka bophara

Bootstrap e beakanya pontšho ya motheo ya lefase ka bophara, go thaepa, le mekgwa ya kgokagano. Ge go nyakega taolo ye ntši, hlahloba diklase tša mohola wa sengwalwa .

Šomiša mokgobo wa fonte ya setlogo yeo e kgethago ye kaone font-familyya OS ye nngwe le ye nngwe le sedirišwa.
Bakeng sa tekanyo ya mohuta ye e akaretšago kudu le ye e fihlelelwago, re šomiša modu wa go se fetoge wa sephephediši font-size(ka tlwaelo 16px) gore baeti ba kgone go tlwaetša dilo tša bona tša go se fetoge tša sephephediši ge go nyakega.
Šomiša $font-family-base, $font-size-base, le $line-height-basedika bjalo ka motheo wa rena wa go thaepa wo o dirišitšwego go <body>.
Beakanya mmala wa kgokagano ya lefase ka bophara ka $link-color.
Šomiša $body-bggo beakanya a background-colorgodimo ga <body>( #fffka go ikemela).

Mekgwa ye e ka hwetšwa ka gare ga _reboot.scss, gomme diphetogo tša lefase ka bophara di hlalošitšwe go _variables.scss. Kgonthiša gore o $font-size-basetsenya rem.

Dihlogo tša ditaba

Dihlogo ka moka tša HTML, <h1>go fihla go <h6>, di a hwetšagala.

Hlogo ya ditaba	Mohlala
`<h1></h1>`	h1. Hlogo ya bootstrap
`<h2></h2>`	h2. Hlogo ya bootstrap
`<h3></h3>`	h3. Hlogo ya bootstrap
`<h4></h4>`	h4. Hlogo ya bootstrap
`<h5></h5>`	h5. Hlogo ya bootstrap
`<h6></h6>`	h6. Hlogo ya 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>

.h1ka .h6diklase le tšona di a hwetšagala, bakeng sa ge o nyaka go swana le setaele sa fonte ya hlogo eupša o sa kgone go šomiša elemente ya HTML ye e amanago le yona.

h1. Hlogo ya bootstrap

h2. Hlogo ya bootstrap

h3. Hlogo ya bootstrap

h4. Hlogo ya bootstrap

h5. Hlogo ya bootstrap

h6. Hlogo ya 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>

Go dira gore dihlogo di be tša gago

Šomiša diklase tša mohola tše di akareditšwego go hlama gape sengwalwa se se nnyane sa hlogo ya bobedi go tšwa go Bootstrap 3.

Hlogo ya pontšho ya go makatša Ka sengwalwa sa bobedi se se fifetšego

<h3>
  Fancy display heading
  <small class="text-muted">With faded secondary text</small>
</h3>

Bontšha dihlogo

Dielemente tša hlogo ya setšo di hlamilwe go šoma gabotse ka namang ya diteng tša gago tša letlakala. Ge o nyaka hlogo gore e tšwelele, nagana ka go diriša hlogo ya pontšho —mokgwa o mogolo wa hlogo yeo e nago le kgopolo e nyenyane.

Pontšo 1.

Pontšo 2.

Pontšo 3.1

Pontšo 4.1

Pontšo 5.1

Pontšo 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>

Dihlogo tša pontšho di beakantšwe ka $display-font-sizesmmapa wa Sass le diphetogo tše pedi, $display-font-weightle $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;

Eta pele

Dira gore serapa se tšwelele ka go oketša .lead.

Ye ke serapa se se eteletšego pele. E tšwelela go tšwa dirapeng tša ka mehla.

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</p>

Dielemente tša sengwalwa sa ka gare ga mothaladi

Setaele sa dielemente tše di tlwaelegilego tša HTML5 tša ka gare ga mothaladi.

O ka šomiša thepo ya leswao golaetšasengwalwa.

~~Mothaladi wo wa sengwalwa o reretšwe go swarwa bjalo ka sengwalwa seo se phumotšwego.~~

~~Mothaladi wo wa sengwalo o reretšwe go swarwa bjalo ka wo o sa hlwego o nepagala.~~

Mothaladi wo wa sengwalwa o reretšwe go swarwa bjalo ka tlaleletšo go tokumente.

Mothaladi wo wa sengwalwa o tla tšweletša bjalo ka ge o thaletšwe.

Mothaladi wo wa sengwalwa o reretšwe go swarwa bjalo ka mongwalo wo mobotse.

Mothaladi wo o fetoletšwe bjalo ka mongwalo wo motenya.

Mothaladi wo o fetoletšwe bjalo ka sengwalwa se se sekamego.

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

Hlokomela gore dithegi tšeo di swanetše go šomišwa ka morero wa semantiki:

e emela sengwalwa seo se swailwego goba se hlaotšwego bakeng sa merero ya tšhupetšo goba ya noutu.
e emela ditshwayotshwayo tša ka mahlakoreng le mongwalo wo monnyane, go swana le tokelo ya ngwalollo le sengwalwa sa molao.
<s>e emela elemente yeo e sa hlwego e le ya maleba goba yeo e sego ya nepagala.
e emela sebaka sa sengwalwa sa ka gare ga mothaladi seo se swanetšego go tšweletšwa ka tsela yeo e laetšago gore se na le tlhalošo yeo e sego ya sengwalwa.

Ge o nyaka go setaele sengwalwa sa gago, o swanetše go šomiša diklase tše di latelago go e na le moo:

.marke tla diriša mekgwa ye e swanago le ya .
.smalle tla diriša mekgwa ye e swanago le ya .
.text-decoration-underlinee tla diriša mekgwa ye e swanago le ya .
.text-decoration-line-throughe tla diriša mekgwa ye e swanago le ya <s>.

Le ge e sa bontšhwa ka godimo, ikwe o lokologile go šomiša le ka go HTML5. e reretšwe go tšweletša mantšu goba dipolelwana ntle le go fetišetša bohlokwa bja tlaleletšo, mola e le kudu ya lentšu, mareo a sethekniki, bjalobjalo.

Didirišwa tša sengwalwa

Fetoša go logaganya ga sengwalwa, fetoša, setaele, boima, bophagamo bja mola, mokgabišo le mmala ka didirišwa tša rena tša sengwalwa le didirišwa tša mmala .

Dikhutsofatšo

Stylized phethagatšo ya HTML ya <abbr>elemente bakeng sa dikgutsufatšo le acronyms ho bontša atoloswa phetolelo ka hover. Dikhutsofatšo di na le thalela ya go se fetoge gomme di hwetša khesara ya thušo go fa seemo sa tlaleletšo go hover le go badiriši ba theknolotši ya go thuša.

Oketša .initialismgo khutsofatšo ya bogolo bja fonte bjo bonyenyane go se nene.

attr

HTML

<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>

Ditsopolwa tša go thibela

Bakeng sa go tsopola diboloko tša diteng go tšwa mothopong wo mongwe ka gare ga tokumente ya gago. Phuthelela HTML<blockquote class="blockquote"> efe goba efe bjalo ka setsopolwa.

Setsopolwa se se tsebegago, seo se lego ka gare ga elemente ya blockquote.

<blockquote class="blockquote">
  <p>A well-known quote, contained in a blockquote element.</p>
</blockquote>

Go reela mothopo leina

Sebopego sa HTML se nyaka gore kabo ya blockquote e bewe ka ntle ga <blockquote>. Ge o fana ka kabo, phuthela ya gago <blockquote>ka gare ga a <figure>gomme o šomiše a <figcaption>goba elemente ya maemo a boloko (mohlala, ) le .blockquote-footersehlopha. Kgonthiša gore o phuthela leina la mošomo wa mothopo ka gare <cite>gape.

Setsopolwa se se tsebegago, seo se lego ka gare ga elemente ya blockquote.

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

Go logaganya

Šomiša didirišwa tša sengwalwa ka moo go nyakegago go fetoša go logaganya ga setsopolwa sa gago sa go thibela.

Setsopolwa se se tsebegago, seo se lego ka gare ga elemente ya blockquote.

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

Setsopolwa se se tsebegago, seo se lego ka gare ga elemente ya blockquote.

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

Mananeo

E sa setaele

Tlosa list-stylemoedi wa kamehla le wa nngele ho dintho tsa lenane (bana ba kapele feela). Se se šoma fela go dilo tša lenaneo la bana ba ka pela , go ra gore o tla swanelwa ke go oketša sehlopha bakeng sa mananeo afe goba afe ao a tsentšwego ka gare ga sehlaga gape.

Le ke lenaneo.
E bonala e sa setaele ka mo go feletšego.
Ka sebopego, e sa le lenaneo.
Le ge go le bjalo, setaele se se šoma fela go dielemente tša ngwana tša kgauswi.
Mananeo ao a tsentšwego ka gare ga dihlaga:
- ga di amege ke setaele se
- e sa tla bontšha kulo
- gomme ba be le mošito wa maleba wa nngele
Se se ka ba se sa dutše se thuša maemong a mangwe.

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

Ka gare ga mothaladi

Tloša dikulo tša lenaneo gomme o diriše seetša se sengwe marginka kopanyo ya diklase tše pedi, .list-inlinegomme .list-inline-item.

Ye ke selo sa lenaneo.
Le e nngwe e nngwe.
Eupša di bontšhwa ka gare ga mothaladi.

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

Tlhaloso lenaneo lolamisiwa ga

Logaganya mareo le ditlhalošo ka go rapalala ka go šomiša diklase tše di hlalošitšwego e sa le pele tša tshepedišo ya rena ya keriti (goba di-mixin tša semantiki). Bakeng sa mabaka a matelele, o ka oketša ka boikgethelo .text-truncatesehlopha go kgaola sengwalwa ka ellipsis.

Mananeo a tlhaloso

Lenaneo la tlhalošo le phethagetše bakeng sa go hlaloša mareo.

Lereo

Tlhaloso ya lereo le.

Le sengwalwa se sengwe gape sa tlhalošo ya seswari sa lefelo.

Lereo le lengwe

Tlhaloso ye ke ye kopana, ka fao ga go na dirapa tše di oketšegilego goba selo le ge e le sefe.

Polelo e kgaotšwego e kgaotšwe

Se se ka ba le mohola ge sekgoba se le thata. E tlaleletša ka ellipsis mafelelong.

Go dira dihlaga

Lenaneo la tlhalošo ye e tsentšwego ka gare ga sehlaga: Ke kwele o rata mananeo a tlhalošo. E re ke bee lenaneo la tlhalošo ka gare ga lenaneo la gago la tlhalošo.

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

Bogolo bja difonte bjo bo arabelago

Ka go Bootstrap 5, re kgontšhitše bogolo bja difonte bjo bo arabelago ka go ikemela, re dumelela sengwalwa go lekanya ka tlhago kudu go ralala le bogolo bja sedirišwa le bja lefelo la go lebelela. Lebelela letlakala la RFS go hwetša gore se se šoma bjang.

Sass

Diphetogo

Dihlogo di na le diphetogo tše dingwe tše di kgethegilego tša go beakanya bogolo le sekgoba.

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

Dielemente tša go thaepa tše di fapafapanego tšeo di akaretšwago mo le go Reboot le tšona di na le diphetogo tše di ineetšego.

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

Ditswaki

Ga go na di-mixin tše di ineetšego bakeng sa go thaepa, eupša Bootstrap e diriša Responsive Font Sizing (RFS) .