suchen

Heim >Web-Frontend >js-Tutorial >Detaillierte Erklärung der vier Bildstile von Bootstrap_Javascript-Fähigkeiten

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

WBOY
WBOYOriginal
2016-05-16 15:22:15989Durchsuche

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>

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

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

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

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

Effekt (Width-Attributwert in img wird ignoriert):


Der obige Inhalt führt Sie Schritt für Schritt in das relevante Wissen über die vier Bildstile von Bootstrap ein. Ich hoffe, es gefällt Ihnen.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Erläuterung der Bootstrap-Button_Javascript-FähigkeitenNächster Artikel：Detaillierte Erläuterung der Bootstrap-Button_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen