Kartu bootstrap adalah wadah konten yang fleksibel dan dapat diperluas. Ini mencakup opsi untuk header dan footer, beragam konten, warna latar kontekstual, dan opsi tampilan yang kuat. Kartu menggantikan komponen panel, well, dan thumbnail di versi Bootstrap 3 lama Show
Di bagian berikut, Anda akan melihat apa yang dapat Anda lakukan dengan komponen kartu Membuat Kartu DasarMarkup kartu cukup lurus ke depan. Pembungkus luar memerlukan kelas dasar — Keluaran dari contoh di atas akan terlihat seperti ini  Catatan. Kartu tidak memiliki lebar tetap, mereka akan menempati lebar penuh dari elemen induknya. Jadi, jika Anda memerlukan kartu dengan lebar tetap, Anda perlu menerapkan properti width pada kartu sendiri. Juga, kartu tidak memiliki margin secara default, gunakan jika diperlukan Jenis Konten untuk Komponen KartuKomponen kartu mendukung beragam konten, termasuk gambar, teks, grup daftar, tautan, navigasi, dan lainnya. Berikut adalah contoh dari apa yang didukung oleh kartu Kartu Tubuh SajaAnda cukup menggunakan — Keluaran dari contoh di atas akan terlihat seperti ini Kartu dengan Judul, Teks, dan TautanSelanjutnya, Anda juga dapat menempatkan judul dan tautan di dalam kartu beserta teks, seperti ini — Keluaran dari contoh di atas akan terlihat seperti ini Kartu dengan Header dan FooterAnda juga dapat menambahkan header dan footer di dalam kartu Anda masing-masing menggunakan kelas — Keluaran dari contoh di atas akan terlihat seperti ini Tip. Anda dapat menggunakan kelas utilitas perataan teks seperti Menempatkan Grup Daftar di dalam KartuAnda juga dapat menempatkan grup daftar di dalam kartu bersama dengan tipe konten lainnya, seperti yang ditampilkan di sini — Keluaran dari contoh di atas akan terlihat seperti ini Campur dan Cocokkan Berbagai Jenis Konten dalam KartuJangan ragu untuk mencampur dan mencocokkan beberapa jenis konten untuk membuat kartu yang Anda butuhkan. Contoh berikut akan membuat kartu dengan lebar tetap dengan gambar, teks, grup daftar, dan hyperlink — Keluaran dari contoh di atas akan terlihat seperti ini Menambahkan Navigasi ke KartuAnda juga dapat menambahkan komponen nav Bootstrap seperti tab dan pil ke header kartu Untuk menambahkan navigasi tab ke kartu cukup tempatkan markup tab di dalam header kartu, dan konten tab di dalam badan kartu. Anda juga harus menggunakan kelas tambahan Mari kita coba contoh berikut yang membuat navigasi tab yang elegan — Keluaran dari contoh di atas akan terlihat seperti ini Demikian pula, Anda dapat menambahkan pil nav ke kartu dengan menggunakan kelas tambahan — Keluaran dari contoh di atas akan terlihat seperti ini Menyesuaikan Gaya KartuAda beberapa opsi yang tersedia untuk menyesuaikan latar belakang, batas, dan warna kartu Menyesuaikan Latar Belakang dan WarnaAnda cukup menggunakan kelas utilitas dan untuk mengubah tampilan kartu. Mari kita coba contoh berikut untuk memahami cara kerjanya pada dasarnya — Keluaran dari contoh di atas akan terlihat seperti ini Menyesuaikan Perbatasan dan WarnaDemikian pula, Anda dapat menyesuaikan batas dan warna teks dari kartu apa pun menggunakan kelas utilitas teks dan batas. Terapkan saja kelas-kelas ini pada — Keluaran dari contoh di atas akan terlihat seperti ini Opsi Tata Letak KartuSelain gaya kartu, Bootstrap juga menyertakan beberapa opsi untuk menyusun rangkaian kartu. Namun, tata letak ini belum responsif Membuat Grup KartuAnda dapat menggunakan grup kartu untuk merender kartu sebagai satu elemen terpasang dengan lebar dan tinggi kolom yang sama. Namun, kartu di dalam grup kartu akan ditumpuk secara horizontal pada perangkat ekstra kecil (mis. e. lebar viewport <576px). Mari kita coba sebuah contoh dan lihat cara kerjanya — Keluaran dari contoh di atas akan terlihat seperti ini Membuat Kotak KartuAnda dapat menggunakan sistem grid Bootstrap dan kelas — Keluaran dari contoh di atas akan terlihat seperti ini Membuat Kartu HorizontalAnda juga dapat membuat kartu horizontal tempat konten gambar dan teks ditempatkan berdampingan menggunakan kombinasi kelas kisi dan utilitas, seperti yang diperlihatkan dalam contoh berikut — Keluaran dari contoh di atas akan terlihat seperti ini Hamparan Gambar KartuAnda bahkan dapat mengubah gambar menjadi latar belakang kartu dan menempatkan teks kartu di atasnya menggunakan kelas — Keluaran dari contoh di atas akan terlihat seperti ini Catatan. Isi kartu tidak boleh lebih besar dari tinggi gambar. Jika konten lebih besar dari gambar, konten akan ditampilkan di luar gambar Perataan Teks di dalam KartuAnda dapat dengan mudah mengubah perataan teks kartu apa pun—seluruhnya atau bagian tertentu—dengan kelas utilitas perataan teks. Misalnya, Anda dapat menggunakan kelas — Keluaran dari contoh di atas akan terlihat seperti ini Menentukan Ukuran KartuKartu tidak memiliki lebar tertentu, lebarnya 100% secara default. Namun, Anda dapat mengubahnya sesuai kebutuhan dengan CSS khusus, kelas kisi, atau kelas utilitas ukuran Mari kita coba contoh berikut untuk memahami cara kerjanya pada dasarnya Kartu dengan Tautan TerbentangAnda dapat menambahkan kelas Bagaimana cara mengatur kartu secara horizontal di Bootstrap?Menggunakan kombinasi kelas grid dan utilitas , kartu dapat dibuat horizontal dengan cara yang mobile-friendly dan responsif. Pada contoh di bawah ini, kami menghapus talang kisi dengan. tanpa talang dan penggunaan. col-md-* untuk membuat kartu horizontal pada breakpoint md.
Bagaimana cara menyelaraskan kartu di Bootstrap?Dalam bootstrap 4, untuk memusatkan kartu di kolom kisi, gunakan .
Bagaimana Anda menyelaraskan kartu berdampingan?Buat kartu dan wadah dalam kolom fleksibel, lalu beri tahu wadah untuk memperluas sebanyak mungkin dengan flex. 1. Kemudian dorong h4 ke bagian bawah container dengan margin-top. otomatis . Simpan jawaban ini.
Bagaimana cara mengurutkan kartu Bootstrap?Mengurutkan Data
. Mesin terbang panah menunjukkan urutan pengurutan dalam kolom yang diurutkan. Tampilan Kartu dapat diurutkan berdasarkan beberapa kolom dengan mengklik tajuk kolom yang diperlukan sambil menahan tombol shift. clicking the header of a column by which data should be sorted. An arrow glyph indicates the sort order within the sorted column. The Card View can be sorted against multiple columns by clicking the required column headers while holding down the shift key. |
Bagaimana cara mengatur kartu bootstrap secara horizontal?
Pos Terkait
Copyright © 2024 apacode Inc.
