Standardraster

Das standardmäßige Rastersystem, das als Teil von Bootstrap bereitgestellt wird, ist ein 940 Pixel breites 16-Spalten-Raster. Es ist eine Variante des beliebten 960-Gittersystems, aber ohne den zusätzlichen Rand/Padding auf der linken und rechten Seite.

Beispiel für Grid-Markup

Wie hier gezeigt, kann ein Grundlayout mit zwei "Säulen" erstellt werden, die jeweils eine Anzahl der 16 Grundsäulen überspannen, die wir als Teil unseres Rastersystems definiert haben. Weitere Variationen finden Sie in den Beispielen unten.

<div class="row"> Klasse = "Zeile" >
  <div class = "span6-Spalten" > 
    ...
  </div>
  <div class = "span10 Spalten" > 
    ...
  </div>
</div>

Festes Layout

Ein grundlegendes 940 Pixel breites, zentriertes Container-Layout für nahezu jede Website oder Seite.

<Körper>
  <div class = "container" > 
    ...
  </div>
</body>

Flüssiges Layout

Eine flexible flüssige oder flüssige Seitenstruktur mit Min- und Max-Breiten und einer linken Seitenleiste. Großartig für Anwendungen.

<Körper>
  <div class = "container-fluid" > 
    <div class = "Seitenleiste" > 
      ...
    </div>
    <div class = "inhalt" > 
      ...
    </div>
  </div>
</body>

Überschriften und Kopie

Eine typografische Standardhierarchie zum Strukturieren Ihrer Webseiten.

h1. Überschrift 1

h2. Überschrift 2

h3. Überschrift 3

h4. Überschrift 4

h5. Überschrift 5

h6. Überschrift 6

Beispiel Absatz

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.

Beispielüberschrift Hat Unterüberschrift...

Sie können auch Unterüberschriften mit <strong>und hinzufügen<em>

Sonstiges Elemente

Verwendung von Hervorhebungen, Adressen und Abkürzungen

<strong> <em> <address> <abbr>

Wann verwenden

Hervorhebungs-Tags ( <strong>und <em>) sollten verwendet werden, um eine visuelle Unterscheidung zwischen einem Wort oder einer Phrase und der umgebenden Kopie hinzuzufügen. Verwenden Sie es <strong>für einfache Aufmerksamkeit und <em>für raffinierte Aufmerksamkeit und Titel.

Hervorhebung in einem Absatz

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.

Adressen

Das addressElement wird für – Sie haben es erraten! – Adressen verwendet. So sieht es aus:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

Hinweis: Jede Zeile in einem addressmuss mit einem Zeilenumbruch ( <br />) enden, um den Inhalt so zu strukturieren, wie er im wirklichen Leben ohne angewendete Stile gelesen wird.

Abkürzungen

Verwenden Sie für Abkürzungen und Akronyme das abbrTag ( ist in HTML5acronym veraltet ). Fügen Sie die Kurzform in das Tag ein und legen Sie einen Titel für den vollständigen Namen fest.

Block Zitate

<blockquote> <p> <cite>

Achten Sie darauf, Ihre blockquoteherum paragraphund citeTags zu wickeln. Verwenden Sie beim Zitieren einer Quelle das citeElement. Das CSS stellt einem Namen automatisch einen Gedankenstrich (–) voran.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...

Dr. Julius Hibbert

Ungeordnet<ul>

• Jeremy Bixby
• Robert Dezure
• Josh Washington
• Anton Caprisi
• Meine Teamkollegen
  • Georg Castanza
  • Jerry Seinfeld
  • Kosmo Kramer
  • Elaine Bennis
  • Neuer Mann
• Johannes Jakob
• Paul Pierz
• Kevin Garnett

Ungestylt<ul.unstyled>

• Jeremy Bixby
• Robert Dezure
• Josh Washington
• Anton Caprisi
• Meine Teamkollegen
  • Georg Castanza
  • Jerry Seinfeld
  • Kosmo Kramer
  • Elaine Bennis
  • Neuer Mann
• Johannes Jakob
• Paul Pierz
• Kevin Garnett

Bestellt<ol>

