“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.
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.
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.
.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.
Toparlary sanaň
Kartadaky mazmun sanawlaryny çalt sanaw topary bilen dörediň.
Cras justo odio
Dapibus ac facilisis
Erosda westibulum
Aýratynlyk
Cras justo odio
Dapibus ac facilisis
Erosda westibulum
Cras justo odio
Dapibus ac facilisis
Erosda westibulum
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.
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.
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
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
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 .no-guttersulaný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
Kart görnüşleri
Kartlarda fonlaryny, serhetlerini we reňkini sazlamak üçin dürli wariantlar bar.
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.
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
Use border utilities to change just the border-color of a card. Note that you can put .text-{color} classes on the parent .card or a subset of the card’s contents as shown below.
Header
Primary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Secondary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Success card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Danger card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Warning card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Info card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Light card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Dark card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Mixins utilities
You can also change the borders on the card header and footer as needed, and even remove their background-color with .bg-transparent.
Header
Success card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Card layout
In addition to styling the content within cards, Bootstrap includes a few options for laying out series of cards. For the time being, these layout options are not yet responsive.
Card groups
Use card groups to render cards as a single, attached element with equal width and height columns. Card groups start off stacked and use display: flex; to become attached with uniform dimensions starting at the sm breakpoint.
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
Card title
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
Card title
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.
Last updated 3 mins ago
When using card groups with footers, their content will automatically line up.
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This card has supporting text below as a natural lead-in to additional content.
Card title
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.
Card decks
Need a set of equal width and height cards that aren’t attached to one another? Use card decks.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
Card title
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
Card title
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.
Last updated 3 mins ago
Just like with card groups, card footers in decks will automatically line up.
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This card has supporting text below as a natural lead-in to additional content.
Card title
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.
Grid cards
Use the Bootstrap grid system and its .row-cols classes to control how many grid columns (wrapped around your cards) you show per row. For example, here’s .row-cols-1 laying out the cards on one column, and .row-cols-md-2 splitting four cards to equal width across multiple rows, from the medium breakpoint up.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Change it to .row-cols-3 and you’ll see the fourth card wrap.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
When you need equal height, add .h-100 to the cards. If you want equal heights by default, you can set $card-height: 100% in Sass.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This is a short card.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card columns
Cards can be organized into Masonry-like columns with just CSS by wrapping them in .card-columns. Cards are built with CSS column properties instead of flexbox for easier alignment. Cards are ordered from top to bottom and left to right.
Heads up! Your mileage with card columns may vary. To prevent cards breaking across columns, we must set them to display: inline-block as column-break-inside: avoid isn’t a bulletproof solution yet.
Card title that wraps to a new line
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Card title
This card has supporting text below as a natural lead-in to additional content.
Iň soňky gezek 3 minut öň täzelendi
“Lorem ipsum dolor” oturýar. Bitewi posuere erat.
Kartyň ady
Bu kartoçkanyň aşagyndaky tekstiň yzygiderli ady we gysga paragrafiýasy bar.
Iň soňky gezek 3 minut öň täzelendi
“Lorem ipsum dolor” oturýar. Bitewi posuere garynja.
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
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.