Bootstrap

Basis-CSS

Grundlegende HTML-Elemente, die mit erweiterbaren Klassen gestaltet und erweitert wurden.

Typografie

Überschriften

Alle HTML-Überschriften sind <h1>verfügbar <h6>.

h1. Überschrift 1

h2. Überschrift 2

h3. Überschrift 3

h4. Überschrift 4

h5. Überschrift 5
h6. Überschrift 6

Körper Kopie

Der globale Standardwert von Bootstrap font-sizeist 14px , mit einem line-heightvon 20px . Dies gilt für den <body>und alle Absätze. Außerdem <p>erhalten (Absätze) einen unteren Rand in halber Zeilenhöhe (standardmäßig 10 Pixel).

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 bei eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p> ... </p>

Leitkörperkopie

Heben Sie einen Absatz hervor, indem Sie hinzufügen .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, ist nicht commodo luctus.

<p class = "lead" > ... </p>

Mit weniger gebaut

Die typografische Skala basiert auf zwei LESS-Variablen in variables.less : @baseFontSizeund @baseLineHeight. Die erste ist die durchgehend verwendete Grundschriftgröße und die zweite die Grundzeilenhöhe. Wir verwenden diese Variablen und etwas einfache Mathematik, um die Ränder, Auffüllungen und Zeilenhöhen aller unserer Typen und mehr zu erstellen. Passen Sie sie an und Bootstrap passt sich an.

Hervorhebung

Verwenden Sie die standardmäßigen Hervorhebungs-Tags von HTML mit einfachen Stilen.

<small>

Um Inline- oder Textblöcke weniger hervorzuheben, verwenden Sie das kleine Tag.

Diese Textzeile ist als Kleingedrucktes zu behandeln.

<p> <klein> Diese Textzeile ist als Kleingedrucktes zu behandeln. </klein> </p>

Fett gedruckt

Zum Hervorheben eines Textausschnitts mit einer dickeren Schriftstärke.

Der folgende Textausschnitt wird als fetter Text dargestellt .

<strong> als fetter Text gerendert </strong>

Kursivschrift

Zur Hervorhebung eines Textausschnitts durch Kursivschrift.

Der folgende Textausschnitt wird als kursiver Text dargestellt .

<em> als kursiver Text gerendert </em>

Kopf hoch!Fühlen Sie sich frei zu verwenden <b>und <i>in HTML5. <b>soll Wörter oder Phrasen hervorheben, ohne zusätzliche Bedeutung zu vermitteln, während <i>es hauptsächlich für Sprache, Fachbegriffe usw.

Ausrichtungsklassen

Richten Sie Text mit Textausrichtungsklassen einfach an Komponenten neu aus.

Linksbündiger Text.

Zentrierter Text.

Rechtsbündiger Text.

  1. <p class = "text-left" > Linksbündiger Text. </p> 
  2. <p class = "text-center" > Zentrierter Text. </p> 
  3. <p class = "text-right" > Rechtsbündiger Text. </p>

Schwerpunktklassen

Vermitteln Sie Bedeutung durch Farbe mit einer Handvoll Schwerpunktnutzenklassen.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

  1. <p class = "muted" > Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. </p> 
  2. <p class = "text-warning" > Etiam porta sem malesuada magna mollis euismod. </p> 
  3. <p class = "text-error" > Donec ullamcorper nulla non metus auctor fringilla. </p> 
  4. <p class = "text-info" > Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis. </p> 
  5. <p class = "text-success" > Duis mollis, est non commodo luctus, nisi erat porttitor ligula. </p>

Abkürzungen

Stilisierte Implementierung des HTML- <abbr>Elements für Abkürzungen und Akronyme, um die erweiterte Version beim Hover anzuzeigen. Abkürzungen mit einem titleAttribut haben einen leicht gepunkteten unteren Rand und einen Hilfe-Cursor beim Bewegen, der zusätzlichen Kontext beim Bewegen bietet.

<abbr>

Fügen Sie für erweiterten Text bei langem Hover einer Abkürzung das titleAttribut hinzu.

Eine Abkürzung des Wortes Attribut ist attr .

<abbr title = "attribute" > attr </abbr>

<abbr class="initialism">

Fügen Sie .initialismeine Abkürzung für eine etwas kleinere Schriftgröße hinzu.

HTML ist das Beste seit geschnittenem Brot.

<abbr title = "HyperText Markup Language" class = "initialism" > HTML </abbr>

Adressen

Präsentieren Sie Kontaktinformationen für den nächsten Vorfahren oder das gesamte Werk.

<address>

Behalten Sie die Formatierung bei, indem Sie alle Zeilen mit beenden <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Vollständiger Name
[email protected] 
  1. <Adresse>
  2.   <strong> Twitter, Inc. </strong><br>
  3.   795 Folsom Avenue, Suite 600 <br>
  4.   San Francisco, CA 94107 <br>
  5.   <abbr title = "Telefon" > P: </abbr> (123) 456-7890 
  6. </Adresse>
  7.  
  8. <Adresse>
  9.   <strong> Vollständiger Name </strong><br>
  10.   <a href = "mailto:#" > [email protected] </a> 
  11. </Adresse>

Block Zitate

Zum Zitieren von Inhaltsblöcken aus einer anderen Quelle in Ihrem Dokument.

Standard-Blockzitat

Umschließen Sie <blockquote>beliebiges HTML als Zitat. Für direkte Zitate empfehlen wir eine <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

  1. <Blockzitat>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. </p>
  3. </blockquote>

Blockquote-Optionen

Stil- und Inhaltsänderungen für einfache Variationen eines Standard-Blockquotes.

Eine Quelle benennen

<small>Tag zum Identifizieren der Quelle hinzufügen . Umschließen Sie den Namen des Quellwerks mit <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Jemand, der in Source Title berühmt ist 
  1. <Blockzitat>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. </p>
  3.   <small> Jemand berühmter <cite title = "Source Title" > Source Title </cite></small> 
  4. </blockquote>

Alternative Anzeigen

Verwenden Sie .pull-rightes für ein schwebendes, rechtsbündiges Blockzitat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Jemand, der in Source Title berühmt ist 
  1. <blockquote class = "nach rechts ziehen" > 
  2.   ...
  3. </blockquote>

Listen

Ungeordnet

Eine Liste von Artikeln, bei denen die Reihenfolge keine explizite Rolle spielt.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Ganzzahlige Molestie Lorem und 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
  • Eget porttitor lorem
  1. <ul>
  2.   <li> ... </li>
  3. </ul>

Bestellt

Eine Liste von Elementen, bei denen die Reihenfolge ausdrücklich von Bedeutung ist.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Ganzzahlige Molestie Lorem und Massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla Volutpat Aliquam Velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
  1. <ol>
  2.   <li> ... </li>
  3. </ol>

Ungestylt

Entfernen Sie die standardmäßige list-styleund linke Auffüllung von Listenelementen (nur unmittelbar untergeordnete Elemente).

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Ganzzahlige Molestie Lorem und 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
  • Eget porttitor lorem
  1. <ul class = "ungestylt" > 
  2.   <li> ... </li>
  3. </ul>

In der Reihe

Platzieren Sie alle Listenelemente in einer einzigen Zeile mit inline-blockund etwas leichter Polsterung.

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
  1. <ul class = "inline" > 
  2.   <li> ... </li>
  3. </ul>

Beschreibung

Eine Liste von Begriffen mit den zugehörigen Beschreibungen.

Beschreibungslisten
Eine Beschreibungsliste 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 bei eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod. 
  1. <dl>
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

Horizontale Beschreibung

Erstellen Sie Begriffe und Beschreibungen <dl>nebeneinander.

Beschreibungslisten
Eine Beschreibungsliste 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 bei 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. 
  1. <dl class = "dl-horizontal" > 
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

Kopf hoch!Horizontale Beschreibungslisten schneiden Begriffe ab, die zu lang sind, um in die linke Spalte zu passen text-overflow. In schmaleren Ansichtsfenstern wechseln sie zum standardmäßigen gestapelten Layout.

Code

In der Reihe

Umschließen Sie Inline-Codeschnipsel mit <code>.

Sollte beispielsweise <section>als Inline umbrochen werden. 
  1. Beispiel : < code> & lt ; section & gt ;</ code > sollte als Inline umbrochen werden .

Basisblock

<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>
  1. <vor>
  2.   <p>Beispieltext hier...</p>
  3. </pre>

Kopf hoch!Stellen Sie sicher, dass Code innerhalb <pre>von Tags so weit links wie möglich bleibt. 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.

Tische

Standardstile

Für das grundlegende Styling – leichte Polsterung und nur horizontale Trennwände – fügen Sie die Basisklasse .tablezu jeder hinzu <table>.

# Vorname Nachname Nutzername
1 Markieren Otto @mdo
2 Jacob Dornton @fett
3 Larry der Vogel @twitter 
  1. <Tabellenklasse = " Tabelle" > 
  2.   …
  3. </table>

Optionale Klassen

Fügen Sie der Basisklasse eine der folgenden Klassen .tablehinzu.

.table-striped

<tbody>Fügt über den CSS -Selektor Zebrastreifen zu jeder Tabellenzeile :nth-childhinzu (nicht verfügbar in IE7-8).

# Vorname Nachname Nutzername
1 Markieren Otto @mdo
2 Jacob Dornton @fett
3 Larry der Vogel @twitter 
  1. <table class = "table table-striped" > 
  2.   …
  3. </table>

.table-bordered

Fügen Sie der Tabelle Rahmen und abgerundete Ecken hinzu.

# Vorname Nachname Nutzername
1 Markieren Otto @mdo
Markieren Otto @getbootstrap
2 Jacob Dornton @fett
3 Larry der Vogel @twitter 
  1. <table class = "table table-bordered" > 
  2.   …
  3. </table>

.table-hover

Aktivieren Sie einen Hover-Status für Tabellenzeilen innerhalb einer <tbody>.

# Vorname Nachname Nutzername
1 Markieren Otto @mdo
2 Jacob Dornton @fett
3 Larry der Vogel @twitter 
  1. <table class = "table table-hover" > 
  2.   …
  3. </table>

.table-condensed

Macht Tische kompakter, indem die Zellpolsterung halbiert wird.

# Vorname Nachname Nutzername
1 Markieren Otto @mdo
2 Jacob Dornton @fett
3 Larry der Vogel @twitter 
  1. <table class = "table table-condensed" > 
  2.   …
  3. </table>

Optionale Zeilenklassen

Verwenden Sie kontextabhängige Klassen, um Tabellenzeilen einzufärben.

Klasse Beschreibung
.success Zeigt eine erfolgreiche oder positive Aktion an.
.error Weist auf eine gefährliche oder potenziell negative Aktion hin.
.warning Weist auf eine Warnung hin, die möglicherweise beachtet werden muss.
.info Wird als Alternative zu den Standardstilen verwendet.
# Produkt Zahlung erfolgt Status
1 TB - Monatlich 01.04.2012 Genehmigt
2 TB - Monatlich 04.02.2012 Zurückgegangen
3 TB - Monatlich 04.03.2012 Ausstehend
4 TB - Monatlich 04.04.2012 Rufen Sie zur Bestätigung an 
  1. ...
  2.   < tr class = "Erfolg" >
  3.     <td> 1 < /td>
  4.     <td>TB – Monatlich</ td >
  5.     < td > 04.01.2012 < / td >
  6.     <td>Genehmigt</ td >
  7.   </ tr >
  8. ...

Unterstütztes Tabellen-Markup

Liste der unterstützten Tabellen-HTML-Elemente und wie sie verwendet werden sollten.

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
<caption> Beschreibung oder Zusammenfassung dessen, was die Tabelle enthält, besonders nützlich für Screenreader 
  1. <Tabelle>
  2.   <Beschriftung> ... </Beschriftung>
  3.   <Kopf>
  4.     <tr>
  5.       <th> ... </th>
  6.       <th> ... </th>
  7.     </tr>
  8.   </thead>
  9.   <tbody>
  10.     <tr>
  11.       <td> ... </td>
  12.       <td> ... </td>
  13.     </tr>
  14.   </tbody>
  15. </table>

Formen

Standardstile

Einzelne Formularsteuerelemente erhalten ein Styling, jedoch ohne die erforderliche Basisklasse <form>oder große Änderungen im Markup. Ergibt gestapelte, linksbündige Beschriftungen über Formularsteuerelementen.

Legende Beispielhilfetext auf Blockebene hier. 
  1. <Formular>
  2.   <Feldsatz>
  3.     <legend> Legende </legend>
  4.     <label> Labelname < /label>
  5.     <input type = "text" placeholder = "Geben Sie etwas ein…" >  
  6.     <span class = "help-block" > Beispiel für Hilfetext auf Blockebene hier. </span> 
  7.     <label class = "checkbox" > 
  8.       <input type = "checkbox" > Testen Sie mich 
  9.     </label>
  10.     <button type = "submit " class = "btn" > Senden </button>  
  11.   </fieldset>
  12. </form>

Optionale Layouts

In Bootstrap sind drei optionale Formularlayouts für gängige Anwendungsfälle enthalten.

Suchformular

Fügen Sie .form-searchdem Formular und .search-querydem <input>für eine extra gerundete Texteingabe hinzu.

  1. <Formularklasse = " Formularsuche" > 
  2.   <input type = "text" class = "input-medium search-query" >  
  3.   <button type = "submit " class = "btn" > Suchen </button>  
  4. </form>

Inline-Formular

Fügen Sie .form-inlinefür linksbündige Beschriftungen und Inline-Blocksteuerelemente für ein kompaktes Layout hinzu.

  1. <form class = "form-inline" > 
  2.   <input type = "text" class = "input-small" placeholder = "Email" >   
  3.   <input type = "password" class = "input-small" placeholder = "Passwort" >   
  4.   <label class = "checkbox" > 
  5.     <input type = "checkbox" > An mich erinnern 
  6.   </label>
  7.   <button type = "submit " class = "btn" > Anmelden </button>  
  8. </form>

Horizontale Form

Richten Sie Beschriftungen rechtsbündig aus und verschieben Sie sie nach links, damit sie in derselben Zeile wie Steuerelemente angezeigt werden. Erfordert die meisten Markup-Änderungen von einem Standardformular:

  • .form-horizontalZum Formular hinzufügen
  • Etiketten und Steuerelemente einschließen.control-group
  • .control-labelZum Etikett hinzufügen
  • Wickeln Sie alle zugehörigen Steuerelemente .controlsfür eine ordnungsgemäße Ausrichtung ein
  1. <form class = "form-horizontal" > 
  2.   <div class = "control-group" > 
  3.     <label class = "control-label" for = "inputEmail" > E- Mail </label>  
  4.     <div class = "controls" > 
  5.       <input type = "text" id = "inputEmail" placeholder = "Email" >   
  6.     </div>
  7.   </div>
  8.   <div class = "control-group" > 
  9.     <label class = "control-label" for = "inputPassword" > Passwort </label>  
  10.     <div class = "controls" > 
  11.       <input type = "password" id = "inputPassword" placeholder = "Passwort" >   
  12.     </div>
  13.   </div>
  14.   <div class = "control-group" > 
  15.     <div class = "controls" > 
  16.       <label class = "checkbox" > 
  17.         <input type = "checkbox" > An mich erinnern 
  18.       </label>
  19.       <button type = "submit " class = "btn" > Anmelden </button>  
  20.     </div>
  21.   </div>
  22. </form>

Unterstützte Formularsteuerelemente

Beispiele für Standardformularsteuerelemente, die in einem Beispielformularlayout unterstützt werden.

Eingänge

Die gängigsten Formularsteuerelemente, textbasierte Eingabefelder. Beinhaltet Unterstützung für alle HTML5-Typen: Text, Passwort, Datum/Uhrzeit, Datum/Uhrzeit-lokal, Datum, Monat, Uhrzeit, Woche, Nummer, E-Mail, URL, Suche, Tel und Farbe.

typeErfordert jederzeit die Verwendung eines angegebenen .

  1. <Eingabetyp = " Text" Platzhalter = "Texteingabe" >

Textbereich

Formularsteuerelement, das mehrere Textzeilen unterstützt. Ändern Sie rowsdas Attribut nach Bedarf.

  1. <textarea rows = " 3" ></textarea>

Kontrollkästchen und Radios

Kontrollkästchen dienen zum Auswählen einer oder mehrerer Optionen in einer Liste, während Radios zum Auswählen einer Option aus vielen dienen.

Standard (gestapelt)


  1. <label class = "checkbox" > 
  2.   <Eingabetyp = " Kontrollkästchen" Wert = "" >  
  3.   Option eins ist dies und das – geben Sie unbedingt an, warum es großartig ist
  4. </label>
  5.  
  6. <label class = "radio" > 
  7.   <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" aktiviert >     
  8.   Option eins ist dies und das – geben Sie unbedingt an, warum es großartig ist
  9. </label>
  10. <label class = "radio" > 
  11.   <input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2" >    
  12.   Option zwei kann etwas anderes sein, und wenn Sie es auswählen, wird Option eins deaktiviert
  13. </label>

Inline-Kontrollkästchen

Fügen Sie die .inlineKlasse einer Reihe von Kontrollkästchen oder Optionsfeldern für Steuerelemente hinzu, die in derselben Zeile angezeigt werden.

  1. <label class = "checkbox inline" > 
  2.   <input type = "checkbox" id = "inlineCheckbox1" value = "option1" > 1   
  3. </label>
  4. <label class = "checkbox inline" > 
  5.   <input type = "checkbox" id = "inlineCheckbox2" value = "option2" > 2   
  6. </label>
  7. <label class = "checkbox inline" > 
  8.   <input type = "checkbox" id = "inlineCheckbox3" value = "option3" > 3   
  9. </label>

Wählt aus

Verwenden Sie die Standardoption oder geben Sie a multiple="multiple"an, um mehrere Optionen gleichzeitig anzuzeigen.


  1. <auswählen>
  2.   <Option> 1 </Option>
  3.   <option> 2 </option>
  4.   <option> 3 </option>
  5.   <option> 4 </option>
  6.   <Option> 5 </Option>
  7. </select>
  8.  
  9. < mehrere auswählen = "mehrere" > 
  10.   <Option> 1 </Option>
  11.   <option> 2 </option>
  12.   <option> 3 </option>
  13.   <option> 4 </option>
  14.   <Option> 5 </Option>
  15. </select>

Formularsteuerelemente erweitern

Zusätzlich zu bestehenden Browser-Steuerelementen enthält Bootstrap weitere nützliche Formularkomponenten.

Vorangestellte und angehängte Eingaben

Fügen Sie Text oder Schaltflächen vor oder nach einer textbasierten Eingabe hinzu. Beachten Sie, dass selectElemente hier nicht unterstützt werden.

Standardoptionen

Umschließen Sie an .add-onund an inputmit einer von zwei Klassen, um einer Eingabe Text voranzustellen oder anzuhängen.

@

.00 
  1. <div class = "input-prepend" > 
  2.   <span class = "add-on" > @ </span> 
  3.   <input class = "span2" id = "prependedInput" type = "text" placeholder = "Benutzername" >    
  4. </div>
  5. <div class = "input-append" > 
  6.   <input class = "span2" id = "appendedInput " type = "text" >   
  7.   <span class = "add-on" > .00 </span> 
  8. </div>

Kombiniert

Verwenden Sie beide Klassen und zwei Instanzen von .add-on, um eine Eingabe voranzustellen und anzuhängen.

$ .00 
  1. <div class = "Eingabe voranstellen Eingabe anhängen" > 
  2.   <span class = "add-on" > $ </span> 
  3.   <input class = "span2" id = "appendedPrependedInput " type = "text" >   
  4.   <span class = "add-on" > .00 </span> 
  5. </div>

Schaltflächen statt Text

Verwenden Sie anstelle von a <span>mit Text a .btn, um eine Schaltfläche (oder zwei) an eine Eingabe anzuhängen.

  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedInputButton " type = "text" >   
  3.   <button class = "btn" type = "button" > Los! </button>  
  4. </div>
  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedInputButtons " type = "text" >   
  3.   <button class = "btn" type = "button" > Suche </button>  
  4.   <button class = "btn" type = "button" > Optionen </button>  
  5. </div>

Schaltflächen-Dropdowns

  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedDropdownButton " type = "text" >   
  3.   <div class = "btn-Gruppe" > 
  4.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  5.       Aktion
  6.       <span class = "caret" ></span> 
  7.     </button>
  8.     <ul class = "Dropdown-Menü" > 
  9.       ...
  10.     </ul>
  11.   </div>
  12. </div>
  1. <div class = "input-prepend" > 
  2.   <div class = "btn-Gruppe" > 
  3.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  4.       Aktion
  5.       <span class = "caret" ></span> 
  6.     </button>
  7.     <ul class = "Dropdown-Menü" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   <input class = "span2" id = "prependedDropdownButton" type = "text" >   
  12. </div>
  1. <div class = "Eingabe voranstellen Eingabe anhängen" > 
  2.   <div class = "btn-Gruppe" > 
  3.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  4.       Aktion
  5.       <span class = "caret" ></span> 
  6.     </button>
  7.     <ul class = "Dropdown-Menü" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   <input class = "span2" id = "appendedPrependedDropdownButton " type = "text" >   
  12.   <div class = "btn-Gruppe" > 
  13.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  14.       Aktion
  15.       <span class = "caret" ></span> 
  16.     </button>
  17.     <ul class = "Dropdown-Menü" > 
  18.       ...
  19.     </ul>
  20.   </div>
  21. </div>

