Source

Makhadi

Makhadi ya Bootstrap ya nyika xigwitsirisi xa nhundzu lexi cinca-cincaka no andlariwa lexi nga na swihlawulekisi swo tala na swihlawulekisi.

Hi

Khadi i xigwitsirisi xa nhundzu lexi cinca-cincaka ni lexi andlariweke . Yi katsa swihlawulekisi swa tinhloko-mhaka na le hansi, swilo swo hambana-hambana, mihlovo ya le ndzhaku ya mongo, na swihlawulekisi swa matimba swa nkombiso. Loko u tolovelane na Bootstrap 3, makhadi ma siva tiphaneleni ta hina ta khale, swihlovo ni swifaniso leswitsongo. Ntirho lowu fanaka ni wa swiphemu sweswo wu kumeka tanihi titlilasi ta swihundzuluxi swa makhadi.

Xikombiso

Makhadi ya akiwile hi ku fungha kutsongo na switayele hilaha swi nga kotekaka hakona, kambe ya ha kota ku tisa thani ya vulawuri na ku cinca-cinca. Ti akiwile hi flexbox, ti nyika ku ringanana ko olova naswona ti hlangana kahle na swiphemu swin’wana swa Bootstrap. A va na swona marginhi ku tiyimisela, kutani tirhisa switirhisiwa swo hambana -hambana hilaha swi lavekaka hakona.

Laha hansi ku na xikombiso xa khadi ra xisekelo leri nga na swilo leswi pfanganisiweke na ku anama loku nga cinciki. Makhadi a ma na ku anama loku nga cinciki ku sungula, hikwalaho hi ntumbuluko ma ta tata ku anama loku heleleke ka xiaki xa wona xa mutswari. Leswi swi endliwa hi ku olova hi tindlela ta hina to hambana-hambana to pima mpimo .

100%x180 yi va kona
Xihloko xa khadi

Tsalwa rin’wana ra xikombiso xa xihatla ro aka eka nhloko-mhaka ya khadi ni ku endla xiphemu lexikulu xa leswi nga endzeni ka khadi.

Yana kun’wana 
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Tinxaka ta swilo leswi nga endzeni

Makhadi ma seketela swilo swo hambana-hambana, ku katsa ni swifaniso, matsalwa, mintlawa ya nxaxamelo, swihlanganisi ni swin’wana. Laha hansi ku na swikombiso swa leswi seketeriwaka.

Miri

Xiaki xa khadi i .card-body. Yi tirhise nkarhi wun’wana ni wun’wana loko u lava xiphemu lexi nga ni swilo swo tala endzeni ka khadi.

Leri i tsalwa rin’wana endzeni ka miri wa khadi. 
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Swihloko, matsalwa ni swihlanganisi

Swihloko swa makhadi swi tirhisiwa hi ku engetela .card-titleeka <h*>thegi. Hi ndlela leyi fanaka, swihlanganisi swa engeteriwa ni ku vekiwa etlhelo ka xin’wana ni xin’wana hi ku engetela .card-linkeka <a>thegi.

Swihloko leswitsongo swi tirhisiwa hi ku engetela a .card-subtitleeka <h*>thegi. Loko the .card-titlena .card-subtitleswilo swi vekiwile eka .card-bodynchumu wo karhi, nhlokomhaka ya khadi na nhlokomhaka ya le hansi swi ringanisiwa kahle.

Xihloko xa khadi
Xihloko xa khadi

Tsalwa rin’wana ra xikombiso xa xihatla ro aka eka nhloko-mhaka ya khadi ni ku endla xiphemu lexikulu xa leswi nga endzeni ka khadi.

Xihlanganisi xa khadi Xihlanganisi xin’wana 
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Swifaniso

.card-img-topyi veka xifaniso ehenhla ka khadi. Hi .card-text, tsalwa ri nga engeteriwa eka khadi. Tsalwa endzeni .card-textri nga tlhela ri endliwa xitayili hi tithegi ta HTML ta ntolovelo.

