Bootstrap - Typografie
Bootstrap verwendet Helvetica Neue, Helvetica, Arial und Sans-Serif in seinem Standard-Schriftstapel. Mit der Typografie-Funktion von Bootstrap können Sie Überschriften, Absätze, Listen und andere Inline-Elemente erstellen. In den folgenden Abschnitten erfahren Sie, wie Sie diese lernen.
Überschriften
Alle HTML-Überschriften (h1 bis h6) sind in Bootstrap gestaltet. Ein Beispiel ist unten gezeigt -
<h1>I'm Heading1 h1</h1>
<h2>I'm Heading2 h2</h2>
<h3>I'm Heading3 h3</h3>
<h4>I'm Heading4 h4</h4>
<h5>I'm Heading5 h5</h5>
<h6>I'm Heading6 h6</h6>Das obige Codesegment mit Bootstrap führt zu folgendem Ergebnis:
Inline-Unterüberschriften
Um einer der Überschriften eine Inline-Unterüberschrift hinzuzufügen, fügen Sie einfach <small> um eines der Elemente hinzu oder fügen Sie hinzu .small Klasse und Sie erhalten kleineren Text in einer helleren Farbe, wie im folgenden Beispiel gezeigt -
<h1>I'm Heading1 h1. <small>I'm secondary Heading1 h1</small></h1>
<h2>I'm Heading2 h2. <small>I'm secondary Heading2 h2</small></h2>
<h3>I'm Heading3 h3. <small>I'm secondary Heading3 h3</small></h3>
<h4>I'm Heading4 h4. <small>I'm secondary Heading4 h4</small></h4>
<h5>I'm Heading5 h5. <small>I'm secondary Heading5 h5</small></h5>
<h6>I'm Heading6 h6. <small>I'm secondary Heading1 h6</small></h6>Das obige Codesegment mit Bootstrap führt zu folgendem Ergebnis:
Lead Body Copy
Fügen Sie class = "lead" hinzu, um einen Absatz hervorzuheben. Dadurch erhalten Sie eine größere Schriftgröße, ein geringeres Gewicht und eine höhere Zeilenhöhe als im folgenden Beispiel:
<h2>Lead Example</h2>
<p class = "lead">This is an example paragraph demonstrating
the use of lead body copy. This is an example paragraph
demonstrating the use of lead body copy.This is an example
paragraph demonstrating the use of lead body copy.This is an
example paragraph demonstrating the use of lead body copy.
This is an example paragraph demonstrating the use of lead body copy.</p>Betonung
Die Standard-Hervorhebungs-Tags von HTML wie <small> setzen den Text auf 85% der Größe des übergeordneten Elements, <strong> hebt einen Text mit höherer Schriftgröße hervor und <em> hebt einen kursiven Text hervor.
Bootstrap bietet einige Klassen, mit denen Sie den Schwerpunkt auf Texte legen können, wie im folgenden Beispiel dargestellt:
<small>This content is within tag</small><br>
<strong>This content is within tag</strong><br>
<em>This content is within tag and is rendered as italics</em><br>
<p class = "text-left">Left aligned text.</p>
<p class = "text-center">Center aligned text.</p>
<p class = "text-right">Right aligned text.</p>
<p class = "text-muted">This content is muted</p>
<p class = "text-primary">This content carries a primary class</p>
<p class = "text-success">This content carries a success class</p>
<p class = "text-info">This content carries a info class</p>
<p class = "text-warning">This content carries a warning class</p>
<p class = "text-danger">This content carries a danger class</p>Abkürzungen
Das HTML-Element <abbr> bietet Markups für Abkürzungen oder Akronyme wie WWW oder HTTP. Bootstrap formatiert <abbr> -Elemente mit einem hell gepunkteten Rand am unteren Rand und zeigt den vollständigen Text beim Hover an (solange Sie diesen Text zum Attribut <abbr> title hinzufügen). Um eine etwas kleinere Schriftgröße zu erhalten, fügen Sie <abbr> .initialism hinzu.
<abbr title = "World Wide Web">WWW</abbr><br>
<abbr title = "Real Simple Syndication" class = "initialism">RSS</abbr>Adressen
Mit dem Tag <Adresse> können Sie die Kontaktinformationen auf Ihrer Webseite anzeigen. Da die <Adresse> standardmäßig Folgendes anzeigt: block; Sie müssen verwenden
Tags zum Hinzufügen von Zeilenumbrüchen zum beiliegenden Adresstext.
<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>Block Zitate
Sie können das Standard <blockquote> für jeden HTML-Text verwenden. Weitere Optionen sind das Hinzufügen eines <small> -Tags zum Identifizieren der Quelle des Zitats und das Rechtsausrichten des Blockzitats mithilfe der Klasse .pull-right . Das folgende Beispiel zeigt alle diese Funktionen:
<blockquote>
<p>This is a default blockquote example. This is a default
blockquote example. This is a default blockquote
example.This is a default blockquote example. This is a
default blockquote example.</p>
</blockquote>
<blockquote>
This is a blockquote with a source title.
<small>Someone famous in <cite title = "Source Title">Source Title</cite></small>
</blockquote>
<blockquote class = "pull-right">This is a blockquote aligned to the right.
<small>Someone famous in <cite title = "Source Title">Source Title</cite></small>
</blockquote>Listen
Bootstrap unterstützt geordnete Listen, ungeordnete Listen und Definitionslisten.
Ordered lists - Eine geordnete Liste ist eine Liste, die in eine sequentielle Reihenfolge fällt und vorangestellt ist.
Unordered lists- Eine ungeordnete Liste ist eine Liste, die keine bestimmte Reihenfolge hat und traditionell mit Aufzählungszeichen gestaltet ist. Wenn Sie nicht möchten, dass die Aufzählungszeichen angezeigt werden , können Sie das Styling mithilfe der Klasse .list-unstyled entfernen . Sie können auch alle Listenelemente mit der Klasse .list-inline in einer einzelnen Zeile platzieren .
Definition lists- Bei dieser Art von Liste kann jedes Listenelement sowohl aus den Elementen <dt> als auch <dd> bestehen. <dt> steht für Definitionsbegriff und wie ein Wörterbuch ist dies der Begriff (oder die Phrase), der definiert wird. Anschließend ist das <dd> die Definition des <dt>. Mit der Klasse dl-horizontal können Sie Begriffe und Beschreibungen in <dl> nebeneinander anordnen .
Das folgende Beispiel zeigt jeden dieser Typen:
<h4>Example of Ordered List</h4>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>
<h4>Example of UnOrdered List</h4>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<h4>Example of Unstyled List</h4>
<ul class = "list-unstyled">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<h4>Example of Inline List</h4>
<ul class = "list-inline">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<h4>Example of Definition List</h4>
<dl>
<dt>Description 1</dt>
<dd>Item 1</dd>
<dt>Description 2</dt>
<dd>Item 2</dd>
</dl>
<h4>Example of Horizontal Definition List</h4>
<dl class = "dl-horizontal">
<dt>Description 1</dt>
<dd>Item 1</dd>
<dt>Description 2</dt>
<dd>Item 2</dd>
</dl>