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

Bootstrap-Basisanleitung

Bootstrap-Plugins

Bootstrap-Layout

Bootstrap verwendet Helvetica Neue, Helvetica, Arial und sans-serif als Standard-Schriftartensatz verwenden.

Mit den Layout-Features von Bootstrap können Sie Überschriften, Absätze, Listen und andere Inline-Elemente erstellen.

Überschriften

Bootstrap definiert alle HTML-Überschriften (h1 bis zu h6） zu stylen. Sehen Sie sich das folgende Beispiel an:

Das Ergebnis ist wie folgt gezeigt:

Inline-Untertitel

Wenn Sie eine Inline-Untertitel hinzufügen möchten, die sich auf jede beliebige Überschrift bezieht, genügt es, einfach <small> auf beiden Seiten des Elements hinzuzufügen oder hinzuzufügen .small Klasse, so können Sie einen kleineren und helleren Text erhalten, wie im folgenden Beispiel gezeigt:

Online-Beispiel

!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">　
<title>Bootstrap　Beispiel　-　Inlinesubtitel</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>
	<h1>Ich bin ein Titel1　h1. <small>Ich bin ein Untertitel1　h1</small></h1>　
	<h2>Ich bin ein Titel2　h2. <small>Ich bin ein Untertitel2　h2</small></h2>
	<h2>Ich bin ein Titel3　h2. <small>Ich bin ein Untertitel3　h2</small></h2>
	<h4>Ich bin ein Titel4　h4. <small>Ich bin ein Untertitel4　h4</small></h4>
	<h5>Ich bin ein Titel5　h5. <small>Ich bin ein Untertitel5　h5</small></h5>
	<h6>Ich bin ein Titel6　h6. <small>Ich bin ein Untertitel6　h6</small></h6>
</body>
</html>
Testen Sie es heraus ‹/›

Das Ergebnis ist wie folgt gezeigt:

Lead-Textkopie

Um betonten Text in einem Absatz hinzuzufügen, können Sie, was ein größerer und dickerer Text mit höherer Zeilenhöhe ergibt, wie im folgenden Beispiel gezeigt:

Online-Beispiel

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　Beispiel　-　Lead-Textkopie/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>
<h2>Lead-Textkopie</h2>
<p class="lead">Dies ist ein Beispiel zur Demonstration der Verwendung des Lead-Textkopien-Attributs. Dies ist ein Beispiel zur Demonstration der Verwendung des Lead-Textkopien-Attributs. Dies ist ein Beispiel zur Demonstration der Verwendung des Lead-Textkopien-Attributs. Dies ist ein Beispiel zur Demonstration der Verwendung des Lead-Textkopien-Attributs. Dies ist ein Beispiel zur Demonstration der Verwendung des Lead-Textkopien-Attributs. Dies ist ein Beispiel zur Demonstration der Verwendung des Lead-Textkopien-Attributs. Dies ist ein Beispiel zur Demonstration der Verwendung des Lead-Textkopien-Attributs. Dies ist ein Beispiel zur Demonstration der Verwendung des Lead-Textkopien-Attributs.</p>
</body>
</html>
Testen Sie es heraus ‹/›

Das Ergebnis ist wie folgt gezeigt:

Betont

HTML-Standardbetontes Tag <small>（Text in der Größe des übergeordneten Textes setzen）。 85%）、<strong>（Text in fett setzen）、<em>（Text in Kursiv setzen）。

Bootstrap bietet einige Klassen für betonten Text, wie im folgenden Beispiel gezeigt:

Online-Beispiel

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　Beispiel　-　Betont/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>
<small>Dieser Text ist innerhalb eines Tags</small><br>
<strong>Dieser Text ist innerhalb eines Tags</strong><br>
<em>Dieser Text ist innerhalb eines Tags und wird als Kursiv angezeigt</em><br>
<p class="text-left">Text ausrichten nach links</p>
<p class="text-center">Text zentrieren</p>
<p class="text-right">Text ausrichten nach rechts</p>
<p class="text-muted">Dieser Text ist abgeschwächt</p>
<p class="text-primary">Dieser Text hat eine "primary"-Klasse</p>
<p class="text-success">Dieser Text hat eine "success"-Klasse</p>
<p class="text-info">Dieser Text hat eine "info"-Klasse</p>
<p class="text-warning">Dieser Text hat eine "warning"-Klasse</p>
<p class="text-danger">Dieser Text hat eine "danger"-Klasse</p>
</body>
</html>
Testen Sie es heraus ‹/›

Das Ergebnis ist wie folgt gezeigt:

Abkürzung

HTML-Elemente bieten die possibility, Abkürzungen wie z.B. WWW oder HTTP zu verwenden. Bootstrap definiert den Stil des <abbr>-Elements als eine waagerechte Linie am unteren Rand des Textes, die als Wimpern angezeigt wird, wenn der Mauszeiger darauf gehalten wird (vorausgesetzt, Sie haben dem <abbr>-Attribut title Text hinzugefügt). Um einen kleineren Text zu erhalten, fügen Sie .initialism zu <abbr> hinzu.

Online-Beispiel

!DOCTYPE　html>
<html>
<head>
　　　<title>Bootstrap　Beispiel　-　Abkürzung</title>
　　　<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/"bootstrap.min.css" rel="stylesheet">
　　　<script　src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
　　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<abbr　title="World　Wide　Web">WWW</abbr><br>
<abbr　title="Real　Simple　Syndication"　class="initialism">RSS</abbr>
</body>
</html>
Testen Sie es heraus ‹/›

Das Ergebnis ist wie folgt gezeigt:

Adresse(Address)

使用 <address> 标签，您可以在网页上显示联系信息。由于 <address> 默认为 display:block;，您需要使用 <br> 标签来为封闭的地址文本添加换行。

Online-Beispiel

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　Beispiel　-　Adresse</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>
<address>
	<strong>Some　Company,　Inc.</strong><br>
	007　street<br>
	Some　City,　State　XXXXX<br>
	<abbr　title="Phone">P:</abbr>　(123)　456-7890
</address>
<address>
	<strong>Full　Name</strong><br>
	<a　href="mailto:#">[email protected]</a>
</address>
</body>
</html>
Testen Sie es heraus ‹/›

Das Ergebnis ist wie folgt gezeigt:

引用(Blockquote)

您可以在任意的 HTML 文本旁使用默认的 <blockquote>。其他选项包括，添加一个 <small> 标签来标识引用的来源，使用 class .pull-right 向右对齐引用。下面的示例演示了这些特性：

Online-Beispiel

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　Beispiel　-　引用</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>
<blockquote>
	<p>
		这是一个默认的引用示例。这是一个默认的引用示例。这是一个默认的引用示例。这是一个默认的引用示例。这是一个默认的引用示例。这是一个默认的引用示例。这是一个默认的引用示例。这是一个默认的引用示例。
	</p>
</blockquote>
<blockquote>
	这是一个带有源标题的引用。
	<small>Someone　famous　in　<cite　title="Source　Title">Source　Title</cite></small>
</blockquote>
<blockquote　class="pull-right">
	这是一个向右对齐的引用。
	<small>Someone　famous　in　<cite　title="Source　Title">Source　Title</cite></small>
</blockquote>
</body>
</html>
Testen Sie es heraus ‹/›

Das Ergebnis ist wie folgt gezeigt:

列表

Bootstrap 支持有序列表、无序列表和定义列表。

  • 有序列表：有序列表是指以数字或其他有序字符开头的列表。

  • 无序列表：无序列表是指没有特定顺序的列表，是以传统风格的着重号开头的列表。如果您不想显示这些着重号，您可以使用 class .list-unstyled um Stile zu entfernen. Sie können auch durch die Verwendung von class .list-inline Alle Listeinträge auf einer Zeile platzieren.

  • Definitionsaufzählung：In diesem Typ der Liste kann jeder Listeingang <dt> und <dd>-Elemente enthalten.<dt> steht für Definiert Begriffewie ein Wörterbuch. Danach ist <dd> die Beschreibung von <dt>. .dl-horizontal kann die Phrasen und Beschreibungen innerhalb von <dl> auf einer Zeile anordnen. Am Anfang sind sie wie der Standardstil von <dl> gestapelt und mit der Ausdehnung der Navigationsleiste in eine Zeile geordnet.

Die folgenden Beispiele zeigen diese Arten von Listen:

Online-Beispiel

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　Beispiel　-　Liste</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>
<h4>Geordnete Liste</h4>
<ol>
	<li>Item　1</li>
	<li>Item　2</li>
	<li>Item　3</li>
	<li>Item　4</li>
</ol>
<h4>Ungeordnete Liste</h4>
<ul>
	<li>Item　1</li>
	<li>Item　2</li>
	<li>Item　3</li>
	<li>Item　4</li>
</ul>
<h4>Liste mit unbefristeter Stil</h4>
<ul　class="list-unstyled">
	<li>Item　1</li>
	<li>Item　2</li>
	<li>Item　3</li>
	<li>Item　4</li>
</ul>
<h4>Inline-Liste</h4>
<ul　class="list-inline">
	<li>Item　1</li>
	<li>Item　2</li>
	<li>Item　3</li>
	<li>Item　4</li>
</ul>
<h4>Definitionsaufzählung</h4>
<dl>
	<dt>Description　1</dt>
	<dd>Item　1</dd>
	<dt>Description　2</dt>
	<dd>Item　2</dd>
</dl>
<h4>Horizontale Definitionsaufzählung</h4>
<dl　class="dl-horizontal">
	　<dt>Description　1</dt>
	　<dd>Item　1</dd>
	　<dt>Description　2</dt>
	　<dd>Item　2</dd>
</dl>
</body>
</html>
Testen Sie es heraus ‹/›

Das Ergebnis ist wie folgt gezeigt:

Mehr Formatierungsklassen

Die folgende Tabelle bietet weitere Beispiele für Bootstrap-Formatierungsklassen:

KlasseBeschreibungBeispiel
.leadAbsatz hervorhebenVersuchen Sie es aus
.text-leftText nach links ausrichtenVersuchen Sie es aus
.text-rightText nach rechts ausrichtenVersuchen Sie es aus
.text-nowrapÜber die Bildschirmgröße hinausgehender Text wird nicht umgebrochenVersuchen Sie es aus
.text-uppercaseText in Großbuchstaben einstellenVersuchen Sie es aus
.initialismDer Text, der im <abbr>-Element angezeigt wird, wird in kleiner Schrift angezeigt und kann kleine Buchstaben in Großbuchstaben umgewandelt werdenVersuchen Sie es aus
.list-unstyledEntfernen Sie die Standardliste-Stile, die Links Ausrichtung der Listeitem (in <ul> und <ol>). Diese Klasse ist nur für direkte Kindlisteitem geeignet 　 　(Wenn Sie die eingerückten Listeitem entfernen müssen, müssen Sie diesen Stil in den eingerückten Listen verwenden)Versuchen Sie es aus
.dl-horizontalDiese Klasse stellt das Float und den Abstand ein, wird auf <dl>- und <dt>-Elemente angewendet, die spezifische Implementierung kann im Beispiel angezeigt werdenVersuchen Sie es aus
Bootstrap-CodeBootstrap-Grid-System