Tsallake zuwa babban abun ciki Tsallake zuwa kewayawa na takardu
in English

Katuna

Katunan Bootstrap suna ba da kwandon abun ciki mai sassauƙa kuma mai yuwuwa tare da bambance-bambancen karatu da zaɓuɓɓuka.

A wannan shafi

Game da

Kati wani kwandon abun ciki mai sassauƙa ne kuma mai yuwuwa. Ya haɗa da zaɓuɓɓuka don masu kai da ƙafafu, nau'in abun ciki iri-iri, launuka na mahallin mahallin, da zaɓuɓɓukan nuni masu ƙarfi. Idan kun saba da Bootstrap 3, katunan suna maye gurbin tsoffin fafuna, rijiyoyi, da thumbnails. Akwai ayyuka iri ɗaya ga waɗannan abubuwan haɗin gwiwa azaman azuzuwan masu gyara don katunan.

Misali

An gina katunan tare da ƙaramin alama da salo sosai gwargwadon yiwuwa, amma har yanzu suna sarrafa don isar da ton na sarrafawa da keɓancewa. Gina tare da flexbox, suna ba da jeri mai sauƙi kuma suna haɗuwa da kyau tare da sauran abubuwan Bootstrap. Ba su da marginta tsohuwa, don haka yi amfani da kayan aikin tazarar yadda ake buƙata.

Da ke ƙasa akwai misalin katin asali tare da abun ciki mai gauraya da tsayayyen faɗi. Katuna ba su da tsayayyen faɗin da za su fara, don haka a zahiri za su cika cikakken faɗin ɓangaren mahaifa. Wannan yana da sauƙin keɓancewa tare da zaɓin girman mu daban-daban .

Placeholder Image cap
Taken katin

Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.

Tafi wani wuri 
<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <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>

Nau'in abun ciki

Katuna suna tallafawa nau'ikan abun ciki iri-iri, gami da hotuna, rubutu, ƙungiyoyin jeri, hanyoyin haɗin gwiwa, da ƙari. A ƙasa akwai misalan abin da ake tallafawa.

Jiki

Tushen ginin kati shine .card-body. Yi amfani da shi a duk lokacin da kuke buƙatar sashe mai santsi a cikin kati.

Wannan wasu rubutu ne a jikin katin. 
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Laƙabi, rubutu, da hanyoyin haɗin gwiwa

Ana amfani da taken katin ta ƙara .card-titlezuwa <h*>alama. Hakazalika, ana ƙara hanyoyin haɗin gwiwa a sanya su kusa da juna ta hanyar ƙara .card-linkzuwa <a>tag.

Ana amfani da rubutun kalmomi ta ƙara alama .card-subtitlezuwa <h*>alama. Idan an sanya abubuwan .card-titleda .card-subtitleabubuwan a cikin wani .card-bodyabu, taken katin da ƙaramin taken suna daidaitawa da kyau.

Taken katin
Rubutun kati

Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.

Haɗin katin Wani hanyar haɗi 
<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>

Hotuna

.card-img-topsanya hoto zuwa saman katin. Tare da .card-text, ana iya ƙara rubutu zuwa katin. Hakanan za'a iya tsara rubutu a .card-textciki tare da daidaitattun alamun HTML.

Placeholder Image cap

Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <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>

Jerin ƙungiyoyi

Ƙirƙirar lissafin abun ciki a cikin kati tare da ƙungiyar jeri.

  • Wani abu
  • Abu na biyu
  • Abu na uku
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>
Fitattu
  • Wani abu
  • Abu na biyu
  • Abu na uku
<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>
  • Wani abu
  • Abu na biyu
  • Abu na uku
Katin kati 
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-footer">
    Card footer
  </div>
</div>

Kitchen nutse

