Bootstrap se kaarte bied 'n buigsame en uitbreidbare inhoudhouer met veelvuldige variante en opsies.
Oor
'n Kaart is 'n buigsame en uitbreidbare inhoudhouer. Dit bevat opsies vir kop- en voettekste, 'n wye verskeidenheid inhoud, kontekstuele agtergrondkleure en kragtige vertoonopsies. As jy vertroud is met Bootstrap 3, vervang kaarte ons ou panele, putte en duimnaels. Soortgelyke funksionaliteit as daardie komponente is beskikbaar as wysigerklasse vir kaarte.
Voorbeeld
Kaarte word gebou met so min opmaak en style as moontlik, maar slaag steeds daarin om 'n ton beheer en aanpassing te lewer. Gebou met flexbox, bied hulle maklike belyning en meng goed met ander Bootstrap-komponente. Hulle het geen marginby verstek, so gebruik spasiëring nutsprogramme soos nodig.
Hieronder is 'n voorbeeld van 'n basiese kaart met gemengde inhoud en 'n vaste breedte. Kaarte het geen vaste breedte om te begin nie, so hulle sal natuurlik die volle breedte van sy ouerelement vul. Dit is maklik aangepas met ons verskillende grootte opsies .
Kaart titel
'n Paar vinnige voorbeeldteks om op die kaarttitel te bou en die grootste deel van die kaart se inhoud uit te maak.
Kaarte ondersteun 'n wye verskeidenheid inhoud, insluitend beelde, teks, lysgroepe, skakels en meer. Hieronder is voorbeelde van wat ondersteun word.
Liggaam
Die bousteen van 'n kaart is die .card-body. Gebruik dit wanneer jy 'n opgestopte gedeelte binne 'n kaart nodig het.
Dit is 'n paar teks binne 'n kaart liggaam.
Titels, teks en skakels
Kaarttitels word gebruik deur by .card-title'n <h*>merker te voeg. Op dieselfde manier word skakels bygevoeg en langs mekaar geplaas deur by .card-link'n <a>merker te voeg.
Onderskrifte word gebruik deur 'n .card-subtitleby 'n <h*>merker te voeg. As die .card-titleen die .card-subtitleitems in 'n .card-bodyitem geplaas word, is die kaarttitel en subtitel mooi in lyn.
Kaart titel
Kaart ondertitel
'n Paar vinnige voorbeeldteks om op die kaarttitel te bou en die grootste deel van die kaart se inhoud uit te maak.
.card-img-topplaas 'n prent bo-op die kaart. Met .card-textkan teks by die kaart gevoeg word. Teks binne .card-textkan ook met die standaard HTML-etikette gestileer word.
'n Paar vinnige voorbeeldteks om op die kaarttitel te bou en die grootste deel van die kaart se inhoud uit te maak.
Lys groepe
Skep lyste van inhoud in 'n kaart met 'n spoellysgroep.
Cras justo odio
Dapibus ac facilisis in
Vestibulum by eros
Uitgestalte
Cras justo odio
Dapibus ac facilisis in
Vestibulum by eros
Kombuis wasbak
Meng en pas verskeie inhoudtipes om die kaart te skep wat jy nodig het, of gooi alles daar in. Hieronder is prentstyle, blokke, teksstyle en 'n lysgroep - alles toegedraai in 'n kaart met vaste breedte.
Kaart titel
'n Paar vinnige voorbeeldteks om op die kaarttitel te bou en die grootste deel van die kaart se inhoud uit te maak.
Kaarte neem nie spesifiek widthaan om te begin nie, so hulle sal 100% wyd wees, tensy anders vermeld. Jy kan dit verander soos nodig met pasgemaakte CSS, roosterklasse, rooster Sass-mengings of nutsprogramme.
Gebruik roosteropmerking
Gebruik die rooster en draai kaarte in kolomme en rye soos nodig.
Spesiale titelbehandeling
Met ondersteunende teks hieronder as 'n natuurlike aanloop tot bykomende inhoud.
Kaarte bevat 'n paar opsies om met beelde te werk. Kies uit die byvoeging van "prentkappies" aan weerskante van 'n kaart, om prente met kaartinhoud te oorlê, of om bloot die prent in 'n kaart in te sluit.
Beeldkappies
Soortgelyk aan kop- en voettekste, kan kaarte bo- en onderste "prentkappies" insluit—prente aan die bo- of onderkant van 'n kaart.
Kaart titel
Dit is 'n wyer kaart met ondersteunende teks hieronder as 'n natuurlike aanloop tot bykomende inhoud. Hierdie inhoud is 'n bietjie langer.
Laas opgedateer 3 minute gelede
Kaart titel
Dit is 'n wyer kaart met ondersteunende teks hieronder as 'n natuurlike aanloop tot bykomende inhoud. Hierdie inhoud is 'n bietjie langer.
Laas opgedateer 3 minute gelede
Prentoorleggings
Verander 'n prent in 'n kaartagtergrond en bedek jou kaart se teks. Afhangende van die prent, het jy dalk bykomende style of nutsprogramme nodig of nie.
Kaart titel
Dit is 'n wyer kaart met ondersteunende teks hieronder as 'n natuurlike aanloop tot bykomende inhoud. Hierdie inhoud is 'n bietjie langer.
Laas opgedateer 3 minute gelede
Let daarop dat inhoud nie groter as die hoogte van die prent moet wees nie. As inhoud groter as die prent is, sal die inhoud buite die prent vertoon word.
Horisontaal
Deur 'n kombinasie van rooster- en nutsklasse te gebruik, kan kaarte horisontaal gemaak word op 'n selfoonvriendelike en responsiewe manier. In die voorbeeld hieronder verwyder ons die roostergeute met .no-guttersen gebruik .col-md-*klasse om die kaart horisontaal by die mdbreekpunt te maak. Verdere aanpassings kan nodig wees, afhangende van jou kaartinhoud.
Kaart titel
Dit is 'n wyer kaart met ondersteunende teks hieronder as 'n natuurlike aanloop tot bykomende inhoud. Hierdie inhoud is 'n bietjie langer.
Laas opgedateer 3 minute gelede
Kaartstyle
Kaarte bevat verskeie opsies om hul agtergronde, grense en kleur aan te pas.
'n Paar vinnige voorbeeldteks om op die kaarttitel te bou en die grootste deel van die kaart se inhoud uit te maak.
Opskrif
Sekondêre kaarttitel
'n Paar vinnige voorbeeldteks om op die kaarttitel te bou en die grootste deel van die kaart se inhoud uit te maak.
Opskrif
Sukseskaarttitel
'n Paar vinnige voorbeeldteks om op die kaarttitel te bou en die grootste deel van die kaart se inhoud uit te maak.
Opskrif
Gevaarkaarttitel
'n Paar vinnige voorbeeldteks om op die kaarttitel te bou en die grootste deel van die kaart se inhoud uit te maak.
Opskrif
Waarskuwing kaart titel
'n Paar vinnige voorbeeldteks om op die kaarttitel te bou en die grootste deel van die kaart se inhoud uit te maak.
Opskrif
Inligtingskaart titel
'n Paar vinnige voorbeeldteks om op die kaarttitel te bou en die grootste deel van die kaart se inhoud uit te maak.
Opskrif
Ligte kaart titel
'n Paar vinnige voorbeeldteks om op die kaarttitel te bou en die grootste deel van die kaart se inhoud uit te maak.
Opskrif
Donker kaart titel
'n Paar vinnige voorbeeldteks om op die kaarttitel te bou en die grootste deel van die kaart se inhoud uit te maak.
Dra betekenis aan ondersteunende tegnologieë oor
Die gebruik van kleur om betekenis toe te voeg, verskaf slegs 'n visuele aanduiding, wat nie aan gebruikers van ondersteunende tegnologieë – soos skermlesers – oorgedra sal word nie. Maak seker dat inligting wat deur die kleur aangedui word óf duidelik uit die inhoud self (bv. die sigbare teks), óf op alternatiewe wyse ingesluit word, soos bykomende teks wat by die .sr-onlyklas versteek is.
Grens
Gebruik grenshulpprogramme om net die border-colorvan 'n kaart te verander. Let daarop dat jy .text-{color}klasse op die ouer .cardof 'n subset van die kaart se inhoud kan plaas soos hieronder getoon.
Opskrif
Primêre kaart titel
'n Paar vinnige voorbeeldteks om op die kaarttitel te bou en die grootste deel van die kaart se inhoud uit te maak.
Opskrif
Sekondêre kaarttitel
'n Paar vinnige voorbeeldteks om op die kaarttitel te bou en die grootste deel van die kaart se inhoud uit te maak.
Opskrif
Sukseskaarttitel
'n Paar vinnige voorbeeldteks om op die kaarttitel te bou en die grootste deel van die kaart se inhoud uit te maak.
Opskrif
Gevaarkaarttitel
'n Paar vinnige voorbeeldteks om op die kaarttitel te bou en die grootste deel van die kaart se inhoud uit te maak.
Opskrif
Waarskuwing kaart titel
'n Paar vinnige voorbeeldteks om op die kaarttitel te bou en die grootste deel van die kaart se inhoud uit te maak.
Opskrif
Inligtingskaart titel
'n Paar vinnige voorbeeldteks om op die kaarttitel te bou en die grootste deel van die kaart se inhoud uit te maak.
Opskrif
Ligte kaart titel
'n Paar vinnige voorbeeldteks om op die kaarttitel te bou en die grootste deel van die kaart se inhoud uit te maak.
Opskrif
Donker kaart titel
'n Paar vinnige voorbeeldteks om op die kaarttitel te bou en die grootste deel van die kaart se inhoud uit te maak.
Mixins nutsprogramme
Jy kan ook die grense op die kaartkop- en voetskrif verander soos nodig, en selfs hulle verwyder background-colormet .bg-transparent.
Opskrif
Sukseskaarttitel
'n Paar vinnige voorbeeldteks om op die kaarttitel te bou en die grootste deel van die kaart se inhoud uit te maak.
Kaart uitleg
Benewens die stilering van die inhoud binne kaarte, bevat Bootstrap 'n paar opsies om reekse kaarte uit te lê. Vir eers reageer hierdie uitlegopsies nog nie .
Kaartgroepe
Gebruik kaartgroepe om kaarte as 'n enkele, aangehegte element met gelyke breedte en hoogte kolomme weer te gee. Kaartgroepe gebruik display: flex;om hul eenvormige grootte te bereik.
Kaart titel
Dit is 'n wyer kaart met ondersteunende teks hieronder as 'n natuurlike aanloop tot bykomende inhoud. Hierdie inhoud is 'n bietjie langer.
Laas opgedateer 3 minute gelede
Kaart titel
Hierdie kaart het ondersteunende teks hieronder as 'n natuurlike inleiding tot bykomende inhoud.
Laas opgedateer 3 minute gelede
Kaart titel
Dit is 'n wyer kaart met ondersteunende teks hieronder as 'n natuurlike aanloop tot bykomende inhoud. Hierdie kaart het selfs langer inhoud as die eerste om daardie gelyke hoogte-aksie te wys.
Laas opgedateer 3 minute gelede
Wanneer kaartgroepe met voetskrif gebruik word, sal hul inhoud outomaties in lyn wees.
Kaart titel
Dit is 'n wyer kaart met ondersteunende teks hieronder as 'n natuurlike aanloop tot bykomende inhoud. Hierdie inhoud is 'n bietjie langer.
Kaart titel
Hierdie kaart het ondersteunende teks hieronder as 'n natuurlike inleiding tot bykomende inhoud.
Kaart titel
Dit is 'n wyer kaart met ondersteunende teks hieronder as 'n natuurlike aanloop tot bykomende inhoud. Hierdie kaart het selfs langer inhoud as die eerste om daardie gelyke hoogte-aksie te wys.
Kaart dekke
Het jy 'n stel gelyke breedte- en hoogtekaarte nodig wat nie aan mekaar geheg is nie? Gebruik kaartdekke.
Kaart titel
Dit is 'n langer kaart met ondersteunende teks hieronder as 'n natuurlike inleiding tot bykomende inhoud. Hierdie inhoud is 'n bietjie langer.
Laas opgedateer 3 minute gelede
Kaart titel
Hierdie kaart het ondersteunende teks hieronder as 'n natuurlike inleiding tot bykomende inhoud.
Laas opgedateer 3 minute gelede
Kaart titel
Dit is 'n wyer kaart met ondersteunende teks hieronder as 'n natuurlike aanloop tot bykomende inhoud. Hierdie kaart het selfs langer inhoud as die eerste om daardie gelyke hoogte-aksie te wys.
Laas opgedateer 3 minute gelede
Net soos met kaartgroepe, sal kaartvoetskrifte in dekke outomaties in lyn wees.
Kaart titel
Dit is 'n wyer kaart met ondersteunende teks hieronder as 'n natuurlike aanloop tot bykomende inhoud. Hierdie inhoud is 'n bietjie langer.
Kaart titel
Hierdie kaart het ondersteunende teks hieronder as 'n natuurlike inleiding tot bykomende inhoud.
Kaart titel
Dit is 'n wyer kaart met ondersteunende teks hieronder as 'n natuurlike aanloop tot bykomende inhoud. Hierdie kaart het selfs langer inhoud as die eerste om daardie gelyke hoogte-aksie te wys.
Rooster kaarte
Gebruik die Bootstrap-roosterstelsel en sy .row-colsklasse om te beheer hoeveel roosterkolomme (om jou kaarte toegedraai) jy per ry wys. Hier is byvoorbeeld .row-cols-1om die kaarte op een kolom uit te lê en .row-cols-md-2vier kaarte te verdeel tot gelyke breedte oor verskeie rye, vanaf die medium breekpunt na bo.
Kaart titel
Dit is 'n langer kaart met ondersteunende teks hieronder as 'n natuurlike inleiding tot bykomende inhoud. Hierdie inhoud is 'n bietjie langer.
Kaart titel
Dit is 'n langer kaart met ondersteunende teks hieronder as 'n natuurlike inleiding tot bykomende inhoud. Hierdie inhoud is 'n bietjie langer.
Kaart titel
Dit is 'n langer kaart met ondersteunende teks hieronder as 'n natuurlike inleiding tot bykomende inhoud.
Kaart titel
Dit is 'n langer kaart met ondersteunende teks hieronder as 'n natuurlike inleiding tot bykomende inhoud. Hierdie inhoud is 'n bietjie langer.
Verander dit na .row-cols-3en jy sal die vierde kaart omvou sien.
Kaart titel
Dit is 'n langer kaart met ondersteunende teks hieronder as 'n natuurlike inleiding tot bykomende inhoud. Hierdie inhoud is 'n bietjie langer.
Kaart titel
Dit is 'n langer kaart met ondersteunende teks hieronder as 'n natuurlike inleiding tot bykomende inhoud. Hierdie inhoud is 'n bietjie langer.
Kaart titel
Dit is 'n langer kaart met ondersteunende teks hieronder as 'n natuurlike inleiding tot bykomende inhoud.
Kaart titel
Dit is 'n langer kaart met ondersteunende teks hieronder as 'n natuurlike inleiding tot bykomende inhoud. Hierdie inhoud is 'n bietjie langer.
Wanneer jy gelyke hoogte nodig het, voeg .h-100by die kaarte. As jy by verstek gelyke hoogtes wil hê, kan jy $card-height: 100%in Sass instel.
Kaart titel
Dit is 'n langer kaart met ondersteunende teks hieronder as 'n natuurlike inleiding tot bykomende inhoud. Hierdie inhoud is 'n bietjie langer.
Kaart titel
Dit is 'n kort kaart.
Kaart titel
Dit is 'n langer kaart met ondersteunende teks hieronder as 'n natuurlike inleiding tot bykomende inhoud.
Kaart titel
Dit is 'n langer kaart met ondersteunende teks hieronder as 'n natuurlike inleiding tot bykomende inhoud. Hierdie inhoud is 'n bietjie langer.
Kaartkolomme
Kaarte kan georganiseer word in messelwerk -agtige kolomme met net CSS deur dit in te draai .card-columns. Kaarte is gebou met CSS column-eienskappe in plaas van flexbox vir makliker belyning. Kaarte word van bo na onder en van links na regs gerangskik.
Let op! Jou kilometers met kaartkolomme kan verskil. Om te verhoed dat kaarte oor kolomme breek, moet ons dit stel display: inline-blockas column-break-inside: avoiddit nog nie 'n koeëlvaste oplossing is nie.
Kaarttitel wat na 'n nuwe reël toevou
Dit is 'n langer kaart met ondersteunende teks hieronder as 'n natuurlike inleiding tot bykomende inhoud. Hierdie inhoud is 'n bietjie langer.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heelgetal posuere erat 'n ante.
Kaart titel
Hierdie kaart het ondersteunende teks hieronder as 'n natuurlike inleiding tot bykomende inhoud.
Laas opgedateer 3 minute gelede
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heelgetal posuere tydperk.
Kaart titel
Hierdie kaart het 'n gereelde titel en kort teksparagraaf daaronder.
Laas opgedateer 3 minute gelede
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heelgetal posuere erat 'n ante.
Kaart titel
Dit is nog 'n kaart met titel en ondersteunende teks hieronder. Hierdie kaart het bykomende inhoud om dit in die algemeen effens groter te maak.
Laas opgedateer 3 minute gelede
Kaartkolomme kan ook uitgebrei en aangepas word met 'n paar bykomende kode. Hieronder is 'n uitbreiding van die .card-columnsklas wat dieselfde CSS gebruik wat ons gebruik - CSS kolomme - om 'n stel responsiewe vlakke te genereer om die aantal kolomme te verander.