Wenn Sie sich nur das Dropdown-Menü ansehen, finden Sie hier den erforderlichen HTML-Code. Sie müssen den Auslöser des Dropdown-Menüs und das Dropdown-Menü innerhalb .dropdownvon oder einem anderen Element, das deklariert, umschließen position: relative;. Dann erstellen Sie einfach das Menü.
<div class = "Dropdown" >
<!-- Link oder Schaltfläche zum Umschalten des Dropdown-Menüs -->
<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >
Richten Sie Menüs rechts aus und fügen Sie zusätzliche Dropdown-Ebenen hinzu.
Ausrichten der Menüs
Fügen Sie .pull-rightzu a .dropdown-menuhinzu, um das Dropdown-Menü rechts auszurichten.
<ul class = "dropdown-menu pull-right" role = "menu" aria-labelledby = "dLabel" >
...
</ul>
Untermenüs auf Dropdowns
Fügen Sie eine zusätzliche Ebene von Dropdown-Menüs hinzu, die wie die von OS X beim Hover erscheinen, mit einigen einfachen Markup-Ergänzungen. Fügen Sie .dropdown-submenubeliebige liin einem vorhandenen Dropdown-Menü für automatisches Styling hinzu.
Zwei grundlegende Optionen, zusammen mit zwei spezifischeren Variationen.
Einzelne Schaltflächengruppe
Umschließen Sie eine Reihe von Schaltflächen mit .btnin .btn-group.
<div class = "btn-Gruppe" >
<button class = "btn" > 1 </button>
<button class = "btn" > 2 </button>
<button class = "btn" > 3 </button>
</div>
Mehrere Schaltflächengruppen
Kombinieren Sie Sätze von <div class="btn-group">zu einem <div class="btn-toolbar">für komplexere Komponenten.
<div class = "btn-toolbar" >
<div class = "btn-Gruppe" >
...
</div>
</div>
Vertikale Schaltflächengruppen
Lassen Sie eine Reihe von Schaltflächen vertikal statt horizontal gestapelt erscheinen.
<div class = "btn-group btn-group-vertikal" >
...
</div>
Checkbox- und Radio-Aromen
Schaltflächengruppen können auch als Optionsfelder fungieren, bei denen nur eine Schaltfläche aktiv sein kann, oder als Kontrollkästchen, bei denen beliebig viele Schaltflächen aktiv sein können. Sehen Sie sich dazu die Javascript-Dokumentation an.
Dropdowns in Schaltflächengruppen
Kopf hoch! Schaltflächen mit Dropdown-Menüs müssen für eine ordnungsgemäße Wiedergabe einzeln .btn-groupinnerhalb von umschlossen werden..btn-toolbar
Schaltflächen-Dropdown-Menüs
Überblick und Beispiele
Verwenden Sie eine beliebige Schaltfläche, um ein Dropdown-Menü auszulösen, indem Sie es in ein platzieren .btn-groupund das richtige Menü-Markup bereitstellen.
Schaltflächen- Dropdowns erfordern das Bootstrap-Dropdown -Plug- in, um zu funktionieren.
In einigen Fällen – wie z. B. auf Mobilgeräten – erstrecken sich Dropdown-Menüs über den Darstellungsbereich hinaus. Sie müssen die Ausrichtung manuell oder mit benutzerdefiniertem Javascript auflösen.
Drop-downs für geteilte Schaltflächen
Aufbauend auf den Schaltflächengruppenstilen und dem Markup können wir ganz einfach eine geteilte Schaltfläche erstellen. Geteilte Schaltflächen verfügen links über eine Standardaktion und rechts über einen Dropdown-Schalter mit kontextbezogenen Links.
<button class = "btn btn-mini dropdown-toggle" data-toggle = "dropdown" >
<span class = "caret" ></span>
</button>
<ul class = "Dropdown-Menü" >
<!-- Dropdown-Menü-Links -->
</ul>
</div>
Dropdown-Menüs
Dropdown-Menüs können auch von unten nach oben umgeschaltet werden, indem eine einzelne Klasse zum unmittelbar übergeordneten Element von hinzugefügt wird .dropdown-menu. Es ändert die Richtung des .caretund positioniert das Menü selbst neu, um sich von unten nach oben statt von oben nach unten zu bewegen.
Alle Navigationskomponenten hier – Registerkarten, Pillen und Listen – teilen sich in der gesamten Klasse das gleiche Basis-Markup und die gleichen Stile.nav .
Grundlegende Registerkarten
Nehmen Sie regelmäßig <ul>Links und fügen Sie hinzu .nav-tabs:
.disabledFügen Sie für jede Navigationskomponente (Registerkarten, Pillen oder Listen) graue Links und keine Hover-Effekte hinzu . Links bleiben jedoch anklickbar, es sei denn, es wird benutzerdefiniertes Javascript implementiert, um diese Klicks zu verhindern.
Verwenden Sie zum Ausrichten von Navigationslinks die Hilfsklassen .pull-leftoder .pull-right. Beide Klassen fügen einen CSS-Float in der angegebenen Richtung hinzu.
Stapelbar
Da Tabs und Pillen standardmäßig horizontal sind, fügen Sie einfach eine zweite Klasse hinzu, .nav-stacked, damit sie vertikal gestapelt erscheinen.
Eine einfache Möglichkeit, Gruppen von Navigationslinks mit optionalen Headern zu erstellen. Sie werden am besten in Seitenleisten wie dem Finder in OS X verwendet.
Beispiel Navigationsliste
Nehmen Sie eine Liste mit Links und fügen Sie hinzu class="nav nav-list":
Hinweis Zum Verschachteln in einer Navigationsliste schließen Sie class="nav nav-list"alle verschachtelten <ul>.
Horizontale Teiler
Fügen Sie einen horizontalen Teiler hinzu, indem Sie ein leeres Listenelement mit der Klasse erstellen .divider, etwa so:
<ul class = "nav nav-list" >
...
<li class = "Teiler" ></li>
...
</ul>
Tab-Navigation
Erwecken Sie Ihre Tabs mit einem einfachen Plugin zum Leben, um zwischen Inhalten über Tabs hin- und herzuschalten. Bootstrap integriert Tabulatoren in vier Stilen: oben (Standard), rechts, unten und links.
Beispiel für Tabulatoren
Um Registerkarten tabellarisch zu machen, erstellen Sie eine .tab-panemit eindeutiger ID für jede Registerkarte und schließen Sie sie in ein .tab-content.
Um Tabulatoren einzublenden, fügen Sie .fadejedem hinzu .tab-pane.
Benötigt jQuery-Plugin
Alle Registerkarten mit Tabs werden von unserem leichtgewichtigen jQuery-Plugin unterstützt. Lesen Sie mehr darüber, wie Sie Registerkarten zum Leben erwecken können, auf der Seite mit den Javascript-Dokumenten .
Tabbable in jeder Richtung
Registerkarten auf der Unterseite
Drehen Sie die Reihenfolge des HTML um und fügen Sie eine Klasse hinzu, um Tabs unten zu platzieren.
Zunächst einmal sind Navigationsleisten statisch (nicht oben fixiert) und bieten Unterstützung für einen Projektnamen und grundlegende Navigation. Platzieren Sie eines irgendwo innerhalb eines .container, das die Breite Ihrer Website und Ihres Inhalts festlegt.
Mit einem leeren Listenelement und einer einfachen Klasse können Sie Ihren Navigationslinks ganz einfach Trennlinien hinzufügen. Fügen Sie einfach dies zwischen den Links hinzu:
Um ein Formular richtig in der Navigationsleiste zu gestalten und zu positionieren, fügen Sie die entsprechenden Klassen wie unten gezeigt hinzu. Fügen Sie für ein Standardformular .navbar-formund entweder .pull-leftoder .pull-righthinzu, um es richtig auszurichten.
<form class = "navbar-form pull-left" >
<Eingabetyp = "Text" Klasse = "Span2 " >
<button type = "submit " class = "btn" > Senden </button>
</form>
Suchformular
Für ein individuelleres Suchformular fügen Sie .navbar-searchdas formund .search-queryzur Eingabe für spezialisierte Stile in der Navigationsleiste hinzu.
<form class = "navbar-search pull-left" >
<input type = "text" class = "search-query" placeholder = "Search" >
</form>
Komponentenausrichtung
Richten Sie Navigationslinks, Suchformulare oder Texte aus, verwenden Sie die Hilfsklassen .pull-leftoder .pull-right. Beide Klassen fügen einen CSS-Float in der angegebenen Richtung hinzu.
Verwenden von Dropdowns
Fügen Sie Dropdowns und Dropdowns mit ein wenig Markup und dem Dropdown-Javascript -Plug-in zum Navigationssystem hinzu .
Weitere Markups und Informationen zum Aufrufen von Dropdowns finden Sie in der Dokumentation zu Javascript-Dropdowns.
Text
Umschließen Sie Textzeichenfolgen in einem Element mit .navbar-text, normalerweise auf einem <p>Tag für den richtigen Zeilenabstand und die richtige Farbe.
Optionale Anzeigevarianten
Befestigen Sie die Navigationsleiste am oberen oder unteren Rand des Ansichtsfensters mit einer zusätzlichen Klasse im äußersten Div, .navbar.
Oben fixiert
Fügen Sie .navbar-fixed-tophinzu und denken Sie daran, den verborgenen Bereich darunter zu berücksichtigen, indem Sie mindestens 40 Pixel paddingzur <body>. Stellen Sie sicher, dass Sie dies nach dem Kern-Bootstrap-CSS und vor dem optionalen responsiven CSS hinzufügen.
Erstellen Sie eine Navigationsleiste in voller Breite, die mit der Seite wegscrollt, indem Sie hinzufügen .navbar-static-top. Anders als bei der .navbar-fixed-topKlasse müssen Sie bei der keine Auffüllung ändern body.
Um eine einklappbare responsive Navigationsleiste zu implementieren, packen Sie den Inhalt Ihrer Navigationsleiste in ein enthaltendes div, .nav-collapse.collapse, und fügen Sie die Schaltfläche zum Umschalten der Navigationsleiste hinzu, .btn-navbar.
Paginierung Zwei Optionen zum Blättern durch Inhalte
Standard-Paginierung
Einfache Paginierung, inspiriert von Rdio, ideal für Apps und Suchergebnisse. Der große Block ist kaum zu übersehen, einfach skalierbar und bietet große Klickflächen.
Schnelle vorherige und nächste Links für einfache Paginierungsimplementierungen mit leichtem Markup und Stilen. Es eignet sich hervorragend für einfache Websites wie Blogs oder Zeitschriften.
Eine leichte, flexible Komponente, um wichtige Inhalte auf Ihrer Website zu präsentieren. Es funktioniert gut auf Marketing- und inhaltsintensiven Websites.
Hallo Welt!
Dies ist eine einfache Heldeneinheit, eine einfache Komponente im Jumbotron-Stil, um besondere Aufmerksamkeit auf bestimmte Inhalte oder Informationen zu lenken.
Eine einfache Shell h1zum angemessenen Platzieren und Segmentieren von Inhaltsabschnitten auf einer Seite. Es kann das h1Standardelement smallvon sowie die meisten anderen Komponenten (mit zusätzlichen Stilen) verwenden.
Beispielseitenkopf Subtext für Kopfzeile
<div class = "Seitenkopf" >
<h1> Beispielseitenkopf </h1>
</div>
Miniaturansichten Raster mit Bildern, Videos, Text und mehr
Standard-Thumbnails
Standardmäßig sind die Miniaturansichten von Bootstrap so konzipiert, dass sie verknüpfte Bilder mit minimal erforderlichem Markup anzeigen.
Hochgradig anpassbar
Mit ein wenig zusätzlichem Markup ist es möglich, jede Art von HTML-Inhalt wie Überschriften, Absätze oder Schaltflächen in Miniaturansichten einzufügen.
Thumbnail-Label
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida bei eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida bei eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida bei eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Miniaturansichten (früher .media-gridbis v1.4) eignen sich hervorragend für Raster von Fotos oder Videos, Bildersuchergebnisse, Einzelhandelsprodukte, Portfolios und vieles mehr. Dies können Links oder statische Inhalte sein.
Einfaches, flexibles Markup
Thumbnail-Markup ist einfach – ein ulmit einer beliebigen Anzahl von liElementen ist alles, was erforderlich ist. Es ist auch super flexibel und ermöglicht jede Art von Inhalt mit nur ein bisschen mehr Markup, um Ihre Inhalte zu verpacken.
Verwendet Rasterspaltengrößen
Schließlich verwendet die Thumbnails-Komponente vorhandene Rastersystemklassen – wie .span2oder .span3– zur Steuerung der Thumbnail-Abmessungen.
Markierung
Wie bereits erwähnt, ist das erforderliche Markup für Miniaturansichten leicht und unkompliziert. Hier ist ein Blick auf die Standardeinstellungen für verknüpfte Bilder :
<ul class = "Miniaturansichten" >
<li class = "span4" >
<a href = "#" class = "miniaturbild" >
<img src = "https://placehold.it/300x200" alt = "" >
</a>
</li>
...
</ul>
Bei benutzerdefinierten HTML-Inhalten in Miniaturansichten ändert sich das Markup geringfügig. Um Inhalte auf Blockebene überall zuzulassen, tauschen wir das <a>gegen ein <div>Like aus:
<ul class = "Miniaturansichten" >
<li class = "span4" >
<div class = "miniaturbild" >
<img src = "https://placehold.it/300x200" alt = "" >
<h3> Thumbnail-Label </h3>
<p> Miniaturbildbeschriftung... </p>
</div>
</li>
...
</ul>
Mehr Beispiele
Erkunden Sie alle Ihre Optionen mit den verschiedenen Rasterklassen, die Ihnen zur Verfügung stehen. Sie können auch verschiedene Größen mischen und anpassen.
Warnungsstile für Erfolgs-, Warn- und Fehlermeldungen
Standardwarnung
Fügen Sie einen beliebigen Text und eine optionale Schaltfläche zum Schließen ein, .alertum eine einfache Warnmeldung zu erhalten.
Warnung! Überprüfe am besten dich selbst, du siehst nicht allzu gut aus.
<div class = "Alarm" >
<button type = "button" class = "close" data-dismiss = "alert" > × </button>
<strong> Achtung! </strong> Überprüfe am besten dich selbst, du siehst nicht besonders gut aus.
</div>
Schaltflächen schließen
data-dismiss="alert"Mobile Safari- und Mobile Opera-Browser erfordern zusätzlich zum Attribut ein href="#"für das Ablehnen von Warnungen, wenn ein <a>Tag verwendet wird.
Alternativ können Sie ein <button>Element mit dem Datenattribut verwenden, wofür wir uns für unsere Dokumente entschieden haben. Wenn Sie verwenden <button>, müssen Sie einschließen type="button"oder Ihre Formulare werden möglicherweise nicht gesendet.
<button type = "button" class = "close" data-dismiss = "alert" > × </button>
Warnungen über Javascript schließen
Verwenden Sie das jQuery-Plugin für Warnungen, um Warnungen schnell und einfach abzulehnen.
Optionen
Erhöhen Sie bei längeren Nachrichten den Abstand oben und unten im Warnungs-Wrapper, indem Sie .alert-block.
Warnung!
Überprüfe am besten dich selbst, du siehst nicht allzu gut aus. Nulla vitae elit libero, ein pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
<div class = "alert alarm-block" >
<button type = "button" class = "close" data-dismiss = "alert" > × </button>
<h4> Achtung! </h4>
Überprüfe am besten dich selbst, du bist nicht...
</div>
Kontextuelle Alternativen
Fügen Sie optionale Klassen hinzu, um die Konnotation einer Warnung zu ändern.
Fehler oder Gefahr
Oh verdammt! Ändern Sie ein paar Dinge und versuchen Sie es erneut.
<div class = "alert alarm-error" >
...
</div>
Erfolg
Gut erledigt! Sie haben diese wichtige Warnmeldung erfolgreich gelesen.
<div class = "alert alert-success" >
...
</div>
Information
Kopf hoch! Diese Warnung erfordert Ihre Aufmerksamkeit, ist aber nicht besonders wichtig.
<div class = "alert alarm-info" >
...
</div>
Fortschrittsbalken Für Lade-, Umleitungs- oder Aktionsstatus
Beispiele und Markups
Basic
Standard-Fortschrittsbalken mit vertikalem Farbverlauf.
Fortschrittsbalken verwenden CSS3-Verläufe, Übergänge und Animationen, um all ihre Effekte zu erzielen. Diese Funktionen werden in IE7-9 oder älteren Versionen von Firefox nicht unterstützt.
Versionen vor Internet Explorer 10 und Opera 12 unterstützen keine Animationen.
Sonstige Leichte Gebrauchskomponenten
Brunnen
Verwenden Sie den Brunnen als einfachen Effekt für ein Element, um ihm einen Einfügungseffekt zu verleihen.
Schau, ich bin in einem Brunnen!
<div class = "gut" >
...
</div>
Optionale Klassen
Steuerpolsterung und abgerundete Ecken mit zwei optionalen Modifikatorklassen.
Schau, ich bin in einem Brunnen!
<div class = "well well-large" >
...
</div>
Schau, ich bin in einem Brunnen!
<div class = "gut gut-klein" >
...
</div>
Schließen-Symbol
Verwenden Sie das generische Schließen-Symbol, um Inhalte wie Modale und Warnungen zu verwerfen.
<button class = "close" > × </button>
iOS-Geräte erfordern ein href="#" für Klickereignisse, wenn Sie lieber einen Anker verwenden.
<a class = "close" href = "#" > × </a>
Helfer Klassen
Einfache, fokussierte Klassen für kleine Anzeige- oder Verhaltensoptimierungen.