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 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-body
gurluşy Kartanyň içinde gaplanan bölüm gerek bolanda ulanyň.
<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-title
arkaly 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-subtitle
Subtitrler 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-top
kartyň ý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 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
<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>
- Bir element
- Ikinji element
- Üçünji element
<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
<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
<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ň.
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-header
goş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>
Blokot elementinde bar bolan belli sitata.
<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>
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">
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 width
baş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 gitTitleö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ň .
<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 gitTitleörite at bejergisi
Goşmaça mazmuna tebigy giriş hökmünde aşakdaky goldaw teksti bilen.
Bir ýere gitTitleö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-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>
Nawigasiýa
“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" 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" 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.
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 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 stiller ýa-da kömekçi enjamlar gerek bolmazlygy ýa-da bolmazlygy mümkin.
<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>
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 .g-0
ulaný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
<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
Kartanyň daşky görnüşini üýtgetmek üçin tekst reňkini we fon enjamlaryny ulanyň .
Esasy kartoçkanyň ady
Kartyň adyna esaslanmak we kartyň mazmunynyň esasy bölegini düzmek üçin käbir çalt mysal teksti.
Ikinji kartyň ady
Kartyň adyna esaslanmak we kartyň mazmunynyň esasy bölegini düzmek üçin käbir çalt mysal teksti.
Üstünlik kartoçkasynyň ady
Kartyň adyna esaslanmak we kartyň mazmunynyň esasy bölegini düzmek üçin käbir çalt mysal teksti.
Howp kartynyň ady
Kartyň adyna esaslanmak we kartyň mazmunynyň esasy bölegini düzmek üçin käbir çalt mysal teksti.
Duýduryş kartynyň ady
Kartyň adyna esaslanmak we kartyň mazmunynyň esasy bölegini düzmek üçin käbir çalt mysal teksti.
Maglumat kartasynyň ady
Kartyň adyna esaslanmak we kartyň mazmunynyň esasy bölegini düzmek üçin käbir çalt mysal teksti.
Lighteňil kartoçkanyň ady
Kartyň adyna esaslanmak we kartyň mazmunynyň esasy bölegini düzmek üçin käbir çalt mysal teksti.
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-dark bg-warning mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Warning card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-dark bg-info mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Info card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-dark bg-light mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Light card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Dark card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
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-hidden
synp 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-color
goýup bilersiňiz..text-{color}
.card
Esasy kartoçkanyň ady
Kartyň adyna esaslanmak we kartyň mazmunynyň esasy bölegini düzmek üçin käbir çalt mysal teksti.
Ikinji kartyň ady
Kartyň adyna esaslanmak we kartyň mazmunynyň esasy bölegini düzmek üçin käbir çalt mysal teksti.
Üstünlik kartoçkasynyň ady
Kartyň adyna esaslanmak we kartyň mazmunynyň esasy bölegini düzmek üçin käbir çalt mysal teksti.
Howp kartynyň ady
Kartyň adyna esaslanmak we kartyň mazmunynyň esasy bölegini düzmek üçin käbir çalt mysal teksti.
Duýduryş kartynyň ady
Kartyň adyna esaslanmak we kartyň mazmunynyň esasy bölegini düzmek üçin käbir çalt mysal teksti.
Maglumat kartasynyň ady
Kartyň adyna esaslanmak we kartyň mazmunynyň esasy bölegini düzmek üçin käbir çalt mysal teksti.
Lighteňil kartoçkanyň ady
Kartyň adyna esaslanmak we kartyň mazmunynyň esasy bölegini düzmek üçin käbir çalt mysal teksti.
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">
<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şynyň çäklerini zerur bolanda üýtgedip bilersiňiz, hatda olaryň background-color
bilen aýryp .bg-transparent
bilersiňiz.
Üstünlik kartoçkasynyň ady
Kartyň adyna esaslanmak we kartyň mazmunynyň esasy bölegini düzmek üçin käbir çalt mysal teksti.
<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 ý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
<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.
Kartyň ady
Bu kartoçkada goşmaça mazmuna tebigy giriş hökmünde aşakdaky goldaýan tekst bar.
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.
<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-cols
synplaryny 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-1
kartoçkalary bir sütüne ýerleşdirmek we .row-cols-md-2
orta 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.
<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-3
we 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.
<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-100
bolsa, 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.
<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.
Kartyň ady
Bu kartoçkada goşmaça mazmuna tebigy giriş hökmünde aşakdaky goldaýan tekst bar.
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.
<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
Sass
Üýtgeýjiler
$card-spacer-y: $spacer;
$card-spacer-x: $spacer;
$card-title-spacer-y: $spacer * .5;
$card-border-width: $border-width;
$card-border-radius: $border-radius;
$card-border-color: rgba($black, .125);
$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;