Ketika teman-teman kursus web design private online pernah menggunakan sebuah bootstrap pasti tidak asing lagi ya dengan card ini, biasanya card ini digunkan untuk membuat kontent yang menjadi satu kesatuan misal ada sebuah gambar dan ada sebuah teks, dimana gambar dan teks itu ada satu info, kita bisa gunakan card ini, oke seperti apa cara membuat sebuah card di bootstrap vue, simak terus ya teman-teman.
Mungkin untuk penjelasan sebuah card saya rasa cukup ya di atas, oke jadi disini saya akan mencoba membagikan cara membuat sebuah card di bootstrap vue, karena terdapat beberapa model card yang ada di bootstrap vue ini yang pertama yang biasanya kita dapatkan di bootstrap itu biasanya seperti ini
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div> <b-card title="Card Title" img-src="https://picsum.photos/600/300/?image=25" img-alt="Image" img-top tag="article" style="max-width: 20rem;" class="mb-2" > <b-card-text> Some quick example text to build on the card title and make up the bulk of the card's content. </b-card-text> <b-button href="#" variant="primary">Go somewhere</b-button> </b-card> </div> |
di attribute card:
- title: ntuk membuat titlenya
- img-src: untuk mensisipkan gambarnya
- img-top: teman-teman bisa mengatur letak gambar tersebut bisa img-top, img-left, img-right, img-button.
- overlay: untuk mengatur card-text itu ada di atas gambar.
- header, footer: untuk membuat info di tag tersebut misal header dan footer,
- header-tag/footer-tag =”header/footer”: untuk membuat tanda ini header dan footer
Dan jangan lupa disini kita juga bisa membuat sebuah group card ya, kami kursus web design private online akan memberikan contohnya seperti ini
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<div> <div> <b-card-group deck> <b-card border-variant="primary" header="Primary" header-bg-variant="primary" header-text-variant="white" align="center" > <b-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b-card-text> </b-card> <b-card border-variant="secondary" header="Secondary" header-border-variant="secondary" align="center" > <b-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b-card-text> </b-card> <b-card border-variant="success" header="Success" align="center"> <b-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b-card-text> </b-card> </b-card-group> </div> </div> </div> |
ada ataribute deck itu berfungsi untuk memisahkan atau memberikan jarak ke card yang lain. kita juga bisa mengatur sebuah warnanya, teks warna, bahkan sebuah border itu sendiri, sebenarnya masih ada lagi ya, dan sebuah attributenya juga banyak teman-teman kursus private web design online bisa lihat sendiri di bootstrapnya, semoga bermanfaat dan sampai jumpa pada artikel selanjutnya terimakaish.