Kartlar

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

Bu sahypada

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

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>

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.

html

<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

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>

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.

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>

Toparlary sanaň

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

Bir element
Ikinji element
Üçünji element

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>

Aýratynlyk

Bir element
Ikinji element
Üçünji element

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>

Bir element
Ikinji element
Üçünji element

Kartyň aşagy

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>

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.

Bir element
Ikinji element
Üçünji element

Kart baglanyşygy Başga bir baglanyşyk

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>

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

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>

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

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>

Sitata

Blokot elementinde bar bolan belli sitata.

Çeşme ady bilen meşhur biri

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>

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

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>

Ö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

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>

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

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>

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

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>

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

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>

“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

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>

Titleörite at bejergisi

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

Bir ýere git

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>

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

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>

Suratyň üst-üstleri

Suraty kartoçkanyň fonuna öwüriň we kartyňyzyň tekstini örtüň. Surata baglylykda, goşmaça stil ý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

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>

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 kartoçkany kesiş nokadynda keseligine öwürmek üçin sapaklary .g-0ulanýarys . Kartyňyzyň mazmunyna baglylykda goşmaça düzedişler zerur bolup biler..col-md-*md

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

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>

Kart görnüşleri

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

Fon we reňk

V5.2.0 goşuldy

Kömekçilerimiz bilen background-colorgapma-garşylykly öň hatar düzüň . Ozal öz islegiňizi we stil üçin peýdaly zatlary el bilen jübütlemek talap edilýärdi, isleseňiz ulanyp bilersiňiz.color.text-bg-{color}.text-{color}.bg-{color}

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

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>

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 .visually-hiddensynp 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 kartasynyň 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.

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 hyzmatlary

Şeýle hem, kartoçkanyň sözbaşysynyň we aşaky sözbaşydaky serhetleri üý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

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>

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 deň giňlik we beýiklik sütünleri bilen birleşdirilen element hökmünde görkezmek üçin kart toparlaryny ulanyň. Kart toparlary ýygnalyp başlaýar we kesiş nokadyndan display: flex;başlap birmeňzeş ölçegler bilen birikdirilýär sm.

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

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>

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

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>

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.

Kartyň ady

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

Kartyň ady

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

Kartyň ady

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

Kartyň ady

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

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>

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

Kartyň ady

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

Kartyň ady

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

Kartyň ady

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

Kartyň ady

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

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>

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

Kartyň ady

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

Kartyň ady

Bu gysga kartoçka.

Kartyň ady

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

Kartyň ady

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

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>

Kart toparlaryndaky ýaly, 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

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>

Hünärçilik

Masoniýa meňzeş sütünleriň özüni alyp barşyny takyklamakv4 üçin diňe CSS usulyny ulanýardyk , ýöne bu usul köp ýakymsyz täsirleri bilen geldi . Bu görnüşli düzülişiň bolmagyny isleseňiz , “Masonry” plaginini ulanyp bilersiňiz. Masoniýa “Bootstrap” -a goşulmaýar , ýöne başlamaga kömek etmek üçin demo mysaly etdik .v5

CSS

Üýtgeýjiler

V5.2.0 goşuldy

“Bootstrap” -yň ösýän CSS üýtgeýjileriniň çemeleşmesiniň bir bölegi hökmünde, kartoçkalar .cardhakyky wagtlaýyn özleşdirmek üçin ýerli CSS üýtgeýjileri ulanýarlar. CSS üýtgeýjileriniň bahalary Sass arkaly kesgitlenýär, şonuň üçin Sass sazlamasy henizem goldanýar.

  --#{$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 üýtgeýjileri

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

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

Gorizontal

Kartyň ady

Kart görnüşleri

Fon we reňk

Esasy kartoçkanyň ady

Ikinji kartyň ady

Üstünlik kartoçkasynyň ady

Howp kartasynyň 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 kartasynyň 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

Tor kartalary

Kartyň ady

Kartyň ady

Kartyň ady

Kartyň ady

Kartyň ady

Kartyň ady

Kartyň ady