Haɗa ku daidaita nau'ikan abun ciki da yawa don ƙirƙirar katin da kuke buƙata, ko jefa komai a ciki. Ana nunawa a ƙasa salon hoto, tubalan, salon rubutu, da rukunin jeri-duk an nannade su cikin ƙayyadaddun kati mai faɗi.

Placeholder Image cap
Taken katin

Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.

  • Wani abu
  • Abu na biyu
  • Abu na uku
Haɗin katin Wani hanyar haɗi 
<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <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">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Ƙara abin kai da/ko ƙafa na zaɓi a cikin kati.

Fitattu
Magani na musamman

Tare da rubutu mai goyan baya a matsayin jagorar halitta zuwa ƙarin abun ciki.

Tafi wani wuri 
<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>

Za'a iya siffanta kawunan kati ta ƙara .card-headerzuwa <h*>abubuwa.

Fitattu
Magani na musamman

Tare da rubutu mai goyan baya a matsayin jagorar halitta zuwa ƙarin abun ciki.

Tafi wani wuri 
<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>
Magana

Sanannen zance, wanda ke ƙunshe a cikin ɓangaren blockquote.

Wani sananne a Tushen Tushen 
<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>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>
  </div>
</div>
Fitattu
Magani na musamman

Tare da rubutu mai goyan baya a matsayin jagorar halitta zuwa ƙarin abun ciki.

Tafi wani wuri
Kwanaki 2 da suka gabata 
<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>

Girman girma

Katuna suna ɗauka babu takamaiman widthdon farawa, don haka za su yi faɗin 100% sai dai in an faɗi. Kuna iya canza wannan kamar yadda ake buƙata tare da CSS na al'ada, azuzuwan grid, grid Sass mixins, ko abubuwan amfani.

Yin amfani da alamar grid

Amfani da grid, kunsa katunan cikin ginshiƙai da layuka kamar yadda ake buƙata.

Magani na musamman

Tare da rubutu mai goyan baya a matsayin jagorar halitta zuwa ƙarin abun ciki.

Tafi wani wuri
Magani na musamman

Tare da rubutu mai goyan baya a matsayin jagorar halitta zuwa ƙarin abun ciki.

Tafi wani wuri 
<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>

Amfani da kayan aiki

Yi amfani da ɗimbin kayan aikin girman girman da ake da su don saita faɗin katin da sauri.

Taken katin

Tare da rubutu mai goyan baya a matsayin jagorar halitta zuwa ƙarin abun ciki.

Maɓalli
Taken katin

Tare da rubutu mai goyan baya a matsayin jagorar halitta zuwa ƙarin abun ciki.

Maɓalli 
<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>

Amfani da CSS na al'ada

Yi amfani da CSS na al'ada a cikin takaddun salon ku ko azaman salon layi don saita faɗin.

Magani na musamman

Tare da rubutu mai goyan baya a matsayin jagorar halitta zuwa ƙarin abun ciki.

Tafi wani wuri 
<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>

Daidaita rubutu

Kuna iya canza daidaita rubutun kowane kati da sauri-a gaba ɗaya ko takamaiman sassansa-tare da azuzuwan daidaita rubutun mu .

Magani na musamman

Tare da rubutu mai goyan baya a matsayin jagorar halitta zuwa ƙarin abun ciki.

Tafi wani wuri
Magani na musamman

Tare da rubutu mai goyan baya a matsayin jagorar halitta zuwa ƙarin abun ciki.

Tafi wani wuri
Magani na musamman

Tare da rubutu mai goyan baya a matsayin jagorar halitta zuwa ƙarin abun ciki.

Tafi wani wuri 
<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-end" 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>

Ƙara wasu kewayawa zuwa kan kati (ko toshe) tare da abubuwan haɗin nav na Bootstrap .

Magani na musamman

Tare da rubutu mai goyan baya a matsayin jagorar halitta zuwa ƙarin abun ciki.

Tafi wani wuri 
<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" aria-current="true" 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">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>
Magani na musamman

