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

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:

Beispiel Abkürzungen

Abkürzungen werden mit Großbuchstaben und einem leicht gepunkteten unteren Rand formatiert. Sie haben auch einen Hilfe-Cursor beim Schweben, sodass Benutzer zusätzliche Hinweise haben, dass beim Schweben etwas angezeigt wird.

HTML ist das Beste seit geschnittenem Brot.

Eine Abkürzung des Wortes Attribut ist attr .

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

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.

In der Reihe

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

Zum Beispiel sollte <code> section </ code > als Inline umbrochen werden .  

Basisblock

<pre>Für mehrere Codezeilen verwenden . Stellen Sie sicher, dass Sie alle Carets in ihre Unicode-Zeichen umwandeln, 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.

Google Prettify

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.

<Tabelle>
  <Kopf>
    <tr>
      <th> … </th>
      <th> … </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> … </td>
      <td> … </td>
    </tr>
  </tbody>
</table>

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>

Gestalten Sie Ihre Tische etwas schicker, indem Sie Zebrastreifen hinzufügen – fügen Sie einfach die .table-stripedKlasse hinzu.

Hinweis: Sprit-Tabellen verwenden den :nth-childCSS-Selektor und sind in IE7-IE8 nicht verfügbar.

<table class = "table table-striped" > 
  …
</table>

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

<table class = "table table-bordered" > 
  …
</table>

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>

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>

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.

Mit v2.0 haben wir leichtere und intelligentere Standardeinstellungen für Formularstile. Kein zusätzliches Markup, nur Formularsteuerelemente.

Reflektieren Sie die Standard-WebKit-Stile, fügen Sie einfach .form-searchzusätzliche abgerundete Suchfelder hinzu.

Die Eingänge sind zum Starten auf Blockebene. Für .form-inlineund .form-horizontalverwenden wir den Inline-Block.

Was ist inbegriffen

Auf der linken 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

Neue Standardeinstellungen mit v2.0

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.

Überarbeitete Browserzustände

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.

<Feldsatz
  class = "Kontrollgruppenfehler" >
  …
</fieldset>

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.

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.

Für Anker und Formen

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

Hinweis: Alle Schaltflächen müssen die .btnKlasse enthalten. Schaltflächenstile sollten aus Gründen der Einheitlichkeit auf <button>und <a>Elemente angewendet werden.

Mehrere Größen

Lust auf größere oder kleinere Buttons? Haben Sie es!

Primäre Aktion Aktion

Primäre Aktion Aktion

Deaktivierter Zustand

Verwenden Sie für deaktivierte Schaltflächen .btn-disabledfür Links und :disabledfür <button>Elemente.

Primäre Aktion Aktion

Primäre Aktion Aktion

Cross-Browser-Kompatibilität

In IE9 lassen wir den Verlauf auf allen Schaltflächen zugunsten abgerundeter Ecken fallen, da IE9 Hintergrundverläufe nicht auf die Ecken zuschneidet.

In diesem Zusammenhang macht IE9 deaktivierte buttonElemente unbrauchbar, wodurch Text grau mit einem hässlichen Textschatten dargestellt wird – leider können wir dies nicht beheben.

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

Mit v2.0.0 haben wir uns dafür entschieden, ein <i>Tag für alle unsere Symbole zu verwenden, aber sie haben keine Groß-/Kleinschreibung, sondern 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.

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.

Aktualisierung Kasse Löschen

Kommentar Einstellungen Mehr Info