Bootstrap-Bilder

In diesem Tutorial wird erläutert, wie Sie mit dem Bootstrap-Framework Bilder formatieren, Miniaturansichten, Text usw. erstellen. Bilder sind im Webdesign-Bereich weit verbreitet. Das Gestalten von Bildern und deren Platzierung auf den Webseiten verbessert das Benutzererlebnis erheblich. Bootstrap bietet integrierte drei Klassen zum Stilisieren von Bildern, z. B. abgerundetes Bild, kreisförmiges Bild und Miniaturbild.

lesen Sie auch:

  • Bootstrap-Setup
  • Bootstrap-Typografie

Abgerundete Bilder

Das folgende Skript zeigt Bilder in Form abgerundeter Ecken. Der Bootstrap verwendet die Klasse img-rounded, die die Eigenschaft border-radius auf 6 Pixel setzt, um den zugehörigen Bildern abgerundete Ecken zu verleihen.

 <!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" type="text/css" href="myclass.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div  >
<h2>Rounded Images</h2>
   <img src="https://javabeat.net/wp-content/uploads/2014/03/amazing-300x214.jpg" height="200" width="200" alt="amazing"  >
   <image src="https://javabeat.net/wp-content/uploads/2014/05/dummy_image2-300x300.jpg" alt="my_image1" height="200" width="200"  />
   <image src="https://javabeat.net/wp-content/uploads/2014/05/dummy_image1-300x210.jpg" alt="my_image2" height="200" width="200"  />
</div>
</body>
</html>
  • Führen Sie Bootstrap aus Demo zu abgerundeten Bildern

Abgerundete Bilder

Kreisbilder

Bootstrap bietet die Klasse img-circle, die ein Bild mit Kreisform oder runden Ecken erstellt. Das Folgende ist ein Beispiel:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" type="text/css" href="myclass.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div  >
<h2>Circular Images</h2>
   <img src="https://javabeat.net/wp-content/uploads/2014/03/amazing-300x214.jpg" height="200" width="200" alt="amazing"  >
   <image src="https://javabeat.net/wp-content/uploads/2014/05/dummy_image2-300x300.jpg" alt="my_image1" height="200" width="200"  />
   <image src="https://javabeat.net/wp-content/uploads/2014/05/dummy_image1-300x210.jpg" alt="my_image2" height="200" width="200"  />
</div>
</body>
</html>
  • Führen Sie Bootstrap aus Kreisbilder-Demo

Kreisförmige Bilder

Miniaturbilder

Bootstrap bietet die Klasse img-thumbnail, die zum Erstellen eines Bildrasters verwendet wird und den Bildern Miniaturansichtsstile verleiht. Das Folgende ist ein Beispiel:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" type="text/css" href="myclass.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div  >
<h2>Thumbnail Images</h2>
   <img src="https://javabeat.net/wp-content/uploads/2014/03/amazing-300x214.jpg" height="200" width="200" alt="amazing"  >
   <img src="https://javabeat.net/wp-content/uploads/2014/05/dummy_image2-300x300.jpg" alt="my_image1" height="150" width="200"  >
   <img src="https://javabeat.net/wp-content/uploads/2014/05/dummy_image1-300x210.jpg" alt="my_image2" height="200" width="200"  >
</div>
</body>
</html>
  • Führen Sie Bootstrap aus Miniaturbild-Demo

Miniaturbilder

Responsive Bilder

Mithilfe der img-responsive-Klasse von Bootstrap können wir das Bild responsiv gestalten. Das Folgende ist ein Beispiel mit dieser Klasse:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" type="text/css" href="myclass.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<style>
   .img-responsive{
      display:block;
      height:auto;
      margin-bottom:15px;
}
</style>
</head>
<body>
<div  >
<h2>Responsive Images</h2>
   <img src="https://javabeat.net/wp-content/uploads/2014/03/amazing-300x214.jpg" height="200" width="200" alt="amazing"  >
   <img src="https://javabeat.net/wp-content/uploads/2014/05/dummy_image2-300x300.jpg" alt="my_image1" height="150" width="200"  >
   <img src="https://javabeat.net/wp-content/uploads/2014/05/dummy_image1-300x210.jpg" alt="my_image2" height="200" width="200"  >
</div>
</body>
</html>

Die .img-responsive-Klasse definiert, dass Bilder als Elemente auf Blockebene angezeigt werden müssen, wobei die Höhe des Bildes und die Breite des Bildes auf 100 % eingestellt werden müssen, was eine viel bessere Skalierung auf das übergeordnete Element ermöglicht und das Bild entsprechend den Geräten einschränkt, auf denen es gerendert wird . Die Eigenschaft margin-bottom legt den unteren Rand eines Elements auf der Webseite fest.

  • Führen Sie die Bootstrap Responsive Images-Demo aus

Responsive Bilder

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Nach oben scrollen