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
Di bagian berikut, Anda akan melihat apa yang dapat Anda lakukan dengan komponen kartu
Membuat Kartu Dasar
Markup kartu cukup lurus ke depan. Pembungkus luar memerlukan kelas dasar
This is some text within a padded box.
_7, sedangkan konten dapat ditempatkan di dalam elemen
This is some text within a padded box.
8. Contoh berikut akan menunjukkan cara membuat kartu dengan gambar, dicampur dengan beberapa konten teks dan tombol
Alice Liddel
Alice is a freelance web designer and developer based in London. She is specialized in HTML5, CSS3, JavaScript, Bootstrap, etc.
View Profile— Keluaran dari contoh di atas akan terlihat seperti ini
View pictures Discover history
_— Keluaran dari contoh di atas akan terlihat seperti ini
View pictures Discover history
1 dan
Eiffel Tower Champ de Mars, Paris, France
Built in 1889 Eiffel Tower is one of the most iconic landmarks in the world.
View pictures Discover history 2. Mari kita lihat contoh berikut
Featured
NASA Launched Solar Probe
NASA launched Parker space probe in 2018 with the mission of making observations of the outer corona of the Sun. It is the first-ever mission to "touch" the Sun.
Know more3 years ago
_— Keluaran dari contoh di atas akan terlihat seperti ini
View pictures Discover history
3 dan
Eiffel Tower Champ de Mars, Paris, France
Built in 1889 Eiffel Tower is one of the most iconic landmarks in the world.
View pictures Discover history 4 untuk menyelaraskan konten kartu masing-masing ke tengah dan ujung kanan. Secara default mereka rata kiriMenempatkan Grup Daftar di dalam Kartu
Anda juga dapat menempatkan grup daftar di dalam kartu bersama dengan tipe konten lainnya, seperti yang ditampilkan di sini
Featured
- An item
- A second item
- A third item
Add More Share
— Keluaran dari contoh di atas akan terlihat seperti ini
Card link Another link
— Keluaran dari contoh di atas akan terlihat seperti ini
View pictures Discover history
_5 pada elemen
Eiffel Tower Champ de Mars, Paris, France
Built in 1889 Eiffel Tower is one of the most iconic landmarks in the world.
View pictures Discover history 6 bersama dengan kelas
Eiffel Tower Champ de Mars, Paris, France
Built in 1889 Eiffel Tower is one of the most iconic landmarks in the world.
View pictures Discover history 7 untuk penyelarasan yang tepatMari kita coba contoh berikut yang membuat navigasi tab yang elegan
- Home
- Profile
- Messages
Home tab content
Here is some example text to make up the tab's content. Replace it with your own text anytime.
Go somewhereProfile tab content
Here is some example text to make up the tab's content. Replace it with your own text anytime.
Go somewhereMessages tab content
Here is some example text to make up the tab's content. Replace it with your own text anytime.
Go somewhere— Keluaran dari contoh di atas akan terlihat seperti ini
View pictures Discover history
8 bersama dengan kelas
Eiffel Tower Champ de Mars, Paris, France
Built in 1889 Eiffel Tower is one of the most iconic landmarks in the world.
View pictures Discover history 9 pada elemen
Eiffel Tower Champ de Mars, Paris, France
Built in 1889 Eiffel Tower is one of the most iconic landmarks in the world.
View pictures Discover history 6, seperti yang ditunjukkan di bawah ini
- Home
- Profile
- Messages
Home tab content
Here is some example text to make up the tab's content. Replace it with your own text anytime.
Go somewhereProfile tab content
Here is some example text to make up the tab's content. Replace it with your own text anytime.
Go somewhereMessages tab content
Here is some example text to make up the tab's content. Replace it with your own text anytime.
Go somewhere— Keluaran dari contoh di atas akan terlihat seperti ini
Menyesuaikan Gaya Kartu
Ada beberapa opsi yang tersedia untuk menyesuaikan latar belakang, batas, dan warna kartu
Menyesuaikan Latar Belakang dan Warna
Anda cukup menggunakan kelas utilitas dan untuk mengubah tampilan kartu. Mari kita coba contoh berikut untuk memahami cara kerjanya pada dasarnya
Primary card title
Some dummy text to make up the card's content. You can replace it anytime.
Secondary card title
Some dummy text to make up the card's content. You can replace it anytime.
Success card title
Some dummy text to make up the card's content. You can replace it anytime.
Danger card title
Some dummy text to make up the card's content. You can replace it anytime.
Warning card title
Some dummy text to make up the card's content. You can replace it anytime.
Info card title
Some dummy text to make up the card's content. You can replace it anytime.
Dark card title
Some dummy text to make up the card's content. You can replace it anytime.
Light card title
Some dummy text to make up the card's content. You can replace it anytime.
— Keluaran dari contoh di atas akan terlihat seperti ini
Menyesuaikan Perbatasan dan Warna
Demikian pula, Anda dapat menyesuaikan batas dan warna teks dari kartu apa pun menggunakan kelas utilitas teks dan batas. Terapkan saja kelas-kelas ini pada
This is some text within a padded box.
7 atau elemen anaknya, seperti yang ditunjukkan di bawah ini
Primary card title
Some dummy text to make up the card's content. You can replace it anytime.
Secondary card title
Some dummy text to make up the card's content. You can replace it anytime.
Success card title
Some dummy text to make up the card's content. You can replace it anytime.
Danger card title
Some dummy text to make up the card's content. You can replace it anytime.
Warning card title
Some dummy text to make up the card's content. You can replace it anytime.
Info card title
Some dummy text to make up the card's content. You can replace it anytime.
Dark card title
Some dummy text to make up the card's content. You can replace it anytime.
Light card title
Some dummy text to make up the card's content. You can replace it anytime.
— Keluaran dari contoh di atas akan terlihat seperti ini
Opsi Tata Letak Kartu
Selain gaya kartu, Bootstrap juga menyertakan beberapa opsi untuk menyusun rangkaian kartu. Namun, tata letak ini belum responsif
Membuat Grup Kartu
Anda 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