Segmentierte Dropdown-Gruppen

  1. <Formular>
  2.   <div class = "input-prepend" > 
  3.     <div class = "btn-group" > ... </div> 
  4.     <Eingabetyp = " Text" > 
  5.   </div>
  6.   <div class = "input-append" > 
  7.     <Eingabetyp = " Text" > 
  8.     <div class = "btn-group" > ... </div> 
  9.   </div>
  10. </form>

Suchformular

  1. <Formularklasse = " Formularsuche" > 
  2.   <div class = "input-append" > 
  3.     <input type = "text" class = "span2 search-query" >  
  4.     <button type = "submit " class = "btn" > Suchen </button>  
  5.   </div>
  6.   <div class = "input-prepend" > 
  7.     <button type = "submit " class = "btn" > Suchen </button>  
  8.     <input type = "text" class = "span2 search-query" >  
  9.   </div>
  10. </form>

Dimensionierung kontrollieren

Verwenden Sie relative Größenklassen wie .input-largeoder passen Sie Ihre Eingaben mithilfe von Klassen an die Spaltengrößen des Rasters .span*an.

Eingänge auf Blockebene

Lassen Sie ein beliebiges <input>oder <textarea>Element sich wie ein Element auf Blockebene verhalten.

  1. <input class = "input-block-level" type = "text" placeholder = ".input-block-level" >

Relative Größe

  1. <input class = "input-mini" type = "text" placeholder = ".input-mini" >   
  2. <input class = "input-small" type = "text" placeholder = ".input-small" >   
  3. <Eingabeklasse = " Eingabemedium" Typ = "Text" Platzhalter = ".Eingabemedium" >   
  4. <input class = "input-large" type = "text" placeholder = ".input-large" >   
  5. <input class = "input-xlarge" type = "text" placeholder = ".input-xlarge" >   
  6. <input class = "input-xxlarge" type = "text" placeholder = ".input-xxlarge" >

Kopf hoch!In zukünftigen Versionen werden wir die Verwendung dieser relativen Eingabeklassen ändern, um sie an unsere Schaltflächengrößen anzupassen. Beispielsweise .input-largewird die Auffüllung und die Schriftgröße einer Eingabe erhöht.

Rastergröße

Verwenden Sie .span1to .span12für Eingaben, die mit denselben Größen der Rasterspalten übereinstimmen.

  1. <input class = "span1" type = "text" placeholder = ".span1" >   
  2. <input class = "span2" type = "text" placeholder = ".span2" >   
  3. <input class = "span3" type = "text" placeholder = ".span3" >   
  4. <select class = "span1" > 
  5.   ...
  6. </select>
  7. <select class = "span2" > 
  8.   ...
  9. </select>
  10. <select class = "span3" > 
  11.   ...
  12. </select>

Verwenden Sie für mehrere Rastereingaben pro Zeile die .controls-rowModifikatorklasse für den richtigen Abstand . Es lässt die Eingaben schweben, um den Leerraum zu reduzieren, legt die richtigen Ränder fest und löscht den Float.

  1. <div class = "controls" > 
  2.   <input class = "span5" type = "text" placeholder = ".span5" >   
  3. </div>
  4. <div class = "controls control-row" > 
  5.   <input class = "span4" type = "text" placeholder = ".span4" >   
  6.   <input class = "span1" type = "text" placeholder = ".span1" >   
  7. </div>
  8. ...

Nicht bearbeitbare Eingaben

Präsentieren Sie Daten in einem Formular, das nicht bearbeitet werden kann, ohne das eigentliche Formular-Markup zu verwenden.

Etwas Wert hier 
  1. <span class = "input-xlarge uneditable-input" > Einige Werte hier </span>

Aktionen bilden

Beenden Sie ein Formular mit einer Gruppe von Aktionen (Schaltflächen). Wenn sie innerhalb eines platziert werden .form-actions, werden die Schaltflächen automatisch eingerückt, um sie an den Formularsteuerelementen auszurichten.

  1. <div class = "Formularaktionen" > 
  2.   <button type = "submit " class = "btn btn-primary" > Änderungen speichern </button>  
  3.   <button type = "button" class = "btn" > Abbrechen </button>  
  4. </div>

Hilfstext

Unterstützung auf Inline- und Blockebene für Hilfetext, der um Formularsteuerelemente herum angezeigt wird.

Inline-Hilfe

Inline-Hilfetext 
  1. <input type = "text" ><span class = "help-inline" > Inline -Hilfetext </span>

Hilfe blockieren

Ein längerer Hilfetextblock, der in eine neue Zeile umbricht und über eine Zeile hinausgehen kann. 
  1. <input type = "text" ><span class = "help-block" > Ein längerer Hilfetextblock, der in eine neue Zeile umbricht und über eine Zeile hinausgehen kann. </span>

Steuerzustände bilden

Geben Sie Benutzern oder Besuchern Feedback mit grundlegenden Feedback-Zuständen zu Formularsteuerelementen und Beschriftungen.

Eingabefokus

Wir entfernen die Standardstile outlinefür einige Formularsteuerelemente und wenden box-shadowan ihrer Stelle ein für an :focus.

  1. <input class = "input-xlarge" id = "focusedInput" type = "text" value = "Das ist fokussiert ..." >

