Hol dir die harten Fakten über die wichtigsten Teile von Bootstraps Infrastruktur, inklusive unserem Ansatz für bessere, schnellere, stabilere Web-Entwicklung. Show
HTML5-DoctypeBootstrap benutzt bestimmte HTML-Elemente und CSS-Eigenschaften, die die Verwendung des HTML5-Doctypes erforderlich machen. Füge diesen am Anfang von all deinen Projekten ein.
Mobile-First-AnsatzMit Bootstrap 2 haben wir optionale Stile für die wichtigsten Aspekte des Frameworks hinzugefügt, die Projekte für mobile Geräte bereit machten. Mit Bootstrap 3 haben wir das gesamte Projekt umgeschrieben, damit es sich von Anfang an gut mit mobilen Geräten versteht. Anstatt optionale mobile Stile zusätzlich hinzuzufügen, sind diese einfach direkt eingebaut. Genauer gesagt: Bootstrap ist ein Mobile-First-Projekt. Stile, die zunächst für kleine Bildschirme geschrieben wurden und sich dann den größeren anpassen, findest du in der gesamten Bibliothek immer wieder, anstatt in separaten Dateien. Damit deine Seite auf mobilen Geräten vernünftig angezeigt wird und gezoomt werden kann, ergänze das Viewport-Meta-Tag in deinem
Du kannst Zooming auf mobilen Geräten deaktivieren, indem du
Typografie und LinksBootstrap legt globale Grundregeln für die Anzeige von Elementen, Typografie und Links fest. Ganz genau:
Diese Stile findest du in der Datei Normalize.cssDamit deine Seite in allen Browsern möglichst gleich aussieht, verwenden wir Normalize.css, ein Projekt von Nicolas Gallagher und Jonathan Neal. ContainerBootstrap benötigt ein Element, in dem Seiteninhalte und unser Raster-System verpackt sind. Du kannst dir einen von zwei Containern zur Verwendung in deinem Projekt aussuchen. Beachte, dass aufgrund von Verwende
Verwende
Bootstrap beinhaltet ein anpassungsfähiges, Mobile-First-basiertes, fließendes Rastersystem, das bis zu 12 Spalten über verschiedene Geräte- oder Viewport-Größen skaliert. Dabei sind vordefinierte Klassen für einfache Layout-Optionen, sowie umfangreiche Mixins für die Erstellung von semantischeren Layouts. EinleitungRastersysteme werden dafür verwendet, Seitenlayouts mit einer Reihe von Zeilen und Spalten zu erstellen, die deine Inhalte beherbergen. Hier steht, wie das Bootstrap-Rastersystem funktioniert:
Sieh dir die Beispiele an, um diese Prinzipien in deinen Code einzubauen. Wir verwenden die folgenden Media-Queries in unseren Less-Dateien, um die grundlegenden Umbruchpunkte in unserem Rastersystem zu erstellen.
Manchmal, wenn bestimmte Stile nur auf einigen
Geräten Sinn machen, erweitern wir diese Media-Queries mit einer
Raster-OptionenSchau dir in einer praktischen Tabelle an, wie die Aspekte von Bootstraps Rastersystem auf den verschiedenen Geräten funktionieren.
Beispiel: Übereinander, nebeneinanderDu brauchst nur ein paar .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-4 .col-md-4 .col-md-4
Beispiel: Fließender ContainerEin auf festen Breiten basiertes Raster-Layout kannst du jederzeit in ein Layout über die ganze Breite der Seite verwandeln, indem du den äußeren
Beispiel: Mobil und Desktop-PCDu willst deine Spalten auf kleineren Geräten nicht einfach nur übereinander haben? Verwende die extra-kleinen und mittleren Geräte-Raster-Klassen, indem du .col-xs-12 .col-md-8 .col-xs-6 .col-md-4 .col-xs-6 .col-md-4 .col-xs-6 .col-md-4 .col-xs-6 .col-md-4
Beispiel: Mobil, Tablet und Desktop-PCBau das vorherige Beispiel weiter aus, indem du noch dynamischere und vielfältigere Layouts mit den Tablet-Klassen .col-xs-12 .col-sm-6 .col-md-8 .col-xs-6 .col-md-4 .col-xs-6 .col-sm-4 .col-xs-6 .col-sm-4 .col-xs-6 .col-sm-4
Beispiel: SpaltenumbruchFalls mehr als 12 Spalten in einer einzigen Zeile platziert werden, wird jede Gruppe mit Extra-Spalten als eine Einheit in eine neue Zeile rutschen. .col-xs-9 .col-xs-4 .col-xs-6
Responsive Spalten-ResetsMit den vier Gliedern unseres
Raster-Systems ist es fast unvermeidbar, dass du auf Probleme stößt, wenn bei bestimmten Umbruchpunkten deine Spalten nicht richtig positioniert werden, da eine höher ist als die andere. Um dies zu beheben, kannst du eine Kombination aus .col-xs-6 .col-sm-3 .col-xs-6 .col-sm-3 .col-xs-6 .col-sm-3 .col-xs-6 .col-sm-3
Außerdem kann es sein, dass du Spalten-Abrückungen, -Pushes und -Pulls zurücksetzen musst. Schau es dir live und in Farbe im Raster-Beispiel an.
Freiräume entfernenMit der Klasse .col-xs-12 .col-md-8 .col-xs-6 .col-md-4 .col-xs-6 .col-md-4 .col-xs-6 .col-md-4 .col-xs-6 .col-md-4
Spalten abrückenDu kannst mit Hilfe der .col-md-4 .col-md-4 .col-md-offset-4 .col-md-3 .col-md-offset-3 .col-md-3 .col-md-offset-3 .col-md-6 .col-md-offset-3
Du kannst Offsets von niedrigeren Grid-Bereichen mit den Klassen
Spalten verschachtelnUm deinem Inhalt eine weitere Raster-Ebene hinzuzufügen, füge einfach eine neue Ebene 1: .col-sm-9 Ebene 2: .col-xs-8 .col-sm-6 Ebene 2: .col-xs-4 .col-sm-6
Spalten umordnenÄndere die Reihenfolge von Raster-Spalten mit den Klassen .col-md-9 .col-md-push-3 .col-md-3 .col-md-pull-9
Less Mixins und VariablenNeben den vorgefertigten Rasterklassen, die du verwenden kannst, um schnell Layouts zusammenzustellen, enthält Bootstrap auch Less-Variablen und -Mixins, mit denen du deine eigenen Layouts mit semantischer Namensgebung generieren kannst. VariablenVariablen bestimmen die Anzahl der Spalten, die Breite des Abstands zwischen Spalten und den Punkt, an dem die Spalten anfangen, zu floaten und so horizontal werden. Wir verwenden diese, um die vordefinierten Rasterklassen oben zu erstellen, sowie für die unten beschriebenen Mixins.
MixinsMixins helfen dir zusammen mit den Raster-Variablen dabei, semantisches CSS für individuelle Raster-Spalten zu erstellen.
Beispiel-VerwendungDu kannst Variablen mit deinen eigenen Werten anpassen oder die Mixins einfach mit den Standard-Werten verwenden. Hier siehst du ein Beispiel für die Erstellung einer zweispaltigen Layouts mit einer Lücke zwischen den Spalten.
ÜberschriftenAlle HTML-Überschriften,
Platziere untergeordneten Text mit einem generischen
FließtextBootstraps globaler Standardwert für die Schriftgröße, 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 at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
EinführungstextHebe einen Absatz hervor, indem du Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
Gemacht mit LessDie typografischen Größen werden mit Hilfe von
zwei Less-Variablen in variables.less berechnet: Inline-Text-ElementeMarkierter TextVerwende das Tag Du kannst das Mark-Tag verwenden, um Text hervorzuheben.
Gelöschter TextUm gelöschte Textblöcke anzuzeigen kannst du das Tag Diese Textzeile soll als gelöschter Text angezeigt werden.
Durchgestrichener TextUm nicht mehr relevante Textblöcke anzuzeigen, kannst du
das Tag Diese Textzeile soll als nicht mehr korrekt behandelt werden.
Eingefügter TextUm Ergänzungen zum Dokument zu markieren kannst du das Tag Diese Textzeile soll als Ergänzung zum Dokument behandelt werden.
Unterstrichener TextUm Text zu unterstreichen kannst du das Tag Diese Textzeile wird unterstrichen angezeigt.
Verwende die Standard-HTML-Tags zur unterschiedlichen Gewichtung von Text mit leichten Stilen. Kleiner TextUm Text-Zeilen und -Blöcke in ihrer Bedeutung herabzusetzen, verwende das Tag Du kannst alternativ ein Inline-Element mit Diese Textzeile steht im Kleingedruckten.
FettUm einen Textschnipsel mit einer dickeren Schriftstärke (font-weight) hervorzuheben. Der folgende Schnipsel wird als fetter Text angezeigt.
KursivUm einen Textschnipsel mit Kursivdruck hervorzuheben. Der folgende Schnipsel wird als Kursiv angezeigt.
Alternative ElementeDu kannst gerne die Elemente AusrichtungsklassenRichte Text ganz einfach mit den folgenden Klassen neu aus. Links ausgerichteter Text. Zentrierter Text. Rechts ausgerichteter Text. Blocksatz-Text. Text ohne Umbruch.
UmwandlungsklassenWandle Text in Komponenten mit Klassen für Groß-/Kleinschreibung um. Kleingeschriebener Text. Großgeschriebener Text. Am Wortanfang großgeschriebener Text.
AbkürzungenGestaltete
Umsetzung des HTML-Elements Einfache AbkürzungWenn du die ausgeschriebene Version
der Abkürzung anzeigen möchtest, wenn der Mauszeiger darüber ist, musst du das Eine Abkürzung des Wortes Attribut ist Attr..
InitialenFüge HTML ist das Beste, was es seit geschnittenem Brot gegeben hat.
AdressenZeige Kontakt-Informationen für die nächste übergeordnete Person oder ein gesamtes Angebot an. Denk daran, die Zeilen mit 1355 Market Street, Suite 900 San Francisco, CA 94103 Tel.: (012) 345678-9 Vollständiger Name
BlockzitateUm Inhaltsblöcke aus einer anderen Quelle in deinem Dokument zu zitieren. Standard-BlockzitatUmschließe irgendwelches HTML als Zitat mit
Blockzitat-OptionenGestaltung und Inhalt verändert sich, wenn du einige einfache Varianten des Standard- Eine Quelle benennenFüge einen
Alternative AnsichtenFüge
ListenUnsortiertEine Liste von Objekten, bei denen die Reihenfolge explizit nicht von Bedeutung ist.
SortiertEine Liste von Objekten, bei denen die Reihenfolge explizit von Bedeutung ist.
Ohne GestaltungEntferne die Standard-Gestaltung (
InlinePlatziere alle Listen-Objekte in einer Zeile mit
BeschreibungEine Liste von Begriffen zusammen mit ihren Beschreibungen. Beschreibungs-ListenEine Liste mit Beschreibungen ist perfekt, um Begriffe zu erläutern.EuismodVestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.Donec id elit non mi porta gravida at eget metus.Malesuada portaEtiam porta sem malesuada magna mollis euismod.
Horizontale BeschreibungDu kannst die Begriffe und Beschreibungen in einer Beschreibungs-Listen Eine Liste mit Beschreibungen ist perfekt, um Begriffe zu erläutern.EuismodVestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.Donec id elit non mi porta gravida at eget metus.Malesuada portaEtiam porta sem malesuada magna mollis euismod.Felis euismod semper eget laciniaFusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Automatische KürzungIn horizontalen Beschreibungs-Listen werden Begriffe mit InlineUm Code in Fließtext einzubinden, markiere diesen mit Zum Beispiel sollte
BenutzereingabenFür Eingaben, die normalerweise mit der Tastatur gemacht werden, kannst du Um das Verzeichnis zu wechseln, gib cd und dann den Namen eines Verzeichnisses ein.
Code-BlockNutze <p>Ein bisschen Beispieltext...</p>
Du kannst außerdem optional die Klasse VariablenVerwende das Tag y = mx + b
Beispiel-AusgabeUm Text als Beispiel-Ausgabe eines Programms zu markieren, verwende das Tag Dieser Text soll als Beispiel-Ausgabe eines Computer-Programms behandelt werden.
Einfaches BeispielFür ein paar grundlegende Stile—leichte Abstände und nur horizontale Unterteilungen—füge einfach die Grundklasse Optionale Tabellen-Beschriftung.
Gestreifte ZeilenVerwende Browser-KompatibilitätGestreifte Tabellen werden mit dem CSS-Selektor
Tabelle mit RahmenErgänze
Hover-ZeilenErgänze
Komprimierte TabelleErgänze
Kontext-VariantenVerwende Kontext-Klassen, um Zeilen oder einzelne Zellen einer Tabelle farbig zu markieren.
Bedeutungen an assistive Technologien vermittelnDie Verwendung von Farbe, um eine Bedeutung zu einem Button hinzuzufügen, erzeugt nur einen visuellen Hinweis, der Nutzern von assistiven Technologien wie Screenreadern nicht vermittelt werden kann. Stell sicher, dass durch Farbe bezeichnete Informationen entweder durch den Inhalt selbst (den sichtbaren Text des Buttons) offensichtlich
sind oder über alternative Wege eingebunden sind, wie z.B. zusätzlicher Text, der mit der Klasse Responsive TabellenErstelle anpassungsfähige Tabellen, indem du eine Vertikale KürzungResponsive Tabellen verwenden Firefox und FieldsetsFirefox hält einige seltsame Stile für Fieldsets parat, bei denen
Lies für mehr Informationen diese Antwort auf Stack Overflow.
Einfaches BeispielEinzelne Formular-Felder erhalten automatisch einige globale Stile. Alle text-basierten
Vermische niemals Formular-Gruppen mit Input-GruppenDu solltest Formular-Gruppen ( Formular in einer ZeileFüge Benötigt evtl. manuelle BreitenEingabefelder und Auswahlfelder sind in Bootstrap standardmäßig mit Füge immer Labels hinzuScreenreader werden Probleme mit deinen Formularen haben, wenn du nicht für jedes Feld ein Label einfügst. Du kannst solche Labels für diese Inline-Formulare verbergen, indem du die
Horizontales FormularVerwende Bootstraps vordefinierte Raster-Klassen, um Labels und mehrere Formularfelder (
Verfügbare FelderBeispiele von Standard-Formular-Feldern, die von Bootstrap unterstüzt werden. InputsDas häufigste Formularfeld, text-basierte Eingabefelder. Bietet Unterstützung für alle HTML5-Typen: Typ-Benennung erforderlichEingabefelder werden nur vollständig gestaltet, wenn ihr
Text-FlächeFormular-Feld, in das mehrere Zeilen Text eingegeben werden können. Veränder das
OptionsfelderFelder zum Ankreuzen (checkbox) sind dazu da, eine oder mehr Optionen aus einer Liste auszuwählen, während man mit runden Optionsfeldern (radio) eine von mehrere Optionen auswählt. Deaktivierte Checkboxes und Radios werden unterstützt, aber um einen "not-allowed"-Cursor anzuzeigen, wenn der Mauszeiger über dem Standard (übereinander)
Optionsfelder in einer ZeileVerwende
Auswahlfelder ohne LabeltextFalls du keinen Text im
AuswahlmenüsBeachte, dass viele eingebaute Auswahlmenüs, nämlich in Safari und Chrome, abgerundete Ecken haben, die über die
In
Statisches FeldWenn du puren Text in einem Formular platzieren
willst, kannst du die Klasse
Fokus-AnsichtWir entfernen die Standard-Umrahmung ( Demonstrative |
Extra-kleine Geräte Smartphones (<768px) | Kleine Geräte Tablets (≥768px) | Mittlere Geräte Desktop-PCs (≥992px) | Große Geräte Desktop-PCs (≥1200px) | |
---|---|---|---|---|
.visible-xs-* | Sichtbar | Verborgen | Verborgen | Verborgen |
.visible-sm-* | Verborgen | Sichtbar | Verborgen | Verborgen |
.visible-md-* | Verborgen | Verborgen | Sichtbar | Verborgen |
.visible-lg-* | Verborgen | Verborgen | Verborgen | Sichtbar |
.hidden-xs | Verborgen | Sichtbar | Sichtbar | Sichtbar |
.hidden-sm | Sichtbar | Verborgen | Sichtbar | Sichtbar |
.hidden-md | Sichtbar | Sichtbar | Verborgen | Sichtbar |
.hidden-lg | Sichtbar | Sichtbar | Sichtbar | Verborgen |
Ab v3.2.0 gibt es .visible-*-*
-Klassen für jeden Umbruchpunkt in drei Variationen, eine für jeden der unten aufgeführten Werte der CSS-Eigenschaft display
.
Gruppe von Klassen | CSS display |
---|---|
.visible-*-block | display: block;
|
.visible-*-inline | display: inline;
|
.visible-*-inline-block | display: inline-block;
|
Die verfügbaren .visible-*-*
-Klassen für sehr kleine (xs
) Bilschirme sind also zum Beispiel: .visible-xs-block
, .visible-xs-inline
und .visible-xs-inline-block
.
Die Klassen .visible-xs
, .visible-sm
, .visible-md
und .visible-lg
bleiben weiterhin bestehen, sind aber ab v3.2.0 als veraltet markiert. Sie entsprechen in etwa .visible-*-block
, abgesehen von besonderen Ergänzungen für Elemente rund um <table>
.
Klassen für den Druck
So ähnlich wie die normalen responsiven Klassen gibt es auch noch Klassen für das Ein- und Ausblenden beim Druck.
Klassen | Browser | Druck |
---|---|---|
.visible-print-block .visible-print-inline .visible-print-inline-block | Verborgen | Sichtbar |
.hidden-print | Sichtbar | Verborgen |
Die Klasse .visible-print
bleibt weiterhin bestehen, ist aber ab v3.2.0 als veraltet markiert. Sie entspricht in etwa .visible-print-block
, abgesehen von besonderen Ergänzungen für Elemente rund um <table>
.
Test-Ansicht
Verändere die Größe deines Browser-Fensters oder lade diese Seite auf verschiedenen Geräten, um die responsiven Hilfsmittel zu testen.
Sichtbar auf...
Grüne Häkchen zeigen an, dass das Element in deinem aktuellen Anzeigefenster sichtbar ist.
Extra-klein ✔ Sichtbar auf X-klein
Klein ✔ Sichtbar auf Klein
Mittel ✔ Sichtbar auf Mittel
Groß ✔ Sichtbar auf Groß
Extra-klein und klein ✔ Sichtbar auf X-klein und Klein
Mittel und groß ✔ Sichtbar auf Mittel und Groß
Extra-klein und mittel ✔ Sichtbar auf X-klein und Mittel
Klein und groß ✔ Sichtbar auf Klein und Groß
Extra-klein und groß ✔ Sichtbar auf X-klein und Groß
Klein und mittel ✔ Sichtbar auf Klein und Mittel
Verborgen auf...
Hier zeigen die grünen Häkchen an, dass das Element in deinem Anzeigefenster verborgen ist.
Bootstraps CSS wird mit Less gemacht, einem Präprozessor mit zusätzlichen Funktionen wie Variablen, Mixins und Funktionen für das Kompilieren von CSS. Wer statt unseren kompilierten CSS-Dateien lieber die Quell-Less-Dateien verwendet, kann die zahlreichen Variablen und Mixins nutzen, die wir im gesamten Framework einsetzen.
Raster-Variablen und -Mixins sind im Abschnitt über das Rastersystem beschrieben.
Bootstrap kompilieren
Bootstrap kann auf mindestens zwei Arten genutzt werden: mit dem kompilierten CSS oder mit den ursprünglichen Less-Dateien. Um die Less-Dateien zu kompilieren, lies unter Los geht's! nach, wie du deine Entwicklungsumgebung für die notwendigen Befehle einrichten kannst.
Andere, dritte Kompilierer funktionieren vielleicht mit Bootstrap, werden aber von unserem Hauptteam nicht unterstützt.
Variablen
Variablen werden im gesamten Projekt immer wieder verwendet, um häufig verwendete Werte wie Farben, Abstände, Größen oder Schriften zu zentralisieren und zu teilen. Eine gesamte Übersicht über alle Variablen und ihre Funktionen findest du in der englischsprachigen Dokumentation im Customizer.
Farben
Benutze ganz einfach zwei Farbschemas: Graustufen und Semantik. Graustufen bieten einfachen Zugriff auf häufig verwendete Abstufungen von schwarz, während die Semantik verschiedene Farben mit bedeutsamem Kontextbezug enthält.
@gray-darker: lighten(#000, 13.5%); // #222
@gray-dark: lighten(#000, 20%); // #333
@gray: lighten(#000, 33.5%); // #555
@gray-light: lighten(#000, 46.7%); // #777
@gray-lighter: lighten(#000, 93.5%); // #eee
@brand-primary: darken(#428bca, 6.5%); // #337ab7
@brand-success: #5cb85c;
@brand-info: #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger: #d9534f;
Verwende diese Farbvariablen so wie sie sind oder weise sie wiederum anderen, bedeutsameren Variablen in deinem Projekt zu.
// Verwendung wie sie sind
.masthead {
background-color: @brand-primary;
}
// Variablen neu zuweisen in Less
@alert-message-background: @brand-info;
.alert {
background-color: @alert-message-background;
}
Grundgerüst
Eine Reihe von Variablen, um schnell wichtige Elemente im Aufbau deiner Seite zu verändern.
// Grundgerüst
@body-bg: #fff; // Seitenhintergrund
@text-color: @black-50; // Fließtextfarbe
Links
Gestalte die Farbe deiner Links um, indem du nur einen Wert veränderst.
// Variablen
@link-color: @brand-primary;
@link-hover-color: darken(@link-color, 15%);
// Verwendung
a {
color: @link-color;
text-decoration: none;
&:hover {
color: @link-hover-color;
text-decoration: underline;
}
}
Beachte, dass @link-hover-color
eine Funktion verwendet (ein anderes tolles Werkzeug in Less), die automagisch die richtige Hover-Farbe für Links generiert. Du kannst darken
, lighten
, saturate
und desaturate
verwenden.
Typografie
Lege ganz einfach Schriftart, Textgröße, Durchschuss und vieles mehr mit einigen wenigen Variablen fest. Bootstrap verwendet diese ebenfalls, um einfache typografische Mixins bereitzustellen.
@font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif: Georgia, "Times New Roman", Times, serif;
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base: @font-family-sans-serif;
@font-size-base: 14px;
@font-size-large: ceil((@font-size-base * 1.25)); // ~18px
@font-size-small: ceil((@font-size-base * 0.85)); // ~12px
@font-size-h2: floor((@font-size-base * 2.6)); // ~36px
@font-size-h2: floor((@font-size-base * 2.15)); // ~30px
@font-size-h3: ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4: ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5: @font-size-base;
@font-size-h6: ceil((@font-size-base * 0.85)); // ~12px
@line-height-base: 1.428571429; // 20/14
@line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px
@headings-font-family: inherit;
@headings-font-weight: 500;
@headings-line-height: 1.1;
@headings-color: inherit;
Icons
Zwei Variablen entscheiden, wo deine Icons sich befinden und wie ihre Dateien heißen.
@icon-font-path: "/fonts/";
@icon-font-name: "glyphicons-halflings-regular";
Komponenten
Komponenten überall in Bootstrap verwenden diese Standard-Variablen, um einige übliche Werte festzulegen. Hier sind einige der am häufigsten genutzten.
@padding-base-vertical: 6px;
@padding-base-horizontal: 12px;
@padding-large-vertical: 10px;
@padding-large-horizontal: 16px;
@padding-small-vertical: 5px;
@padding-small-horizontal: 10px;
@padding-xs-vertical: 1px;
@padding-xs-horizontal: 5px;
@line-height-large: 1.33;
@line-height-small: 1.5;
@border-radius-base: 4px;
@border-radius-large: 6px;
@border-radius-small: 3px;
@component-active-color: #fff;
@component-active-bg: @brand-primary;
@caret-width-base: 4px;
@caret-width-large: 5px;
Hersteller-Mixins
Hersteller-Mixins helfen dir dabei, bestimmte CSS-Eigenschaften umzusetzen, bei denen für einige Browser herstellereigene Präfixe erforderlich sind.
Box-sizing
Definiere das box model deiner Site oder Anwendung mit einem einzigen Mixin. Mehr Informationen findest du in diesem hilfreichen Artikel von Mozilla.
Dieses Mixin ist ab v3.2.0 als veraltet markiert und wurde durch Autoprefixer ersetzt. Um Rückwärtskompatibilität zu bewahren, wird Bootstrap das Mixin bis Bootstrap v4 weiterhin intern verwenden.
.box-sizing(@box-model) {
-webkit-box-sizing: @box-model; // Safari <= 5
-moz-box-sizing: @box-model; // Firefox <= 19
box-sizing: @box-model;
}
Abgerundete Ecken
Inzwischen unterstütztn alle modernen
Browser die border-radius
-Eigenschaft ohne besondere Präfixe. Es gibt daher kein .border-radius()
-Mixin aber Bootstrap bietet dir einige Hilfs-Mixins, mit denen du schnell und einfach zwei Ecken auf einer Seite eines Objekts abrunden kannst.
.border-top-radius(@radius) {
border-top-right-radius: @radius;
border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
border-bottom-right-radius: @radius;
border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
border-bottom-right-radius: @radius;
border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
border-bottom-left-radius: @radius;
border-top-left-radius: @radius;
}
Box (Drop) shadows
Falls deine Zielgruppe bzw. dein Publikum die neuesten und besten Browser und Geräte verwendet, reicht es, einfach die Eigenschaft box-shadow
ohne Präfixe zu verwenden. Falls du allerdings
ältere Android- (vor v4) und iOS-Geräte (vor iOS 5) unterstützen willst, kannst du dieses als veraltet markierte Mixin verwenden, um das benötigte -webkit
-Präfix hinzuzufügen.
Das Mixin ist seit v3.1.0 als veraltet markiert, da Bootstrap die älteren Plattformen ohne Unterstützung für die Standard-Eigenschaft ohne Präfix nicht unterstützt. Um Rückwärtskompatibilität beizubehalten, wird das Mixin bis Bootstrap v4 weiterhin verfügbar sein und genutzt werden.
Am besten verwendest du rgba()
-Farben in deinen Box-Shadows, damit diese so nahtlos wie möglich in deine Hintergründe übergehen.
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
-webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
box-shadow: @shadow;
}
Übergänge
Mehrere Mixins für Flexibilität. Leg alle Übergangsdetails mit einem fest oder definiere eine separate Verzögerung und Länge, wie es für dich am besten passt.
Dieses Mixin ist ab v3.2.0 als veraltet markiert und wurde durch Autoprefixer ersetzt. Um Rückwärtskompatibilität zu bewahren, wird Bootstrap das Mixin bis Bootstrap v4 weiterhin intern verwenden.
.transition(@transition) {
-webkit-transition: @transition;
transition: @transition;
}
.transition-property(@transition-property) {
-webkit-transition-property: @transition-property;
transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
-webkit-transition-delay: @transition-delay;
transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
-webkit-transition-duration: @transition-duration;
transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
-webkit-transition-timing-function: @timing-function;
transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
-webkit-transition: -webkit-transform @transition;
-moz-transition: -moz-transform @transition;
-o-transition: -o-transform @transition;
transition: transform @transition;
}
Transformationen
Drehe, skaliere, bewege oder kippe irgendein object.
Dieses Mixin ist ab v3.2.0 als veraltet markiert und wurde durch Autoprefixer ersetzt. Um Rückwärtskompatibilität zu bewahren, wird Bootstrap das Mixin bis Bootstrap v4 weiterhin intern verwenden.
.rotate(@degrees) {
-webkit-transform: rotate(@degrees);
-ms-transform: rotate(@degrees); // nur IE9
transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
-webkit-transform: scale(@ratio, @ratio-y);
-ms-transform: scale(@ratio, @ratio-y); // nur IE9
transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
-webkit-transform: translate(@x, @y);
-ms-transform: translate(@x, @y); // nur IE9
transform: translate(@x, @y);
}
.skew(@x; @y) {
-webkit-transform: skew(@x, @y);
-ms-transform: skewX(@x) skewY(@y); // Siehe https://github.com/twbs/bootstrap/issues/4885; IE9+
transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
-webkit-transform: translate3d(@x, @y, @z);
transform: translate3d(@x, @y, @z);
}
.rotateX(@degrees) {
-webkit-transform: rotateX(@degrees);
-ms-transform: rotateX(@degrees); // nur IE9
transform: rotateX(@degrees);
}
.rotateY(@degrees) {
-webkit-transform: rotateY(@degrees);
-ms-transform: rotateY(@degrees); // nur IE9
transform: rotateY(@degrees);
}
.perspective(@perspective) {
-webkit-perspective: @perspective;
-moz-perspective: @perspective;
perspective: @perspective;
}
.perspective-origin(@perspective) {
-webkit-perspective-origin: @perspective;
-moz-perspective-origin: @perspective;
perspective-origin: @perspective;
}
.transform-origin(@origin) {
-webkit-transform-origin: @origin;
-moz-transform-origin: @origin;
-ms-transform-origin: @origin; // nur IE9
transform-origin: @origin;
}
Animationen
Ein einzelnes Mixin für alle CSS3-Animations-Eigenschaften in einem CSS-Block und weitere Mixins für einzelne Eigenschaften.
Dieses Mixin ist ab v3.2.0 als veraltet markiert und wurde durch Autoprefixer ersetzt. Um Rückwärtskompatibilität zu bewahren, wird Bootstrap das Mixin bis Bootstrap v4 weiterhin intern verwenden.
.animation(@animation) {
-webkit-animation: @animation;
animation: @animation;
}
.animation-name(@name) {
-webkit-animation-name: @name;
animation-name: @name;
}
.animation-duration(@duration) {
-webkit-animation-duration: @duration;
animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
-webkit-animation-timing-function: @timing-function;
animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
-webkit-animation-delay: @delay;
animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
-webkit-animation-iteration-count: @iteration-count;
animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
-webkit-animation-direction: @direction;
animation-direction: @direction;
}
Undurchsichtigkeit / Trübung
Lege die Trübung für alle Browser fest und stelle eine filter
-Notlösung für
IE8 bereit.
.opacity(@opacity) {
opacity: @opacity;
// IE8-filter
@opacity-ie: (@opacity * 100);
filter: ~"alpha(opacity=@{opacity-ie})";
}
Platzhalter-Text
Versehe Formularfelder mit Kontext in jedem Feld.
.placeholder(@color: @input-color-placeholder) {
&::-moz-placeholder { color: @color; } // Firefox
&:-ms-input-placeholder { color: @color; } // Internet Explorer 10+
&::-webkit-input-placeholder { color: @color; } // Safari und Chrome
}
Spalten
Generiere Spalten über CSS in einem einzigen Element.
.content-columns(@width; @count; @gap) {
-webkit-column-width: @width;
-moz-column-width: @width;
column-width: @width;
-webkit-column-count: @count;
-moz-column-count: @count;
column-count: @count;
-webkit-column-gap: @gap;
-moz-column-gap: @gap;
column-gap: @gap;
}
Verlaufsfarben
Verwandel zwei Farben ohne Probleme in einen Hintergrundverlauf. Geh einen Schritt weiter und lege eine Richtung, drei Farben oder einen radialen Verlauf fest. Mit einem einzelnen Mixin kriegst du alle Eigenschaften mit Präfix, die du brauchst.
#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);
Du kannst auch den Winkel eines normalen, linearen Zweifarbverlaufs festlegen:
#gradient > .directional(#333; #000; 45deg);
Fallst du einen Verlauf mit Streifen brauchst, ist das auch kein Problem. Leg einfach eine einzelne Farbe fest und wir legen einen durchscheinenden weißen Streifen darüber.
#gradient > .striped(#333; 45deg);
Lass die Korken knallen und nimm stattdessen drei Farben. Lege die erste Farbe, die zweite Farbe, den Farbstopp der zweiten Farbe (ein Prozentwert wie 25%) und die dritte Farbe mit diesen Mixins fest:
#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);
Aufgepasst! Wenn du einen Farbverlauf einmal entfernen musst, denk daran IE-spezifische filter
zu entfernen, die du evtl. hinzugefügt hast. Du kannst das mit dem .reset-filter()
-Mixin zusammen mit background-image: none;
bewerkstelligen.
Hilfsmittel-Mixins
Hilfsmittel-Mixins sind Mixins, die verschiedene CSS-Eigenschaften ohne eigentlichen Bezug kombinieren, um einen bestimmten Effekt oder ein bestimmtes Ziel zu erreichen.
Clearfix
Ergänze nicht jedes Mal class="clearfix"
bei einem Element und füge stattdessen das .clearfix()
-Mixin da ein, wo es angebracht ist. Verwendet das Micro-Clearfix von Nicolas
Gallagher.
// Mixin
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Verwendung
.container {
.clearfix();
}
Horizontale Zentrierung
Zentriere ein Element ohne Umstände in seinem übergeordneten Element. Die (maximale) Breite (width
oder max-width
) des Elements muss festgelegt sein.
// Mixin
.center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
// Verwendung
.container {
width: 940px;
.center-block();
}
Größen-Helferchen
Definiere die Dimensionen eines Objekt auf eine einfachere Weise.
// Mixins
.size(@width; @height) {
width: @width;
height: @height;
}
.square(@size) {
.size(@size; @size);
}
// Verwendung
.image { .size(400px; 300px); }
.avatar { .square(48px); }
Textfläche mit veränderbarer Größe
Konfiguriere die Optionen zur Größenveränderung einer Textfläche oder eines anderen Elements. Der Standard ist das normale Browser-Verhalten (both
).
.resizable(@direction: both) {
// Optionen: horizontal, vertical, both
resize: @direction;
// Safari-Fix
overflow: auto;
}
Text kürzen
Text kannst du ganz leicht mit Auslassungspunkten und einem einzigen Mixin kürzen lassen. Das Element muss dazu block
oder inline-block
sein.
// Mixin
.text-overflow() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// Verwendung
.branch-name {
display: inline-block;
max-width: 200px;
.text-overflow();
}
Retina-Bilder
Lege zwei Pfade zu Bildern und die @1x-Bild-Dimensionen fest und Bootstrap fügt einen @2x-Media-Query hinzu. Falls du sehr viele Bilder auf diese Weise anzeigen willst, überleg dir, dein CSS für Retina-Bilder lieber manuell in einen einzelnen großen Media-Query zu schreiben.
.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
background-image: url("@{file-1x}");
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
background-image: url("@{file-2x}");
background-size: @width-1x @height-1x;
}
}
// Verwendung
.jumbotron {
.img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}
Während Bootstrap auf Less-Basis erstellt wurde, hat es auch einen offiziellen Sass-Port. Wir verwalten diesen in einem separaten GitHub-Repository und regeln Updates über ein Konversionsskript.
Was zur Verfügung steht
Da der Sass-Port ein separates Repo hat und auf ein etwas anderes Publikum zugeschnitten ist, enthält das Projekt sehr viele andere Dateien als das Haupt-Bootstrap-Projekt. Das stellt sicher, dass der Sass-Port kompatibel mit so vielen Sass-basierten Systemen wie möglich ist.
Pfad | Beschreibung |
---|---|
lib/ | Code für Ruby-Gem (Sass-Konfiguration, Rails- und Compass-Integrationen) |
tasks/ | Konversionsskripte (verwandeln unser Less in Sass) |
test/ | Kompilierungstests |
templates/ | Compass-Paket-Manifest |
vendor/assets/ | Sass-, JavaScript- und Schrift-Dateien |
Rakefile | Interne Aufgaben wie rake und convert |
Schau im GitHub-Repository des Sass-Ports vorbei, um diese Dateien in Aktion zu sehen.
Installation
Für Informationen über die Installation und Verwendung von Bootstrap für Sass solltest du die README-Datei im GitHub-Repository lesen. Diese ist die aktuellste Quelle und beinhaltet Informationen für die Verwendung mit Rails, Compass und normalen Sass-Projekten.
Bootstrap für Sass