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

Bootstrap Grund教程

Bootstrap Plugins

Bootstrap-Hilfsklassen

Dieses Kapitel wird einige nützliche Hilfsklassen in Bootstrap besprechen.

Text

Unterschiedliche Klassen zeigen unterschiedliche Textfarben an. Wenn der Text ein Link ist, wird er beim Bewegen des Mauszeigers über den Text dunkler:

KlasseBeschreibungBeispiel
.text-muted"text-Textstil der "muted" KlasseVersuchen Sie es aus
.text-primary"text-Textstil der "primary" KlasseVersuchen Sie es aus
.text-success"text-Textstil der "success" KlasseVersuchen Sie es aus
.text-info"text-Textstil der "info" KlasseVersuchen Sie es aus
.text-warning"text-Textstil der "warning" KlasseVersuchen Sie es aus
.text-danger"text-Textstil der "danger" KlasseVersuchen Sie es aus

Hintergrund

Unterschiedliche Klassen zeigen unterschiedliche Hintergrundfarben an. Wenn der Text ein Link ist, wird er beim Bewegen des Mauszeigers über den Text dunkler:

KlasseBeschreibungBeispiel
.bg-primaryTabellenzellen verwenden "bg-primary" KlasseVersuchen Sie es aus
.bg-successTabellenzellen verwenden "bg-success" KlasseVersuchen Sie es aus
.bg-infoTabellenzellen verwenden "bg-info" KlasseVersuchen Sie es aus
.bg-warningTabellenzellen verwenden "bg-warning" KlasseVersuchen Sie es aus
.bg-dangerTabellenzellen verwenden "bg-"danger"-KlasseVersuchen Sie es aus

Andere

KlasseBeschreibungBeispiel
.pull-leftElement floaten nach linksVersuchen Sie es aus
.pull-rightElement floaten nach rechtsVersuchen Sie es aus
.center-blockSetzen Sie das Element auf display:block und zentriert darstellenVersuchen Sie es aus
.clearfixFlussbereinigungVersuchen Sie es aus
.showErzwingen Sie das Anzeigen von ElementenVersuchen Sie es aus
.hiddenErzwingen Sie das Verbergen von ElementenVersuchen Sie es aus
.sr-nurVerbergen Sie Elemente auf anderen Geräten als BildschirmlesernVersuchen Sie es aus
.sr-nur-focusableund .sr-only-Klasse zusammen mit, um sie bei Fokus der Elemente anzuzeigen (z.B. für Benutzer mit Tastatursteuerung)Versuchen Sie es aus
.text-hideErsetzen Sie den Textinhalt der Seite durch ein HintergrundbildVersuchen Sie es aus
.closeZeige Schließknopf anVersuchen Sie es aus
.caretZeige Dropdown-Funktion anVersuchen Sie es aus

Mehr Beispiele

Schließsymbol

Verwenden Sie das allgemeine Schließsymbol, um Modale und Warnungen zu schließen. Verwenden Sie die class close erhält das Schließsymbol.

Online-Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap-Beispiel　-　Schließsymbol</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>
<p>Schließsymbolbeispiel
	<button type="button" class="close" aria-hidden="true">×</>button>
</>p>
</body>
</html>
Testen Sie heraus, ob ‹/›

Das Ergebnis ist wie folgt gezeigt:

aria-hidden="true" hilft hauptsächlich Behinderten (wie Blinden) bei der Verwendung von Lesegeräten (Lesen des Inhalts und Automatisches Abspielen), beim Abspielen des Inhalts mit diesem Attribut wird automatisch übersprungen, um Behinderten zu vermeiden, dass sie verwirrt werden!

Platzhalter

Verwenden Sie den Platzhalter, um Dropdown-Funktionen und Richtungen anzuzeigen. Verwenden Sie die class caret der <span>-Elemente erhält diese Funktion.

Online-Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap-Beispiel　-　Platzhalter</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>
<p>Platzhalterbeispiel
	<span class="caret"></>span>
