Nagbibigay ang mga card ng Bootstrap ng nababaluktot at napapalawak na lalagyan ng nilalaman na may maraming variant at opsyon.
Tungkol sa
Ang card ay isang flexible at extensible na lalagyan ng content. Kabilang dito ang mga opsyon para sa mga header at footer, isang malawak na iba't ibang nilalaman, mga kulay ng background sa konteksto, at mahusay na mga opsyon sa pagpapakita. Kung pamilyar ka sa Bootstrap 3, pinapalitan ng mga card ang aming mga lumang panel, balon, at thumbnail. Ang katulad na pag-andar sa mga bahaging iyon ay magagamit bilang mga klase ng modifier para sa mga card.
Halimbawa
Binuo ang mga card na may kaunting markup at istilo hangga't maaari, ngunit nakakapaghatid pa rin ng isang toneladang kontrol at pag-customize. Binuo gamit ang flexbox, nag-aalok ang mga ito ng madaling pagkakahanay at pinaghalong mabuti sa iba pang mga bahagi ng Bootstrap. Wala silang bilang margindefault, kaya gumamit ng mga spacing utilities kung kinakailangan.
Nasa ibaba ang isang halimbawa ng isang pangunahing card na may halo-halong nilalaman at isang nakapirming lapad. Ang mga card ay walang nakapirming lapad upang magsimula, kaya natural na pupunuin ng mga ito ang buong lapad ng pangunahing elemento nito. Ito ay madaling na-customize sa aming iba't ibang mga pagpipilian sa pagpapalaki .
Pamagat ng card
Ilang mabilis na halimbawa ng text na ibubuo sa pamagat ng card at bubuo sa karamihan ng nilalaman ng card.
Sinusuportahan ng mga card ang iba't ibang uri ng nilalaman, kabilang ang mga larawan, teksto, mga pangkat ng listahan, mga link, at higit pa. Nasa ibaba ang mga halimbawa ng kung ano ang sinusuportahan.
Katawan
Ang building block ng isang card ay ang .card-body. Gamitin ito sa tuwing kailangan mo ng may palaman na seksyon sa loob ng isang card.
Ito ay ilang text sa loob ng isang card body.
Mga pamagat, teksto, at mga link
Ginagamit ang mga pamagat ng card sa pamamagitan ng pagdaragdag .card-titlesa isang <h*>tag. Sa parehong paraan, ang mga link ay idinaragdag at inilalagay sa tabi ng isa't isa sa pamamagitan ng pagdaragdag .card-linksa isang <a>tag.
Ginagamit ang mga subtitle sa pamamagitan ng pagdaragdag ng a .card-subtitlesa isang <h*>tag. Kung ang .card-titleat ang mga .card-subtitleitem ay inilagay sa isang .card-bodyitem, ang pamagat ng card at subtitle ay maayos na nakahanay.
Pamagat ng card
Subtitle ng card
Ilang mabilis na halimbawa ng text na ibubuo sa pamagat ng card at bubuo sa karamihan ng nilalaman ng card.
.card-img-topnaglalagay ng larawan sa itaas ng card. Gamit .card-textang , maaaring idagdag ang text sa card. Ang teksto sa loob .card-textay maaari ding i-istilo gamit ang mga karaniwang HTML na tag.
Ilang mabilis na halimbawa ng text na ibubuo sa pamagat ng card at bubuo sa karamihan ng nilalaman ng card.
Maglista ng mga pangkat
Gumawa ng mga listahan ng content sa isang card na may flush list group.
Cras justo odio
Dapibus ac facilisis in
Vestibulum at eros
Itinatampok
Cras justo odio
Dapibus ac facilisis in
Vestibulum at eros
Lababo
Paghaluin at pagtugmain ang maraming uri ng nilalaman upang gawin ang card na kailangan mo, o itapon ang lahat doon. Ipinapakita sa ibaba ang mga istilo ng larawan, mga bloke, mga istilo ng teksto, at isang pangkat ng listahan—lahat ay nakabalot sa isang fixed-width na card.
Pamagat ng card
Ilang mabilis na halimbawa ng text na ibubuo sa pamagat ng card at bubuo sa karamihan ng nilalaman ng card.
Ipinapalagay ng mga card na walang tiyak widthna magsisimula, kaya magiging 100% ang lapad ng mga ito maliban kung iba ang nakasaad. Mababago mo ito kung kinakailangan gamit ang custom na CSS, mga grid class, grid Sass mixin, o mga utility.
Gamit ang grid markup
Gamit ang grid, balutin ang mga card sa mga column at row kung kinakailangan.
Espesyal na paggamot sa pamagat
Gamit ang pagsuporta sa text sa ibaba bilang natural na lead-in sa karagdagang content.
Kasama sa mga card ang ilang mga opsyon para sa pagtatrabaho sa mga larawan. Pumili mula sa pagdaragdag ng "mga cap ng larawan" sa magkabilang dulo ng isang card, pag-overlay ng mga larawan na may nilalaman ng card, o pag-embed lamang ng larawan sa isang card.
Mga cap ng larawan
Katulad ng mga header at footer, maaaring magsama ang mga card sa itaas at ibaba ng "mga cap ng larawan"—mga larawan sa itaas o ibaba ng isang card.
Pamagat ng card
Ito ay isang mas malawak na card na may sumusuportang text sa ibaba bilang natural na lead-in sa karagdagang nilalaman. Medyo mas mahaba ang nilalamang ito.
Huling na-update 3 minuto ang nakalipas
Pamagat ng card
Ito ay isang mas malawak na card na may sumusuportang text sa ibaba bilang natural na lead-in sa karagdagang nilalaman. Medyo mas mahaba ang nilalamang ito.
Huling na-update 3 minuto ang nakalipas
Mga overlay ng larawan
Gawing background ng card ang isang larawan at i-overlay ang text ng iyong card. Depende sa larawan, maaaring kailanganin mo o hindi ang mga karagdagang istilo o kagamitan.
Pamagat ng card
Ito ay isang mas malawak na card na may sumusuportang text sa ibaba bilang natural na lead-in sa karagdagang nilalaman. Medyo mas mahaba ang nilalamang ito.
Huling na-update 3 minuto ang nakalipas
Tandaan na ang nilalaman ay hindi dapat mas malaki kaysa sa taas ng larawan. Kung ang nilalaman ay mas malaki kaysa sa larawan ang nilalaman ay ipapakita sa labas ng larawan.
Pahalang
Gamit ang kumbinasyon ng mga klase ng grid at utility, maaaring gawing pahalang ang mga card sa isang mobile-friendly at tumutugon na paraan. Sa halimbawa sa ibaba, tinatanggal namin ang mga grid gutters .no-guttersat ginagamit namin ang mga .col-md-*klase para gawing pahalang ang card sa mdbreakpoint. Maaaring kailanganin ang mga karagdagang pagsasaayos depende sa nilalaman ng iyong card.
Pamagat ng card
Ito ay isang mas malawak na card na may sumusuportang text sa ibaba bilang natural na lead-in sa karagdagang nilalaman. Medyo mas mahaba ang nilalamang ito.
Huling na-update 3 minuto ang nakalipas
Mga istilo ng card
Kasama sa mga card ang iba't ibang opsyon para sa pag-customize ng kanilang mga background, hangganan, at kulay.
Ilang mabilis na halimbawa ng text na ibubuo sa pamagat ng card at bubuo sa karamihan ng nilalaman ng card.
Header
Pangalawang pamagat ng card
Ilang mabilis na halimbawa ng text na ibubuo sa pamagat ng card at bubuo sa karamihan ng nilalaman ng card.
Header
Pamagat ng card ng tagumpay
Ilang mabilis na halimbawa ng text na ibubuo sa pamagat ng card at bubuo sa karamihan ng nilalaman ng card.
Header
Pamagat ng danger card
Ilang mabilis na halimbawa ng text na ibubuo sa pamagat ng card at bubuo sa karamihan ng nilalaman ng card.
Header
Pamagat ng card ng babala
Ilang mabilis na halimbawa ng text na ibubuo sa pamagat ng card at bubuo sa karamihan ng nilalaman ng card.
Header
Pamagat ng info card
Ilang mabilis na halimbawa ng text na ibubuo sa pamagat ng card at bubuo sa karamihan ng nilalaman ng card.
Header
Banayad na pamagat ng card
Ilang mabilis na halimbawa ng text na ibubuo sa pamagat ng card at bubuo sa karamihan ng nilalaman ng card.
Header
Madilim na pamagat ng card
Ilang mabilis na halimbawa ng text na ibubuo sa pamagat ng card at bubuo sa karamihan ng nilalaman ng card.
Naghahatid ng kahulugan sa mga pantulong na teknolohiya
Ang paggamit ng kulay upang magdagdag ng kahulugan ay nagbibigay lamang ng visual na indikasyon, na hindi ibibigay sa mga gumagamit ng mga pantulong na teknolohiya - tulad ng mga screen reader. Siguraduhin na ang impormasyong tinutukoy ng kulay ay maaaring halata mula sa nilalaman mismo (hal. ang nakikitang teksto), o kasama sa pamamagitan ng mga alternatibong paraan, tulad ng karagdagang tekstong nakatago sa .sr-onlyklase.
Border
Gumamit ng mga kagamitan sa hangganan upang baguhin lamang ang border-colorisang card. Tandaan na maaari kang maglagay .text-{color}ng mga klase sa magulang .cardo isang subset ng mga nilalaman ng card tulad ng ipinapakita sa ibaba.
Header
Pamagat ng pangunahing card
Ilang mabilis na halimbawa ng text na ibubuo sa pamagat ng card at bubuo sa karamihan ng nilalaman ng card.
Header
Pangalawang pamagat ng card
Ilang mabilis na halimbawa ng text na ibubuo sa pamagat ng card at bubuo sa karamihan ng nilalaman ng card.
Header
Pamagat ng card ng tagumpay
Ilang mabilis na halimbawa ng text na ibubuo sa pamagat ng card at bubuo sa karamihan ng nilalaman ng card.
Header
Pamagat ng danger card
Ilang mabilis na halimbawa ng text na ibubuo sa pamagat ng card at bubuo sa karamihan ng nilalaman ng card.
Header
Pamagat ng card ng babala
Ilang mabilis na halimbawa ng text na ibubuo sa pamagat ng card at bubuo sa karamihan ng nilalaman ng card.
Header
Pamagat ng info card
Ilang mabilis na halimbawa ng text na ibubuo sa pamagat ng card at bubuo sa karamihan ng nilalaman ng card.
Header
Banayad na pamagat ng card
Ilang mabilis na halimbawa ng text na ibubuo sa pamagat ng card at bubuo sa karamihan ng nilalaman ng card.
Header
Madilim na pamagat ng card
Ilang mabilis na halimbawa ng text na ibubuo sa pamagat ng card at bubuo sa karamihan ng nilalaman ng card.
Mga utility ng Mixins
Maaari mo ring baguhin ang mga hangganan sa card header at footer kung kinakailangan, at kahit na alisin ang mga ito gamit background-colorang .bg-transparent.
Header
Pamagat ng card ng tagumpay
Ilang mabilis na halimbawa ng text na ibubuo sa pamagat ng card at bubuo sa karamihan ng nilalaman ng card.
Layout ng card
Bilang karagdagan sa pag-istilo ng nilalaman sa loob ng mga card, ang Bootstrap ay may kasamang ilang mga opsyon para sa paglalagay ng mga serye ng mga card. Sa ngayon , ang mga pagpipilian sa layout na ito ay hindi pa tumutugon .
Mga grupo ng card
Gumamit ng mga pangkat ng card upang i-render ang mga card bilang isang solong, naka-attach na elemento na may pantay na lapad at taas na mga column. Ginagamit ng mga grupo ng card display: flex;upang makamit ang kanilang pare-parehong laki.
Pamagat ng card
Ito ay isang mas malawak na card na may sumusuportang text sa ibaba bilang natural na lead-in sa karagdagang nilalaman. Medyo mas mahaba ang nilalamang ito.
Huling na-update 3 minuto ang nakalipas
Pamagat ng card
Ang card na ito ay may sumusuportang text sa ibaba bilang natural na lead-in sa karagdagang nilalaman.
Huling na-update 3 minuto ang nakalipas
Pamagat ng card
Ito ay isang mas malawak na card na may sumusuportang text sa ibaba bilang natural na lead-in sa karagdagang nilalaman. Ang card na ito ay may mas mahabang content kaysa sa unang nagpakita ng pantay na taas na pagkilos.
Huling na-update 3 minuto ang nakalipas
Kapag gumagamit ng mga pangkat ng card na may mga footer, awtomatikong malilinya ang kanilang nilalaman.
Pamagat ng card
Ito ay isang mas malawak na card na may sumusuportang text sa ibaba bilang natural na lead-in sa karagdagang nilalaman. Medyo mas mahaba ang nilalamang ito.
Pamagat ng card
Ang card na ito ay may sumusuportang text sa ibaba bilang natural na lead-in sa karagdagang nilalaman.
Pamagat ng card
Ito ay isang mas malawak na card na may sumusuportang text sa ibaba bilang natural na lead-in sa karagdagang nilalaman. Ang card na ito ay may mas mahabang content kaysa sa unang nagpakita ng pantay na taas na pagkilos.
Mga card deck
Kailangan ng isang hanay ng pantay na lapad at taas na mga card na hindi nakakabit sa isa't isa? Gumamit ng mga card deck.
Pamagat ng card
Ito ay mas mahabang card na may sumusuportang text sa ibaba bilang natural na lead-in sa karagdagang content. Medyo mas mahaba ang nilalamang ito.
Huling na-update 3 minuto ang nakalipas
Pamagat ng card
Ang card na ito ay may sumusuportang text sa ibaba bilang natural na lead-in sa karagdagang nilalaman.
Huling na-update 3 minuto ang nakalipas
Pamagat ng card
Ito ay isang mas malawak na card na may sumusuportang text sa ibaba bilang natural na lead-in sa karagdagang nilalaman. Ang card na ito ay may mas mahabang content kaysa sa unang nagpakita ng pantay na taas na pagkilos.
Huling na-update 3 minuto ang nakalipas
Katulad ng sa mga pangkat ng card, awtomatikong pumila ang mga card footer sa mga deck.
Pamagat ng card
Ito ay isang mas malawak na card na may sumusuportang text sa ibaba bilang natural na lead-in sa karagdagang nilalaman. Medyo mas mahaba ang nilalamang ito.
Pamagat ng card
Ang card na ito ay may sumusuportang text sa ibaba bilang natural na lead-in sa karagdagang nilalaman.
Pamagat ng card
Ito ay isang mas malawak na card na may sumusuportang text sa ibaba bilang natural na lead-in sa karagdagang nilalaman. Ang card na ito ay may mas mahabang content kaysa sa unang nagpakita ng pantay na taas na pagkilos.
Mga grid card
Gamitin ang Bootstrap grid system at ang mga .row-colsklase nito para kontrolin kung gaano karaming grid column (nakabalot sa iyong mga card) ang ipinapakita mo sa bawat row. Halimbawa, narito ang .row-cols-1paglalagay ng mga card sa isang column, at .row-cols-md-2paghahati ng apat na card sa pantay na lapad sa maraming row, mula sa medium breakpoint pataas.
Pamagat ng card
Ito ay mas mahabang card na may sumusuportang text sa ibaba bilang natural na lead-in sa karagdagang content. Medyo mas mahaba ang nilalamang ito.
Pamagat ng card
Ito ay mas mahabang card na may sumusuportang text sa ibaba bilang natural na lead-in sa karagdagang content. Medyo mas mahaba ang nilalamang ito.
Pamagat ng card
Ito ay mas mahabang card na may sumusuportang text sa ibaba bilang natural na lead-in sa karagdagang content.
Pamagat ng card
Ito ay mas mahabang card na may sumusuportang text sa ibaba bilang natural na lead-in sa karagdagang content. Medyo mas mahaba ang nilalamang ito.
Palitan ito .row-cols-3at makikita mo ang ikaapat na balot ng card.
Pamagat ng card
Ito ay mas mahabang card na may sumusuportang text sa ibaba bilang natural na lead-in sa karagdagang content. Medyo mas mahaba ang nilalamang ito.
Pamagat ng card
Ito ay mas mahabang card na may sumusuportang text sa ibaba bilang natural na lead-in sa karagdagang content. Medyo mas mahaba ang nilalamang ito.
Pamagat ng card
Ito ay mas mahabang card na may sumusuportang text sa ibaba bilang natural na lead-in sa karagdagang content.
Pamagat ng card
Ito ay mas mahabang card na may sumusuportang text sa ibaba bilang natural na lead-in sa karagdagang content. Medyo mas mahaba ang nilalamang ito.
Kapag kailangan mo ng pantay na taas, idagdag .h-100sa mga card. Kung gusto mo ng pantay na taas bilang default, maaari mong itakda $card-height: 100%sa Sass.
Pamagat ng card
Ito ay mas mahabang card na may sumusuportang text sa ibaba bilang natural na lead-in sa karagdagang content. Medyo mas mahaba ang nilalamang ito.
Pamagat ng card
Ito ay isang maikling card.
Pamagat ng card
Ito ay mas mahabang card na may sumusuportang text sa ibaba bilang natural na lead-in sa karagdagang content.
Pamagat ng card
Ito ay mas mahabang card na may sumusuportang text sa ibaba bilang natural na lead-in sa karagdagang content. Medyo mas mahaba ang nilalamang ito.
Mga column ng card
Maaaring ayusin ang mga card sa mga column na tulad ng Masonry.card-columns gamit lamang ang CSS sa pamamagitan ng pagbabalot sa mga ito sa . Ang mga card ay binuo gamit ang mga columnkatangian ng CSS sa halip na flexbox para sa mas madaling pagkakahanay. Ang mga card ay inayos mula sa itaas hanggang sa ibaba at kaliwa hanggang kanan.
Heads up! Maaaring mag-iba ang iyong mileage sa mga column ng card. Upang maiwasan ang mga card na masira sa mga column, dapat nating itakda ang mga ito display: inline-blockbilang column-break-inside: avoidhindi pa bulletproof na solusyon.
Pamagat ng card na bumabalot sa isang bagong linya
Ito ay mas mahabang card na may sumusuportang text sa ibaba bilang natural na lead-in sa karagdagang content. Medyo mas mahaba ang nilalamang ito.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Pamagat ng card
Ang card na ito ay may sumusuportang text sa ibaba bilang natural na lead-in sa karagdagang nilalaman.
Huling na-update 3 minuto ang nakalipas
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.
Pamagat ng card
Ang card na ito ay may regular na pamagat at maikling talata ng teksto sa ibaba nito.
Huling na-update 3 minuto ang nakalipas
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Pamagat ng card
Ito ay isa pang card na may pamagat at sumusuportang teksto sa ibaba. Ang card na ito ay may ilang karagdagang nilalaman upang gawin itong bahagyang mas mataas sa pangkalahatan.
Huling na-update 3 minuto ang nakalipas
Ang mga column ng card ay maaari ding palawigin at i-customize gamit ang ilang karagdagang code. Ang ipinapakita sa ibaba ay isang extension ng .card-columnsklase gamit ang parehong CSS na ginagamit namin—mga CSS column— upang bumuo ng isang hanay ng mga tumutugong tier para sa pagbabago ng bilang ng mga column.