Xifaniso xa xifunengeto [100%x180].

Tsalwa rin’wana ra xikombiso xa xihatla ro aka eka nhloko-mhaka ya khadi ni ku endla xiphemu lexikulu xa leswi nga endzeni ka khadi.

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

Xaxameta mintlawa

Endla minxaxamelo ya swilo leswi nga endzeni eka khadi leri nga ni ntlawa wa nxaxamelo wa ku hlantswa.

  • Cras ntsena odio
  • Dapibus ac xitirhisiwa eka
  • Vestibulum eka eros
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>
Ku kombisiwa
  • Cras ntsena odio
  • Dapibus ac xitirhisiwa eka
  • Vestibulum eka eros
<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Sinki ya le khixini

Hlanganisa no fambisana na tinxaka to tala ta swilo ku endla khadi leri u ri lavaka, kutani u lahlela hinkwaswo kwalaho. Laha hansi ku kombisiwe switayele swa swifaniso, swibokisana, switayele swa matsalwa ni ntlawa wa nxaxamelo—hinkwaswo swi phutseriwe hi khadi ra ku anama loku nga cinciki.

Xifaniso xa xifunengeto [100%x180].
Xihloko xa khadi

Tsalwa rin’wana ra xikombiso xa xihatla ro aka eka nhloko-mhaka ya khadi ni ku endla xiphemu lexikulu xa leswi nga endzeni ka khadi.

  • Cras ntsena odio
  • Dapibus ac xitirhisiwa eka
  • Vestibulum eka eros
Xihlanganisi xa khadi Xihlanganisi xin’wana 
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Engetela nhlokomhaka leyi nga hlawuriwa na/kumbe nhlokomhaka ya le hansi endzeni ka khadi.

Ku kombisiwa
Vutshunguri byo hlawuleka bya xihloko

Hi tsalwa ro seketela laha hansi tanihi xiletelo xa ntumbuluko eka nhundzu yo engetela.

Yana kun’wana 
<div class="card">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Tinhlokomhaka ta makhadi ti nga endliwa xitayili hi ku engetela .card-headereka <h*>swiaki.

Ku kombisiwa
Vutshunguri byo hlawuleka bya xihloko

Hi tsalwa ro seketela laha hansi tanihi xiletelo xa ntumbuluko eka nhundzu yo engetela.

Yana kun’wana 
<div class="card">
  <h5 class="card-header">Featured</h5>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
Ntshaho

Lorem ipsum dolor tshama amet, consectetur adipiscing xiyimo xa le henhla. Nhlayo leyi heleleke ya posuere erat a ante.

Munhu loyi a dumeke eka Source Title 
<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>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>
  </div>
</div>
Ku kombisiwa
Vutshunguri byo hlawuleka bya xihloko

Hi tsalwa ro seketela laha hansi tanihi xiletelo xa ntumbuluko eka nhundzu yo engetela.

Yana kun’wana
2 wa masiku lama hundzeke 
<div class="card text-center">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer text-muted">
    2 days ago
  </div>
</div>

Ku pima mpimo

Makhadi ya teka ku nga ri na ku kongoma widthku sungula, kutani ya ta va ya anama hi 100% handle ka loko swi boxiwile hi ndlela yin’wana. U nga cinca leswi tanihilaha swi lavekaka hakona hi CSS ya ntolovelo, titlilasi ta gridi, mixins ya grid Sass, kumbe switirhisiwa.

Hi ku tirhisa grid markup

Hi ku tirhisa gridi, phutsela makhadi hi tikholomu ni tilayini loko swi laveka.

Vutshunguri byo hlawuleka bya xihloko

Hi tsalwa ro seketela laha hansi tanihi xiletelo xa ntumbuluko eka nhundzu yo engetela.

Yana kun’wana
Vutshunguri byo hlawuleka bya xihloko

Hi tsalwa ro seketela laha hansi tanihi xiletelo xa ntumbuluko eka nhundzu yo engetela.

Yana kun’wana 
<div class="row">
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

