Basis-CSS

Auf dem Gerüst werden grundlegende HTML-Elemente gestaltet und mit erweiterbaren Klassen erweitert, um ein frisches, konsistentes Aussehen und Verhalten zu bieten.

Überschriften & Fließtext

Typografische Skala

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.

Beispiel Textkörper

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.

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.

h1. Überschrift 1

h2. Überschrift 2

h3. Überschrift 3

h4. Überschrift 4

h5. Überschrift 5
h6. Überschrift 6

Hervorhebung, Adresse und Abkürzung

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 titleAttribut für erweiterten Text einschließen

Verwenden Sie .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>

Betonung verwenden

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.

Beispieladressen

Hier sind zwei Beispiele, wie das <address>Tag verwendet werden kann:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Vollständiger Name
[email protected]

Beispiel Abkürzungen

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 .

Block Zitate

Element Verwendungszweck Optional
<blockquote> Element auf Blockebene zum Zitieren von Inhalten aus einer anderen Quelle

citeAttribut für Quell-URL hinzufügen

Verwendung .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 &mdash;davor.

  1. <Blockzitat>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis. </p>
  3. <small> Jemand berühmt </small>
  4. </blockquote>

Beispiel-Blockquotes

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

Listen

Ungeordnet

<ul>

  • 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

Ungestylt

<ul class="unstyled">

  • 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

Bestellt

<ol>

  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

Beschreibung

<dl>

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.

Horizontale Beschreibung

<dl class="dl-horizontal">

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.

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.

In der Reihe

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

  1. Zum Beispiel sollte <code> section </ code > 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>

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.

Google Prettify

Nehmen Sie dasselbe <pre>Element und fügen Sie zwei optionale Klassen für verbessertes Rendering hinzu.

  1. <p> Beispieltext hier... </p>
  1. <pre class = "hübsch gedruckt
  2. Leinen" >
  3. <p>Beispieltext hier...</p>
  4. </pre>

Laden Sie google-code-prettify herunter und sehen Sie sich die Readme-Datei für die Verwendung an.

Tabellenmarkierung

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
  1. <Tabelle>
  2. <Kopf>
  3. <tr>
  4. <th> </th>
  5. <th> </th>
  6. </tr>
  7. </thead>
  8. <tbody>
  9. <tr>
  10. <td> </td>
  11. <td> </td>
  12. </tr>
  13. </tbody>
  14. </table>

Tabellenoptionen

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

Beispieltabellen

1. Standardtabellenstile

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.

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

2. Gestreifter Tisch

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.

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

3. Eingefasster Tisch

Fügen Sie aus ästhetischen Gründen Ränder um den gesamten Tisch und abgerundete Ecken hinzu.

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

4. Zusammengefasste Tabelle

Machen Sie Ihre Tabellen kompakter, indem Sie die .table-condensedKlasse hinzufügen, um die Tabellenzellenpolsterung zu halbieren (von 8 Pixel auf 4 Pixel).

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

5. Kombiniere sie alle!

Fühlen Sie sich frei, jede der Tischklassen zu kombinieren, um ein unterschiedliches Aussehen zu erzielen, indem Sie eine der verfügbaren Klassen verwenden.

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

Flexibles HTML und CSS

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.

Vier Layouts enthalten

Bootstrap bietet Unterstützung für vier Arten von Formularlayouts:

  • Vertikal (Standard)
  • Suche
  • In der Reihe
  • Horizontal

Verschiedene Arten von Formularlayouts erfordern einige Änderungen am Markup, aber die Steuerelemente selbst bleiben und verhalten sich gleich.

Steuerzustände und mehr

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.

Vier Arten von Formularen

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

Beispielformulare, die nur Formularsteuerelemente verwenden, kein zusätzliches Markup

Grundform

Intelligente und leichte Standardeinstellungen ohne zusätzliches Markup.

Beispielhilfetext auf Blockebene hier.

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

Suchformular

Fügen Sie .form-searchdem Formular und .search-queryder input.

  1. <form class = "well form-search" >
  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-inlinehinzu, um die vertikale Ausrichtung und den Abstand von Formularsteuerelementen zu verfeinern.

  1. <form class = "well 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 Formen

