Cara Menyediakan Imej Di Bootstrap

Bootstrap mempunyai lima cara biasa untuk menggunakan imej: menggunakan kelas imej (seperti IMG-cecair) untuk mencapai skala imej responsif. Gunakan utiliti (seperti w-, mx-, bulat-*) untuk menyesuaikan gaya imej secara fleksibel. Gunakan objek media untuk menyelaraskan antara imej dan teks. Gunakan kumpulan imej untuk membuat set kecil yang responsif. Gunakan ruang letak imej untuk memaparkan kandungan pengganti sebelum imej dimuatkan.

Cara Menyediakan Imej Menggunakan Bootstrap

Bootstrap menyediakan banyak kelas dan utiliti untuk membantu anda gaya dan meletakkan imej di laman web. Untuk menyediakan gambar, anda boleh menggunakan salah satu kaedah berikut:

1. Gunakan kelas imej

 <code class="html"><img  class="img-fluid lazy" src="/static/imghw/default1.png" data-src="image.jpg" alt="Cara Menyediakan Imej Di Bootstrap" ></code>

• Kelas img-fluid menggunakan gaya imej responsif untuk mengubah saiz dan cecair secara automatik di semua saiz viewport.

2. Gunakan utiliti

Sebagai tambahan kepada kelas imej, Bootstrap juga menyediakan utiliti berikut:

• w-* : Tetapkan lebar imej, contohnya: w-25 (lebar 25%), w-50 (lebar 50%).
• mx-* dan my-* : tetapkan margin kiri dan kanan dan atas dan bawah imej, contohnya: mx-auto (berpusat secara mendatar).
• rounded dan rounded-* : Tambah sudut bulat ke imej, contohnya: rounded-circle .

 <code class="html"><img  class="w-50 mx-auto rounded lazy" src="/static/imghw/default1.png" data-src="image.jpg" alt="Cara Menyediakan Imej Di Bootstrap" ></code>

3. Gunakan objek media

• Objek media membolehkan anda menyelaraskan imej dengan teks atau elemen lain.

   <code class="html"><div class="media"> <img  class="mr-3 lazy" src="/static/imghw/default1.png" data-src="image.jpg" alt="Cara Menyediakan Imej Di Bootstrap" > <div class="media-body"> <p>图像描述...</p> </div> </div></code>

4. Gunakan kumpulan imej

• Kumpulan imej membolehkan anda membuat satu set gambar kecil yang responsif.

   <code class="html"><div class="row"> <div class="col-sm-6 col-md-4"> <img  src="/static/imghw/default1.png" data-src="image1.jpg" class="lazy" alt="Cara Menyediakan Imej Di Bootstrap" > </div> <div class="col-sm-6 col-md-4"> <img  src="/static/imghw/default1.png" data-src="image2.jpg" class="lazy" alt="Cara Menyediakan Imej Di Bootstrap" > </div> <div class="col-sm-6 col-md-4"> <img  src="/static/imghw/default1.png" data-src="image3.jpg" class="lazy" alt="Cara Menyediakan Imej Di Bootstrap" > </div> </div></code>

5. Pemegang Tempat Imej

• Pemegang letak imej digunakan untuk memaparkan kandungan alternatif sebelum imej dimuatkan.

   <code class="html"><img class="img-fluid lazy" src="/static/imghw/default1.png" data-src="image.jpg" alt="Responsive image"> <div class="placeholder-glow"> <span class="placeholder col-12"></span> </div></code>

Dengan menggunakan kaedah ini, anda boleh dengan mudah menyediakan dan gaya imej dengan bootstrap untuk membuat laman web yang indah dan responsif.

Atas ialah kandungan terperinci Cara Menyediakan Imej Di Bootstrap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!