Kartlar

“Bootstrap” -yň kartlary çeýe we giňeldilen mazmunly konteýner bilen dürli wariantlary we wariantlary üpjün edýär.

Takmynan

Kart çeýe we giňelýän mazmunly gapdyr . Onda sözbaşylar we aşaky sözbaşylar, dürli mazmun, kontekstdäki fon reňkleri we güýçli görkeziş opsiýalary bar. “Bootstrap 3” bilen tanyş bolsaňyz, kartoçkalar köne panellerimizi, guýularymyzy we kiçijik suratlarymyzy çalyşýar. Şol komponentlere meňzeş funksiýa kartlar üçin üýtgediji synplar hökmünde elýeterlidir.

Mysal

Kartlar mümkin boldugyça az bellik we stil bilen gurlupdyr, emma şonda-da bir tonna gözegçilik we özleşdirmegi üpjün etmegi başarýar. Flexbox bilen gurlan, aňsat deňleşdirmegi teklip edýär we beýleki Bootstrap komponentleri bilen gowy garyşýar. Dymmaklyk ýok margin, şonuň üçin zerur bolanda aralyk enjamlaryny ulanyň .

Aşakda garyşyk mazmunly we kesgitlenen ini bolan esasy kartanyň mysaly. Kartlaryň başlamak üçin kesgitli giňligi ýok, şonuň üçin olar esasy elementiň doly giňligini tebigy ýagdaýda doldurarlar. Bu dürli ölçeg ölçeglerimiz bilen aňsatlyk bilen düzülýär .

Kartyň ady

Kartyň adyna esaslanmak we kartyň mazmunynyň esasy bölegini düzmek üçin käbir çalt mysal teksti.

Bir ýere git

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

Mazmunyň görnüşleri

Kartlar suratlar, tekst, sanaw toparlary, baglanyşyklar we başga-da köp dürli mazmuny goldaýar. Aşakda goldanýanlaryň mysallary getirilýär.

Beden

Kartanyň .card-bodygurluşy Kartanyň içinde gaplanan bölüm gerek bolanda ulanyň.

Bu kartoçkanyň içindäki käbir tekst.

<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Atlar, tekst we baglanyşyklar

Kart atlary bellige goşmak .card-titlearkaly ulanylýar. Edil şonuň ýaly, bellikler goşmak bilen <h*>baglanyşyklar goşulýar we biri-biriniň gapdalynda goýulýar ..card-link<a>

.card-subtitleSubtitrler bellige bellik goşmak bilen ulanylýar <h*>. Eger elementler bir elemente ýerleşdirilse .card-title, kartyň ady we subtitrleri gowy deňleşdirilýär..card-subtitle.card-body

Kartyň ady

Kart subtitr

Kartyň adyna esaslanmak we kartyň mazmunynyň esasy bölegini düzmek üçin käbir çalt mysal teksti.

Kart baglanyşygy Başga bir baglanyşyk

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

Suratlar

.card-img-topkartyň ýokarsyna şekil goýýar. Bilen .card-text, karta tekst goşup bolýar. Içindäki tekst .card-text, adaty HTML bellikleri bilen hem düzülip bilner.

Kartyň adyna esaslanmak we kartyň mazmunynyň esasy bölegini düzmek üçin käbir çalt mysal teksti.

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

Toparlary sanaň

Kartadaky mazmun sanawlaryny çalt sanaw topary bilen dörediň.

Cras justo odio
Dapibus ac facilisis
Erosda westibulum

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

Aýratynlyk

Cras justo odio
Dapibus ac facilisis
Erosda westibulum

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

Aşhana çüýşesi

Gerekli kartany döretmek ýa-da hemme zady şol ýere taşlamak üçin birnäçe mazmun görnüşini garyşdyryň we deňeşdiriň. Aşakda şekil stilleri, bloklar, tekst stilleri we sanaw topary görkezilýär - bularyň hemmesi kesgitli giňlikdäki kartoçka bilen örtülendir.

Kartyň ady

Kartyň adyna esaslanmak we kartyň mazmunynyň esasy bölegini düzmek üçin käbir çalt mysal teksti.

Cras justo odio
Dapibus ac facilisis
Erosda westibulum

Kart baglanyşygy Başga bir baglanyşyk

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

Sözbaşy we aşaky sözbaşy

Kartyň içine goşmaça sözbaşy we / ýa-da aşaky sözbaşy goşuň.

Aýratynlyk

Titleörite at bejergisi