Tare da rubutu mai goyan baya a matsayin jagorar halitta zuwa ƙarin abun ciki.

Tafi wani wuri 
<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">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>

Hotuna

Katuna sun haɗa da ƴan zaɓuɓɓuka don aiki tare da hotuna. Zaɓi daga sanya “mafi girman hoto” a kowane ƙarshen katin, lulluɓe hotuna tare da abun cikin katin, ko kawai saka hoton a cikin katin.

Maƙallan hoto

Hakazalika da masu kai da ƙafa, katunan na iya haɗawa da sama da ƙasa “manyan hoto”—hotuna a saman ko kasan katin.

Placeholder Image cap
Taken katin

Wannan babban kati ne tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki. Wannan abun ciki ya ɗan fi tsayi.

An sabunta ta ƙarshe mintuna 3 da suka gabata

Taken katin

Wannan babban kati ne tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki. Wannan abun ciki ya ɗan fi tsayi.

An sabunta ta ƙarshe mintuna 3 da suka gabata

Placeholder Image cap 
<div class="card mb-3">
  <img src="..." class="card-img-top" alt="...">
  <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 src="..." class="card-img-bottom" alt="...">
</div>

Hoto mai rufi

Juya hoto zuwa bangon katin kuma rufe rubutun katin ku. Dangane da hoton, ƙila ko ƙila kuna buƙatar ƙarin salo ko kayan aiki.

Placeholder Card image
Taken katin

Wannan babban kati ne tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki. Wannan abun ciki ya ɗan fi tsayi.

An sabunta ta ƙarshe mintuna 3 da suka gabata

<div class="card bg-dark text-white">
  <img src="..." class="card-img" alt="...">
  <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>
Lura cewa abun ciki bai kamata ya fi tsayin hoton girma ba. Idan abun ciki ya fi hoton girma za a nuna abun cikin a wajen hoton.

A kwance

Yin amfani da haɗin grid da azuzuwan masu amfani, ana iya yin katunan a kwance ta hanyar sada zumunci ta wayar hannu da amsawa. A cikin misalin da ke ƙasa, muna cire grid gutters tare .g-0da amfani .col-md-*da azuzuwan don sanya katin a kwance a wurin mdhutu. Ana iya buƙatar ƙarin gyare-gyare dangane da abun cikin katin ku.

Placeholder Image
Taken katin

Wannan babban kati ne tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki. Wannan abun ciki ya ɗan fi tsayi.

An sabunta ta ƙarshe mintuna 3 da suka gabata

<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="..." class="img-fluid rounded-start" alt="...">
    </div>
    <div class="col-md-8">
      <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>
</div>

Salon katin

Katuna sun haɗa da zaɓuɓɓuka daban-daban don keɓance asalinsu, iyakoki, da launi.

Baya da launi

Yi amfani da launi na rubutu da abubuwan amfani na bango don canza kamannin katin.

Kai
Taken katin farko

Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.

Kai
Taken katin sakandare

Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.

Kai
Taken katin nasara

Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.

Kai
Taken katin haɗari

Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.

Kai
Taken katin gargadi

Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.

Kai
Taken katin bayanai

Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.

Kai
Take katin haske

Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.

Kai
Taken katin duhu

Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.

<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-dark 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-dark 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 text-dark 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>
Isar da ma'ana ga fasahar taimako

Yin amfani da launi don ƙara ma'ana kawai yana ba da alamar gani, wanda ba za a isar da shi ga masu amfani da fasahar taimako ba - kamar masu karanta allo. Tabbatar cewa bayanin da launi ke nunawa ko dai a bayyane yake daga abun cikin kanta (misali rubutun bayyane), ko kuma an haɗa shi ta hanyar madadin, kamar ƙarin rubutu da aka ɓoye tare da .visually-hiddenajin.

Iyaka

