Cara memasukkan gambar di bootstrap

Terdapat beberapa cara untuk memasukkan imej dalam bootstrap: masukkan imej secara langsung, menggunakan tag HTML IMG. Menggunakan komponen imej bootstrap, anda boleh memberikan imej responsif dan lebih banyak gaya. Tetapkan saiz imej, gunakan kelas IMG-cecair untuk membuat imej boleh disesuaikan. Tetapkan sempadan, menggunakan kelas IMG-Sempadan. Tetapkan sudut bulat dan gunakan kelas IMG-bulat. Tetapkan bayangan, gunakan kelas bayangan. Saiz semula dan letakkan imej, menggunakan gaya CSS. Menggunakan imej latar belakang, gunakan harta CSS imej latar belakang.

Cara memasukkan gambar dalam bootstrap

Masukkan gambar secara langsung

Di Bootstrap, anda boleh menggunakan tag img HTML untuk memasukkan imej secara langsung:

 <code class="html"><img src="/static/imghw/default1.png" data-src="image.jpg" class="lazy" alt="Cara memasukkan gambar di bootstrap"></code>

Menggunakan komponen imej bootstrap

Bootstrap menyediakan komponen imej yang menyediakan imej yang responsif dan dapat menetapkan sempadan, sudut bulat, bayang -bayang, dan gaya lain:

 <code class="html"><div class="img-container"> <img class="img-fluid lazy" src="/static/imghw/default1.png" data-src="image.jpg" alt="Cara memasukkan gambar di bootstrap"> </div></code>

Tetapkan saiz gambar

Gunakan kelas img-fluid untuk membuat imej skala respons pada peranti dan saiz skrin yang berbeza:

 <code class="html"><img class="img-fluid lazy" src="/static/imghw/default1.png" data-src="image.jpg" alt="Cara memasukkan gambar di bootstrap"></code>

Tetapkan sempadan

Anda boleh menggunakan kelas img-bordered untuk menambah sempadan ke imej:

 <code class="html"><img class="img-bordered lazy" src="/static/imghw/default1.png" data-src="image.jpg" alt="Cara memasukkan gambar di bootstrap"></code>

Tetapkan sudut bulat

Anda boleh menggunakan kelas img-rounded untuk menambah sudut bulat ke imej:

 <code class="html"><img class="img-rounded lazy" src="/static/imghw/default1.png" data-src="image.jpg" alt="Cara memasukkan gambar di bootstrap"></code>

Tetapkan bayang -bayang

Anda boleh menggunakan kelas shadow untuk menambah bayangan ke imej:

 <code class="html"><img class="shadow lazy" src="/static/imghw/default1.png" data-src="image.jpg" alt="Cara memasukkan gambar di bootstrap"></code>

Saiz semula dan letakkan gambar

Anda boleh menggunakan gaya CSS untuk mengubah saiz dan meletakkan imej:

 <code class="css">img { width: 50%; float: left; }</code>

Gunakan imej latar belakang

Anda boleh menggunakan harta CSS background-image untuk menggunakan harta CSS imej latar belakang:

 <code class="css">.my-class { background-image: url("image.jpg"); }</code>

Atas ialah kandungan terperinci Cara memasukkan gambar di bootstrap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!