Grundlegende Typografie

Überschriften

Alle HTML-Überschriften,

durch
, stehen zur Verfügung. Die Klassen .h1 bis .h6 sind ebenfalls verfügbar, wenn Sie den Schriftstil einer Überschrift anpassen möchten, Ihr Text aber dennoch inline angezeigt werden soll.

h1. Bootstrap-Überschrift

 Halbfett 36px

h2. Bootstrap-Überschrift

 Halbfett 30px

h3. Bootstrap-Überschrift

 Halbfett 24px

h4. Bootstrap-Überschrift

 Halbfett 18px
h5. Bootstrap-Überschrift
 Halbfett 14px
h6. Bootstrap-Überschrift
 Halbfett 12px 
h1. Bootstrap-Überschrift

 h2. Bootstrap-Überschrift

 h3. Bootstrap-Überschrift

 h4. Bootstrap-Überschrift

 h5. Bootstrap-Überschrift

 h6. Bootstrap-Überschrift

Erstellen Sie mit einer allgemeinen Überschrift leichteren Sekundärtext in jeder Überschrift Tag oder die .small Klasse.

h1. Bootstrap-Überschrift Sekundärtext

h2. Bootstrap-Überschrift Sekundärtext

h3. Bootstrap-Überschrift Sekundärtext

h4. Bootstrap-Überschrift Sekundärtext

h5. Bootstrap-Überschrift Sekundärtext
h6. Bootstrap-Überschrift Sekundärtext 
h1. Bootstrap-Überschrift Sekundärtext

 h2. Bootstrap-Überschrift Sekundärtext

 h3. Bootstrap-Überschrift Sekundärtext

 h4. Bootstrap-Überschrift Sekundärtext

 h5. Bootstrap-Überschrift Sekundärtext

 h6. Bootstrap-Überschrift Sekundärtext

Körper Kopie

Die globale font-size von Bootstrap ist 14px mit einer line-height von 1,428 . Dies wird auf die angewendet und alle Absätze. Zusätzlich,

(Absätze) erhalten einen unteren Rand von der Hälfte ihrer berechneten Zeilenhöhe (standardmäßig 10 Pixel).

Nichtsdestotrotz ist die Gefahr groß, dass die Mollis von deinem Löwen getragen werden. Mit sociis natoque penatibus et magnis dis parturient montes, nascetur lächerlich mus. Nullam id dolor id nibh ultricies vehicula.

Mit sociis natoque penatibus et magnis dis parturient montes, nascetur lächerlich mus. Donec ullamcorper nulla nicht metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla nicht metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

 ...

Leittext

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

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

 class= "lead" > ...

Mit weniger gebaut

Die typografische Skalierung basiert auf zwei LESS-Variablen in variables.less : @font-size-base und @line-height-base . Die erste ist die durchgehend verwendete Grundschriftgröße und die zweite die Grundzeilenhöhe. Wir verwenden diese Variablen und einige einfache Berechnungen, um die Ränder, Abstände und Zeilenhöhen aller unserer Schriften und mehr zu erstellen. Passen Sie sie an und Bootstrap passt sich an.

Schwerpunkt

Nutzen Sie die Standard-Hervorhebungs-Tags von HTML mit schlanken Stilen.

Kleiner Text

Um Inline-Texte oder Textblöcke weniger hervorzuheben, verwenden Sie die Tag, um den Text auf 85 % der Größe des übergeordneten Elements festzulegen. Überschriftenelemente erhalten bei der Verschachtelung eine eigene font-size Elemente.

Alternativ können Sie anstelle eines beliebigen ein Inline-Element mit .small verwenden

Diese Textzeile ist als Kleingedrucktes zu betrachten.

This line of text is meant to be treated as fine print.

Deutlich

Zum Hervorheben eines Textausschnitts mit einer stärkeren Schriftstärke.

Der folgende Textausschnitt wird als fetter Text dargestellt .

 rendered as bold text

Kursivschrift

Zum Hervorheben eines Textausschnitts durch Kursivschrift.

Der folgende Textausschnitt wird als kursiver Text dargestellt .

 rendered as italicized text

Alternative Elemente

Gerne nutzen Und in HTML5. soll Wörter oder Phrasen hervorheben, ohne dabei zusätzliche Bedeutung zu vermitteln ist hauptsächlich für Stimme, Fachbegriffe usw. gedacht.

Ausrichtungsklassen

Mit Textausrichtungsklassen können Sie Text ganz einfach an Komponenten neu ausrichten.

Linksbündiger Text.

Zentrierter Text.

Rechtsbündiger Text.

 class= "text-left" > Linksbündiger Text.


 class= "text-center" > Zentrierter Text.


 class= "text-right" > Rechtsbündiger Text.

Schwerpunktklassen

Vermitteln Sie Bedeutung durch Farbe mit einer Handvoll hervorgehobener Gebrauchsklassen. Diese können auch auf Links angewendet werden und werden beim Schweben dunkler, genau wie unsere Standard-Linkstile.

Fusce dapibus, Tellus AC Cursus Commodo, Tortor Mauris Nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

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

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla nicht metus auctor fringilla.

 class= "text-muted" > ...


 class= "text-primary" > ...


 class= "text-success" > ...


 class= "text-info" > ...


 class= "text-warning" > ...

 
class= "text-danger" > ...

Umgang mit Spezifität

Manchmal können Hervorhebungsklassen aufgrund der Spezifität eines anderen Selektors nicht angewendet werden. In den meisten Fällen besteht eine ausreichende Lösung darin, Ihren Text in eine zu packen mit der Klasse.

Abkürzungen

Stilisierte Implementierung von HTML's Element für Abkürzungen und Akronyme, um beim Hover die erweiterte Version anzuzeigen. Abkürzungen mit einem title haben einen leicht gepunkteten unteren Rand und einen Hilfecursor beim Hover, der beim Hover zusätzlichen Kontext bietet.

Grundlegende Abkürzung

Für erweiterten Text bei langem Bewegen der Maus über eine Abkürzung fügen Sie das title mit ein Element.

Eine Abkürzung des Wortes attribute ist attr .

title= "attribute" > attr

Initialismus

Fügen Sie .initialism zu einer Abkürzung hinzu, um eine etwas kleinere Schriftgröße zu erhalten.

HTML ist das Beste seit geschnittenem Brot.

 title= "HyperText Markup Language" class= "initialism" > HTML

Adressen

Geben Sie Kontaktinformationen für den nächsten Vorfahren oder das gesamte Werk an. Behalten Sie die Formatierung bei, indem Sie alle Zeilen mit beenden
 .

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Vollständiger Name
first.last@example.com 

 Twitter, Inc.

 795 Folsom Ave, Suite 600

 San Francisco, CA 94107

 title= "Telefon" > P: (123) 456-7890




 Vollständiger Name

 href= "mailto:#" > first.last@example.com

Block Zitate

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

Standard-Blockquote

Wickeln um beliebiges HTML als Zitat herum. Für klare Zitate empfehlen wir a

.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ganzzahlige Zahlen stehen zur Verfügung. 



 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ganzzahlige Zahlen stehen zur Verfügung.

Blockquote-Optionen

Stil- und Inhaltsänderungen für einfache Variationen eines Standards

.

Benennen einer Quelle

Hinzufügen Tag oder .small Klasse zur Identifizierung der Quelle. Fügen Sie den Namen des Quellwerks ein .

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ganzzahlige Zahlen stehen zur Verfügung.

Jemand, der im Quellentitel berühmt ist 


 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ganzzahlige Zahlen stehen zur Verfügung.
 Jemand, der in title= „Quellentitel“ > Quellentitel bekannt ist

