Source

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.

Dipeakanyo tša lefase ka bophara

Bootstrap e beakanya pontšho ya motheo ya lefase ka bophara, thaepo, 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 yeo e akaretšago kudu le yeo e fihlelelwago, re tšea gore 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-colorgomme o diriše methalo ya kgokagano fela go :hover.
Š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

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

Eta pele

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

Vivamus sagittis lacus vel augue laoreet rutrum faucibus motšweletši wa dilo. Duis mollis, est yeo e sego ya commodo luxus.

<p class="lead">
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</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>

.markle .smalldiklase le tšona di a hwetšagala go diriša mekgwa ye e swanago le <mark>le <small>mola go efoga ditlamorago dife goba dife tša semantiki tše di sa nyakegego tšeo dithepo di bego di tla di tliša.

Le ge e sa bontšhwa ka godimo, ikwe o lokologile go šomiša <b>le <i>ka go HTML5. <b>e reretšwe go tšweletša mantšu goba dipolelwana ntle le go fetišetša bohlokwa bja tlaleletšo mola <i>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, le mmala ka didirišwa tša rena tša sengwalwa le didirišwa tša mebala .

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.

Lorem ipsum dolor lula amet, consectetur adipiscing elit. Palo e feletseng posuere erat a ante.

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Go reela mothopo leina

Oketša a <footer class="blockquote-footer">bakeng sa go hlaola mothopo. Phuthelela leina la mošomo wa mothopo ka go <cite>.

Lorem ipsum dolor lula amet, consectetur adipiscing elit. Palo e feletseng posuere erat a ante.

Motho yo a tumilego ka go Source Title

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

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.

Lorem ipsum dolor lula amet, consectetur adipiscing elit. Palo e feletseng posuere erat a ante.

Motho yo a tumilego ka go Source Title

<blockquote class="blockquote text-center">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Lorem ipsum dolor lula amet, consectetur adipiscing elit. Palo e feletseng posuere erat a ante.

Motho yo a tumilego ka go Source Title

<blockquote class="blockquote text-right">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

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.

Lorem ipsum dolor dula amet
Consectetur adipiscing ya maemo a godimo
Palo e feletseng molestie lorem ka massa
Facilisis ka pretium nisl aliquet
Nulla volutpat aliquam ya go swana le yona
- Phasellus iaculis ya go swana le yona
- Purus sodales di-ultricies
- Vestibulum laoreet ya go rwala dithoto sem
- A k tristique libero volutpat ka
Faucibus porta lacus e le 'ngoe e le 'ngoe
Aenean dula amet erat nunc
Eget porttitor lorem ya go rwala dilo

<ul class="list-unstyled">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
      <li>Ac tristique libero volutpat at</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</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.

Lorem ipsum ya go swana le yona
Phasellus ya go swana le yona
Nula volutpat

<ul class="list-inline">
  <li class="list-inline-item">Lorem ipsum</li>
  <li class="list-inline-item">Phasellus iaculis</li>
  <li class="list-inline-item">Nulla volutpat</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.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit e seng mi porta gravida ka eget metus.

Malesuada porta ya go tswalela

Etiam porta sem malesuada ea mollis euismod.

Polelo e kgaotšwego e kgaotšwe

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa feela dula amet risus.

Go dira dihlaga

Lenaneo la tlhalošo ye e tsentšwego ka gare ga sehlaga: Posuere ya Aene, tortor sed ya thogako feugiat, mohlokomedi augue blandit moitlami.

<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">Euismod</dt>
  <dd class="col-sm-9">
    <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
    <p>Donec id elit non mi porta gravida at eget metus.</p>
  </dd>

  <dt class="col-sm-3">Malesuada porta</dt>
  <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</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">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
    </dl>
  </dd>
</dl>

Thaepo ya go arabela

Thaepo ya go arabela e šupa go go lekanyetša sengwalwa le dikarolo ka go no beakanya elemente ya modu ka font-sizegare ga lelokelelo la dipotšišo tša boraditaba. Bootstrap ga e go direle se, eupša go bonolo ka mo go lekanego go e oketša ge e ba o e nyaka.

Mohlala wa yona ke wo ka tirišo. Kgetha font-sizedipotšišo le ge e le dife tša s le tša boraditaba tšeo o di nyakago.

html {
  font-size: 1rem;
}

@include media-breakpoint-up(sm) {
  html {
    font-size: 1.2rem;
  }
}

@include media-breakpoint-up(md) {
  html {
    font-size: 1.4rem;
  }
}

@include media-breakpoint-up(lg) {
  html {
    font-size: 1.6rem;
  }
}