Ungültige Eingaben

Stileingaben über die Standardbrowserfunktionalität mit :invalid. Geben Sie ein typean, fügen Sie das requiredAttribut hinzu, wenn das Feld nicht optional ist, und geben Sie (falls zutreffend) ein an pattern.

Dies ist in den Versionen von Internet Explorer 7-9 aufgrund fehlender Unterstützung für CSS-Pseudoselektoren nicht verfügbar.

  1. <input class = "span3" type = "email" erforderlich >

Deaktivierte Eingänge

Fügen Sie das disabledAttribut zu einer Eingabe hinzu, um Benutzereingaben zu verhindern und ein etwas anderes Aussehen auszulösen.

  1. <input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "Disabled input here..." disabled >

Validierungszustände

Bootstrap enthält Validierungsstile für Fehler-, Warn-, Info- und Erfolgsmeldungen. Fügen Sie zur Verwendung die entsprechende Klasse zum umgebenden hinzu .control-group.

Möglicherweise ist etwas schief gelaufen
Bitte korrigieren Sie den Fehler
Benutzername ist vergeben
Woohoo! 
  1. <div class = "Kontrollgruppenwarnung" > 
  2.   <label class = "control-label" for = "inputWarning" > Eingabe mit Warnung </label>  
  3.   <div class = "controls" > 
  4.     <input type = "text" id = "inputWarning" >  
  5.     <span class = "help-inline" > Möglicherweise ist etwas schief gelaufen </span> 
  6.   </div>
  7. </div>
  8.  
  9. <div class = "Kontrollgruppenfehler" > 
  10.   <label class = "control-label" for = "inputError" > Eingabe mit Fehler </label>  
  11.   <div class = "controls" > 
  12.     <input type = "text" id = "inputError" >  
  13.     <span class = "help-inline" > Bitte korrigieren Sie den Fehler </span> 
  14.   </div>
  15. </div>
  16.  
  17. <div class = "Kontrollgruppeninfo" > 
  18.   <label class = "control-label" for = "inputInfo" > Eingabe mit Info </label>  
  19.   <div class = "controls" > 
  20.     <input type = "text" id = "inputInfo" >  
  21.     <span class = "help-inline" > Benutzername ist bereits vergeben </span> 
  22.   </div>
  23. </div>
  24.  
  25. <div class = "control-group success" > 
  26.   <label class = "control-label" for = "inputSuccess" > Eingabe mit Erfolg </label>  
  27.   <div class = "controls" > 
  28.     <input type = "text" id = "inputSuccess" >  
  29.     <span class = "help-inline" > Woohoo! </span> 
  30.   </div>
  31. </div>

Tasten

Standardschaltflächen

Schaltflächenstile können mit der .btnangewendeten Klasse auf alles angewendet werden. <a>Normalerweise möchten Sie diese jedoch nur auf und Elemente anwenden, <button>um das beste Rendering zu erzielen.

Taste Klasse = "" Beschreibung
btn Graue Standardtaste mit Farbverlauf
btn btn-primary Bietet zusätzliches visuelles Gewicht und identifiziert die primäre Aktion in einer Reihe von Schaltflächen
btn btn-info Wird als Alternative zu den Standardstilen verwendet
btn btn-success Zeigt eine erfolgreiche oder positive Aktion an
btn btn-warning Zeigt an, dass bei dieser Aktion Vorsicht geboten ist
btn btn-danger Weist auf eine gefährliche oder potenziell negative Aktion hin
btn btn-inverse Alternative dunkelgraue Schaltfläche, die nicht an eine semantische Aktion oder Verwendung gebunden ist
btn btn-link Verringern Sie die Betonung einer Schaltfläche, indem Sie sie wie einen Link aussehen lassen, während Sie das Schaltflächenverhalten beibehalten

Cross-Browser-Kompatibilität

IE9 beschneidet keine Hintergrundverläufe an abgerundeten Ecken, also entfernen wir sie. In diesem Zusammenhang jankifiziert IE9 deaktivierte buttonElemente und rendert Text grau mit einem bösen Textschatten, den wir nicht beheben können.

Knopfgrößen

Lust auf größere oder kleinere Buttons? Fügen Sie .btn-large, .btn-small, oder .btn-minifür weitere Größen hinzu.

  1. <p>
  2.   <button class = "btn btn-large btn-primary" type = "button" > Große Schaltfläche </button>  
  3.   <button class = "btn btn-large" type = "button" > Große Schaltfläche </button>  
  4. </p>
  5. <p>
  6.   <button class = "btn btn-primary" type = "button" > Standardschaltfläche </button>  
  7.   <button class = "btn" type = "button" > Standardschaltfläche </button>  
  8. </p>
  9. <p>
  10.   <button class = "btn btn-small btn-primary" type = "button" > Kleine Schaltfläche </button>  
  11.   <button class = "btn btn-small" type = "button" > Kleine Schaltfläche </button>  
  12. </p>
  13. <p>
  14.   <button class = "btn btn-mini btn-primary" type = "button" > Mini-Button </button>  
  15.   <button class = "btn btn-mini" type = "button" > Mini-Button </button>  
  16. </p>

Erstellen Sie Schaltflächen auf Blockebene – solche, die sich über die gesamte Breite eines übergeordneten Elements erstrecken – durch Hinzufügen von .btn-block.

  1. <button class = "btn btn-large btn-block btn-primary" type = "button" > Schaltfläche " Ebene blockieren" </button>  
  2. <button class = "btn btn-large btn-block" type = "button" > Schaltfläche auf Blockebene </button>