Goşmaça mazmuna tebigy giriş hökmünde aşakdaky goldaw teksti bilen.

Bir ýere git

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

Kart sözbaşylaryny elementlere .card-headergoşmak arkaly düzüp bolýar .<h*>

Aýratynlyk

Titleörite at bejergisi

Goşmaça mazmuna tebigy giriş hökmünde aşakdaky goldaw teksti bilen.

Bir ýere git

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

Sitata

“Lorem ipsum dolor” oturýar. Bitewi posuere garynja.

Çeşme ady bilen meşhur biri

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

Aýratynlyk

Titleörite at bejergisi

Goşmaça mazmuna tebigy giriş hökmünde aşakdaky goldaw teksti bilen.

Bir ýere git

2 gün öň

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

Ölçeg

Kartlar widthbaşlamak üçin hiç hili kesgitli zat ýok, şonuň üçin başgaça aýdylmasa 100% giň bolar. Customörite CSS, gözenek synplary, grid Sass garyndylary ýa-da kömekçi enjamlar bilen zerur bolanda üýtgedip bilersiňiz.

Tor belligini ulanmak

Tor ulanyp, kartoçkalary zerur bolanda sütünlere we hatarlara örtüň.

Titleörite at bejergisi

Goşmaça mazmuna tebigy giriş hökmünde aşakdaky goldaw teksti bilen.

Bir ýere git

Titleörite at bejergisi

Goşmaça mazmuna tebigy giriş hökmünde aşakdaky goldaw teksti bilen.

Bir ýere git

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

Kärhanalary ulanmak

Kartanyň giňligini çalt kesgitlemek üçin elýeterli ululykdaky kömekçi enjamlarymyzy ulanyň .

Kartyň ady

Goşmaça mazmuna tebigy giriş hökmünde aşakdaky goldaw teksti bilen.

Düwme

Kartyň ady

Goşmaça mazmuna tebigy giriş hökmünde aşakdaky goldaw teksti bilen.

Düwme

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

Customörite CSS ulanmak

Giňligi kesgitlemek üçin stil tablisalarynda ýa-da içerki stil görnüşinde ýörite CSS ulanyň.

Titleörite at bejergisi

Goşmaça mazmuna tebigy giriş hökmünde aşakdaky goldaw teksti bilen.

Bir ýere git

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

Tekstiň deňleşdirilmegi

Islendik kartanyň tekst deňleşmesini, doly ýa-da aýratyn böleklerinde, tekst tekizlemek synplarymyz bilen çalt üýtgedip bilersiňiz .

Titleörite at bejergisi

Goşmaça mazmuna tebigy giriş hökmünde aşakdaky goldaw teksti bilen.

Bir ýere git

Titleörite at bejergisi

Goşmaça mazmuna tebigy giriş hökmünde aşakdaky goldaw teksti bilen.

Bir ýere git

Titleörite at bejergisi

Goşmaça mazmuna tebigy giriş hökmünde aşakdaky goldaw teksti bilen.

Bir ýere git

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

“Bootstrap” -yň komponentleri bilen kartanyň sözbaşysyna (ýa-da blokirleme) käbir nawigasiýa goşuň .

Titleörite at bejergisi

Goşmaça mazmuna tebigy giriş hökmünde aşakdaky goldaw teksti bilen.

Bir ýere git

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

Titleörite at bejergisi

Goşmaça mazmuna tebigy giriş hökmünde aşakdaky goldaw teksti bilen.

Bir ýere git

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

Suratlar

Kartlarda şekiller bilen işlemek üçin birnäçe wariant bar. Kartanyň iki ujuna “surat gapaklaryny” goşmakdan, suratlary kart mazmuny bilen örtmekden ýa-da suraty karta salmakdan saýlaň.

Suratyň gapaklary

Sözbaşylara we aşaky sözbaşylara meňzeş kartoçkalarda, ýokarky we aşaky “surat gapaklary” - kartanyň ýokarsy ýa-da aşagyndaky şekiller bolup biler.

Kartyň ady

Bu goşmaça mazmuna tebigy giriş hökmünde aşakdaky goldaýan tekst bilen has giň karta. Bu mazmun birneme uzyn.

Iň soňky gezek 3 minut öň täzelendi

Kartyň ady

Bu goşmaça mazmuna tebigy giriş hökmünde aşakdaky goldaýan tekst bilen has giň karta. Bu mazmun birneme uzyn.

Iň soňky gezek 3 minut öň täzelendi

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

Suratyň üst-üstleri