Auf der rechten Seite sind alle von uns unterstützten Standardformularsteuerelemente dargestellt. Hier ist die Liste mit Aufzählungszeichen:

  • Texteingaben (Text, Passwort, E-Mail usw.)
  • Kontrollkästchen
  • Radio
  • auswählen
  • mehrfach auswählen
  • Dateieingabe
  • Textbereich

Neben Freiformtext wird jede textbasierte HTML5-Eingabe so angezeigt.

Beispiel-Markup

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.

  1. <form class = "form-horizontal" >
  2. <Feldsatz>
  3. <legend> Legendentext </legend>
  4. <div class = "control-group" >
  5. <label class = "control-label" for = "input01" > Texteingabe </label>
  6. <div class = "controls" >
  7. <input type = "text" class = "input-xlarge" id = "input01" >
  8. <p class = "help-block" > Unterstützender Hilfetext </p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </form>

Steuerzustände bilden

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.


Formularvalidierung

Es enthält auch Validierungsstile für Fehler, Warnungen und Erfolg. Fügen Sie zur Verwendung die Fehlerklasse zum umgebenden hinzu .control-group.

  1. <Feldsatz
  2. class = "Kontrollgruppenfehler" >
  3. </fieldset>
Etwas Wert hier
Möglicherweise ist etwas schief gelaufen
Bitte korrigieren Sie den Fehler
Woohoo!
Woohoo!

Formularsteuerelemente erweitern

Eingaben voranstellen und anhängen

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.


Kontrollkästchen und Radios

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.


Inline-Formulare und Anhängen/Voranstellen

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.


Formularhilfetext

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.

Verwenden Sie dieselben .span*Klassen aus dem Rastersystem für Eingabegrößen.

Sie können auch statische Klassen verwenden, die nicht auf das Raster abgebildet werden, sich an die responsiven CSS-Stile anpassen oder unterschiedliche Arten von Steuerelementen berücksichtigen (z . B. inputvs. select).

@

Hier ist ein Hilfetext

.00
Hier ist mehr Hilfetext
$ .00

Hinweis: Beschriftungen umgeben alle Optionen für viel größere Klickbereiche und ein benutzerfreundlicheres Formular.

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

Schaltflächen für Aktionen

Als Konvention sollten Schaltflächen nur für Aktionen verwendet werden, während Hyperlinks für Objekte verwendet werden sollen. Beispielsweise sollte „Herunterladen“ eine Schaltfläche sein, während „Letzte Aktivität“ ein Link sein sollte.

Schaltflächenstile können mit der .btnangewendeten Klasse auf alles angewendet werden. In der Regel möchten Sie diese jedoch nur auf <a>und <button>-Elemente anwenden.

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.

Mehrere Größen

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


Deaktivierter Zustand

Fügen Sie für deaktivierte Schaltflächen die .disabledKlasse zu Links und das disabledAttribut für <button>Elemente hinzu.

Primärer Link Verknüpfung

Kopf hoch! Wir verwenden .disabledhier als Utility-Klasse, ähnlich der allgemeinen .activeKlasse, daher ist kein Präfix erforderlich.

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 " >
  3. Taste
  4. </button>
  5. <input class = "btn" type = "button"
  6. Wert = "Eingabe" >
  7. <input class = "btn" type = "submit "
  8. Wert = "Senden" >

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.

  • 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

Als Sprite gebaut

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.

Wie benutzt man

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:

  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:

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

Für Ihre Symbole stehen 140 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.

Anwendungsfälle

Symbole sind großartig, aber wo würde man sie verwenden? Hier sind ein paar Ideen:

  • Als visuelle Elemente für Ihre Sidebar-Navigation
  • Für eine rein Icon-gesteuerte Navigation
  • Für Schaltflächen, um die Bedeutung einer Aktion zu vermitteln
  • Mit Links zum Freigeben von Kontext am Zielort eines Benutzers

Im Wesentlichen können Sie überall, wo Sie ein <i>Tag platzieren können, ein Symbol platzieren.

Beispiele

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