Ku tirhisa switirhisiwa swa vukorhokeri

Tirhisa switirhisiwa swa hina swi nga ri swingani swa ku pima mpimo leswi nga kona leswaku u hatla u veka ku anama ka khadi.

Xihloko xa khadi

Hi tsalwa ro seketela laha hansi tanihi xiletelo xa ntumbuluko eka nhundzu yo engetela.

Konopa
Xihloko xa khadi

Hi tsalwa ro seketela laha hansi tanihi xiletelo xa ntumbuluko eka nhundzu yo engetela.

Konopa 
<div class="card w-75">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

<div class="card w-50">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

Ku tirhisa CSS ya ntolovelo

Tirhisa CSS ya ntolovelo eka switayele swa wena kumbe tanihi switayele swa le ndzeni ka layini ku veka ku anama.

Vutshunguri byo hlawuleka bya xihloko

Hi tsalwa ro seketela laha hansi tanihi xiletelo xa ntumbuluko eka nhundzu yo engetela.

Yana kun’wana 
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Ku ringanisa matsalwa

U nga cinca hi ku hatlisa ku ringanisa matsalwa ya khadi rihi na rihi—hi ku helela kumbe swiphemu swo karhi—hi titlilasi ta hina to ringanisa matsalwa .

Vutshunguri byo hlawuleka bya xihloko

Hi tsalwa ro seketela laha hansi tanihi xiletelo xa ntumbuluko eka nhundzu yo engetela.

Yana kun’wana
Vutshunguri byo hlawuleka bya xihloko

Hi tsalwa ro seketela laha hansi tanihi xiletelo xa ntumbuluko eka nhundzu yo engetela.

Yana kun’wana
Vutshunguri byo hlawuleka bya xihloko

Hi tsalwa ro seketela laha hansi tanihi xiletelo xa ntumbuluko eka nhundzu yo engetela.

Yana kun’wana 
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-center" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-right" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Engetela ku famba-famba ko karhi eka nhloko-mhaka ya khadi (kumbe xibokisana) hi swiphemu swa nav swa Bootstrap .

Vutshunguri byo hlawuleka bya xihloko

Hi tsalwa ro seketela laha hansi tanihi xiletelo xa ntumbuluko eka nhundzu yo engetela.

Yana kun’wana 
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
Vutshunguri byo hlawuleka bya xihloko

Hi tsalwa ro seketela laha hansi tanihi xiletelo xa ntumbuluko eka nhundzu yo engetela.

Yana kun’wana 
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Swifaniso

Makhadi ma katsa tindlela ti nga ri tingani to tirha hi swifaniso. Hlawula eka ku engetela “swiphepherhele swa swifaniso” emakumu hamambirhi ya khadi, ku funengeta swifaniso hi leswi nga endzeni ka khadi kumbe ku nghenisa ntsena xifaniso eka khadi.

Swifunengeto swa swifaniso

Ku fana ni tinhloko-mhaka ni le hansi, makhadi ma nga ha katsa “swiphepherhele swa swifaniso” swa le henhla ni swa le hansi—swifaniso leswi nga ehenhla kumbe ehansi ka khadi.

100%x180 yi va kona
Xihloko xa khadi

Leri i khadi ro anama leri nga na tsalwa ro seketela laha hansi tanihi xiletelo xa ntumbuluko eka nhundzu yo engetela. Nhundzu leyi yi lehe nyana.

Ku hetelela ku pfuxetiwa 3 mins ago

Xihloko xa khadi

Leri i khadi ro anama leri nga na tsalwa ro seketela laha hansi tanihi xiletelo xa ntumbuluko eka nhundzu yo engetela. Nhundzu leyi yi lehe nyana.

Ku hetelela ku pfuxetiwa 3 mins ago

100%x180 yi va kona 
<div class="card mb-3">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
  <img class="card-img-bottom" src="..." alt="Card image cap">
</div>

Swifunengeto swa swifaniso

Pfuxeta xifaniso xi va ndzhaku ka khadi ivi u funengeta tsalwa ra khadi ra wena. Ku ya hi xifaniso, u nga ha lava kumbe u nga lavi switayele leswi engetelekeke kumbe switirhisiwa.

100%x270 yi va kona
Xihloko xa khadi

Leri i khadi ro anama leri nga na tsalwa ro seketela laha hansi tanihi xiletelo xa ntumbuluko eka nhundzu yo engetela. Nhundzu leyi yi lehe nyana.

Ku hetelela ku pfuxetiwa 3 mins ago

<div class="card bg-dark text-white">
  <img class="card-img" src="..." alt="Card image">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text">Last updated 3 mins ago</p>
  </div>
</div>

Switayili swa makhadi

Makhadi ma katsa tindlela to hambana-hambana to cinca-cinca swifaniso swa wona swa le ndzhaku, mindzilakano ni muvala wa wona.

Ndzandzelelano na muvala

Tirhisa switirhisiwa swa matsalwa ni swa le ndzhaku leswaku u cinca ndlela leyi khadi ri langutekaka ha yona.

Nhlokomhaka
Nhlokomhaka ya khadi ra le hansi

Tsalwa rin’wana ra xikombiso xa xihatla ro aka eka nhloko-mhaka ya khadi ni ku endla xiphemu lexikulu xa leswi nga endzeni ka khadi.

Nhlokomhaka
Xihloko xa khadi ra vumbirhi

Tsalwa rin’wana ra xikombiso xa xihatla ro aka eka nhloko-mhaka ya khadi ni ku endla xiphemu lexikulu xa leswi nga endzeni ka khadi.

Nhlokomhaka
Xihloko xa khadi ra ku humelela

Tsalwa rin’wana ra xikombiso xa xihatla ro aka eka nhloko-mhaka ya khadi ni ku endla xiphemu lexikulu xa leswi nga endzeni ka khadi.

Nhlokomhaka
Xihloko xa khadi ra khombo

Tsalwa rin’wana ra xikombiso xa xihatla ro aka eka nhloko-mhaka ya khadi ni ku endla xiphemu lexikulu xa leswi nga endzeni ka khadi.

Nhlokomhaka
Nhlokomhaka ya khadi ra xilemukiso

Tsalwa rin’wana ra xikombiso xa xihatla ro aka eka nhloko-mhaka ya khadi ni ku endla xiphemu lexikulu xa leswi nga endzeni ka khadi.

Nhlokomhaka
Xihloko xa khadi ra info

Tsalwa rin’wana ra xikombiso xa xihatla ro aka eka nhloko-mhaka ya khadi ni ku endla xiphemu lexikulu xa leswi nga endzeni ka khadi.

Nhlokomhaka
Xihloko xa khadi ro voninga

Tsalwa rin’wana ra xikombiso xa xihatla ro aka eka nhloko-mhaka ya khadi ni ku endla xiphemu lexikulu xa leswi nga endzeni ka khadi.

Nhlokomhaka
Xihloko xa khadi ra munyama

Tsalwa rin’wana ra xikombiso xa xihatla ro aka eka nhloko-mhaka ya khadi ni ku endla xiphemu lexikulu xa leswi nga endzeni ka khadi.

<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card bg-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
Ku hundzisela nhlamuselo eka thekinoloji yo pfuneta

Ku tirhisa muvala ku engetela nhlamuselo swi nyika ntsena xikombiso xa xivono, lexi nga ta ka xi nga hundziseriwi eka vatirhisi va thekinoloji yo pfuneta – ku fana na swihlaya swa xikirini. Tiyisisa leswaku mahungu lama kombisiweke hi muvala ya le rivaleni eka nhundzu hi yoxe (xikombiso tsalwa leri vonakaka), kumbe ya katsiwile hi tindlela tin’wana, ku fana na tsalwa ro engetela leri fihliweke na .sr-onlytlilasi.

Ndzilekano