Deaktivierter Zustand

Machen Sie Schaltflächen unklickbar, indem Sie sie um 50 % zurückblenden.

Ankerelement

Fügen Sie die .disabledKlasse zu <a>Schaltflächen hinzu.

Primärer Link Verknüpfung 

  1. <a href = "#" class = "btn btn-large btn-primary deaktiviert" > Primärer Link </a>  
  2. <a href = "#" class = "btn btn-large deaktiviert" > Link </a>

Kopf hoch!Wir verwenden .disabledhier als Utility-Klasse, ähnlich der allgemeinen .activeKlasse, daher ist kein Präfix erforderlich. Außerdem ist diese Klasse nur für Ästhetik; Sie müssen benutzerdefiniertes JavaScript verwenden, um Links hier zu deaktivieren.

Button-Element

Fügen Sie das disabledAttribut zu <button>Schaltflächen hinzu.

  1. <button type = "button" class = "btn btn-large btn-primary disabled" disabled = "disabled" > Primäre Schaltfläche </button>   
  2. <button type = "button" class = "btn btn-large" deaktiviert > Schaltfläche </button >

Eine Klasse, mehrere Tags

Verwenden Sie die .btnKlasse für ein <a>, <button>oder <input>-Element.

Verknüpfung 
  1. <a class = "btn" href = "" > Link </a>  
  2. <button class = "btn" type = "submit " > Schaltfläche </button >  
  3. <input class = "btn" type = "button" value = "Input" >   
  4. <input class = "btn" type = "submit " value = "Submit" >

Versuchen Sie als bewährte Methode, das Element für Ihren Kontext abzugleichen, um eine übereinstimmende browserübergreifende Wiedergabe sicherzustellen. Wenn Sie ein haben input, verwenden Sie ein <input type="submit">für Ihre Schaltfläche.

Bilder

Fügen Sie einem Element Klassen hinzu, <img>um Bilder in jedem Projekt einfach zu gestalten.

140x140 140x140 140x140 
  1. <img src = "..." class = "img-rounded" >  
  2. <img src = "..." class = "img-Kreis" >  
  3. <img src = "..." class = "img-polaroid" >

Kopf hoch! .img-roundedund .img-circlefunktionieren nicht in IE7-8 wegen fehlender border-radiusUnterstützung.

Symbole von Glyphicons

Symbol-Glyphen

140 Symbole in Sprite-Form, verfügbar in Dunkelgrau (Standard) und Weiß, bereitgestellt von Glyphicons .

  • Icon-Glas
  • Icon-Musik
  • Icon-Suche
  • Icon-Umschlag
  • Symbol-Herz
  • Symbol-Stern
  • Symbol-Stern-leer
  • Icon-Benutzer
  • Icon-Film
  • Icon-th-large
  • Symbol-th
  • Icon-th-Liste
  • Symbol-ok
  • Symbol entfernen
  • Icon-Zoom-in
  • Icon-Zoom-out
  • Symbol aus
  • Icon-Signal
  • Icon-Zahnrad
  • Symbol-Papierkorb
  • Symbol-Startseite
  • Icon-Datei
  • Symbolzeit
  • Icon-Straße
  • icon-download-alt
  • Icon-Download
  • Icon-Upload
  • Symbol-Posteingang
  • Icon-Spiel-Kreis
  • Icon-Wiederholung
  • Symbolaktualisierung
  • Icon-Liste-alt
  • Icon-Schloss
  • Icon-Flag
  • Icon-Kopfhörer
  • Symbol-Lautstärke aus
  • Icon-Volume-Down
  • Icon-Lauter
  • Icon-Qrcode
  • Icon-Barcode
  • Icon-Tag
  • Icon-Tags
  • Icon-Buch
  • Symbol-Lesezeichen
  • Icon-Print
  • Icon-Kamera
  • Icon-Schriftart
  • Symbol-fett
  • Symbol-kursiv
  • Icon-Text-Höhe
  • Symboltextbreite
  • Symbol-links ausrichten
  • Icon-Align-Center
  • Symbol rechts ausrichten
  • Icon-Align-Justify
  • Icon-Liste
  • Symbol-Einzug-links
  • Symbol-Einzug-rechts
  • icon-facetime-video
  • Symbolbild
  • Icon-Bleistift
  • Icon-Map-Marker
  • Symbol-Anpassung
  • Icon-Tönung
  • Symbol bearbeiten
  • Symbol teilen
  • Icon-Check
  • Symbolbewegung
  • Symbol-Schritt-rückwärts
  • Icon-schnell-zurück
  • Symbol-rückwärts
  • Icon-Spiel
  • Icon-Pause
  • Icon-Stopp
  • Symbol-weiter
  • Symbol-Schnellvorlauf
  • Symbol-Schritt-vorwärts
  • Icon-Auswurf
  • Icon-Chevron-Links
  • Icon-Chevron-rechts
  • Symbol-Plus-Zeichen
  • Symbol-Minuszeichen
  • Symbol-Entfernen-Zeichen
  • Symbol-OK-Zeichen
  • Symbol-Frage-Zeichen
  • Symbol-Info-Schild
  • Icon-Screenshot
  • Symbol-Entfernen-Kreis
  • Symbol-OK-Kreis
  • Symbol-Verbot-Kreis
  • Symbol-Pfeil-links
  • Symbol-Pfeil-rechts
  • Symbol-Pfeil-oben
  • Symbol-Pfeil-nach-unten
  • icon-share-alt
  • icon-resize-full
  • icon-resize-small
  • Symbol-plus
  • Symbol-Minus
  • Symbol-Sternchen
  • Symbol-Ausrufezeichen
  • Icon-Geschenk
  • Symbolblatt
  • Icon-Feuer
  • Symbol-Auge-offen
  • Symbol-Augen-Schließen
  • Symbol-Warnzeichen
  • Symbolebene
  • Icon-Kalender
  • Symbol-zufällig
  • Symbol-Kommentar
  • Icon-Magnet
  • Symbol-Chevron-oben
  • Symbol-Chevron-unten
  • Icon-Retweet
  • Symbol-Warenkorb
  • Symbol-Ordner-Schließen
  • Icon-Ordner-offen
  • icon-resize-vertikal
  • Icon-Resize-horizontal
  • Symbol-Festplatte
  • Symbol-Melophon
  • Symbol-Glocke
  • Icon-Zertifikat
  • Icon-Daumen hoch
  • Symbol-Daumen-runter
  • Symbol-Hand-rechts
  • Symbol-Hand-links
  • Icon-Hand-up
  • Icon-Hand-down
  • Symbol-Kreis-Pfeil-rechts
  • Symbol-Kreis-Pfeil-links
  • Symbol-Kreis-Pfeil-oben
  • Symbol-Kreis-Pfeil-unten
  • Icon-Globus
  • Symbolschlüssel
  • Icon-Aufgaben
  • Icon-Filter
  • Icon-Aktentasche
  • Symbol-Vollbild

