Bootstrap no kaad ahorow no ma nsɛm a ɛwɔ mu a ɛyɛ mmerɛw na ɛtrɛw a ɛwɔ nsakrae ahorow ne akwan horow pii.
Fa ho
Kaad yɛ nneɛma a wɔde gu mu a ɛyɛ mmerɛw na wotumi trɛw mu. Ɛwɔ nneɛma a wobɛpaw ama atiri ne ase hɔ nsɛm, nsɛm ahorow pii, akyi kɔla ahorow a ɛwɔ nsɛm a ɛfa ho, ne nneɛma a wubetumi apaw a ɛwɔ tumi a wɔde bɛkyerɛ. Sɛ wunim Bootstrap 3 yiye a, kaad besi yɛn panel dedaw, abura, ne mfonini nketewa ananmu. Dwumadi a ɛte sɛ saa afã horow no wɔ hɔ sɛ modifier classes ma cards.
Nhwɛsoɔ
Wɔde markup ne styles kakraa bi na ɛyɛ cards sɛnea ɛbɛyɛ yiye, nanso ɛda so ara tumi de control ne customization tɔn bi ma. Wɔde flexbox na esii, wɔma alignment a ɛnyɛ den na wɔde afra yiye ne Bootstrap afã afoforo. Wɔn nni marginbi default so, enti fa spacing utilities di dwuma sɛnea ɛho hia.
Ase hɔ no yɛ nhwɛso a ɛfa mfitiase kaad a emu nsɛm afrafra ne ne tɛtrɛtɛ a wɔahyɛ da ayɛ ho. Kaad nni ntrɛwmu a wɔahyɛ ato hɔ a wɔde befi ase, enti wɔde awosu bɛhyɛ n’awofo element no ntrɛwmu nyinaa ma. Eyi yɛ mmerɛw sɛ wobɛsakra no denam yɛn kɛseyɛ ahorow ahorow a yɛpaw so .
Kaad no asɛmti
Ebinom ntɛm nhwɛso nsɛm a wɔde besi kaad no asɛmti so na ayɛ kaad no mu nsɛm no fã kɛse no ara.
Kaad boa nneɛma ahorow pii, a mfonini, nsɛm, list groups, links, ne nea ɛkeka ho ka ho. Nea wɔboa ho nhwɛso ahorow wɔ ase ha.
Nipadua
Ade a wɔde si kaad bi ne .card-body. Fa di dwuma bere biara a wuhia ɔfã bi a wɔde padded ahyɛ mu wɔ kaad bi mu.
Eyi yɛ nsɛm bi a ɛwɔ kaad bi nipadua mu.
Asɛmti, nsɛm, ne nkitahodi ahorow
Wɔde kaad asɛmti ahorow di dwuma denam nea wɔde ka tag .card-titlebi ho so. <h*>Saa ara nso na wɔde link ahorow ka ho na wɔde si wɔn ho wɔn ho nkyɛn denam tag .card-linkbi a wɔde ka ho no so.<a>
Wɔde subtitles di dwuma denam a a wɔde ka tag .card-subtitlebi ho no so. <h*>Sɛ wɔde nneɛma no .card-titlene .card-subtitlenneɛma no gu .card-bodyade bi mu a, kaad no asɛmti ne asɛmti ketewa no hyia fɛfɛɛfɛ.
Kaad no asɛmti
Kaad no asɛmti ketewaa bi
Ebinom ntɛm nhwɛso nsɛm a wɔde besi kaad no asɛmti so na ayɛ kaad no mu nsɛm no fã kɛse no ara.
.card-img-topde mfonini bi si kaad no atifi. Sɛ wode .card-text, di dwuma a, wobetumi de nsɛm aka kaad no ho. Nsɛm a ɛwɔ mu .card-textno nso wobetumi de HTML tag ahorow a ɛwɔ hɔ no ayɛ no sɛnea ɛte.
Ebinom ntɛm nhwɛso nsɛm a wɔde besi kaad no asɛmti so na ayɛ kaad no mu nsɛm no fã kɛse no ara.
Kyerɛw akuw ahorow din
Yɛ nsɛm a wɔahyehyɛ wɔ kaad bi mu a flush list kuw wom.
Cras justo odio na ɔyɛ
Dapibus ac adwumayɛbea a ɛwɔ
Vestibulum a ɛwɔ eros no
Wɔde ahyɛ mu
Cras justo odio na ɔyɛ
Dapibus ac adwumayɛbea a ɛwɔ
Vestibulum a ɛwɔ eros no
Cras justo odio na ɔyɛ
Dapibus ac adwumayɛbea a ɛwɔ
Vestibulum a ɛwɔ eros no
Adididan mu sink
Fa nneɛma ahorow pii frafra na fa yɛ kaad a wuhia no, anaa tow biribiara gu hɔ. Wɔakyerɛ mfonini ahorow, block ahorow, nsɛm ahorow, ne list kuw bi wɔ ase hɔ—wɔde ne nyinaa abɔ kaad a ne tɛtrɛtɛ pɔtee bi mu.
Kaad no asɛmti
Ebinom ntɛm nhwɛso nsɛm a wɔde besi kaad no asɛmti so na ayɛ kaad no mu nsɛm no fã kɛse no ara.
Kaad ahorow no wɔ nneɛma kakraa bi a wubetumi apaw a wode bɛyɛ mfonini ahorow ho adwuma. Paw fi “mfonini a wɔde akata so” a wode bɛka kaad bi awiei, mfonini ahorow a wode kaad no mu nsɛm bɛkata so, anaasɛ wode mfonini no ahyɛ kaad mu ara kwa mu.
Mfonini a wɔde akata so
Te sɛ atiri ne ase no, kaad betumi de “mfonini a wɔde akata so” a ɛwɔ soro ne ase no ahyɛ mu—mfonini ahorow a ɛwɔ kaad bi atifi anaa ase.
Kaad no asɛmti
Eyi yɛ kaad a ɛtrɛw a nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛma wonya nsɛm foforo. Saa nsɛm yi yɛ tenten kakra.
Wɔyɛɛ no foforo koraa 3 mins a atwam ni
Kaad no asɛmti
Eyi yɛ kaad a ɛtrɛw a nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛma wonya nsɛm foforo. Saa nsɛm yi yɛ tenten kakra.
Wɔyɛɛ no foforo koraa 3 mins a atwam ni
Mfonini ahorow a wɔde kata so
Dane mfonini bi ma ɛnyɛ kaad akyi na fa wo kaad no mu nsɛm kata so. Ɛgyina mfonini no so no, ebia wubehia ntadehyɛ anaa nneɛma foforo a wɔde di dwuma anaasɛ wunhia.
Kaad no asɛmti
Eyi yɛ kaad a ɛtrɛw a nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛma wonya nsɛm foforo. Saa nsɛm yi yɛ tenten kakra.
Wɔyɛɛ no foforo koraa 3 mins a atwam ni
Hyɛ no nsow sɛ ɛnsɛ sɛ emu nsɛm no yɛ kɛse sen mfonini no sorokɔ. Sɛ emu nsɛm no sõ sen mfonini no a wɔbɛda emu nsɛm no adi wɔ mfonini no akyi.
Ne tɛtrɛtɛ mu
Sɛ wɔde grid ne utility adesua ahorow a wɔaka abom di dwuma a, wobetumi ayɛ kaad ahorow no a ɛkɔ soro wɔ ɔkwan a ɛyɛ mobile-friendly na ɛyɛ mmuae so. Wɔ nhwɛsoɔ a ɛwɔ aseɛ ha yi mu no, yɛde yi grid gutters no .no-guttersna yɛde .col-md-*classes di dwuma de ma card no yɛ horizontal wɔ mdbreakpoint no. Ebia ɛho behia sɛ woyɛ nsakrae foforo a egyina wo kaad no mu nsɛm so.
Kaad no asɛmti
Eyi yɛ kaad a ɛtrɛw a nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛma wonya nsɛm foforo. Saa nsɛm yi yɛ tenten kakra.
Wɔyɛɛ no foforo koraa 3 mins a atwam ni
Kaad ahorow a wɔde yɛ nneɛma
Kaad ahorow no wɔ nneɛma ahorow a wubetumi apaw a wode bɛsesa wɔn akyi mfonini, wɔn ahye, ne wɔn kɔla.
Ebinom ntɛm nhwɛso nsɛm a wɔde besi kaad no asɛmti so na ayɛ kaad no mu nsɛm no fã kɛse no ara.
Titiriw
Kaad a ɛto so abien no asɛmti
Ebinom ntɛm nhwɛso nsɛm a wɔde besi kaad no asɛmti so na ayɛ kaad no mu nsɛm no fã kɛse no ara.
Titiriw
Odi nkonim krataa asɛmti
Ebinom ntɛm nhwɛso nsɛm a wɔde besi kaad no asɛmti so na ayɛ kaad no mu nsɛm no fã kɛse no ara.
Titiriw
Asiane krataa no asɛmti
Ebinom ntɛm nhwɛso nsɛm a wɔde besi kaad no asɛmti so na ayɛ kaad no mu nsɛm no fã kɛse no ara.
Titiriw
Kɔkɔbɔ krataa no asɛmti
Ebinom ntɛm nhwɛso nsɛm a wɔde besi kaad no asɛmti so na ayɛ kaad no mu nsɛm no fã kɛse no ara.
Titiriw
Info kaad no asɛmti
Ebinom ntɛm nhwɛso nsɛm a wɔde besi kaad no asɛmti so na ayɛ kaad no mu nsɛm no fã kɛse no ara.
Titiriw
Hann kaad asɛmti
Ebinom ntɛm nhwɛso nsɛm a wɔde besi kaad no asɛmti so na ayɛ kaad no mu nsɛm no fã kɛse no ara.
Titiriw
Dark card asɛmti
Ebinom ntɛm nhwɛso nsɛm a wɔde besi kaad no asɛmti so na ayɛ kaad no mu nsɛm no fã kɛse no ara.
Ntease a wɔde bɛma mfiridwuma ahorow a ɛboa
Kɔla a wɔde di dwuma de ntease ka ho no ma wonya sɛnkyerɛnne a wotumi hu nkutoo, a wɔremfa nkɔma wɔn a wɔde mfiridwuma a ɛboa di dwuma – te sɛ screen akenkanfo. Hwɛ sɛ nsɛm a wɔde kɔla no kyerɛ no da adi pefee fi emu nsɛm no ankasa mu (sɛ nhwɛso no, nsɛm a wotumi hu no), anaasɛ wɔde bɛka ho denam akwan foforo so, te sɛ nsɛm foforo a wɔde asie ne .sr-onlyadesuakuw no mu.
Hyeɛ so
Fa border utilities sesa kɛkɛ border-colorof a card. Hyɛ no nsow sɛ wubetumi de .text-{color}adesua ahorow ahyɛ ɔwofo no so .cardanaasɛ kaad no mu nsɛm no fã ketewaa bi sɛnea wɔakyerɛ wɔ ase ha no.
Titiriw
Mfitiase kaad asɛmti
Ebinom ntɛm nhwɛso nsɛm a wɔde besi kaad no asɛmti so na ayɛ kaad no mu nsɛm no fã kɛse no ara.
Titiriw
Kaad a ɛto so abien no asɛmti
Ebinom ntɛm nhwɛso nsɛm a wɔde besi kaad no asɛmti so na ayɛ kaad no mu nsɛm no fã kɛse no ara.
Titiriw
Odi nkonim krataa asɛmti
Ebinom ntɛm nhwɛso nsɛm a wɔde besi kaad no asɛmti so na ayɛ kaad no mu nsɛm no fã kɛse no ara.
Titiriw
Asiane krataa no asɛmti
Ebinom ntɛm nhwɛso nsɛm a wɔde besi kaad no asɛmti so na ayɛ kaad no mu nsɛm no fã kɛse no ara.
Titiriw
Kɔkɔbɔ krataa no asɛmti
Ebinom ntɛm nhwɛso nsɛm a wɔde besi kaad no asɛmti so na ayɛ kaad no mu nsɛm no fã kɛse no ara.
Titiriw
Info kaad no asɛmti
Ebinom ntɛm nhwɛso nsɛm a wɔde besi kaad no asɛmti so na ayɛ kaad no mu nsɛm no fã kɛse no ara.
Titiriw
Hann kaad asɛmti
Ebinom ntɛm nhwɛso nsɛm a wɔde besi kaad no asɛmti so na ayɛ kaad no mu nsɛm no fã kɛse no ara.
Titiriw
Dark card asɛmti
Ebinom ntɛm nhwɛso nsɛm a wɔde besi kaad no asɛmti so na ayɛ kaad no mu nsɛm no fã kɛse no ara.
Mixins nneɛma a wɔde di dwuma
Wubetumi nso asesa borders a ɛwɔ card header ne footer no so sɛnea ɛho hia, na mpo ayi wɔn background-colorne .bg-transparent.
Titiriw
Odi nkonim krataa asɛmti
Ebinom ntɛm nhwɛso nsɛm a wɔde besi kaad no asɛmti so na ayɛ kaad no mu nsɛm no fã kɛse no ara.
Kaad nhyehyɛe
Wɔ nsɛm a ɛwɔ kaad mu a wobɛhyehyɛ no akyi no, Bootstrap no de nneɛma kakraa bi a wubetumi apaw a wode bɛhyehyɛ kaad ahorow a ɛtoatoa so no ka ho. Mprempren de, saa nhyehyɛe ahorow yi nnya nyɛɛ adwuma .
Kaad akuw ahorow
Fa kaad akuw ahorow kyerɛ kaad ahorow ase sɛ ade biako a wɔde abata ho a ɛwɔ adum a ne tɛtrɛtɛ ne ne sorokɔ yɛ pɛ. Kaad akuw fi ase a wɔaboaboa ano na wɔde di dwuma display: flex;de bata ho a nsusuwii ahorow a ɛyɛ pɛ a efi ase wɔ smbreakpoint no.
Kaad no asɛmti
Eyi yɛ kaad a ɛtrɛw a nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛma wonya nsɛm foforo. Saa nsɛm yi yɛ tenten kakra.
Wɔyɛɛ no foforo koraa 3 mins a atwam ni
Kaad no asɛmti
Saa kaad yi wɔ nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛma wonya nsɛm foforo.
Wɔyɛɛ no foforo koraa 3 mins a atwam ni
Kaad no asɛmti
Eyi yɛ kaad a ɛtrɛw a nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛma wonya nsɛm foforo. Saa kaad yi wɔ nsɛm a ɛware mpo sen nea edi kan no de kyerɛ saa adeyɛ a ɛkorɔn a ɛyɛ pɛ no.
Wɔyɛɛ no foforo koraa 3 mins a atwam ni
Sɛ wode kaad akuw a ɛwɔ ase hɔ redi dwuma a, emu nsɛm no bɛhyehyɛ ne ho.
Kaad no asɛmti
Eyi yɛ kaad a ɛtrɛw a nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛma wonya nsɛm foforo. Saa nsɛm yi yɛ tenten kakra.
Kaad no asɛmti
Saa kaad yi wɔ nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛma wonya nsɛm foforo.
Kaad no asɛmti
Eyi yɛ kaad a ɛtrɛw a nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛma wonya nsɛm foforo. Saa kaad yi wɔ nsɛm a ɛware mpo sen nea edi kan no de kyerɛ saa adeyɛ a ɛkorɔn a ɛyɛ pɛ no.
Kaad a wɔde ahyɛ mu
Wohia nkrataa a ne tɛtrɛtɛ ne ne sorokɔ yɛ pɛ a wɔmfa nkata ho? Fa kaad decks di dwuma.
Kaad no asɛmti
Eyi yɛ kaad tenten a nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛma wonya nsɛm foforo. Saa nsɛm yi yɛ tenten kakra.
Wɔyɛɛ no foforo koraa 3 mins a atwam ni
Kaad no asɛmti
Saa kaad yi wɔ nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛma wonya nsɛm foforo.
Wɔyɛɛ no foforo koraa 3 mins a atwam ni
Kaad no asɛmti
Eyi yɛ kaad a ɛtrɛw a nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛma wonya nsɛm foforo. Saa kaad yi wɔ nsɛm a ɛware mpo sen nea edi kan no de kyerɛ saa adeyɛ a ɛkorɔn a ɛyɛ pɛ no.
Wɔyɛɛ no foforo koraa 3 mins a atwam ni
Sɛnea ɛte wɔ kaad akuw ho no, kaad ase nsɛm a ɛwɔ decks mu no bɛhyehyɛ ne ho.
Kaad no asɛmti
Eyi yɛ kaad a ɛtrɛw a nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛma wonya nsɛm foforo. Saa nsɛm yi yɛ tenten kakra.
Kaad no asɛmti
Saa kaad yi wɔ nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛma wonya nsɛm foforo.
Kaad no asɛmti
Eyi yɛ kaad a ɛtrɛw a nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛma wonya nsɛm foforo. Saa kaad yi wɔ nsɛm a ɛware mpo sen nea edi kan no de kyerɛ saa adeyɛ a ɛkorɔn a ɛyɛ pɛ no.
Grid kaad ahorow
Fa Bootstrap grid system ne ne .row-colsclass ahorow no di dwuma fa hwɛ grid column dodow (a wɔabɔ ho ban atwa wo cards ho ahyia) a wobɛkyerɛ wɔ row biara mu. Sɛ nhwɛso no, ha na .row-cols-1wode kaad no bɛto adum biako so, na .row-cols-md-2woakyekyɛ kaad anan mu ma ayɛ pɛ wɔ row ahorow pii so, afi mfinimfini mpaapaemu no so akɔ soro.
Kaad no asɛmti
Eyi yɛ kaad tenten a nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛma wonya nsɛm foforo. Saa nsɛm yi yɛ tenten kakra.
Kaad no asɛmti
Eyi yɛ kaad tenten a nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛma wonya nsɛm foforo. Saa nsɛm yi yɛ tenten kakra.
Kaad no asɛmti
Eyi yɛ kaad tenten a nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛma wonya nsɛm foforo.
Kaad no asɛmti
Eyi yɛ kaad tenten a nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛma wonya nsɛm foforo. Saa nsɛm yi yɛ tenten kakra.
Sesa no kɔ .row-cols-3na wubehu card wrap a ɛto so anan no.
Kaad no asɛmti
Eyi yɛ kaad tenten a nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛma wonya nsɛm foforo. Saa nsɛm yi yɛ tenten kakra.
Kaad no asɛmti
Eyi yɛ kaad tenten a nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛma wonya nsɛm foforo. Saa nsɛm yi yɛ tenten kakra.
Kaad no asɛmti
Eyi yɛ kaad tenten a nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛma wonya nsɛm foforo.
Kaad no asɛmti
Eyi yɛ kaad tenten a nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛma wonya nsɛm foforo. Saa nsɛm yi yɛ tenten kakra.
Sɛ wuhia ɔsorokɔ a ɛyɛ pɛ a, fa ka .h-100nkrataa no ho. Sɛ wopɛ sɛ wo sorokɔ yɛ pɛ default so a, wubetumi ahyɛ $card-height: 100%Sass mu.
Kaad no asɛmti
Eyi yɛ kaad tenten a nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛma wonya nsɛm foforo. Saa nsɛm yi yɛ tenten kakra.
Kaad no asɛmti
Eyi yɛ kaad tiawa bi.
Kaad no asɛmti
Eyi yɛ kaad tenten a nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛma wonya nsɛm foforo.
Kaad no asɛmti
Eyi yɛ kaad tenten a nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛma wonya nsɛm foforo. Saa nsɛm yi yɛ tenten kakra.
Kaad nkyerɛwde ahorow
Wobetumi ahyehyɛ nkrataa no ayɛ no nkyerɛwde a ɛte sɛ Masonry a CSS nkutoo na ɛwɔ mu denam .card-columns. Wɔde CSS columnagyapade na ɛkyekyere kaad sen sɛ wɔde flexbox bɛyɛ ma ɛyɛ mmerɛw sɛ wɔbɛhyehyɛ no. Wɔkra nkrataa fi soro kosi ase ne benkum kɔ nifa.
Ti a ɛwɔ soro! Ebia akwansin a wobɛfa a wode kaad adum ayɛ no bɛsono. Sɛnea ɛbɛyɛ a kaad ahorow no bebubu wɔ adum ahorow so no, ɛsɛ sɛ yɛde si hɔ display: inline-blocksɛnea column-break-inside: avoidɛnyɛ ano aduru a atuo ntumi nkɔ mu de besi nnɛ.
Kaad asɛmti a ɛkyekyere nsɛm foforo
Eyi yɛ kaad tenten a nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛma wonya nsɛm foforo. Saa nsɛm yi yɛ tenten kakra.
Lorem ipsum dolor tena amet, consectetur adipiscing a ɛyɛ fɛ a ɛyɛ fɛ. Nkyekyɛm a edi mũ posuere erat a ante.
Kaad no asɛmti
Saa kaad yi wɔ nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛma wonya nsɛm foforo.
Wɔyɛɛ no foforo koraa 3 mins a atwam ni
Lorem ipsum dolor tena amet, consectetur adipiscing a ɛyɛ fɛ a ɛyɛ fɛ. Nkyekyɛm a edi mũ posuere erat.
Kaad no asɛmti
Saa kratasin yi wɔ asɛmti a wɔde di dwuma daa ne nsɛm a wɔakyerɛw no nkyekyem tiawa wɔ n’ase.
Wɔyɛɛ no foforo koraa 3 mins a atwam ni
Lorem ipsum dolor tena amet, consectetur adipiscing a ɛyɛ fɛ a ɛyɛ fɛ. Nkyekyɛm a edi mũ posuere erat a ante.
Kaad no asɛmti
Eyi yɛ kaad foforo a asɛmti ne nsɛm a ɛfoa so wɔ ase hɔ. Saa kaad yi wɔ nneɛma foforo bi a ɛbɛma ne nyinaa ayɛ tenten kakra.
Wɔyɛɛ no foforo koraa 3 mins a atwam ni
Wobetumi nso atrɛw kaad nkyerɛwde ahorow mu na wɔayɛ no sɛnea wopɛ denam koodu foforo bi so. Wɔakyerɛ wɔ aseɛ ha yi yɛ adesua no ntrɛmu a .card-columnswɔde CSS korɔ no ara a yɛde di dwuma—CSS nkorabata— de yɛ mmuaeɛ tiers a wɔde sesa nkorabata dodoɔ no.