cari

Rumah >hujung hadapan web >tutorial js >Penjelasan terperinci tentang empat kemahiran imej styles_javascript Bootstrap

Penjelasan terperinci tentang empat kemahiran imej styles_javascript Bootstrap

WBOY
WBOYasal
2016-05-16 15:22:15989semak imbas

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>

.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>

.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>

.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>

.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.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Penjelasan terperinci tentang kemahiran Bootstrap button_javascriptArtikel seterusnya：Penjelasan terperinci tentang kemahiran Bootstrap button_javascript

Artikel berkaitan

Lihat lagi