Tirhisa switirhisiwa swa ndzilakano ku cinca ntsena border-colorya khadi. Xiya leswaku u nga veka .text-{color}titlilasi eka mutswari .cardkumbe ntlawa lowutsongo wa leswi nga endzeni ka khadi hilaha swi kombisiweke hakona laha hansi.

Nhlokomhaka
Nhlokomhaka ya khadi ra le hansi

Tsalwa rin’wana ra xikombiso xa xihatla ro aka eka nhloko-mhaka ya khadi ni ku endla xiphemu lexikulu xa leswi nga endzeni ka khadi.

Nhlokomhaka
Xihloko xa khadi ra vumbirhi

Tsalwa rin’wana ra xikombiso xa xihatla ro aka eka nhloko-mhaka ya khadi ni ku endla xiphemu lexikulu xa leswi nga endzeni ka khadi.

Nhlokomhaka
Xihloko xa khadi ra ku humelela

Tsalwa rin’wana ra xikombiso xa xihatla ro aka eka nhloko-mhaka ya khadi ni ku endla xiphemu lexikulu xa leswi nga endzeni ka khadi.

Nhlokomhaka
Xihloko xa khadi ra khombo

Tsalwa rin’wana ra xikombiso xa xihatla ro aka eka nhloko-mhaka ya khadi ni ku endla xiphemu lexikulu xa leswi nga endzeni ka khadi.

Nhlokomhaka
Nhlokomhaka ya khadi ra xilemukiso

Tsalwa rin’wana ra xikombiso xa xihatla ro aka eka nhloko-mhaka ya khadi ni ku endla xiphemu lexikulu xa leswi nga endzeni ka khadi.

Nhlokomhaka
Xihloko xa khadi ra info

Tsalwa rin’wana ra xikombiso xa xihatla ro aka eka nhloko-mhaka ya khadi ni ku endla xiphemu lexikulu xa leswi nga endzeni ka khadi.

Nhlokomhaka
Xihloko xa khadi ro voninga

Tsalwa rin’wana ra xikombiso xa xihatla ro aka eka nhloko-mhaka ya khadi ni ku endla xiphemu lexikulu xa leswi nga endzeni ka khadi.

Nhlokomhaka
Xihloko xa khadi ra munyama

Tsalwa rin’wana ra xikombiso xa xihatla ro aka eka nhloko-mhaka ya khadi ni ku endla xiphemu lexikulu xa leswi nga endzeni ka khadi.

<div class="card border-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-primary">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-secondary">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-danger">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-warning">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-info">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-dark">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

Switirhisiwa swa mixins

U nga ha tlhela u cinca mindzilakano eka nhloko ya khadi ni le hansi loko swi laveka, hambi ku ri ku susa ya yona background-colorhi .bg-transparent.

Nhlokomhaka
Xihloko xa khadi ra ku humelela

Tsalwa rin’wana ra xikombiso xa xihatla ro aka eka nhloko-mhaka ya khadi ni ku endla xiphemu lexikulu xa leswi nga endzeni ka khadi.

Xiphemu xa le hansi 
<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header bg-transparent border-success">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <div class="card-footer bg-transparent border-success">Footer</div>
</div>

Xivumbeko xa khadi

Ku engetela eka ku endla switayele leswi nga endzeni ka makhadi, Bootstrap yi katsa swihlawulekisi swi nga ri swingani swo veka nxaxamelo wa makhadi. Hi nkarhi wa sweswi, swihlawulekisi leswi swa layout a swi si hlamula .

Mintlawa ya makhadi

Tirhisa mintlawa ya makhadi ku hundzuluxela makhadi tanihi xiaki xin’we, lexi khomanisiweke lexi nga ni tikholomu to anama ni ku tlakuka loku ringanaka. Mintlawa ya makhadi yi tirhisa display: flex;ku fikelela mpimo wa yona wa yunifomo.

100%x180 yi va kona
Xihloko xa khadi

Leri i khadi ro anama leri nga na tsalwa ro seketela laha hansi tanihi xiletelo xa ntumbuluko eka nhundzu yo engetela. Nhundzu leyi yi lehe nyana.