Zuordnung von Glyphikonen

Glyphicons Halflings sind normalerweise nicht kostenlos erhältlich, aber eine Vereinbarung zwischen Bootstrap und den Glyphicons-Erstellern hat dies für Sie als Entwickler kostenlos ermöglicht. Als Dankeschön bitten wir Sie, wann immer möglich, einen optionalen Link zurück zu Glyphicons einzufügen .

Wie benutzt man

Alle Symbole erfordern ein <i>Tag mit einer eindeutigen Klasse mit dem Präfix icon-. Fügen Sie zur Verwendung den folgenden Code an einer beliebigen Stelle ein:

  1. <i class = "Symbolsuche" ></i>

Es sind auch Stile für invertierte (weiße) Symbole verfügbar, die mit einer zusätzlichen Klasse bereitgestellt werden. Wir werden diese Klasse speziell für Hover- und aktive Zustände für Navigations- und Dropdown-Links erzwingen.

  1. <i class = "icon-search icon-white" ></i>

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.

Beispiele für Symbole

Verwenden Sie sie in Schaltflächen, Schaltflächengruppen für eine Symbolleiste, Navigation oder vorangestellte Formulareingaben.

Tasten

Schaltflächengruppe in einer Schaltflächensymbolleiste
  1. <div class = "btn-toolbar" > 
  2.   <div class = "btn-Gruppe" > 
  3.     <a class = "btn" href = "#" ><i class = "icon-align-left" ></i></a>   
  4.     <a class = "btn" href = "#" ><i class = "icon-align-center" ></i></a>   
  5.     <a class = "btn" href = "#" ><i class = "icon-align-right" ></i></a>   
  6.     <a class = "btn" href = "#" ><i class = "icon-align-justify" ></i></a>   
  7.   </div>
  8. </div>
Dropdown in einer Schaltflächengruppe
Benutzer 
  1. <div class = "btn-Gruppe" > 
  2.   <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> Benutzer </a>   
  3.   <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href    = "#" ><span class = "caret" ></span></a> 
  4.   <ul class = "Dropdown-Menü" > 
  5.     <li><a href = "#" ><i   class = "icon-pencil" ></i> Bearbeiten </a></li>
  6.     <li><a href = "#" ><i   class = "icon-trash" ></i> Löschen </a></li>
  7.     <li><a href = "#" ><i   class = "icon- ban -circle" ></i> verbieten </a></li>
  8.     <li class = "Teiler" ></li> 
  9.     <li><a href = "#" ><i   class = "i" ></i> Zum Administrator machen </a></li>
  10.   </ul>
  11. </div>
Knopfgrößen
Stern Stern Stern 
  1. <a class = "btn btn-large" href = "#" ><i class = "icon-star"    ></i> Stern </a>
  2. <a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i> Stern </a>   
  3. <a class = "btn btn-mini" href = "#" ><i class = "icon-star" ></i> Stern </a>

Navigation

  1. <ul class = "nav nav-list" > 
  2.   <li class = "active" ><a href = "#" ><i class = "icon-home icon-white" ></i> Startseite </a></li>   
  3.   <li><a href = "#" ><i class = "icon-book" ></i> Bibliothek </a></li>  
  4.   <li><a href = "#" ><i class = "icon-pencil" ></i> Anwendungen </a></li>  
  5.   <li><a href = "#" ><i class = "i" ></i> Verschiedenes </a></li>  
  6. </ul>

Formularfelder

  1. <div class = "control-group" > 
  2.   <label class = "control-label" for = "inputIcon" > E- Mail-Adresse </label>  
  3.   <div class = "controls" > 
  4.     <div class = "input-prepend" > 
  5.       <span class = "add-on" ><i class = "icon-envelope" ></i></span>  
  6.       <input class = "span2" id = "inputIcon" type = "text" >   
  7.     </div>
  8.   </div>
  9. </div>