Alternative Anzeigen

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ganzzahlige Zahlen stehen zur Verfügung.

Jemand, der im Quellentitel berühmt ist 
 class= "pull-right" >
 ...

Listen

Ungeordnet

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

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer Molestie Lorem bei 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
    


     Eine Liste von Elementen, bei denen die Reihenfolge explizit eine Rolle spielt .
    


    


      


    1.  Lorem ipsum dolor sit amet
      2. 


    2.  Consectetur adipiscing elit
      3. 


    3.  Integer Molestie Lorem bei Massa
      4. 


    4.  Facilisis in pretium nisl aliquet
      5. 


    5.  Nulla volutpat aliquam velit
      6. 


    6.  Faucibus porta lacus fringilla vel
      7. 


    7.  Aenean sit amet erat nunc
      8. 


    8.  Eget porttitor lorem
      9. 



    



    


     
      

      

    1. ...



      2. 

      



      Ungestylt
      


       Entfernen Sie den standardmäßigen list-style und den linken Rand für Listenelemente (nur unmittelbar untergeordnete Elemente). Dies gilt nur für unmittelbar untergeordnete Listenelemente , was bedeutet, dass Sie die Klasse auch für alle verschachtelten Listen hinzufügen müssen.
      


      


        


      •  Lorem ipsum dolor sit amet
        • 


      •  Consectetur adipiscing elit
        • 


      •  Integer Molestie Lorem bei 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
        • 



      



      


      

       
      

        
class= "list-unstyled" >

      •  ... 



        • 

      



      



       Im Einklang
      


       Platzieren Sie alle Listenelemente in einer einzigen Zeile mit display: inline-block; und etwas leichte Polsterung.
      


      


        


      •  Lorem ipsum
        • 


      •  Phasellus iaculis
        • 


      •  Nulla Volutpat
        • 



      



      


      

      

         class= "list-inline" >

      •  ... 



        • 

      



      



       Beschreibung
      


       Eine Liste von Begriffen mit den zugehörigen Beschreibungen.
      


      


      


       Beschreibungslisten
      


       Eine Beschreibungsliste eignet sich hervorragend zur Definition von Begriffen.
      


       Euismod
      


       Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
      


       Donec id elit non mi porta gravida at eget metus.
      


       Malesuada-Porta
      

 
      Etiam porta sem malesuada magna mollis euismod.
      



      



      


      

      

      


       ...

       ...



      



      Horizontale Beschreibung
      


       Machen Sie Begriffe und Beschreibungen in
       nebeneinander aufstellen. Beginnt standardmäßig gestapelt
       s, aber wenn die Navigationsleiste erweitert wird, werden auch diese erweitert.
      


      


      


       Beschreibungslisten
      


       Eine Beschreibungsliste eignet sich hervorragend zur Definition von Begriffen.
      


       Euismod
      


       Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
      


       Donec id elit non mi porta gravida at eget metus.
      


       Malesuada-Porta
      


       Etiam porta sem malesuada magna mollis euismod.
      


       Felis euismod sempre eget lacinia
      


       Fusce dapibus, Tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
      



      



      


      

       
      

      
class= "dl-horizontal" >

       ...

       ... 



      



      



      


       Automatisches Abschneiden
      


       Horizontale Beschreibungslisten kürzen Begriffe, die zu lang sind, um in die linke Spalte zu passen, mit text-overflow . In schmaleren Ansichtsfenstern wechseln sie zum standardmäßigen gestapelten Layout.
      



      




      


       Tische
      



      



       Einfaches Beispiel
      


       Für einen einfachen Stil – leichte Polsterung und nur horizontale Trennwände – fügen Sie die Basisklasse .table zu jedem hinzu 
      . It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles. 
      

      
# First Name Last Name Username

       
      
1 Mark Otto

      

      
 

      
@mdo




 2

 Jacob

 Thornton

 @fett






 3

 Larry

 der Vogel

 @twitter