Cardurile Bootstrap oferă un container de conținut flexibil și extensibil, cu mai multe variante și opțiuni.
Despre
Un card este un container de conținut flexibil și extensibil. Include opțiuni pentru anteturi și subsoluri, o mare varietate de conținut, culori de fundal contextuale și opțiuni de afișare puternice. Dacă sunteți familiarizat cu Bootstrap 3, cardurile înlocuiesc vechile noastre panouri, puțuri și miniaturi. Funcționalități similare acelor componente sunt disponibile ca clase de modificatori pentru cărți.
Exemplu
Cardurile sunt construite cu cât mai puține marcaje și stiluri posibil, dar reușesc totuși să ofere o mulțime de control și personalizare. Construite cu flexbox, oferă o aliniere ușoară și se amestecă bine cu alte componente Bootstrap. Nu au marginîn mod implicit, așa că utilizați utilitare de spațiere după cum este necesar.
Mai jos este un exemplu de card de bază cu conținut mixt și o lățime fixă. Cardurile nu au o lățime fixă pentru a începe, așa că vor umple în mod natural toată lățimea elementului părinte. Acesta este ușor de personalizat cu diferitele noastre opțiuni de dimensionare .
Titlul cardului
Câteva exemple de text rapid care să se bazeze pe titlul cardului și să alcătuiască cea mai mare parte a conținutului cardului.
Cardurile acceptă o mare varietate de conținut, inclusiv imagini, text, grupuri de liste, linkuri și multe altele. Mai jos sunt exemple de ceea ce este acceptat.
Corp
Elementul de bază al unei cărți este .card-body. Utilizați-l oricând aveți nevoie de o secțiune căptușită într-un card.
Acesta este un text din corpul unui card.
Titluri, text și link-uri
Titlurile cardurilor sunt folosite prin adăugarea .card-titlela o <h*>etichetă. În același mod, linkurile sunt adăugate și plasate unul lângă celălalt prin adăugarea .card-linkla o <a>etichetă.
Subtitrările sunt folosite prin adăugarea unui .card-subtitlela o <h*>etichetă. Dacă elementele .card-titleși .card-subtitlesunt plasate într-un .card-bodyarticol, titlul cardului și subtitlul sunt aliniate frumos.
Titlul cardului
Subtitrare card
Câteva exemple de text rapid care să se bazeze pe titlul cardului și să alcătuiască cea mai mare parte a conținutului cardului.
.card-img-topplasează o imagine în partea de sus a cardului. Cu .card-text, textul poate fi adăugat pe card. Textul din interior .card-textpoate fi, de asemenea, stilat cu etichetele HTML standard.
Câteva exemple de text rapid care să se bazeze pe titlul cardului și să alcătuiască cea mai mare parte a conținutului cardului.
Listează grupuri
Creați liste de conținut într-un card cu un grup de liste de culoare.
Cras justo odio
Dapibus ac facilitis in
Vestibulum la eros
Recomandate
Cras justo odio
Dapibus ac facilitis in
Vestibulum la eros
Chiuveta de bucatarie
Combinați și potriviți mai multe tipuri de conținut pentru a crea cardul de care aveți nevoie sau aruncați totul acolo. Mai jos sunt afișate stiluri de imagine, blocuri, stiluri de text și un grup de liste, toate împachetate într-un card cu lățime fixă.
Titlul cardului
Câteva exemple de text rapid care să se bazeze pe titlul cardului și să alcătuiască cea mai mare parte a conținutului cardului.
Cărțile presupun că nu este specific widthpentru a începe, așa că vor fi 100% lățime, dacă nu este specificat altfel. Puteți modifica acest lucru după cum este necesar cu CSS personalizat, clase de grilă, mixuri de grilă Sass sau utilitare.
Folosind marcarea grilei
Folosind grila, înfășurați cardurile în coloane și rânduri, după cum este necesar.
Tratament special al titlului
Cu textul de mai jos, ca o introducere naturală la conținut suplimentar.
Cardurile includ câteva opțiuni pentru lucrul cu imagini. Alegeți dintre adăugarea „capselor de imagine” la fiecare capăt al unui card, suprapunerea imaginilor cu conținutul cardului sau pur și simplu încorporarea imaginii într-un card.
Capsele imaginii
Similar cu anteturile și subsolurile, cardurile pot include „capsule de imagine” de sus și de jos - imagini în partea de sus sau de jos a unui card.
Titlul cardului
Acesta este un card mai larg, cu text de sprijin de mai jos, ca o introducere naturală la conținut suplimentar. Acest conținut este puțin mai lung.
Ultima actualizare acum 3 minute
Titlul cardului
Acesta este un card mai larg, cu text de sprijin de mai jos, ca o introducere naturală la conținut suplimentar. Acest conținut este puțin mai lung.
Ultima actualizare acum 3 minute
Suprapuneri de imagini
Transformați o imagine într-un fundal de card și suprapuneți textul cardului. În funcție de imagine, este posibil să aveți sau nu nevoie de stiluri sau utilități suplimentare.
Titlul cardului
Acesta este un card mai larg, cu text de sprijin de mai jos, ca o introducere naturală la conținut suplimentar. Acest conținut este puțin mai lung.
Ultima actualizare acum 3 minute
Stiluri de carduri
Cardurile includ diverse opțiuni pentru personalizarea fundalurilor, marginilor și culorii.
Câteva exemple de text rapid care să se bazeze pe titlul cardului și să alcătuiască cea mai mare parte a conținutului cardului.
Antet
Titlul cardului secundar
Câteva exemple de text rapid care să se bazeze pe titlul cardului și să alcătuiască cea mai mare parte a conținutului cardului.
Antet
Titlul cardului de succes
Câteva exemple de text rapid care să se bazeze pe titlul cardului și să alcătuiască cea mai mare parte a conținutului cardului.
Antet
Titlul cardului de pericol
Câteva exemple de text rapid care să se bazeze pe titlul cardului și să alcătuiască cea mai mare parte a conținutului cardului.
Antet
Titlul cardului de avertizare
Câteva exemple de text rapid care să se bazeze pe titlul cardului și să alcătuiască cea mai mare parte a conținutului cardului.
Antet
Titlul cardului de informații
Câteva exemple de text rapid care să se bazeze pe titlul cardului și să alcătuiască cea mai mare parte a conținutului cardului.
Antet
Titlul cardului luminos
Câteva exemple de text rapid care să se bazeze pe titlul cardului și să alcătuiască cea mai mare parte a conținutului cardului.
Antet
Titlul cardului întunecat
Câteva exemple de text rapid care să se bazeze pe titlul cardului și să alcătuiască cea mai mare parte a conținutului cardului.
Transmiterea sensului tehnologiilor de asistență
Folosirea culorii pentru a adăuga sens oferă doar o indicație vizuală, care nu va fi transmisă utilizatorilor de tehnologii de asistență, cum ar fi cititoarele de ecran. Asigurați-vă că informațiile notate de culoare sunt fie evidente din conținutul în sine (de exemplu, textul vizibil), fie sunt incluse prin mijloace alternative, cum ar fi textul suplimentar ascuns cu .sr-onlyclasa.
Frontieră
Utilizați utilitățile de bord pentru a schimba doar border-colorcardul. Rețineți că puteți pune .text-{color}cursuri pe părinte .cardsau pe un subset al conținutului cardului, așa cum se arată mai jos.
Antet
Titlul cardului principal
Câteva exemple de text rapid care să se bazeze pe titlul cardului și să alcătuiască cea mai mare parte a conținutului cardului.
Antet
Titlul cardului secundar
Câteva exemple de text rapid care să se bazeze pe titlul cardului și să alcătuiască cea mai mare parte a conținutului cardului.
Antet
Titlul cardului de succes
Câteva exemple de text rapid care să se bazeze pe titlul cardului și să alcătuiască cea mai mare parte a conținutului cardului.
Antet
Titlul cardului de pericol
Câteva exemple de text rapid care să se bazeze pe titlul cardului și să alcătuiască cea mai mare parte a conținutului cardului.
Antet
Titlul cardului de avertizare
Câteva exemple de text rapid care să se bazeze pe titlul cardului și să alcătuiască cea mai mare parte a conținutului cardului.
Antet
Titlul cardului de informații
Câteva exemple de text rapid care să se bazeze pe titlul cardului și să alcătuiască cea mai mare parte a conținutului cardului.
Antet
Titlul cardului luminos
Câteva exemple de text rapid care să se bazeze pe titlul cardului și să alcătuiască cea mai mare parte a conținutului cardului.
Antet
Titlul cardului întunecat
Câteva exemple de text rapid care să se bazeze pe titlul cardului și să alcătuiască cea mai mare parte a conținutului cardului.
Utilități Mixins
De asemenea, puteți modifica marginile de pe antetul și subsolul cardului după cum este necesar și chiar să le eliminați background-colorcu .bg-transparent.
Antet
Titlul cardului de succes
Câteva exemple de text rapid care să se bazeze pe titlul cardului și să alcătuiască cea mai mare parte a conținutului cardului.
Dispunerea cardului
Pe lângă stilarea conținutului din carduri, Bootstrap include câteva opțiuni pentru aranjarea serii de carduri. Deocamdată, aceste opțiuni de aspect nu sunt încă receptive .
Grupuri de carduri
Utilizați grupuri de carduri pentru a reda cardurile ca un singur element atașat, cu coloane de lățime și înălțime egale. Grupurile de carduri folosesc display: flex;pentru a-și obține o dimensiune uniformă.
Titlul cardului
Acesta este un card mai larg, cu text de sprijin de mai jos, ca o introducere naturală la conținut suplimentar. Acest conținut este puțin mai lung.
Ultima actualizare acum 3 minute
Titlul cardului
Acest card are textul de sprijin de mai jos ca o introducere naturală la conținut suplimentar.
Ultima actualizare acum 3 minute
Titlul cardului
Acesta este un card mai larg, cu text de sprijin de mai jos, ca o introducere naturală la conținut suplimentar. Acest card are un conținut chiar mai lung decât primul care arată acea acțiune de înălțime egală.
Ultima actualizare acum 3 minute
Când utilizați grupuri de carduri cu subsol, conținutul acestora se va alinia automat.
Titlul cardului
Acesta este un card mai larg, cu text de sprijin de mai jos, ca o introducere naturală la conținut suplimentar. Acest conținut este puțin mai lung.
Titlul cardului
Acest card are textul de sprijin de mai jos ca o introducere naturală la conținut suplimentar.
Titlul cardului
Acesta este un card mai larg, cu text de sprijin de mai jos, ca o introducere naturală la conținut suplimentar. Acest card are un conținut chiar mai lung decât primul care arată acea acțiune de înălțime egală.
Pachete de cărți
Aveți nevoie de un set de carduri de lățime și înălțime egale, care nu sunt atașate una de alta? Folosește pachete de cărți.
Titlul cardului
Acesta este un card mai lung, cu text justificativ de mai jos, ca o introducere naturală la conținut suplimentar. Acest conținut este puțin mai lung.
Ultima actualizare acum 3 minute
Titlul cardului
Acest card are textul de sprijin de mai jos ca o introducere naturală la conținut suplimentar.
Ultima actualizare acum 3 minute
Titlul cardului
Acesta este un card mai larg, cu text de sprijin de mai jos, ca o introducere naturală la conținut suplimentar. Acest card are un conținut chiar mai lung decât primul care arată acea acțiune de înălțime egală.
Ultima actualizare acum 3 minute
La fel ca în cazul grupurilor de cărți, subsolurile cărților din pachete se vor alinia automat.
Titlul cardului
Acesta este un card mai larg, cu text de sprijin de mai jos, ca o introducere naturală la conținut suplimentar. Acest conținut este puțin mai lung.
Titlul cardului
Acest card are textul de sprijin de mai jos ca o introducere naturală la conținut suplimentar.
Titlul cardului
Acesta este un card mai larg, cu text de sprijin de mai jos, ca o introducere naturală la conținut suplimentar. Acest card are un conținut chiar mai lung decât primul care arată acea acțiune de înălțime egală.
Coloane de carduri
Cardurile pot fi organizate în coloane asemănătoare masoneriei cu doar CSS, împachetându-le în .card-columns. Cardurile sunt construite cu columnproprietăți CSS în loc de flexbox pentru o aliniere mai ușoară. Cărțile sunt ordonate de sus în jos și de la stânga la dreapta.
Atenție! Kilometrajul dvs. cu coloanele cardurilor poate varia. Pentru a preveni spargerea cardurilor peste coloane, trebuie să le setăm, display: inline-blockdeoarece column-break-inside: avoidnu este încă o soluție antiglonț.
Titlul cardului care se înfășoară într-o nouă linie
Acesta este un card mai lung, cu text justificativ de mai jos, ca o introducere naturală la conținut suplimentar. Acest conținut este puțin mai lung.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Titlul cardului
Acest card are textul de sprijin de mai jos ca o introducere naturală la conținut suplimentar.
Ultima actualizare acum 3 minute
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.
Titlul cardului
Acest card are un titlu obișnuit și un scurt paragraf de text sub el.
Ultima actualizare acum 3 minute
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Titlul cardului
Acesta este un alt card cu titlu și text de sprijin mai jos. Acest card are un conținut suplimentar pentru a-l face puțin mai înalt în general.
Ultima actualizare acum 3 minute
Coloanele cardurilor pot fi, de asemenea, extinse și personalizate cu un cod suplimentar. Mai jos este prezentată o extensie a .card-columnsclasei care utilizează același CSS pe care îl folosim – coloane CSS – pentru a genera un set de niveluri receptive pentru modificarea numărului de coloane.