English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap-Grundlagen-Tutorial

Bootstrap-Plugin

Bootstrap-Bilder

In diesem Kapitel werden wir uns mit der Unterstützung von Bootstrap für Bilder auseinandersetzen. Bootstrap bietet drei Klassen, die einfachen Stil auf Bilder anwenden können：

  • .img-rounded：Fügen Sie hinzu Umrandung-radius:6px um die Ecken des Bildes zu erhalten。

  • .img-circle：Fügen Sie hinzu Umrandung-radius:50% um das gesamte Bild in einen Kreis zu machen。

  • .img-thumbnail：Fügen Sie etwas Innenabstand (Padding) und eine graue Umrandung hinzu。

Sehen Sie sich unten die Beispiel-Demonstration an：

Online-Beispiel

!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap-Beispiel　-　Bild</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<img src="/run/images/download.png" class="img-rounded">
<img src="/run/images/download.png" class="img-circle">
<img src="/run/images/download.png" class="img-thumbnail">
</body>
</html>
Testen Sie es heraus ‹/›

Das Ergebnis ist wie folgt gezeigt：

<img> Klasse

Die folgenden Klassen können in jedem Bild verwendet werden。

KlasseBeschreibungBeispiel
.img-roundedRundungen für das Bild hinzufügen (IE8 nicht unterstützt)Versuchen Sie es aus
.img-circleDas Bild in einen Kreis umwandeln (IE8 nicht unterstützt)Versuchen Sie es aus
.img-thumbnailVorschaufunktionVersuchen Sie es aus
.img-responsiveBild-Responsive (wird sich gut bis zum übergeordneten Element ausdehnen)Versuchen Sie es aus

Responsives Bild

Durch Hinzufügen von .img-responsive-Klasse verwenden, um das Bild für responsives Design zu unterstützen. 　Das Bild wird sich gut bis zum übergeordneten Element ausdehnen.

.img-responsive-Klasse wird max-width: 100%; und height: auto; Stil wird auf das Bild angewendet：

Online-Beispiel

!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Grundlagen-Tutorial-Website(oldtoolbag.com)</title>　
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
	<h2>Bilder</h2>
	<p>　.img-Die Klasse "responsive" ermöglicht es den Bildern, responsiv zu sein und sich gut in das übergeordnete Element zu erweitern (prüfen Sie den Effekt durch Ändern der Fenstergröße):</p>　　　　　　　　　　　　　　　　　　
	<img　src="cinqueterre.jpg"　class="img-responsive"　alt="Cinque　Terre"　width="304"　height="236">　
</div>
</body>
</html>
Testen Sie es heraus ‹/›
Bootstrap-HilfsklassenBootstrap-Schaltflächen