Suraty kartoçkanyň fonuna öwüriň we kartyňyzyň tekstini örtüň. Surata baglylykda, goşmaça stiller ýa-da kömekçi enjamlar gerek bolmazlygy ýa-da bolmazlygy mümkin.

Kartyň ady

Bu goşmaça mazmuna tebigy giriş hökmünde aşakdaky goldaýan tekst bilen has giň karta. Bu mazmun birneme uzyn.

Iň soňky gezek 3 minut öň täzelendi

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

Kart görnüşleri

Kartlarda fonlaryny, serhetlerini we reňkini sazlamak üçin dürli wariantlar bar.

Fon we reňk

Kartanyň daşky görnüşini üýtgetmek üçin tekst we fon programmalaryny ulanyň .

Sözbaşy

Esasy kartoçkanyň ady

Kartyň adyna esaslanmak we kartyň mazmunynyň esasy bölegini düzmek üçin käbir çalt mysal teksti.

Sözbaşy

Ikinji kartyň ady

Kartyň adyna esaslanmak we kartyň mazmunynyň esasy bölegini düzmek üçin käbir çalt mysal teksti.

Sözbaşy

Üstünlik kartoçkasynyň ady

Kartyň adyna esaslanmak we kartyň mazmunynyň esasy bölegini düzmek üçin käbir çalt mysal teksti.

Sözbaşy

Howp kartynyň ady

Kartyň adyna esaslanmak we kartyň mazmunynyň esasy bölegini düzmek üçin käbir çalt mysal teksti.

Sözbaşy

Duýduryş kartynyň ady

Kartyň adyna esaslanmak we kartyň mazmunynyň esasy bölegini düzmek üçin käbir çalt mysal teksti.

Sözbaşy

Maglumat kartasynyň ady

Kartyň adyna esaslanmak we kartyň mazmunynyň esasy bölegini düzmek üçin käbir çalt mysal teksti.

Sözbaşy

Lighteňil kartoçkanyň ady

Kartyň adyna esaslanmak we kartyň mazmunynyň esasy bölegini düzmek üçin käbir çalt mysal teksti.

Sözbaşy

Gara kartoçkanyň ady

Kartyň adyna esaslanmak we kartyň mazmunynyň esasy bölegini düzmek üçin käbir çalt mysal teksti.

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

Kömekçi tehnologiýalara many bermek

Reňk ulanmak manysyny goşmak üçin diňe ekran okyjylary ýaly kömekçi tehnologiýalary ulanyjylara ýetirip bolmajak wizual görkezme berýär. Reňk bilen görkezilen maglumatlaryň mazmunyň özünden (meselem, görünýän tekstden) aç-açan ýa-da .sr-onlysynp bilen gizlenen goşmaça tekst ýaly alternatiw usullar arkaly girizilendigine göz ýetiriň.

Serhet

Diňe kartoçkany üýtgetmek üçin serhet hyzmatlaryndan peýdalanyň . Aşakda görkezilişi ýaly ene- atanyň üstünde sapak ýa-da kartyň mazmunynyň bir bölegini border-colorgoýup bilersiňiz..text-{color}.card

Sözbaşy

Esasy kartoçkanyň ady

Kartyň adyna esaslanmak we kartyň mazmunynyň esasy bölegini düzmek üçin käbir çalt mysal teksti.

Sözbaşy

Ikinji kartyň ady

Kartyň adyna esaslanmak we kartyň mazmunynyň esasy bölegini düzmek üçin käbir çalt mysal teksti.

Sözbaşy

Üstünlik kartoçkasynyň ady

Kartyň adyna esaslanmak we kartyň mazmunynyň esasy bölegini düzmek üçin käbir çalt mysal teksti.

Sözbaşy

Howp kartynyň ady

Kartyň adyna esaslanmak we kartyň mazmunynyň esasy bölegini düzmek üçin käbir çalt mysal teksti.

Sözbaşy

Duýduryş kartynyň ady

Kartyň adyna esaslanmak we kartyň mazmunynyň esasy bölegini düzmek üçin käbir çalt mysal teksti.

Sözbaşy

Maglumat kartasynyň ady

Kartyň adyna esaslanmak we kartyň mazmunynyň esasy bölegini düzmek üçin käbir çalt mysal teksti.

Sözbaşy

Lighteňil kartoçkanyň ady

Kartyň adyna esaslanmak we kartyň mazmunynyň esasy bölegini düzmek üçin käbir çalt mysal teksti.

Sözbaşy

Gara kartoçkanyň ady