1. Jeremy Bixby
2. Robert Dezure
3. Josh Washington
4. Anton Caprisi
5. Meine Teamkollegen
   1. Georg Castanza
   2. Jerry Seinfeld
   3. Kosmo Kramer
   4. Elaine Bennis
   5. Neuer Mann
6. Johannes Jakob
7. Paul Pierz
8. Kevin Garnett

Beschreibungdl

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.

Tabellen bauen

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

Tabellen sind großartig – für viele Dinge. Großartige Tabellen benötigen jedoch ein wenig Markup-Liebe, um nützlich, skalierbar und lesbar (auf Codeebene) zu sein. Hier sind ein paar hilfreiche Tipps.

Umschließen Sie Ihre Spaltenüberschriften immer theadso, dass die Hierarchie thead> tr> ist th.

Ähnlich wie bei den Spaltenüberschriften sollte der gesamte Inhalt Ihrer Tabelle in ein eingeschlossen werden tbody, sodass Ihre Hierarchie tbody> tr> ist td.

Beispiel: Standardtabellenstile

Alle Tabellen werden automatisch nur mit den wesentlichen Rändern formatiert, um die Lesbarkeit zu gewährleisten und die Struktur zu erhalten. Es müssen keine zusätzlichen Klassen oder Attribute hinzugefügt werden.

#	Vorname	Nachname	Sprache
1	Etwas	Einer	Englisch
2	Jo	Sixpack	Englisch
3	Stu	Delle	Code

<table class="common-table"> class = "common-table" >
  ...
</table>

Beispiel: Zebrastreifen

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

#	Vorname	Nachname	Sprache
1	Etwas	Einer	Englisch
2	Jo	Sixpack	Englisch
3	Stu	Delle	Code

<table class="common-table zebra-striped"> class = "common-table zebra-striped" >
...
</table>

Beispiel: Zebrastreifen mit TableSorter.js

Anhand des vorherigen Beispiels verbessern wir die Nützlichkeit unserer Tabellen, indem wir Sortierfunktionen über jQuery und das Tablesorter- Plugin bereitstellen. Klicken Sie auf die Überschrift einer beliebigen Spalte, um die Sortierung zu ändern.

#	Vorname	Nachname	Sprache
1	Dein	Einer	Englisch
2	Jo	Sixpack	Englisch
3	Stu	Delle	Code

<script type="text/javascript" src="js/jquery/jquery.tablesorter.min.js"></script> type = "text/javascript" src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<script type = "text/javascript" > 
  $ ( Dokument ). bereit ( Funktion () { 
    $ ( "table#sortTableExample" ). Tabellensortierer ( { sortList : [[ 1 , 0 ]]} );   
  });
</script>
<table class = "common-table zebra-striped" > 
  ...
</table>

Standardstile

Alle Formulare erhalten Standardstile, um sie lesbar und skalierbar darzustellen. Stile werden für Texteingaben, Auswahllisten, Textbereiche, Optionsfelder und Kontrollkästchen sowie Schaltflächen bereitgestellt.

Legende des Beispielformulars

XL-Eingang

Auswählen

1 2 3 4 5

Auswählen

1 2 3 4 5

Nicht bearbeitbare Eingabe

Etwas Wert hier

Deaktivierter Eingang

XL-Eingang

Kleiner Ausschnitt aus Hilfetext

Legende des Beispielformulars

Vorangestellter Text

@

Vorangestelltes Kontrollkästchen

Angehängtes Kontrollkästchen

Dateieingabe

Legende des Beispielformulars

Liste der Optionen

• Option eins ist dies und das – geben Sie unbedingt an, warum es großartig ist
• Option zwei kann ebenfalls aktiviert und in die Formularergebnisse aufgenommen werden
• Option drei kann – ja, Sie haben es erraten – ebenfalls aktiviert und in die Formularergebnisse aufgenommen werden
• Option vier kann nicht aktiviert werden, da sie deaktiviert ist.

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

Datumsbereich

zu Alle Zeiten werden als Pacific Standard Time (GMT -08:00) angezeigt.

Textbereich

Block mit Hilfetext, um das obige Feld bei Bedarf zu beschreiben.

Liste der Optionen

• Option eins ist dies und das – geben Sie unbedingt an, warum es großartig ist
• Option zwei kann ebenfalls aktiviert und in die Formularergebnisse aufgenommen werden

