Detaillierte Erklärung der vier Bildstile von Bootstrap_Javascript-Fähigkeiten-js-Tutorial-php.cn

Detaillierte Erklärung der vier Bildstile von Bootstrap_Javascript-Fähigkeiten

WBOY

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

Original

989 Leute haben es durchsucht

In diesem Kapitel erfahren Sie mehr über die Unterstützung von Bootstrap für Bilder. Bootstrap bietet vier Klassen, die einfache Stile auf Bilder anwenden können, nämlich:

img-rounded fügt border-radius:6px hinzu, um abgerundete Bildecken zu erhalten
img-circle Fügen Sie border-radius:50% hinzu, um das gesamte Bild kreisförmig zu machen
img-thumbnail fügt etwas Polsterung und einen grauen Rand hinzu
img-responsive bildresponsive

1. img-gerundet

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

Nach dem Login kopieren

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

Wirkung:

2. img-circle

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

Nach dem Login kopieren

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

Effekt (da die Breite und Höhe dieses Bildes unterschiedlich sind, erscheint es als Ellipse. Wenn Breite und Höhe gleich eingestellt sind, erscheint ein Kreis):

3. img-thumbnail

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

Nach dem Login kopieren

.img-thumbnail{display:inline-block;max-width:100%;height:auto;padding:4px;line-height:1.42857143;
background-color:#FFF;border:1px solid #DDD;border-radius:4px;transition:all 0.2s easy-in-out;}

Wirkung:

4. img-responsize

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

Nach dem Login kopieren

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

Effekt (Width-Attributwert in img wird ignoriert):