Ku hetelela ku pfuxetiwa 3 mins ago

100%x180 yi va kona
Xihloko xa khadi

Khadi leri ri na tsalwa ro seketela laha hansi tanihi xiletelo xa ntumbuluko eka nhundzu yo engetela.

Ku hetelela ku pfuxetiwa 3 mins ago

100%x180 yi va kona
Xihloko xa khadi

Leri i khadi ro anama leri nga na tsalwa ro seketela laha hansi tanihi xiletelo xa ntumbuluko eka nhundzu yo engetela. Khadi leri ri na nhundzu yo leha swinene ku tlula yo sungula ku kombisa xiendlo xexo xa ku leha loku ringanaka.

Ku hetelela ku pfuxetiwa 3 mins ago

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Loko u tirhisa mintlawa ya makhadi leyi nga ni swifaniso swa le hansi, leswi nga endzeni ka yona swi ta layini hi ku tisungulela.

100%x180 yi va kona
Xihloko xa khadi

Leri i khadi ro anama leri nga na tsalwa ro seketela laha hansi tanihi xiletelo xa ntumbuluko eka nhundzu yo engetela. Nhundzu leyi yi lehe nyana.

Ku hetelela ku pfuxetiwa 3 mins ago
100%x180 yi va kona
Xihloko xa khadi

Khadi leri ri na tsalwa ro seketela laha hansi tanihi xiletelo xa ntumbuluko eka nhundzu yo engetela.

Ku hetelela ku pfuxetiwa 3 mins ago
100%x180 yi va kona
Xihloko xa khadi

Leri i khadi ro anama leri nga na tsalwa ro seketela laha hansi tanihi xiletelo xa ntumbuluko eka nhundzu yo engetela. Khadi leri ri na nhundzu yo leha swinene ku tlula yo sungula ku kombisa xiendlo xexo xa ku leha loku ringanaka.

Ku hetelela ku pfuxetiwa 3 mins ago 
<div class="card-group">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

Tidekhi ta makhadi

U lava sete ya makhadi ya ku anama ni ku leha loku ringanaka lama nga khomanisiwiki eka rin’wana? Tirhisa tidekhi ta makhadi.

100%x200 yi va kona
Xihloko xa khadi

Leri i khadi ro leha leri nga na tsalwa ro seketela laha hansi tanihi xiletelo xa ntumbuluko eka nhundzu yo engetela. Nhundzu leyi yi lehe nyana.

Ku hetelela ku pfuxetiwa 3 mins ago

100%x200 yi va kona
Xihloko xa khadi

Khadi leri ri na tsalwa ro seketela laha hansi tanihi xiletelo xa ntumbuluko eka nhundzu yo engetela.

Ku hetelela ku pfuxetiwa 3 mins ago

100%x200 yi va kona
Xihloko xa khadi

Leri i khadi ro anama leri nga na tsalwa ro seketela laha hansi tanihi xiletelo xa ntumbuluko eka nhundzu yo engetela. Khadi leri ri na nhundzu yo leha swinene ku tlula yo sungula ku kombisa xiendlo xexo xa ku leha loku ringanaka.

Ku hetelela ku pfuxetiwa 3 mins ago

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Ku fana na mintlawa ya makhadi, swifaniso swa le hansi swa makhadi eka tidekhi swi ta layini hi swoxe.

100%x180 yi va kona
Xihloko xa khadi

Leri i khadi ro anama leri nga na tsalwa ro seketela laha hansi tanihi xiletelo xa ntumbuluko eka nhundzu yo engetela. Nhundzu leyi yi lehe nyana.

Ku hetelela ku pfuxetiwa 3 mins ago
100%x180 yi va kona
Xihloko xa khadi

Khadi leri ri na tsalwa ro seketela laha hansi tanihi xiletelo xa ntumbuluko eka nhundzu yo engetela.

Ku hetelela ku pfuxetiwa 3 mins ago
100%x180 yi va kona
Xihloko xa khadi

