Kertu Bootstrap nyedhiyakake wadhah konten sing fleksibel lan bisa ditambah kanthi macem-macem varian lan pilihan.
Babagan
Kertu minangka wadhah isi sing fleksibel lan bisa diperluas. Iki kalebu opsi kanggo header lan footer, macem-macem konten, warna latar mburi kontekstual, lan opsi tampilan sing kuat. Yen sampeyan wis kenal karo Bootstrap 3, kertu ngganti panel, sumur, lan gambar cilik lawas. Fungsi sing padha karo komponen kasebut kasedhiya minangka kelas modifier kanggo kertu.
Tuladha
Kertu dibangun kanthi markup lan gaya sethithik, nanging isih bisa ngatur kontrol lan kustomisasi. Dibangun nganggo flexbox, nawakake keselarasan sing gampang lan nyampur karo komponen Bootstrap liyane. Dheweke ora duwe marginstandar, mula gunakake utilitas spasi yen perlu.
Ing ngisor iki conto kertu dhasar kanthi isi campuran lan jembar tetep. Kertu ora duwe jembar sing tetep kanggo diwiwiti, mula kanthi alami bakal ngisi jembar lengkap unsur induke. Iki gampang disesuaikan karo macem-macem pilihan ukuran .
Judhul kertu
Sawetara conto teks cepet kanggo mbangun judhul kertu lan nggawe akeh isi kertu.
Kertu ndhukung macem-macem konten, kalebu gambar, teks, grup dhaptar, pranala, lan liya-liyane. Ing ngisor iki ana conto sing didhukung.
awak
Blok bangunan kertu yaiku .card-body. Gunakake kapan sampeyan butuh bagean empuk ing kertu.
Iki sawetara teks ing awak kertu.
Judhul, teks, lan pranala
Judhul kertu digunakake kanthi nambahake .card-titletag <h*>. Kanthi cara sing padha, pranala ditambahake lan diselehake ing jejere kanthi nambahake .card-linktag <a>.
Subtitle digunakake kanthi nambahake .card-subtitletag <h*>. Yen .card-titlelan .card-subtitleitem diselehake ing .card-bodyitem, judhul kertu lan subtitle didadekake siji apik.
Judhul kertu
Subtitle kertu
Sawetara conto teks cepet kanggo mbangun judhul kertu lan nggawe akeh isi kertu.
.card-img-toppanggonan gambar ing ndhuwur kertu. Kanthi .card-text, teks bisa ditambahake menyang kertu. Teks ing njero .card-textuga bisa ditata nganggo tag HTML standar.
Sawetara conto teks cepet kanggo mbangun judhul kertu lan nggawe akeh isi kertu.
Dhaptar klompok
Gawe dhaptar isi ing kertu kanthi klompok dhaptar siram.
Cras justo odio
Dapibus ac facilisis ing
Vestibulum lan eros
Featured
Cras justo odio
Dapibus ac facilisis ing
Vestibulum lan eros
Sink pawon
Nyampur lan cocog macem-macem jinis isi kanggo nggawe kertu sing perlu, utawa uncalan kabeh ing kono. Ditampilake ing ngisor iki yaiku gaya gambar, blok, gaya teks, lan klompok dhaptar - kabeh dibungkus kertu sing ambane tetep.
Judhul kertu
Sawetara conto teks cepet kanggo mbangun judhul kertu lan nggawe akeh isi kertu.
Kertu nganggep ora ana sing spesifik widthkanggo miwiti, mula bakal dadi 100% amba kajaba nyatakake. Sampeyan bisa ngganti iki yen perlu nganggo CSS khusus, kelas kothak, campuran Sass kothak, utawa utilitas.
Nggunakake grid markup
Nggunakake kothak, bungkus kertu ing kolom lan larik yen perlu.
Perawatan judhul khusus
Kanthi teks panyengkuyung ing ngisor iki minangka timbal alami kanggo konten tambahan.
Kertu kalebu sawetara opsi kanggo nggarap gambar. Pilih saka nambahi "tutup gambar" ing salah siji mburi kertu, overlaying gambar karo isi kertu, utawa mung nampilaké gambar ing kertu.
Gambar caps
Kaya header lan footer, kertu bisa kalebu "tutup gambar" ndhuwur lan ngisor - gambar ing ndhuwur utawa ngisor kertu.
Judhul kertu
Iki minangka kertu sing luwih akeh kanthi teks dhukungan ing ngisor iki minangka timbal alami kanggo konten tambahan. Isi iki rada suwe.
Dianyari pungkasan 3 menit kepungkur
Judhul kertu
Iki minangka kertu sing luwih akeh kanthi teks dhukungan ing ngisor iki minangka timbal alami kanggo konten tambahan. Isi iki rada suwe.
Dianyari pungkasan 3 menit kepungkur
Gambar overlay
Ganti gambar dadi latar mburi kertu lan overlay teks kertu sampeyan. Gumantung ing gambar, sampeyan bisa uga ora mbutuhake gaya utawa keperluan tambahan.
Judhul kertu
Iki minangka kertu sing luwih akeh kanthi teks dhukungan ing ngisor iki minangka timbal alami kanggo konten tambahan. Isi iki rada suwe.
Dianyari pungkasan 3 menit kepungkur
Elinga yen isi ngirim ora luwih gedhe tinimbang dhuwur gambar. Yen isi luwih gedhe tinimbang gambar, isi bakal ditampilake ing njaba gambar.
Horisontal
Nggunakake kombinasi kelas kothak lan sarana, kertu bisa digawe horisontal kanthi cara sing ramah seluler lan responsif. Ing conto ing ngisor iki, kita mbusak talang kothak .no-gutterslan nggunakake .col-md-*kelas kanggo nggawe kertu horisontal ing mdbreakpoint. Pangaturan liyane bisa uga dibutuhake gumantung isi kertu sampeyan.
Judhul kertu
Iki minangka kertu sing luwih akeh kanthi teks dhukungan ing ngisor iki minangka timbal alami kanggo konten tambahan. Isi iki rada suwe.
Dianyari pungkasan 3 menit kepungkur
Gaya kertu
Kertu kalebu macem-macem pilihan kanggo ngatur latar mburi, wates, lan warna.
Sawetara conto teks cepet kanggo mbangun judhul kertu lan nggawe akeh isi kertu.
Header
Judhul kertu sekunder
Sawetara conto teks cepet kanggo mbangun judhul kertu lan nggawe akeh isi kertu.
Header
Judhul kertu sukses
Sawetara conto teks cepet kanggo mbangun judhul kertu lan nggawe akeh isi kertu.
Header
Judhul kertu bebaya
Sawetara conto teks cepet kanggo mbangun judhul kertu lan nggawe akeh isi kertu.
Header
Judhul kertu peringatan
Sawetara conto teks cepet kanggo mbangun judhul kertu lan nggawe akeh isi kertu.
Header
Judhul kertu info
Sawetara conto teks cepet kanggo mbangun judhul kertu lan nggawe akeh isi kertu.
Header
Judhul kertu cahya
Sawetara conto teks cepet kanggo mbangun judhul kertu lan nggawe akeh isi kertu.
Header
Judhul kertu peteng
Sawetara conto teks cepet kanggo mbangun judhul kertu lan nggawe akeh isi kertu.
Nuduhake makna kanggo teknologi assistive
Nggunakake warna kanggo nambah makna mung menehi indikasi visual, sing ora bakal dikirim menyang pangguna teknologi bantu - kayata pembaca layar. Priksa manawa informasi sing dituduhake kanthi warna katon jelas saka isi kasebut (umpamane teks sing katon), utawa kalebu liwat cara alternatif, kayata teks tambahan sing didhelikake karo .sr-onlykelas.
wates
Gunakake keperluan wates kanggo ngganti mung border-colorkertu. Elinga yen sampeyan bisa sijine .text-{color}kelas ing wong tuwa .cardutawa subset saka isi kertu minangka kapacak ing ngisor iki.
Header
Judhul kertu utami
Sawetara conto teks cepet kanggo mbangun judhul kertu lan nggawe akeh isi kertu.
Header
Judhul kertu sekunder
Sawetara conto teks cepet kanggo mbangun judhul kertu lan nggawe akeh isi kertu.
Header
Judhul kertu sukses
Sawetara conto teks cepet kanggo mbangun judhul kertu lan nggawe akeh isi kertu.
Header
Judhul kertu bebaya
Sawetara conto teks cepet kanggo mbangun judhul kertu lan nggawe akeh isi kertu.
Header
Judhul kertu peringatan
Sawetara conto teks cepet kanggo mbangun judhul kertu lan nggawe akeh isi kertu.
Header
Judhul kertu info
Sawetara conto teks cepet kanggo mbangun judhul kertu lan nggawe akeh isi kertu.
Header
Judhul kertu cahya
Sawetara conto teks cepet kanggo mbangun judhul kertu lan nggawe akeh isi kertu.
Header
Judhul kertu peteng
Sawetara conto teks cepet kanggo mbangun judhul kertu lan nggawe akeh isi kertu.
Utilitas Mixins
Sampeyan uga bisa ngganti wates ing header kertu lan sikil yen perlu, lan malah mbusak background-colorkaro .bg-transparent.
Header
Judhul kertu sukses
Sawetara conto teks cepet kanggo mbangun judhul kertu lan nggawe akeh isi kertu.
tata letak kertu
Saliyane nggawe konten ing kertu, Bootstrap kalebu sawetara pilihan kanggo nggawe seri kertu. Saiki, opsi tata letak iki durung responsif .
Klompok kertu
Gunakake kelompok kertu kanggo nerjemahake kertu minangka siji, unsur ditempelake karo jembaré witjaksono lan dhuwur kolom. Kelompok kertu digunakake display: flex;kanggo entuk ukuran seragam.
Judhul kertu
Iki minangka kertu sing luwih akeh kanthi teks dhukungan ing ngisor iki minangka timbal alami kanggo konten tambahan. Isi iki rada suwe.
Dianyari pungkasan 3 menit kepungkur
Judhul kertu
Kertu iki nduweni teks pendukung ing ngisor iki minangka timbal alami kanggo isi tambahan.
Dianyari pungkasan 3 menit kepungkur
Judhul kertu
Iki minangka kertu sing luwih akeh kanthi teks dhukungan ing ngisor iki minangka timbal alami kanggo konten tambahan. Kertu iki nduweni konten sing luwih dawa tinimbang sing pisanan nuduhake aksi dhuwur sing padha.
Dianyari pungkasan 3 menit kepungkur
Nalika nggunakake klompok kertu karo footer, isi bakal kanthi otomatis baris munggah.
Judhul kertu
Iki minangka kertu sing luwih akeh kanthi teks dhukungan ing ngisor iki minangka timbal alami kanggo konten tambahan. Isi iki rada suwe.
Judhul kertu
Kertu iki nduweni teks pendukung ing ngisor iki minangka timbal alami kanggo isi tambahan.
Judhul kertu
Iki minangka kertu sing luwih akeh kanthi teks dhukungan ing ngisor iki minangka timbal alami kanggo konten tambahan. Kertu iki nduweni konten sing luwih dawa tinimbang sing pisanan nuduhake aksi dhuwur sing padha.
Deck kertu
Butuh pesawat saka witjaksono jembaré lan dhuwur kertu sing ora ditempelake siji liyane? Gunakake dek kertu.
Judhul kertu
Iki minangka kertu sing luwih dawa kanthi teks dhukungan ing ngisor iki minangka timbal alami kanggo konten tambahan. Isi iki rada suwe.
Dianyari pungkasan 3 menit kepungkur
Judhul kertu
Kertu iki nduweni teks pendukung ing ngisor iki minangka timbal alami kanggo isi tambahan.
Dianyari pungkasan 3 menit kepungkur
Judhul kertu
Iki minangka kertu sing luwih akeh kanthi teks dhukungan ing ngisor iki minangka timbal alami kanggo konten tambahan. Kertu iki nduweni konten sing luwih dawa tinimbang sing pisanan nuduhake aksi dhuwur sing padha.
Dianyari pungkasan 3 menit kepungkur
Kaya karo klompok kertu, sikil kertu ing dek bakal kanthi otomatis.
Judhul kertu
Iki minangka kertu sing luwih akeh kanthi teks dhukungan ing ngisor iki minangka timbal alami kanggo konten tambahan. Isi iki rada suwe.
Judhul kertu
Kertu iki nduweni teks pendukung ing ngisor iki minangka timbal alami kanggo isi tambahan.
Judhul kertu
Iki minangka kertu sing luwih akeh kanthi teks dhukungan ing ngisor iki minangka timbal alami kanggo konten tambahan. Kertu iki nduweni konten sing luwih dawa tinimbang sing pisanan nuduhake aksi dhuwur sing padha.
kertu kothak
Gunakake sistem kothak Bootstrap lan .row-colskelas kanggo ngontrol jumlah kolom kothak (dibungkus kertu) sampeyan nuduhake saben baris. Contone, iki .row-cols-1laying metu kertu ing siji kolom, lan .row-cols-md-2pamisah papat SIM kanggo jembaré witjaksono antarane sawetara larik, saka breakpoint medium munggah.
Judhul kertu
Iki minangka kertu sing luwih dawa kanthi teks dhukungan ing ngisor iki minangka timbal alami kanggo konten tambahan. Isi iki rada suwe.
Judhul kertu
Iki minangka kertu sing luwih dawa kanthi teks dhukungan ing ngisor iki minangka timbal alami kanggo konten tambahan. Isi iki rada suwe.
Judhul kertu
Iki minangka kertu sing luwih dawa kanthi teks dhukungan ing ngisor iki minangka timbal alami kanggo konten tambahan.
Judhul kertu
Iki minangka kertu sing luwih dawa kanthi teks dhukungan ing ngisor iki minangka timbal alami kanggo konten tambahan. Isi iki rada suwe.
Ganti dadi .row-cols-3lan sampeyan bakal weruh bungkus kertu papat.
Judhul kertu
Iki minangka kertu sing luwih dawa kanthi teks dhukungan ing ngisor iki minangka timbal alami kanggo konten tambahan. Isi iki rada suwe.
Judhul kertu
Iki minangka kertu sing luwih dawa kanthi teks dhukungan ing ngisor iki minangka timbal alami kanggo konten tambahan. Isi iki rada suwe.
Judhul kertu
Iki minangka kertu sing luwih dawa kanthi teks dhukungan ing ngisor iki minangka timbal alami kanggo konten tambahan.
Judhul kertu
Iki minangka kertu sing luwih dawa kanthi teks dhukungan ing ngisor iki minangka timbal alami kanggo konten tambahan. Isi iki rada suwe.
Nalika sampeyan perlu dhuwur witjaksono, nambah .h-100menyang kertu. Yen sampeyan pengin dhuwur witjaksono minangka standar, sampeyan bisa nyetel $card-height: 100%ing Sass.
Judhul kertu
Iki minangka kertu sing luwih dawa kanthi teks dhukungan ing ngisor iki minangka timbal alami kanggo konten tambahan. Isi iki rada suwe.
Judhul kertu
Iki kertu singkat.
Judhul kertu
Iki minangka kertu sing luwih dawa kanthi teks dhukungan ing ngisor iki minangka timbal alami kanggo konten tambahan.
Judhul kertu
Iki minangka kertu sing luwih dawa kanthi teks dhukungan ing ngisor iki minangka timbal alami kanggo konten tambahan. Isi iki rada suwe.
Kolom kertu
Kertu bisa diatur dadi kolom kaya Masonry kanthi mung CSS kanthi mbungkus .card-columns. Kertu dibangun nganggo sifat CSS columntinimbang flexbox kanggo keselarasan sing luwih gampang. Kertu diurutake saka ndhuwur mudhun lan kiwa menyang tengen.
Kepala munggah! Jarak tempuh sampeyan karo kolom kertu bisa beda-beda. Kanggo nyegah kertu-kertu sing nembus kolom, kita kudu nyetel kertu kasebut display: inline-blockminangka column-break-inside: avoidsolusi antipeluru.
Judhul kertu sing mbungkus menyang baris anyar
Iki minangka kertu sing luwih dawa kanthi teks dhukungan ing ngisor iki minangka timbal alami kanggo konten tambahan. Isi iki rada suwe.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante.
Judhul kertu
Kertu iki nduweni teks pendukung ing ngisor iki minangka timbal alami kanggo isi tambahan.
Dianyari pungkasan 3 menit kepungkur
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.
Judhul kertu
Kertu iki nduweni judhul biasa lan paragraf teks ing ngisor iki.
Dianyari pungkasan 3 menit kepungkur
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante.
Judhul kertu
Iki kertu liyane kanthi judhul lan teks dhukungan ing ngisor iki. Kertu iki nduweni isi tambahan supaya rada dhuwur sakabèhé.
Dianyari pungkasan 3 menit kepungkur
Kolom kertu uga bisa ditambahi lan disesuaikan karo sawetara kode tambahan. Ditampilake ing ngisor iki minangka extension saka .card-columnskelas nggunakake CSS sing padha digunakake-kolom CSS- kanggo generate pesawat saka undakan responsif kanggo ngganti nomer kolom.