Yi amfani da abubuwan amfani kan iyaka don canza kawai border-colorkatin. Lura cewa zaku iya sanya .text-{color}azuzuwan akan iyaye .cardko juzu'in abubuwan da ke cikin katin kamar yadda aka nuna a ƙasa.

Kai
Taken katin farko

Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.

Kai
Taken katin sakandare

Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.

Kai
Taken katin nasara

Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.

Kai
Taken katin haɗari

Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.

Kai
Taken katin gargadi

Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.

Kai
Taken katin bayanai

Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.

Kai
Take katin haske

Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.

Kai
Taken katin duhu

Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.

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

Mixins utilities

Hakanan zaka iya canza iyakoki akan taken katin da ƙafa kamar yadda ake buƙata, har ma da cire su background-colortare da .bg-transparent.

Kai
Taken katin nasara

Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.

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

Tsarin katin

Baya ga salo abun ciki a cikin katunan, Bootstrap ya haɗa da ƴan zaɓuɓɓuka don shimfida jerin katunan. A halin yanzu, waɗannan zaɓuɓɓukan shimfidar wuri ba su da amsa .

Kungiyoyin katin

Yi amfani da ƙungiyoyin kati don yin katunan azaman guda ɗaya, abin da aka haɗe tare da faɗin faɗi da ginshiƙan tsayi daidai. Ƙungiyoyin kati suna farawa a jere kuma suna amfani da display: flex;su don haɗawa tare da nau'ikan nau'ikan da ke farawa daga wurin smkarya.

Placeholder Image cap
Taken katin

Wannan babban kati ne tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki. Wannan abun ciki ya ɗan fi tsayi.

An sabunta ta ƙarshe mintuna 3 da suka gabata

Placeholder Image cap
Taken katin

Wannan katin yana da rubutu mai goyan baya a ƙasa azaman jagorar halitta zuwa ƙarin abun ciki.

An sabunta ta ƙarshe mintuna 3 da suka gabata

Placeholder Image cap
Taken katin

Wannan babban kati ne tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki. Wannan katin yana da ma fiye da abun ciki mafi tsayi fiye da na farko don nuna daidai girman aikin.

An sabunta ta ƙarshe mintuna 3 da suka gabata

<div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <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 src="..." class="card-img-top" alt="...">
    <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 src="..." class="card-img-top" alt="...">
    <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>

Lokacin amfani da ƙungiyoyin kati tare da ƙafafu, abun cikin su zai yi layi ta atomatik.

Placeholder Image cap
Taken katin

Wannan babban kati ne tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki. Wannan abun ciki ya ɗan fi tsayi.

An sabunta ta ƙarshe mintuna 3 da suka gabata
Placeholder Image cap
Taken katin

Wannan katin yana da rubutu mai goyan baya a ƙasa azaman jagorar halitta zuwa ƙarin abun ciki.

An sabunta ta ƙarshe mintuna 3 da suka gabata
Placeholder Image cap
Taken katin

Wannan babban kati ne tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki. Wannan katin yana da ma fiye da abun ciki mafi tsayi fiye da na farko don nuna daidai girman aikin.

An sabunta ta ƙarshe mintuna 3 da suka gabata 
<div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <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 src="..." class="card-img-top" alt="...">
    <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 src="..." class="card-img-top" alt="...">
    <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>

Katunan Grid

Yi amfani da tsarin grid na Bootstrap da .row-colsazuzuwan sa don sarrafa ginshiƙan grid nawa (wanda aka nannade kewaye da katunan ku) da kuke nunawa kowane jere. Misali, anan shine .row-cols-1shimfida katunan akan ginshiƙi ɗaya, da .row-cols-md-2raba katunan huɗu zuwa daidai da faɗin layuka masu yawa, daga matsakaiciyar tsinkewa sama.

Placeholder Image cap
Taken katin

Wannan kati ne mai tsayi tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki. Wannan abun ciki ya ɗan fi tsayi.

Placeholder Image cap
Taken katin

