Bootstrap dan Masonry

Integrasikan Masonry dengan sistem grid Bootstrap dan komponen kad.

Masonry tidak termasuk dalam Bootstrap. Tambahkannya dengan memasukkan pemalam JavaScript secara manual, atau menggunakan CDN seperti itu:


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script>

Dengan menambah data-masonry='{"percentPosition": true }'pada .rowpembungkus, kami boleh menggabungkan kuasa grid responsif Bootstrap dan kedudukan Masonry.

Placeholder Image cap
Tajuk kad yang dibalut ke baris baharu

Ini ialah kad yang lebih panjang dengan teks sokongan di bawah sebagai petunjuk masuk semula jadi kepada kandungan tambahan. Kandungan ini lebih panjang sedikit.

Petikan yang terkenal, terkandung dalam elemen petikan blok.

Seseorang yang terkenal dalam Tajuk Sumber
Placeholder Image cap
Tajuk kad

Kad ini mempunyai teks sokongan di bawah sebagai petunjuk semula jadi kepada kandungan tambahan.

Kemas kini terakhir 3 minit yang lalu

Petikan yang terkenal, terkandung dalam elemen petikan blok.

Seseorang yang terkenal dalam Tajuk Sumber
Tajuk kad

Kad ini mempunyai tajuk biasa dan perenggan teks pendek di bawahnya.

Kemas kini terakhir 3 minit yang lalu

Placeholder Card image

Petikan yang terkenal, terkandung dalam elemen petikan blok.

Seseorang yang terkenal dalam Tajuk Sumber
Tajuk kad

Ini adalah satu lagi kad dengan tajuk dan teks sokongan di bawah. Kad ini mempunyai beberapa kandungan tambahan untuk menjadikannya lebih tinggi sedikit secara keseluruhan.

Kemas kini terakhir 3 minit yang lalu