Leri i khadi ro anama leri nga na tsalwa ro seketela laha hansi tanihi xiletelo xa ntumbuluko eka nhundzu yo engetela. Khadi leri ri na nhundzu yo leha swinene ku tlula yo sungula ku kombisa xiendlo xexo xa ku leha loku ringanaka.

Ku hetelela ku pfuxetiwa 3 mins ago 
<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

Tikholomu ta makhadi

Makhadi ma nga hleriwa ma va tikholomu leti fanaka ni ta Masonry hi CSS ntsena hi ku ma phutsela eka .card-columns. Makhadi ya akiwile hi columnswihlawulekisi swa CSS ematshan’wini ya flexbox ku olova ku ringanisa. Makhadi ma oda ku suka ehenhla ku ya ehansi ni ku suka eximatsini ku ya exineneni.

Tinhloko ta le henhla! Tikhilomitara leti u ti fambaka hi tikholomu ta makhadi ti nga ha hambana. Ku sivela makhadi ku tshoveka ku tsemakanya tikholomu, hi fanele ku ma veka eka display: inline-blockas column-break-inside: avoidisn’t a bulletproof solution yet.

100%x160 yi va kona
Nhlokomhaka ya khadi leyi phutselaka eka layini leyintshwa

Leri i khadi ro leha leri nga na tsalwa ro seketela laha hansi tanihi xiletelo xa ntumbuluko eka nhundzu yo engetela. Nhundzu leyi yi lehe nyana.

Lorem ipsum dolor tshama amet, consectetur adipiscing xiyimo xa le henhla. Nhlayo leyi heleleke ya posuere erat a ante.

Munhu loyi a dumeke eka Source Title
100%x160 yi va kona
Xihloko xa khadi

Khadi leri ri na tsalwa ro seketela laha hansi tanihi xiletelo xa ntumbuluko eka nhundzu yo engetela.

Ku hetelela ku pfuxetiwa 3 mins ago

Lorem ipsum dolor tshama amet, consectetur adipiscing xiyimo xa le henhla. Nhlayo leyi heleleke ya posuere erat.

Munhu loyi a dumeke eka Source Title
Xihloko xa khadi

Khadi leri ri na tsalwa ro seketela laha hansi tanihi xiletelo xa ntumbuluko eka nhundzu yo engetela.

Ku hetelela ku pfuxetiwa 3 mins ago

100%x260 yi va kona

Lorem ipsum dolor tshama amet, consectetur adipiscing xiyimo xa le henhla. Nhlayo leyi heleleke ya posuere erat a ante.

Munhu loyi a dumeke eka Source Title
Xihloko xa khadi

Leri i khadi ro anama leri nga na tsalwa ro seketela laha hansi tanihi xiletelo xa ntumbuluko eka nhundzu yo engetela. Khadi leri ri na nhundzu yo leha swinene ku tlula yo sungula ku kombisa xiendlo xexo xa ku leha loku ringanaka.

Ku hetelela ku pfuxetiwa 3 mins ago

<div class="card-columns">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title that wraps to a new line</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
  </div>
  <div class="card p-3">
    <blockquote class="blockquote mb-0 card-body">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card bg-primary text-white text-center p-3">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
      <footer class="blockquote-footer">
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card text-center">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img" src="..." alt="Card image">
  </div>
  <div class="card p-3 text-right">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Tikholomu ta makhadi na tona ti nga engeteriwa ni ku endliwa hi ku landza khodi yin’wana leyi engetelekeke. Laha hansi ku kombisiwile ku engeteriwa ka .card-columnstlilasi hi ku tirhisa CSS leyi fanaka leyi hi yi tirhisaka—tikholomu ta CSS— ku humesa sete ya swiyenge leswi hlamulaka swo cinca nhlayo ya tikholomu.

.card-columns {
  @include media-breakpoint-only(lg) {
    column-count: 4;
  }
  @include media-breakpoint-only(xl) {
    column-count: 5;
  }
}