Kartyň adyna esaslanmak we kartyň mazmunynyň esasy bölegini düzmek üçin käbir çalt mysal teksti.

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

Mixins hyzmatlary

Şeýle hem, kartoçkanyň sözbaşysynyň we aşaky sözbaşynyň çäklerini zerur bolanda üýtgedip bilersiňiz, hatda olaryň background-colorbilen aýryp .bg-transparentbilersiňiz.

Sözbaşy

Üstünlik kartoçkasynyň ady

Kartyň adyna esaslanmak we kartyň mazmunynyň esasy bölegini düzmek üçin käbir çalt mysal teksti.

Aşakdaky ýazgy

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

Kart düzülişi

Mazmuny kartoçkalaryň içinde düzmekden başga-da, “Bootstrap” kartoçkalary ýerleşdirmek üçin birnäçe warianty öz içine alýar. Häzirlikçe bu düzüliş opsiýalary entek täsirli däl .

Kart toparlary

Kartlary ýeke ini we beýik sütünleri bilen birleşdirilen element hökmünde görkezmek üçin kart toparlaryny ulanyň. Kart toparlary display: flex;birmeňzeş ulalmak üçin ulanýarlar.

Kartyň ady

Bu goşmaça mazmuna tebigy giriş hökmünde aşakdaky goldaýan tekst bilen has giň karta. Bu mazmun birneme uzyn.

Iň soňky gezek 3 minut öň täzelendi

Kartyň ady

Bu kartoçkada goşmaça mazmuna tebigy giriş hökmünde aşakdaky goldaýan tekst bar.

Iň soňky gezek 3 minut öň täzelendi

Kartyň ady

Bu goşmaça mazmuna tebigy giriş hökmünde aşakdaky goldaýan tekst bilen has giň karta. Bu kartoçkada deň beýiklik hereketini görkezenlerden has uzyn mazmun bar.

Iň soňky gezek 3 minut öň täzelendi

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

Aşakdaky karta toparlaryny ulananyňyzda olaryň mazmuny awtomatiki usulda hatara düzüler.

Kartyň ady

Bu goşmaça mazmuna tebigy giriş hökmünde aşakdaky goldaýan tekst bilen has giň karta. Bu mazmun birneme uzyn.

Iň soňky gezek 3 minut öň täzelendi

Kartyň ady

Bu kartoçkada goşmaça mazmuna tebigy giriş hökmünde aşakdaky goldaýan tekst bar.

Iň soňky gezek 3 minut öň täzelendi

Kartyň ady

Bu goşmaça mazmuna tebigy giriş hökmünde aşakdaky goldaýan tekst bilen has giň karta. Bu kartoçkada deň beýiklik hereketini görkezenlerden has uzyn mazmun bar.

Iň soňky gezek 3 minut öň täzelendi

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

Kart kartoçkalary

Biri-birine dakylmadyk deň giňlik we beýiklik kartoçkalary gerekmi? Kart otaglaryny ulanyň.

Kartyň ady

Bu goşmaça mazmuna tebigy giriş hökmünde aşakdaky goldaýan tekstli has uzyn karta. Bu mazmun birneme uzyn.

Iň soňky gezek 3 minut öň täzelendi

Kartyň ady

Bu kartoçkada goşmaça mazmuna tebigy giriş hökmünde aşakdaky goldaýan tekst bar.

Iň soňky gezek 3 minut öň täzelendi

Kartyň ady

Bu goşmaça mazmuna tebigy giriş hökmünde aşakdaky goldaýan tekst bilen has giň karta. Bu kartoçkada deň beýiklik hereketini görkezenlerden has uzyn mazmun bar.

Iň soňky gezek 3 minut öň täzelendi

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

Kart toparlaryndaky ýaly, paltalardaky kartoçkalar awtomatiki usulda hatara düzüler.

Kartyň ady

Bu goşmaça mazmuna tebigy giriş hökmünde aşakdaky goldaýan tekst bilen has giň karta. Bu mazmun birneme uzyn.

Iň soňky gezek 3 minut öň täzelendi

Kartyň ady

Bu kartoçkada goşmaça mazmuna tebigy giriş hökmünde aşakdaky goldaýan tekst bar.

Iň soňky gezek 3 minut öň täzelendi

Kartyň ady

Bu goşmaça mazmuna tebigy giriş hökmünde aşakdaky goldaýan tekst bilen has giň karta. Bu kartoçkada deň beýiklik hereketini görkezenlerden has uzyn mazmun bar.