Änderungen speichern Absagen

Gestapelte Formulare

Fügen .form-stackedSie dem HTML Ihres Formulars hinzu, und Sie haben Beschriftungen über ihren Feldern statt links. Dies funktioniert hervorragend, wenn Ihre Formulare kurz sind oder Sie zwei Spalten mit Eingaben für schwerere Formulare haben.

Legende des Beispielformulars

XL-Eingang

Auswählen

1 2 3 4 5

Legende des Beispielformulars

Liste der Optionen

• Option eins ist dies und das – geben Sie unbedingt an, warum es großartig ist
• Option zwei kann ebenfalls aktiviert und in die Formularergebnisse aufgenommen werden

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

Änderungen speichern Absagen

Tasten

Als Konvention werden Schaltflächen für Aktionen verwendet, während Links für Objekte verwendet werden. Beispielsweise könnte „Herunterladen“ eine Schaltfläche und „Letzte Aktivität“ ein Link sein.

Alle Schaltflächen haben standardmäßig einen hellgrauen Stil, aber eine blaue .primaryKlasse ist verfügbar. Außerdem ist das Rollen Ihrer eigenen Styles kinderleicht.

Beispielschaltflächen

Schaltflächenstile können mit .btnangewendet werden. Normalerweise möchten Sie diese nur aauf , buttonund select input-Elemente anwenden. So sieht es aus:

Alternative Größen

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

Deaktivierter Zustand

Verwenden Sie für Schaltflächen, die nicht aktiv sind oder aus dem einen oder anderen Grund von der App deaktiviert wurden, den deaktivierten Status. Das gilt .disabledfür Links und :disabledfür buttonElemente.

Verknüpfungen

Tasten

Was ist es

Unsere obere Leiste ist eine feste Leiste, die das Logo oder den Namen einer Website, die primäre Navigation und das Suchformular enthält.

Anpassbar

Alle darin enthaltenen Elemente und auch die gesamte obere Leiste sind optional. Sie können wählen, ob Sie ein Logo/einen Namen, ein Navigationssystem, eine Suche und ein sekundäres Navigationssystem oder eine beliebige Kombination daraus hinzufügen möchten.

Dropdowns enthalten

Als Teil der Hauptnavigation haben wir die Möglichkeit integriert, Dropdowns zu Ihrer Navigation hinzuzufügen. Schauen Sie sich das sekundäre Navigationsgerät oben (rechtsbündig) an, um zu sehen, wie es gemacht wird.

Tabs und Pillen

Erstellen Sie eine einfache Sekundärnavigation mit einer ul. Wechseln Sie zwischen Tabs oder Pillen, indem Sie die entsprechende Klasse hinzufügen.

Ideal für Unterabschnitte von Inhalten wie unsere Kontoeinstellungsseiten und Benutzerzeitleisten zum Umschalten zwischen Seiten mit ähnlichen Inhalten. Erhältlich in Laschen- oder Pillenform.

• Heim
• Profil
• Mitteilungen
• Einstellungen
• Kontakt

<ul class="tabs"> class = "Tabs" >
  <li class = "active" ><a href = "" > Startseite </a></li>  
  <li><a href = "" > Profil </a></li> 
  <li><a href = "" > Nachrichten </a></li> 
  <li><a href = "" > Einstellungen </a></li> 
  <li><a href = "" > Kontakt </a></li> 
</ul>

• Heim
• Profil
• Mitteilungen
• Einstellungen
• Kontakt

<ul class="Pillen"> class = "Pillen" >
  <li class = "active" ><a href = "" > Startseite </a></li>  
  <li><a href = "" > Profil </a></li> 
  <li><a href = "" > Nachrichten </a></li> 
  <li><a href = "" > Einstellungen </a></li> 
  <li><a href = "" > Kontakt </a></li> 
</ul>

Seitennummerierung

Ultra einfache und minimalistisch gestaltete Paginierung, inspiriert von Rdio. Der große Block ist kaum zu übersehen, einfach skalierbar und bietet große Klickflächen.

