Grundlegende Typografie
Überschriften
Alle HTML-Überschriften, durch , sind verfügbar. .h1 durch .h6 Klassen sind ebenfalls verfügbar, wenn Sie die Schriftgestaltung einer Überschrift übernehmen möchten, der Text aber dennoch inline angezeigt werden soll.
h1. Bootstrap-Überschrift |
Halbfett 36px |
h2. Bootstrap-Überschrift |
Halbfett 30px |
h3. Bootstrap-Überschrift |
Halbfett 24px |
h4. Bootstrap-Überschrift |
Halbfett 18px |
|
Halbfett 14px |
h6. Bootstrap-Überschrift |
Halbfett 12px |
h1. Bootstrap-Überschrift
h2. Bootstrap-Überschrift
h3. Bootstrap-Überschrift
h4. Bootstrap-Überschrift
h5. Bootstrap-Überschrift
h6. Bootstrap-Überschrift
Erstellen Sie leichteren, sekundären Text in jeder Überschrift mit einem generischen tag oder der .small Klasse.
h1. Bootstrap Überschrift Sekundärer Text |
h2. Bootstrap-Überschrift Sekundärtext |
h3. Bootstrap-Überschrift Sekundärer Text |
|
h5. Bootstrap-Überschrift Sekundärtext |
h6. Bootstrap-Überschrift Sekundärtext |
h1. Bootstrap Überschrift Sekundärtext
h2. Bootstrap-Überschrift Sekundärtext
h3. Bootstrap-Überschrift Sekundärtext
h4. Bootstrap-Überschrift Sekundärtext
h5. Bootstrap-Überschrift Sekundärtext
h6. Bootstrap-Überschrift Sekundärtext
Fließtext
Bootstraps globaler Standard Schriftgröße is 14px, mit einem Zeilenhöhe von 1.428Dies wird auf die und alle Absätze. Außerdem, (Absätze) erhalten einen unteren Rand von der Hälfte ihrer berechneten Zeilenhöhe (standardmäßig 10px).
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
...
Leittext
Make a paragraph stand out by adding .lead.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
class=lead>...
Gebaut mit weniger
Die typografische Skala basiert auf zwei LESS-Variablen in variables.less: @font-size-base und @line-height-base. Die erste ist die Basis-Schriftgröße, die überall verwendet wird, und die zweite ist die Basis-Zeilenhöhe. Wir verwenden diese Variablen und etwas einfache Mathematik, um die Abstände, Innenabstände und Zeilenhöhen unseres gesamten Textes und mehr zu erstellen. Passen Sie sie an und Bootstrap passt sich an.
Betonung
Verwenden Sie die Standard-Emphasis-Tags von HTML mit leichten Stilen.
Kleiner Text
Für das Abschwächen von Inline- oder Textblöcken verwenden Sie das Schriftgröße für verschachtelt Elemente.
Sie können alternativ ein Inline-Element mit verwenden .small anstelle von jedem
Diese Textzeile soll als Kleingedrucktes behandelt werden.
Diese Textzeile soll als Kleingedrucktes behandelt werden.
Fett
Um einen Textausschnitt mit einer stärkeren Schriftstärke hervorzuheben.
Die folgende Textpassage ist als fetter Text dargestellt.
als fetter Text dargestellt
Kursivschrift
Um einen Textabschnitt mit Kursivschrift hervorzuheben.
Der folgende Textausschnitt ist kursiv dargestellter Text.
kursiv dargestellter Text
Alternative Elemente
Fühlen Sie sich frei zu verwenden und in HTML5. dient dazu, Wörter oder Phrasen hervorzuheben, ohne zusätzliche Bedeutung zu vermitteln, während ist hauptsächlich für Sprache, technische Begriffe usw.
Ausrichtungsklassen
Leichtes Neuausrichten von Text an Komponenten mit Textausrichtungsklassen.
Linksbündiger Text.
Zentriert ausgerichteter Text.
Rechtsbündiger Text.
class=text-left>Linksbündiger Text.
class="text-center">Zentriert ausgerichteter Text.
class=text-right>Rechtsbündiger Text.
Betonungsklassen
Vermitteln Sie Bedeutung durch Farbe mit einer Handvoll Utility-Klassen zur Hervorhebung. Diese können auch auf Links angewendet werden und werden beim Überfahren mit der Maus wie unsere Standard-Link-Stile dunkler.
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
class=text-muted>...
class=text-primary>...
class=text-success>...
class=text-info>...
class=text-warning>...
class=text-danger>...
Umgang mit Spezifität
Manchmal können Hervorhebungsklassen aufgrund der Spezifität eines anderen Selektors nicht angewendet werden. In den meisten Fällen ist eine ausreichende Lösung, Ihren Text in ein einzuschließen. mit der Klasse.
Abkürzungen
Stilisierte Implementierung von HTML's element für Abkürzungen und Akronyme, um die erweiterte Version beim Überfahren anzuzeigen. Abkürzungen mit einem Titel Attribut hat eine leichte gepunktete untere Umrandung und einen Hilfecursor beim Überfahren mit der Maus, der zusätzlichen Kontext beim Überfahren bietet.
Grundlegende Abkürzung
Für erweiterten Text bei langem Hover über eine Abkürzung, fügen Sie das Titel Attribut mit dem Element.
Eine Abkürzung des Wortes Attribut ist attr.
title="Attribut">attr
Initialismus
Hinzufügen .initialism zu einer Abkürzung für eine etwas kleinere Schriftgröße.
HTML ist das Beste seit geschnittenem Brot.
title=HyperText-Auszeichnungssprache class="Initialismus">HTML
Adressen
Präsentieren Sie die Kontaktinformationen des nächsten Vorfahren oder des gesamten Werkes. Bewahren Sie die Formatierung, indem Sie alle Zeilen mit beenden
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890 Vollständiger Name
first.last@example.com
Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
title=Telefon>P: (123) 456-7890
Vollständiger Name
href=mailto:#>first.last@example.com
Blockzitate
Zum Zitieren von Inhaltsblöcken aus einer anderen Quelle innerhalb Ihres Dokuments.
Standard-Zitatblock
Umschlag um jeden HTML als das Zitat. Für gerade Anführungszeichen empfehlen wir ein .
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Blockzitat-Optionen
Stil- und Inhaltsänderungen für einfache Variationen eines Standards .
Benennung einer Quelle
Hinzufügen tag oder .small Klasse zur Identifizierung der Quelle. Umschließen Sie den Namen des Quellwerks mit .
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Jemand Berühmtes in Quelltitel
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Jemand Berühmtes in title="Quelltitel">Quelltitel
Alternative Anzeigen
Verwenden Sie .pull-right für ein gefloatetes, rechtsbündiges Blockzitat.
class="pull-right">
...
Listen
Ungeordnet
Eine Liste von Artikeln, bei der die Reihenfolge keine Rolle spielt nicht explizit wichtig.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eigenes Porttitor Lorem
...
Bestellt
Eine Liste von Artikeln, bei denen die Reihenfolge does explizit wichtig.
- Lorem ipsum dolor sit amet
- Konsequenterweise adipiscing elit
- Integer Belästigung lorem bei Masse
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eigenes Porttitor Lorem
...
Unstyled
Entfernen Sie den Standard list-style und linker Rand bei Listenelementen (nur unmittelbare Kinder). Dies gilt nur für unmittelbare untergeordnete Listenelemente, was bedeutet, dass Sie die Klasse auch für alle verschachtelten Listen hinzufügen müssen.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eigenes Porttitor Lorem
class=list-unstyled>
...
Inline
Place all list items on a single line with display: inline-block; und etwas leichte Polsterung.
- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
class="list-inline">
...
Beschreibung
Eine Liste von Begriffen mit ihren zugehörigen Beschreibungen.
- Beschreibungsliste
- Eine Beschreibungs-Liste ist perfekt, um Begriffe zu definieren.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
...
...
Horizontale Beschreibung
| Begriff | Beschreibung |
|---|---|
| Versand | Die Lieferung der bestellten Waren an die angegebene Adresse. |
| Rückgabe | Die Möglichkeit, gekaufte Artikel innerhalb einer bestimmten Frist zurückzugeben. |
| Zahlungsmethoden | Verfügbare Optionen zur Bezahlung Ihrer Bestellung, z.B. Kreditkarte, PayPal, Überweisung. |
| Datenschutz | Informationen darüber, wie Ihre persönlichen Daten gesammelt, verwendet und geschützt werden. |
| AGB | Allgemeine Geschäftsbedingungen, die die Vertragsbedingungen zwischen Käufer und Verkäufer regeln. |
- Beschreibungsliste
- Eine Beschreibungs-Liste ist perfekt, um Begriffe zu definieren.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
- Felis euismod semper eget lacinia
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
class="dl-horizontal">
...
...
Auto-Abkürzung
Horizontale Beschreibungslisten kürzen Begriffe ab, die zu lang sind, um in die linke Spalte zu passen, mit text-overflow. In schmaleren Ansichten wechseln sie zum standardmäßigen gestapelten Layout.
Tische
Grundlegendes Beispiel
Für grundlegendes Styling – leichte Polsterung und nur horizontale Trennlinien – fügen Sie die Basisklasse hinzu Verwenden Gestreifte Tabellen werden über die Hinzufügen Hinzufügen Hinzufügen Verwenden Sie kontextbezogene Klassen, um Tabellenzeilen oder einzelne Zellen zu färben. Erstellen Sie responsive Tabellen, indem Sie jede umschließen .table zu jedem . Es mag überflüssig erscheinen, aber angesichts der weit verbreiteten Verwendung von Tabellen für andere Plugins wie Kalender und Datumsauswähler haben wir uns entschieden, unsere benutzerdefinierten Tabellenstile zu isolieren.
#
Vorname
Nachname
Benutzername
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
der Vogel
@twitter
class=Tisch>
...
Gestreifte Reihen
css
.table-striped um jeder Tabellenzeile innerhalb des eine Zebra-Streifenoptik hinzuzufügen .
Cross-Browser-Kompatibilität
:nth-child CSS-Selektor, der in Internet Explorer 8 nicht verfügbar ist.
#
Vorname
Nachname
Benutzername
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
der Vogel
@twitter
class="table table-striped">
...
Tabelle mit Rahmen
css
.table-bordered für Rahmen an allen Seiten der Tabelle und Zellen.
#
Vorname
Nachname
Benutzername
1
Mark
Otto
@mdo
Mark
Otto
@TwBootstrap
2
Jacob
Thornton
@fat
3
Larry der Vogel
@twitter
class=Tabelle Tabelle-gerahmt>
...
Zeilen beim Überfahren
.table-hover um einen Hover-Zustand für Tabellenzeilen innerhalb eines zu aktivieren
.
#
Vorname
Nachname
Benutzername
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry der Vogel
@twitter
class="table table-hover">
...
Verdichtete Tabelle
.table-condensed um die Tabellen kompakter zu machen, indem die Zellpolsterung halbiert wird.
#
Vorname
Nachname
Benutzername
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry der Vogel
@twitter
class="table table-condensed">
...
Kontextbezogene Klassen
Klasse
Beschreibung
css
.active
Wendet die Hover-Farbe auf eine bestimmte Zeile oder Zelle an
.success
Zeigt eine erfolgreiche oder positive Aktion an
warnung
Weist auf eine Warnung hin, die Aufmerksamkeit erfordern könnte
.danger
Weist auf eine gefährliche oder potenziell negative Handlung hin
#
Spaltenüberschrift
Spaltenüberschrift
Spaltenüberschrift
1
Spalteninhalt
Spalteninhalt
Spalteninhalt
2
Spalteninhalt
Spalteninhalt
Spalteninhalt
3
Spalteninhalt
Spalteninhalt
Spalteninhalt
4
Spalteninhalt
Spalteninhalt
Spalteninhalt
5
Spalteninhalt
Spalteninhalt
Spalteninhalt
6
Spalteninhalt
Spalteninhalt
Spalteninhalt
7
Spalteninhalt
Spalteninhalt
Spalteninhalt
class=aktiv>...
class="Erfolg">...
class=warnung>...
class=Gefahr>...
class="aktiv">...
class="Erfolg">...
class=warnung>...
class=Gefahr>...
Responsive Tabellen
css
.tabelle in .table-responsive um sie auf kleinen Geräten (unter 768px) horizontal scrollen zu lassen. Bei der Ansicht auf Geräten mit einer Breite von mehr als 768px sehen Sie keinen Unterschied bei diesen Tabellen.
#
Tabellenüberschrift
Tabellenüberschrift
Tabellenüberschrift
Tabellenüberschrift
Tabellenüberschrift
Tabellenüberschrift
1
Tabellenzelle
Tabellenzelle
Tabellenzelle
Tabellenzelle
Tabellenzelle
Tabellenzelle
2
Tabellenzelle
Tabellenzelle
Tabellenzelle
Tabellenzelle
Tabellenzelle
Tabellenzelle
3
Tabellenzelle
Tabellenzelle
Tabellenzelle
Tabellenzelle
Tabellenzelle
Tabellenzelle
#
Tabellenüberschrift
Tabellenüberschrift
Tabellenüberschrift
Tabellenüberschrift
Tabellenüberschrift
Tabellenüberschrift
1
Tabellenzelle
Tabellenzelle
Tabellenzelle
Tabellenzelle
Tabellenzelle
Tabellenzelle
2
Tabellenzelle
Tabellenzelle
Tabellenzelle
Tabellenzelle
Tabellenzelle
Tabellenzelle
3
Tabellenzelle
Tabellenzelle
Tabellenzelle
Tabellenzelle
Tabellenzelle
Tabellenzelle
class=Tisch>
...