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 ƙunshi 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. Ana samun 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 .

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

html

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

html

<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

html

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

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

html

<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

html

<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

html

<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

html

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

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

html

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

Kai da kafa

Ƙ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

html

<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

html

<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

html

<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

html

<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

html

<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

html

<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

html

<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

html

<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

html

<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

html

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

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

html

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

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

html

<div class="card text-bg-dark">
  <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"><small>Last updated 3 mins ago</small></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.

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

html

<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

An ƙara a cikin v5.2.0

Saita background-colortare da sabanin gaba colortare da .text-bg-{color}mataimakan mu . A baya an buƙata don haɗa zaɓin ku .text-{color}da .bg-{color}kayan aiki don salo da hannu, waɗanda har yanzu kuna iya amfani da su idan kun fi so.

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.

html

<div class="card text-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-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-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-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-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-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-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-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.

html

<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

html

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

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

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

html

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

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

Taken katin

An sabunta ta ƙarshe mintuna 3 da suka gabata

html

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

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.

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.

Taken katin

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

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.

html

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

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.

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.

Taken katin

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

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.

html

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

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.

Taken katin

Wannan gajeren kati ne.

Taken katin

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

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.

html

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

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

Taken katin

An sabunta ta ƙarshe mintuna 3 da suka gabata

html

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

CSS

Masu canji

An ƙara a cikin v5.2.0

A matsayin wani ɓangare na tsarin canza canjin CSS na Bootstrap, katunan yanzu suna amfani da masu canjin CSS na gida .carddon haɓaka gyare-gyare na ainihi. An saita dabi'u don masu canjin CSS ta hanyar Sass, don haka har yanzu ana tallafawa keɓancewar Sass, ma.

  --#{$prefix}card-spacer-y: #{$card-spacer-y};
  --#{$prefix}card-spacer-x: #{$card-spacer-x};
  --#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
  --#{$prefix}card-border-width: #{$card-border-width};
  --#{$prefix}card-border-color: #{$card-border-color};
  --#{$prefix}card-border-radius: #{$card-border-radius};
  --#{$prefix}card-box-shadow: #{$card-box-shadow};
  --#{$prefix}card-inner-border-radius: #{$card-inner-border-radius};
  --#{$prefix}card-cap-padding-y: #{$card-cap-padding-y};
  --#{$prefix}card-cap-padding-x: #{$card-cap-padding-x};
  --#{$prefix}card-cap-bg: #{$card-cap-bg};
  --#{$prefix}card-cap-color: #{$card-cap-color};
  --#{$prefix}card-height: #{$card-height};
  --#{$prefix}card-color: #{$card-color};
  --#{$prefix}card-bg: #{$card-bg};
  --#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding};
  --#{$prefix}card-group-margin: #{$card-group-margin};

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:                 var(--#{$prefix}border-color-translucent);
$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;

Katuna

Game da

Misali

Taken katin

Nau'in abun ciki

Jiki

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

Taken katin

Rubutun kati

Hotuna

Jerin ƙungiyoyi

Kitchen nutse

Taken katin

Kai da kafa

Magani na musamman

Fitattu

Magani na musamman

Magani na musamman

Girman girma

Yin amfani da alamar grid

Magani na musamman

Magani na musamman

Amfani da kayan aiki

Taken katin

Taken katin

Amfani da CSS na al'ada

Magani na musamman

Daidaita rubutu

Magani na musamman

Magani na musamman

Magani na musamman

Kewayawa

Magani na musamman

Magani na musamman

Hotuna

Maƙallan hoto

Taken katin

Taken katin

Hoto mai rufi

Taken katin

A kwance

Taken katin

Salon katin

Baya da launi

Taken katin farko

Taken katin sakandare

Taken katin nasara

Taken katin haɗari

Taken katin gargadi

Taken katin bayanai

Take katin haske

Taken katin duhu

Isar da ma'ana ga fasahar taimako

Iyaka

Taken katin farko

Taken katin sakandare

Taken katin nasara

Taken katin haɗari

Taken katin gargadi

Taken katin bayanai

Take katin haske

Taken katin duhu

Mixins utilities

Taken katin nasara

Tsarin katin

Kungiyoyin katin

Taken katin

Taken katin

Taken katin

Taken katin

Taken katin

Taken katin

Katunan Grid

Taken katin

Taken katin

Taken katin

Taken katin

Taken katin

Taken katin

Taken katin