<div class="paginierung"> class = "Paginierung" >
  <ul>
    <li class = "prev disabled" ><a href = "" > ← Zurück </a></li>  
    <li class = "aktiv" ><a href = "" > 1 </a></li>  
    <li><a href = "" > 2 </a></li> 
    <li><a href = "" > 3 </a></li> 
    <li><a href = "" > 4 ​​</a></li> 
    <li><a href = "" > 5 </a></li> 
    <li class = "next" ><a href = "" > Next → </a></li>  
  </ul>
</div>

Grundlegende Warnungen

Einzeilige Meldungen zum Hervorheben des Fehlschlags, möglichen Fehlschlags oder Erfolgs einer Aktion. Besonders nützlich für Formulare.

Nachrichten blockieren

Für Nachrichten, die ein wenig Erklärung erfordern, haben wir Absatzstil-Warnungen. Diese eignen sich perfekt, um längere Fehlermeldungen anzuzeigen, einen Benutzer vor einer anstehenden Aktion zu warnen oder einfach nur Informationen zu präsentieren, um die Seite stärker hervorzuheben.

Modale

Modale – Dialoge oder Lightboxen – eignen sich hervorragend für kontextbezogene Aktionen in Situationen, in denen es wichtig ist, dass der Hintergrundkontext beibehalten wird.

Popovers

Verwenden Sie Popover, um einer Seite subtextuelle Informationen bereitzustellen, ohne das Layout zu beeinflussen.

Bootstrap wurde mit Preboot erstellt , einem Open-Source-Paket mit Mixins und Variablen, das in Verbindung mit Less verwendet wird, einem CSS-Präprozessor für eine schnellere und einfachere Webentwicklung.

Sehen Sie sich an, wie wir Preboot in Bootstrap verwendet haben und wie Sie es nutzen können, wenn Sie Less bei Ihrem nächsten Projekt ausführen möchten.

Wie man es benutzt

Verwenden Sie diese Option, um die Less-Variablen, Mixins und Verschachtelungen von Bootstrap in CSS über Javascript in Ihrem Browser voll auszunutzen.

<link rel="stylesheet/less" type="text/css" href="less/bootstrap.less" media="all" /> rel = "stylesheet/less" type = "text/css" href = "less/bootstrap.less" media = "all" />    
<script type = "text/javascript" src = "js/less-1.0.41.min.js" ></script>  

Fühlen Sie sich nicht in der .js-Lösung? Probieren Sie die Less Mac-App aus oder verwenden Sie Node.js zum Kompilieren, wenn Sie Ihren Code bereitstellen.

Was ist inbegriffen

Hier sind einige der Highlights dessen, was in Twitter Bootstrap als Teil von Bootstrap enthalten ist. Besuchen Sie die Bootstrap-Website oder die Github-Projektseite, um sie herunterzuladen und mehr zu erfahren.

Farbvariablen

Variablen in Less sind perfekt, um Ihr CSS ohne Kopfzerbrechen zu warten und zu aktualisieren. Wenn Sie einen Farbwert oder einen häufig verwendeten Wert ändern möchten, aktualisieren Sie ihn an einer Stelle und fertig.

// Verknüpfungen
@linkColor : #8b59c2;         
@linkColorHover :     abdunkeln ( @linkColor , 10 ); 
// Graue
@schwarz : #000;             
@grayDark :           aufhellen ( @black , 25 %); 
@gray :               aufhellen ( @black , 50 %); 
@grayLight :          aufhellen ( @black , 70 %); 
@grayLighter :        aufhellen ( @black , 90 %); 
@weiß : #fff ;             
// Akzentfarben
@blau : #08b5fb;              
@grün : #46a546 ;             
@rot : #9d261d;               
@gelb : #ffc40d;            
@orange : #f89406;            
@pink : #c3325f;              
@lila : #7a43b6;            
// Grundlinie
@baseline : 20px ;          

Kommentieren

Less bietet neben der normalen CSS- /* ... */Syntax auch einen anderen Kommentarstil.

// Dies ist ein Kommentar
/* Dies ist auch ein Kommentar */

Mischen Sie das Wazoo auf

Mixins sind im Grunde genommen Includes oder Partials für CSS, mit denen Sie einen Codeblock zu einem kombinieren können. Sie eignen sich hervorragend für Eigenschaften mit Präfixen von Anbietern wie box-shadow, browserübergreifende Farbverläufe, Schriftstapel und mehr. Nachfolgend finden Sie ein Beispiel der Mixins, die in Bootstrap enthalten sind.

