Apakah gaya imej dalam bootstrap?

Terdapat empat gaya imej dalam bootstrap: 1. ".img-rounded", gaya imej bulat; 2. ".img-circle", gaya imej bulat; 3. ".img-thumbnail" , thumbnail gaya; 4. ".img-responsive", gaya imej responsif.

Persekitaran pengendalian tutorial ini: sistem Windows 7, bootsrap versi 3.3.7, komputer DELL G3

Bootstrap menyediakan empat jenis < ;img> ; Gaya kelas, masing-masing:

• .img-rounded: sudut bulat (tidak disokong oleh IE8), tambah jejari sempadan:6px untuk mendapatkan sudut bulat imej; >

• : Bulatan (tidak disokong oleh IE8), tambah jejari sempadan:50% untuk menjadikan keseluruhan imej bulat.

  .img-circle

• : Fungsi lakaran kecil, tambahkan sedikit pelapik dan jidar kelabu.

  .img-thumbnail

• : Imej responsif (akan berskala baik kepada elemen induk).

  .img-responsive

Gunakan:

Tambah gaya kelas terus ke kelas:

<img class="img-circle" src="img.jpg" alt="头像"/>

Dari Dalam gambar, anda boleh melihat kesan yang diperolehi dengan menggunakan pelbagai gaya Ia adalah sangat mudah dan mudah untuk memproses gambar. Kadang-kadang mengikut keperluan, sebagai contoh, apabila kita perlu menggunakan avatar bulat dengan jidar dalam dan sempadan kelabu, kita boleh menindih dua gaya bulatan dan lakaran kenit Kesannya adalah seperti yang ditunjukkan dalam rajah di atas lakaran kecil bulatan.

img-responsif menjadikan imej kami responsif. Apa yang dipanggil responsif bermakna ia berubah apabila elemen tertentu berubah, dengan itu mencapai kesan penyesuaian. Dua kod imej responsif dalam gambar di atas adalah seperti berikut:

Di sini kami tidak menetapkan saiz imej, tetapi menetapkan saiz elemen angka yang membalutnya, sama ada angka itu 150px *150px atau 100px*100px , gambar boleh dipanjangkan kepada angka elemen induk.

<figure   style="max-width:90%">  
            <figcaption>responsive(150*150)</figcaption>  
            <img class="img-responsive " src="img.jpg" alt="头像"/>  
 </figure>  
<figure style="width: 100px;height: 100px;">  
            <figcaption>responsive(100*100)</figcaption>  
            <img class="img-responsive " src="img.jpg" alt="头像"/>  
 </figure>

Untuk pengetahuan lanjut tentang bootstrap, sila lawati:

tutorial asas bootstrap

! !

Atas ialah kandungan terperinci Apakah gaya imej dalam bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!