Auf dem Gerüst werden grundlegende HTML-Elemente gestaltet und mit erweiterbaren Klassen erweitert, um ein frisches, konsistentes Aussehen und Verhalten zu bieten.
Das gesamte typografische Raster basiert auf zwei Less-Variablen in unserer variables.less-Datei: @baseFontSizeund @baseLineHeight. Die erste ist die durchgehend verwendete Grundschriftgröße und die zweite die Grundzeilenhöhe.
Wir verwenden diese Variablen und etwas Mathematik, um die Ränder, Auffüllungen und Zeilenhöhen aller unserer Typen und mehr zu erstellen.
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 ut id elit.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.
| Element | Verwendungszweck | Optional |
|---|---|---|
<strong> |
Zum Hervorheben eines Textausschnitts mit wichtig | Keiner |
<em> |
Zum Hervorheben eines Textausschnitts mit Betonung | Keiner |
<abbr> |
Umbricht Abkürzungen und Akronyme, um die erweiterte Version beim Hover anzuzeigen | Optionales .initialismdie Klasse für Abkürzungen in Großbuchstaben. |
<address> |
Kontaktinformationen für den nächsten Vorfahren oder das gesamte Werk | Behalten Sie die Formatierung bei, indem Sie alle Zeilen mit beenden<br> |
Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, ein pharetra augue.
Hinweis: Fühlen Sie sich frei, <b>und <i>in HTML5 zu verwenden, aber ihre Verwendung hat sich ein wenig geändert. <b>soll Wörter oder Phrasen hervorheben, ohne zusätzliche Bedeutung zu vermitteln, während <i>es hauptsächlich für Sprache, Fachbegriffe usw.
Hier sind zwei Beispiele, wie das <address>Tag verwendet werden kann:
Abkürzungen mit einem titleAttribut haben einen leicht gepunkteten unteren Rand und einen Hilfe-Cursor beim Schweben. Dies gibt Benutzern einen zusätzlichen Hinweis darauf, dass beim Hover etwas angezeigt wird.
Fügen Sie die initialismKlasse einer Abkürzung hinzu, um die typografische Harmonie zu erhöhen, indem Sie ihr eine etwas kleinere Textgröße zuweisen.
HTML ist das Beste seit geschnittenem Brot.
Eine Abkürzung des Wortes Attribut ist attr .
| Element | Verwendungszweck | Optional |
|---|---|---|
<blockquote> |
Element auf Blockebene zum Zitieren von Inhalten aus einer anderen Quelle |
.pull-leftund .pull-rightKlassen für Floating-Optionen |
<small> |
Optionales Element zum Hinzufügen eines für den Benutzer sichtbaren Zitats, normalerweise ein Autor mit Titel der Arbeit | Setzen Sie das <cite>um den Titel oder Namen der Quelle |
Um ein Blockzitat einzufügen, umschließen Sie einen <blockquote>beliebigen HTML -Code als Zitat. Für direkte Zitate empfehlen wir eine <p>.
Fügen Sie ein optionales <small>Element hinzu, um Ihre Quelle zu zitieren, und Sie erhalten zu Stilzwecken einen Em-Bindestrich —davor.
- <Blockzitat>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis. </p>
- <small> Jemand berühmt </small>
- </blockquote>
Standard-Blockquotes sind wie folgt gestaltet:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.
Jemand berühmt in Body of Work
Um Ihr Blockzitat nach rechts zu schweben, fügen Sie hinzu class="pull-right":
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.
Jemand berühmt in Body of Work
<ul>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
Umschließen Sie Inline-Codeschnipsel mit <code>.
- Zum Beispiel sollte <code> section </ code > als Inline umbrochen werden .
<pre>Für mehrere Codezeilen verwenden . Achten Sie darauf, alle spitzen Klammern im Code zu maskieren, um eine korrekte Wiedergabe zu gewährleisten.
<p>Beispieltext hier...</p>
- <vor>
- <p>Beispieltext hier...</p>
- </pre>
Hinweis: Achten Sie darauf, den Code innerhalb <pre>der Tags so weit links wie möglich zu platzieren. Es werden alle Registerkarten gerendert.
Sie können optional die .pre-scrollableKlasse hinzufügen, die eine maximale Höhe von 350 Pixeln festlegt und eine Bildlaufleiste für die Y-Achse bereitstellt.
Nehmen Sie dasselbe <pre>Element und fügen Sie zwei optionale Klassen für verbessertes Rendering hinzu.
- <p> Beispieltext hier... </p>
- <pre class = "hübsch gedruckt
- Leinen" >
- <p>Beispieltext hier...</p>
- </pre>
Laden Sie google-code-prettify herunter und sehen Sie sich die Readme-Datei für die Verwendung an.
| Schild | Beschreibung |
|---|---|
<table> |
Wrapping-Element zum Anzeigen von Daten in einem tabellarischen Format |
<thead> |
Containerelement für Tabellenkopfzeilen ( <tr>) zur Beschriftung von Tabellenspalten |
<tbody> |
Containerelement für Tabellenzeilen ( <tr>) im Hauptteil der Tabelle |
<tr> |
Containerelement für eine Reihe von Tabellenzellen ( <td>oder <th>), die in einer einzelnen Zeile angezeigt werden |
<td> |
Standard-Tabellenzelle |
<th> |
Spezielle Tabellenzelle für Spalten- (oder Zeilen-, je nach Umfang und Platzierung) Beschriftungen Muss innerhalb von a verwendet werden <thead> |
<caption> |
Beschreibung oder Zusammenfassung dessen, was die Tabelle enthält, besonders nützlich für Screenreader |
- <Tabelle>
- <Kopf>
- <tr>
- <th> … </th>
- <th> … </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td> … </td>
- <td> … </td>
- </tr>
- </tbody>
- </table>
| Name | Klasse | Beschreibung |
|---|---|---|
| Standard | Keiner | Keine Stile, nur Spalten und Zeilen |
| Basic | .table |
Nur horizontale Linien zwischen den Reihen |
| Umrandet | .table-bordered |
Rundet Ecken ab und fügt einen äußeren Rand hinzu |
| Zebrastreifen | .table-striped |
Fügt ungeraden Zeilen (1, 3, 5 usw.) eine hellgraue Hintergrundfarbe hinzu |
| Kondensiert | .table-condensed |
Halbiert die vertikale Polsterung von 8 Pixel auf 4 Pixel innerhalb aller tdund th-Elemente |
Tabellen werden automatisch mit nur wenigen Rändern gestaltet, um die Lesbarkeit zu gewährleisten und die Struktur zu erhalten. Bei 2.0 ist die .tableKlasse erforderlich.
- <Tabellenklasse = " Tabelle" >
- …
- </table>
| # | Vorname | Nachname | Nutzername |
|---|---|---|---|
| 1 | Markieren | Otto | @mdo |
| 2 | Jacob | Dornton | @fett |
| 3 | Larry | der Vogel |
Gestalten Sie Ihre Tische etwas schicker, indem Sie Zebrastreifen hinzufügen – fügen Sie einfach die .table-stripedKlasse hinzu.
Hinweis: Gestreifte Tabellen verwenden den :nth-childCSS-Selektor und sind in IE7-IE8 nicht verfügbar.
- <table class = "table table-striped" >
- …
- </table>
| # | Vorname | Nachname | Nutzername |
|---|---|---|---|
| 1 | Markieren | Otto | @mdo |
| 2 | Jacob | Dornton | @fett |
| 3 | Larry | der Vogel |
Fügen Sie aus ästhetischen Gründen Ränder um den gesamten Tisch und abgerundete Ecken hinzu.
- <table class = "table table-bordered" >
- …
- </table>
| # | Vorname | Nachname | Nutzername |
|---|---|---|---|
| 1 | Markieren | Otto | @mdo |
| Markieren | Otto | @getbootstrap | |
| 2 | Jacob | Dornton | @fett |
| 3 | Larry der Vogel | ||
Machen Sie Ihre Tabellen kompakter, indem Sie die .table-condensedKlasse hinzufügen, um die Tabellenzellenpolsterung zu halbieren (von 8 Pixel auf 4 Pixel).
- <table class = "table table-condensed" >
- …
- </table>
| # | Vorname | Nachname | Nutzername |
|---|---|---|---|
| 1 | Markieren | Otto | @mdo |
| 2 | Jacob | Dornton | @fett |
| 3 | Larry der Vogel | ||
Fühlen Sie sich frei, jede der Tischklassen zu kombinieren, um ein unterschiedliches Aussehen zu erzielen, indem Sie eine der verfügbaren Klassen verwenden.
- <table class = "table table-striped table-bordered table-condensed" >
- ...
- </table>
| Vollständiger Name | |||
|---|---|---|---|
| # | Vorname | Nachname | Nutzername |
| 1 | Markieren | Otto | @mdo |
| 2 | Jacob | Dornton | @fett |
| 3 | Larry der Vogel | ||
Das Beste an Formularen in Bootstrap ist, dass alle Ihre Eingaben und Steuerelemente großartig aussehen, egal wie Sie sie in Ihrem Markup erstellen. Es ist kein überflüssiges HTML erforderlich, aber wir stellen die Muster für diejenigen bereit, die es benötigen.
Kompliziertere Layouts werden mit prägnanten und skalierbaren Klassen für einfaches Styling und Ereignisbindung geliefert, sodass Sie bei jedem Schritt abgesichert sind.
Bootstrap bietet Unterstützung für vier Arten von Formularlayouts:
Verschiedene Arten von Formularlayouts erfordern einige Änderungen am Markup, aber die Steuerelemente selbst bleiben und verhalten sich gleich.
Die Formulare von Bootstrap enthalten Stile für alle grundlegenden Formularsteuerelemente wie Eingabe, Textbereich und Auswahl, die Sie erwarten würden. Aber es kommt auch mit einer Reihe von benutzerdefinierten Komponenten wie angehängten und vorangestellten Eingaben und Unterstützung für Listen von Kontrollkästchen.
Zustände wie Fehler, Warnung und Erfolg sind für jede Art von Formularsteuerung enthalten. Ebenfalls enthalten sind Stile für deaktivierte Steuerelemente.
Bootstrap bietet einfaches Markup und Stile für vier Stile gängiger Webformulare.
| Name | Klasse | Beschreibung |
|---|---|---|
| Vertikal (Standard) | .form-vertical (nicht benötigt) |
Gestapelte, linksbündige Beschriftungen über Steuerelementen |
| In der Reihe | .form-inline |
Linksbündige Label- und Inline-Block-Steuerelemente für kompakten Stil |
| Suche | .form-search |
Extra abgerundete Texteingabe für eine typische Suchästhetik |
| Horizontal | .form-horizontal |
Lassen Sie linksbündige, rechtsbündige Beschriftungen in derselben Zeile wie Steuerelemente schweben |
Mit v2.0 haben wir leichtere und intelligentere Standardeinstellungen für Formularstile. Kein zusätzliches Markup, nur Formularsteuerelemente.
- <form class = "gut" >
- <label> Labelname < /label>
- <input type = "text" class = "span3" placeholder = "Geben Sie etwas ein…" >
- <span class = "help-inline" > Zugehöriger Hilfetext! </span>
- <label class = "checkbox" >
- <input type = "checkbox" > Testen Sie mich
- </label>
- <button type = "submit " class = "btn" > Senden </button>
- </form>
Reflektieren Sie die Standard-WebKit-Stile, fügen Sie einfach .form-searchzusätzliche abgerundete Suchfelder hinzu.
- <form class = "well form-search" >
- <input type = "text" class = "input-medium search-query" >
- <button type = "submit " class = "btn" > Suchen </button>
- </form>
Die Eingänge sind zum Starten auf Blockebene. Für .form-inlineund .form-horizontalverwenden wir den Inline-Block.
- <form class = "well form-inline" >
- <input type = "text" class = "input-small" placeholder = "Email" >
- <input type = "password" class = "input-small" placeholder = "Passwort" >
- <label class = "checkbox" >
- <input type = "checkbox" > An mich erinnern
- </label>
- <button type = "submit " class = "btn" > Anmelden </button>
- </form>
In Anbetracht des obigen Beispielformularlayouts ist hier das Markup, das der ersten Eingabe- und Steuerelementgruppe zugeordnet ist. Die Klassen .control-group, .control-label, und .controlssind alle für das Styling erforderlich.
- <form class = "form-horizontal" >
- <Feldsatz>
- <legend> Legendentext </legend>
- <div class = "control-group" >
- <label class = "control-label" for = "input01" > Texteingabe </label>
- <div class = "controls" >
- <input type = "text" class = "input-xlarge" id = "input01" >
- <p class = "help-block" > Unterstützender Hilfetext </p>
- </div>
- </div>
- </fieldset>
- </form>
Auf der linken Seite sind alle von uns unterstützten Standardformularsteuerelemente dargestellt. Hier ist die Liste mit Aufzählungszeichen:
Bis v1.4 verwendeten die Standard-Formularstile von Bootstrap das horizontale Layout. Mit Bootstrap 2 haben wir diese Einschränkung aufgehoben, um intelligentere, besser skalierbare Standardeinstellungen für jedes Formular zu haben.
Bootstrap bietet Stile für browserunterstützte Fokussierungen und disabledZustände. Wir entfernen das Standard-Webkit outlineund wenden box-shadowan seiner Stelle ein für :focus.
Es enthält auch Validierungsstile für Fehler, Warnungen und Erfolg. Fügen Sie zur Verwendung die Fehlerklasse zum umgebenden hinzu .control-group.
- <Feldsatz
- class = "Kontrollgruppenfehler" >
- …
- </fieldset>
Eingabegruppen – mit angehängtem oder vorangestelltem Text – bieten eine einfache Möglichkeit, Ihren Eingaben mehr Kontext zu geben. Gute Beispiele sind das @-Zeichen für Twitter-Benutzernamen oder $ für Finanzen.
Bis v1.4 benötigte Bootstrap zusätzliches Markup um Kontrollkästchen und Radios, um sie zu stapeln. Jetzt ist es eine einfache Sache, die zu wiederholen, die <label class="checkbox">die umschließt <input type="checkbox">.
Inline-Kontrollkästchen und Radios werden ebenfalls unterstützt. Fügen Sie einfach .inlineein beliebiges .checkboxoder hinzu .radiound Sie sind fertig.
Um vorangestellte oder angehängte Eingaben in einem Inline-Formular zu verwenden, stellen Sie sicher, dass Sie .add-onund inputohne Leerzeichen in derselben Zeile platzieren.
Um Hilfetext für Ihre Formulareingaben hinzuzufügen, fügen Sie Inline-Hilfetext mit <span class="help-inline">oder einen Hilfetextblock mit <p class="help-block">nach dem Eingabeelement ein.
Anstatt jedes Symbol zu einer zusätzlichen Anfrage zu machen, haben wir sie zu einem Sprite kompiliert – eine Reihe von Bildern in einer Datei, die CSS verwendet, um die Bilder mit zu positionieren background-position. Dies ist die gleiche Methode, die wir auf Twitter.com verwenden, und sie hat für uns gut funktioniert.
Allen Symbolklassen wird ein Präfix vorangestellt .icon-, um den richtigen Namensraum und Geltungsbereich zu gewährleisten, ähnlich wie bei unseren anderen Komponenten. Dadurch werden Konflikte mit anderen Tools vermieden.
Glyphicons hat uns die Nutzung des Halblings-Sets in unserem Open-Source-Toolkit gewährt, solange wir hier in den Dokumenten einen Link und eine Quellenangabe bereitstellen. Bitte erwägen Sie, dasselbe in Ihren Projekten zu tun.
Bootstrap verwendet ein <i>Tag für alle Symbole, aber sie haben keine Fallklasse – nur ein gemeinsames Präfix. Fügen Sie zur Verwendung den folgenden Code an einer beliebigen Stelle ein:
- <i class = "Symbolsuche" ></i>
Es sind auch Stile für invertierte (weiße) Symbole verfügbar, die mit einer zusätzlichen Klasse bereitgestellt werden:
- <i class = "icon-search icon-white" ></i>
Für Ihre Symbole stehen 120 Klassen zur Auswahl. Fügen Sie einfach ein <i>Tag mit den richtigen Klassen hinzu und schon sind Sie fertig. Die vollständige Liste finden Sie in sprites.less oder direkt hier in diesem Dokument.
Kopf hoch! Wenn Sie neben Textzeichenfolgen wie in Schaltflächen oder Navigationslinks verwenden, achten Sie darauf, nach dem <i>Tag ein Leerzeichen für den richtigen Abstand zu lassen.
Symbole sind großartig, aber wo würde man sie verwenden? Hier sind ein paar Ideen:
Im Wesentlichen können Sie überall, wo Sie ein <i>Tag platzieren können, ein Symbol platzieren.
Verwenden Sie sie in Schaltflächen, Schaltflächengruppen für eine Symbolleiste, Navigation oder vorangestellte Formulareingaben.