Schriftstapel

#Schriftart {
  . Kurzschrift ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    Schriftgröße : @size ; _ _ 
    Schriftart - Gewicht : @Gewicht ; 
    Zeilenhöhe : @lineHeight ; _ _ 
  }
  . serifenlos ( @weight : normal , @size : 14px , @lineHeight : 20px ) { _ _     
    Schriftfamilie : " Helvetica Neue " , ​​Helvetica , Arial , serifenlos ; _   
    Schriftgröße : @size ; _ _ 
    Schriftart - Gewicht : @Gewicht ; 
    Zeilenhöhe : @lineHeight ; _ _ 
  }
  . serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    Schriftfamilie : " Georgia " , Times New Roman , Times , serifenlos ; _ _     
    Schriftgröße : @size ; _ _ 
    Schriftart - Gewicht : @Gewicht ; 
    Zeilenhöhe : @lineHeight ; _ _ 
  }
  . monospace ( @weight : normal , @size : 12px , @lineHeight : 20px ) {     
    Schriftfamilie : " Monaco " , Courier New , Monospace ;   
    Schriftgröße : @size ; _ _ 
    Schriftart - Gewicht : @Gewicht ; 
    Zeilenhöhe : @lineHeight ; _ _ 
  }
}

Farbverläufe

#gradient {
  . horizontal ( @startColor : #555, @endColor: #333) { 
    Hintergrundfarbe : @endColor ; _ _ 
    Hintergrund - wiederholen : wiederholen - x ;
    background - image : - khtml - gradient ( linear , left top , right top , from ( @startColor ), to ( @endColor )); // Eroberer   
    background - image : - moz - linear - gradient ( left , @startColor , @endColor ); // FF3.6+    
    Hintergrundbild : - ms - linear - gradient ( left , @startColor , @endColor ) ; _ // IE10    
    background - image : - webkit - gradient ( linear , left top , right top , color - stop ( 0 %, @startColor ), color - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    Hintergrund - Bild : - Webkit - Linear - Farbverlauf ( left , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    background - image : - o - linear - gradient ( left , @startColor , @endColor ); // Oper 11.10    
    - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+  
    filter : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor )); // IE6 & IE7 
    background - image : linear - gradient ( left , @startColor , @endColor ); // Der Standard   
  }
  . vertikal ( @startColor : #555, @endColor: #333) { 
    Hintergrundfarbe : @endColor ; _ _ 
    Hintergrund - wiederholen : wiederholen - x ;
    background - image : - khtml - gradient ( linear , left top , left bottom , from ( @startColor ), to ( @endColor )); // Eroberer   
    Hintergrund - Bild : - moz - linear - Farbverlauf ( @startColor , @endColor ); // FF3.6+   
    background - image : - ms - linear - gradient ( @startColor , @endColor ); // IE10   
    background - image : - webkit - gradient ( linear , left top , left bottom , color - stop ( 0 %, @startColor ), color - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    Hintergrund - Bild : - Webkit - linear - Farbverlauf ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    background - image : - o - linear - gradient ( @startColor , @endColor ); // Oper 11.10   
    - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+  
    filter : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor )); // IE6 & IE7 
    background - image : linear - gradient ( @startColor , @endColor ); // Der Standard  
  }
  . gerichtet ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . vertikal - drei - Farben ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) { 
    ...
  }
}

Betrieb und Netzsystem

Werden Sie fantasievoll und führen Sie etwas Mathematik durch, um flexible und leistungsstarke Mixins wie das untenstehende zu erstellen.

// Griditude
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
// Grid-System
. Behälter {
  Breite : @siteWidth ; 
  Rand : 0 auto ;  
  . Klarfix ();
}
. Spalten ( @columnSpan : 1 ) {  
  Anzeige : Inline ; 
  Schwimmer : links ;
  Breite : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  Rand - links : @gridGutterWidth ; 
  &: erstes - Kind {
    Rand - links : 0 ; 
  }
}
. offset ( @columnOffset : 1 ) {  
  Rand - links : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! wichtig ;          
}