Source

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 .

Placeholder Image cap
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 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>

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.

Placeholder Image cap

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

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

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.

Placeholder Image cap
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 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">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>

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="#" tabindex="-1" aria-disabled="true">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="#" tabindex="-1" aria-disabled="true">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.

Placeholder Image cap
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

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-top" alt="...">
</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.

Placeholder Card image
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 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>

Mazmunyň suratyň beýikliginden uly bolmaly däldigine üns beriň. Mazmun suratdan uly bolsa, mazmun şekiliň daşynda görkeziler.

Gorizontal

Tor we peýdaly synplaryň utgaşmasyny ulanyp, kartoçkalary ykjam we amatly görnüşde gorizontal edip bolýar. Aşakdaky mysalda, gözenegiň çukurlaryny aýyrýarys we kartany kesiş nokadynda keseligine öwürmek üçin sapaklary .no-guttersulanýarys . Kartyňyzyň mazmunyna baglylykda goşmaça düzedişler zerur bolup biler..col-md-*md

Placeholder Image
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" style="max-width: 540px;">
  <div class="row no-gutters">
    <div class="col-md-4">
      <img src="..." class="card-img" 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>

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.

Placeholder Image cap
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

Placeholder Image cap
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

Placeholder Image cap
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 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>

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

Placeholder Image cap
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
Placeholder Image cap
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
Placeholder Image cap
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 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>

Kart kartoçkalary

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

Placeholder Image cap
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

Placeholder Image cap
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

Placeholder Image cap
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 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>
      <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>

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

Placeholder Image cap
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
Placeholder Image cap
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
Placeholder Image cap
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 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>

Tor kartalary

“Bootstrap” grid ulgamyny we onuň .row-colssynplaryny her hatarda näçe sany sütün sütünini görkezýändigiňize gözegçilik etmek üçin ulanyň. Mysal üçin, bu ýerde .row-cols-1kartoçkalary bir sütüne ýerleşdirmek we .row-cols-md-2orta kartoçkadan başlap dört kartany deň hatara deň hatara bölmek.

Placeholder Image cap
Kartyň ady

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

Placeholder Image cap
Kartyň ady

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

Placeholder Image cap
Kartyň ady

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

Placeholder Image cap
Kartyň ady

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

<div class="row row-cols-1 row-cols-md-2">
  <div class="col mb-4">
    <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 mb-4">
    <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 mb-4">
    <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 mb-4">
    <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>

Ony üýtgediň .row-cols-3we dördünji kartoçkany görersiňiz.

Placeholder Image cap
Kartyň ady

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

Placeholder Image cap
Kartyň ady

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

Placeholder Image cap
Kartyň ady

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

Placeholder Image cap
Kartyň ady

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

<div class="row row-cols-1 row-cols-md-3">
  <div class="col mb-4">
    <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 mb-4">
    <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 mb-4">
    <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 mb-4">
    <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>

Deň beýiklik gerek .h-100bolsa, kartoçkalara goşuň. Adaty tertipde deň belentlik isleseňiz $card-height: 100%, Sass-da sazlap bilersiňiz.

Placeholder Image cap
Kartyň ady

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

Placeholder Image cap
Kartyň ady

Bu gysga kartoçka.

Placeholder Image cap
Kartyň ady

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

Placeholder Image cap
Kartyň ady

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

<div class="row row-cols-1 row-cols-md-3">
  <div class="col mb-4">
    <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 mb-4">
    <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 mb-4">
    <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 mb-4">
    <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>

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

Placeholder Image cap
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
Placeholder Image cap
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çkanyň aşagyndaky tekstiň yzygiderli ady we gysga paragrafiýasy bar.

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

Placeholder Card image

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

Çeşme ady bilen meşhur biri
Kartyň ady

Bu aşakdaky ady we goldaw teksti bolan başga bir kartoçka. Bu kartoçkada umumylykda birneme beýik bolmak üçin goşmaça mazmun bar.

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

<div class="card-columns">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <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 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 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 text-white">
        <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 a regular title and short paragraphy of text below it.</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>
  <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 another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</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;
  }
}