Wannan kati ne mai tsayi tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki. Wannan abun ciki ya ɗan fi tsayi.

Placeholder Image cap
Taken katin

Wannan kati ne mai tsayi tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki.

Placeholder Image cap
Taken katin

Wannan kati ne mai tsayi tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki. Wannan abun ciki ya ɗan fi tsayi.

<div class="row row-cols-1 row-cols-md-2 g-4">
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <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>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <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>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <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.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <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>
      </div>
    </div>
  </div>
</div>

Canza shi .row-cols-3kuma za ku ga kundi na huɗu na kati.

Placeholder Image cap
Taken katin

Wannan kati ne mai tsayi tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki. Wannan abun ciki ya ɗan fi tsayi.

Placeholder Image cap
Taken katin

Wannan kati ne mai tsayi tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki. Wannan abun ciki ya ɗan fi tsayi.

Placeholder Image cap
Taken katin

Wannan kati ne mai tsayi tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki.

Placeholder Image cap
Taken katin

Wannan kati ne mai tsayi tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki. Wannan abun ciki ya ɗan fi tsayi.

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <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>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <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>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <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.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <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>
      </div>
    </div>
  </div>
</div>

Lokacin da kuke buƙatar tsayi daidai, ƙara .h-100zuwa katunan. Idan kuna son tsayin tsayi daidai ta tsohuwa, zaku iya saita $card-height: 100%a cikin Sass.

Placeholder Image cap
Taken katin

Wannan kati ne mai tsayi tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki. Wannan abun ciki ya ɗan fi tsayi.

Placeholder Image cap
Taken katin

Wannan gajeren kati ne.

Placeholder Image cap
Taken katin

Wannan kati ne mai tsayi tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki.

Placeholder Image cap
Taken katin

Wannan kati ne mai tsayi tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki. Wannan abun ciki ya ɗan fi tsayi.

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <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>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a short card.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <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.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <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>
      </div>
    </div>
  </div>
</div>

Kamar dai tare da ƙungiyoyin katin, ƙafafun katin za su yi layi ta atomatik.

Placeholder Image cap
Taken katin

Wannan babban kati ne tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki. Wannan abun ciki ya ɗan fi tsayi.

An sabunta ta ƙarshe mintuna 3 da suka gabata
Placeholder Image cap
Taken katin

Wannan katin yana da rubutu mai goyan baya a ƙasa azaman jagorar halitta zuwa ƙarin abun ciki.

An sabunta ta ƙarshe mintuna 3 da suka gabata
Placeholder Image cap
Taken katin

Wannan babban kati ne tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki. Wannan katin yana da ma fiye da abun ciki mafi tsayi fiye da na farko don nuna daidai girman aikin.

An sabunta ta ƙarshe mintuna 3 da suka gabata 
<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <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>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <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>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <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>
</div>

Masonry

A cikin v4mu mun yi amfani da dabarar CSS-kawai don kwaikwayi halayen Masonry -kamar ginshiƙai, amma wannan dabarar ta zo da yawancin illolin marasa daɗi . Idan kuna son samun wannan nau'in shimfidar wuri a cikin v5, kuna iya yin amfani da plugin ɗin Masonry kawai. Ba a haɗa Masonry a cikin Bootstrap ba, amma mun yi misalin demo don taimaka muku farawa.

Sass

Masu canji

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-color:                 rgba($black, .125);
$card-border-radius:                $border-radius;
$card-box-shadow:                   null;
$card-inner-border-radius:          subtract($card-border-radius, $card-border-width);
$card-cap-padding-y:                $card-spacer-y * .5;
$card-cap-padding-x:                $card-spacer-x;
$card-cap-bg:                       rgba($black, .03);
$card-cap-color:                    null;
$card-height:                       null;
$card-color:                        null;
$card-bg:                           $white;
$card-img-overlay-padding:          $spacer;
$card-group-margin:                 $grid-gutter-width * .5;