</>p>
</body>
</html>
Testen Sie heraus, ob ‹/›

Das Ergebnis ist wie folgt gezeigt:

Schnelle Flussbereinigung

Sie können die class pull-left oder pull-right um Elemente nach links oder rechts zu floaten. Die folgenden Beispiele demonstrieren dies.

Online-Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap-Beispiel　-　Schnelle Flussbereinigung</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="pull-left">
	Schnell nach links bewegen
</div>
<div class="pull-right">
	Schnell nach rechts bewegen
</div>
</body>
</html>
Testen Sie heraus, ob ‹/›

Das Ergebnis ist wie folgt gezeigt:

Um die Komponenten in der Navigationsleiste auszurichten, verwenden Sie .navbar-left oder .navbar-right Ersetzen. Weitere Informationen finden Sie Bootstrap-Navigationsleiste.

Inhaltszentrierung

Verwenden Sie class center-block um Elemente zentriert darzustellen.

Online-Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap-Beispiel　-　Zentriertes Inhaltsblock</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="row">
	<div class="center-block" style="Breite:200px;background-color:#ccc;">
		Das ist center-block-Beispiel
　　　	</div>
</div>
</body>
</html>
Testen Sie heraus, ob ‹/›

Das Ergebnis ist wie folgt gezeigt:

Flussbereinigung

Um die Flussbereinigung eines Elements zu entfernen, verwenden Sie bitte .clearfix class.

Online-Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap-Beispiel　-　Flussbereinigung</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="clearfix" style="Hintergrund: #D8D8D8;Rahmen:　1px festes #000 einrücken:　10px;">
	<div class="pull-left" style="background:#58D3F7">
　　　　　　	Schnell nach links bewegen
　　　	</div>
　　　	<div class="pull-right" style="background: #DA81F5">
　　　　　　	Schnell nach rechts bewegen
　　　	</div>
</div>
</body>
</html>
Testen Sie heraus, ob ‹/›

Das Ergebnis ist wie folgt gezeigt:

Zeigen und Verbergen von Inhalten

Verwenden Sie die Klasse .show und .hidden Stellen Sie gezwungenermaßen die Anzeige oder Verbergen von Elementen fest (einschließlich des Screenreaders).

Online-Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap-Beispiel　-　Zeigen und Verbergen von Inhalten</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="row" style="padding:　91px　100px　19px　50px;">
	<div class="show" style="margin-left:10px;width:300px;background-color:#ccc;">
　　　　　　	Dies ist ein Beispiel für die show-Klasse
　　　	</div>
　　　	<div class="hidden" style="width:200px;background-color:#ccc;">
　　　　　　	Dies ist ein Beispiel für die hide-Klasse
　　　	</div>
</div>
</body>
</html>
Testen Sie heraus, ob ‹/›

Das Ergebnis ist wie folgt gezeigt:

Screenreader

Verwenden Sie die Klasse .sr-nur Verbergen Sie Elemente für alle Geräte, außer dem Screenreader.

Online-Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap-Beispiel　-　Screenreader</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="row" style="padding:　91px　100px　19px　50px;">
	<form class="form-inline" role="form">
		<div class="form-group">
			<label class="sr-only" for="email">E-Mail-Adresse</label>
			<input type="email" class="form-control" placeholder="Geben Sie E-Mail-Adresse ein">
		</div>
		<div class="form-group">
			<label class="sr-only" for="pass">Passwort</label>
			<input type="password" class="form-control" placeholder="Passwort">
		</div>
	</form>
</div>
</body>
</html>
Testen Sie heraus, ob ‹/›

Das Ergebnis ist wie folgt gezeigt:

Hier sehen wir zwei input-typische label-Tags, die alle class haben sr-nurDaher werden die Tags nur für Screenreader sichtbar.

Bootstrap-Responsive-Utility-ToolsBootstrap-Bild