Penjelasan terperinci tentang empat kemahiran imej styles_javascript Bootstrap-tutorial js-php.cn

Penjelasan terperinci tentang empat kemahiran imej styles_javascript Bootstrap

WBOY

Lepaskan： 2016-05-16 15:22:15

asal

988 orang telah melayarinya

Dalam bab ini, kita akan mempelajari tentang sokongan Bootstrap untuk imej. Bootstrap menyediakan empat kelas yang boleh menggunakan gaya ringkas pada imej, iaitu:

img-rounded menambah sempadan-radius:6px untuk mendapatkan imej bucu bulat
img-circle Tambah jejari sempadan:50% untuk menjadikan keseluruhan imej bulat
img-thumbnail menambahkan sedikit pelapik dan jidar kelabu
imej responsif img responsif

1. bulat-img

<!doctype html> 
<html lang="en"> 
<head> 
  <!--网站编码格式，UTF-8 国际编码，GBK或 gb2312 中文编码--> 
  <meta http-equiv="content-type" content="text/html;charset=utf-8" /> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <meta name="Keywords" content="关键词一，关键词二"> 
  <meta name="Description" content="网站描述内容"> 
  <meta name="Author" content="Yvette Lau"> 
  <meta name = "viewport" content = " width = device-width, initial-scale = 1 "> 
  <title>BootstrapDemo</title> 
  <!--css js 文件的引入--> 
  <link rel="stylesheet" type="text/css" href="../bootstrap-3.3.5-dist/css/bootstrap.min.css"> 
</head> 
  <body style="padding: 20px;"> 
    <div class = "container"> 
      <img src = "5.jpg" class="img-rounded" >    
    </div> 
  </body> 
</html>

Salin selepas log masuk

.img-bulat{border-radius:6px;}

Kesan:

2. img-circle

<body style="padding: 20px;"> 
  <div class = "container"> 
    <img src = "5.jpg" class="img-circle" >    
  </div> 
</body>

Salin selepas log masuk

.img-circle{border-radius:50%;}

Kesan (kerana lebar dan tinggi imej ini berbeza, ia akan muncul sebagai elips. Jika lebar dan ketinggian ditetapkan kepada sama, bulatan akan muncul):

3. lakaran kecil img

<body style="padding: 20px;"> 
  <div class = "container"> 
    <img src = "5.jpg" class="img-thumbnail" >  
    <img src = "4.jpg" class="img-thumbnail" >  
    <img src = "3.jpg" class="img-thumbnail" >  
  </div> 
</body>

Salin selepas log masuk

.img-thumbnail{display:inline-block;max-width:100%;height:auto;padding:4px;line-height:1.42857143;
warna latar belakang:#FFF;sempadan:1px pepejal #DDD;jejari sempadan:4px;peralihan:semua 0.2s mudah-keluar;}

Kesan:

4. img-responsize

<body style="padding: 20px;"> 
  <div class = "container" style = "width:150px;"> 
    <img src = "5.jpg" class="img-responsive" width="400px" >    
  </div> 
</body>

Salin selepas log masuk

.img-responsive{display:block;max-width:100%;height:auto;}

Kesan (nilai atribut lebar dalam img diabaikan):

Kandungan di atas memperkenalkan anda kepada pengetahuan yang berkaitan tentang empat gaya imej Bootstrap langkah demi langkah saya harap anda menyukainya.