Iň soňky gezek 3 minut öň täzelendi

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

Kart sütünleri

Kartlar , diňe CSS bilen mason.card-columns ýaly sütünlere gurlup bilner . columnKartlar has aňsatlaşdyrmak üçin flexbox-yň ýerine CSS häsiýetleri bilen gurulýar . Kartlar ýokardan aşak we çepden saga sargyt edilýär.

Başlar! Kart sütünleri bilen aralyk dürli bolup biler. Kartlaryň sütünleriň üstünden geçmeginiň öňüni almak üçin, olary entek ok geçirmeýän çözgüt display: inline-blockhökmünde kesgitlemeli.column-break-inside: avoid

Täze setire baglanan kartoçkanyň ady

Bu goşmaça mazmuna tebigy giriş hökmünde aşakdaky goldaýan tekstli has uzyn karta. Bu mazmun birneme uzyn.

“Lorem ipsum dolor” oturýar. Bitewi posuere garynja.

Çeşme ady bilen meşhur biri

Kartyň ady

Bu kartoçkada goşmaça mazmuna tebigy giriş hökmünde aşakdaky goldaýan tekst bar.

Iň soňky gezek 3 minut öň täzelendi

“Lorem ipsum dolor” oturýar. Bitewi posuere erat.

Çeşme ady bilen meşhur biri

Kartyň ady

Bu kartoçkada goşmaça mazmuna tebigy giriş hökmünde aşakdaky goldaýan tekst bar.

Iň soňky gezek 3 minut öň täzelendi

“Lorem ipsum dolor” oturýar. Bitewi posuere garynja.

Çeşme ady bilen meşhur biri

Kartyň ady

Bu goşmaça mazmuna tebigy giriş hökmünde aşakdaky goldaýan tekst bilen has giň karta. Bu kartoçkada deň beýiklik hereketini görkezenlerden has uzyn mazmun bar.

Iň soňky gezek 3 minut öň täzelendi

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

Kart sütünleri goşmaça kod bilen giňeldilip we düzülip bilner. Aşakda görkezilen .card-columnssütünleriň sanyny üýtgetmek üçin täsirli derejeler toplumyny döretmek üçin ulanýan şol bir CSS - CSS sütünlerimizi ulanyp, synpyň giňelmesi.

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

Kartlar

Takmynan

Mysal

Kartyň ady

Mazmunyň görnüşleri

Beden

Atlar, tekst we baglanyşyklar

Kartyň ady

Kart subtitr

Suratlar

Toparlary sanaň

Aşhana çüýşesi

Kartyň ady

Sözbaşy we aşaky sözbaşy

Titleörite at bejergisi

Aýratynlyk

Titleörite at bejergisi

Titleörite at bejergisi

Ölçeg

Tor belligini ulanmak

Titleörite at bejergisi

Titleörite at bejergisi

Kärhanalary ulanmak

Kartyň ady

Kartyň ady

Customörite CSS ulanmak

Titleörite at bejergisi

Tekstiň deňleşdirilmegi

Titleörite at bejergisi

Titleörite at bejergisi

Titleörite at bejergisi

Nawigasiýa

Titleörite at bejergisi

Titleörite at bejergisi

Suratlar

Suratyň gapaklary

Kartyň ady

Kartyň ady

Suratyň üst-üstleri

Kartyň ady

Kart görnüşleri

Fon we reňk

Esasy kartoçkanyň ady

Ikinji kartyň ady

Üstünlik kartoçkasynyň ady

Howp kartynyň ady

Duýduryş kartynyň ady

Maglumat kartasynyň ady

Lighteňil kartoçkanyň ady

Gara kartoçkanyň ady

Kömekçi tehnologiýalara many bermek

Serhet

Esasy kartoçkanyň ady

Ikinji kartyň ady

Üstünlik kartoçkasynyň ady

Howp kartynyň ady

Duýduryş kartynyň ady

Maglumat kartasynyň ady

Lighteňil kartoçkanyň ady

Gara kartoçkanyň ady

Mixins hyzmatlary

Üstünlik kartoçkasynyň ady

Kart düzülişi

Kart toparlary

Kartyň ady

Kartyň ady

Kartyň ady

Kartyň ady

Kartyň ady

Kartyň ady

Kart kartoçkalary

Kartyň ady

Kartyň ady

Kartyň ady

Kartyň ady

Kartyň ady

Kartyň ady

Kart sütünleri

Täze setire baglanan kartoçkanyň ady

Kartyň ady