Schaltflächengruppen

Verwenden Sie Schaltflächengruppen, um mehrere Schaltflächen zu einer zusammengesetzten Komponente zusammenzufügen. Bauen Sie sie mit einer Reihe von <a>oder - <button>Elementen auf.

Empfohlene Vorgehensweise

Wir empfehlen die folgenden Richtlinien für die Verwendung von Schaltflächengruppen und Symbolleisten:

• Verwenden Sie immer dasselbe Element in einer einzelnen Schaltflächengruppe, <a>oder <button>.
• Mischen Sie keine Knöpfe mit unterschiedlichen Farben in derselben Knopfgruppe.
• Verwenden Sie Symbole zusätzlich zu oder anstelle von Text, aber stellen Sie sicher, dass Sie gegebenenfalls Alt- und Titeltext enthalten.

Zugehörige Schaltflächengruppen mit Dropdowns (siehe unten) sollten separat aufgerufen werden und immer ein Dropdown-Cursor enthalten, um das beabsichtigte Verhalten anzuzeigen.

Standardbeispiel

So sieht der HTML-Code für eine Standard-Schaltflächengruppe aus, die mit Anker-Tag-Schaltflächen erstellt wurde:

<div class = "btn-Gruppe" > 
  <button class = "btn" > 1 </button> 
  <button class = "btn" > 2 </button> 
  <button class = "btn" > 3 </button> 
</div>

Beispiel Symbolleiste

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>

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.

Holen Sie sich das Javascript »

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

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

Beispiel-Markup

Ähnlich wie eine Schaltflächengruppe verwendet unser Markup normales Schaltflächen-Markup, jedoch mit einer Handvoll Zusätzen, um den Stil zu verfeinern und das Dropdown-jQuery-Plug-in von Bootstrap zu unterstützen.

<div class = "btn-Gruppe" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    Aktion
    <span class = "caret" ></span> 
  </a>
  <ul class = "Dropdown-Menü" > 
    <!-- Dropdown-Menü-Links -->
  </ul>
</div>

Funktioniert mit allen Knopfgrößen

Schaltflächen-Dropdowns funktionieren in jeder Größe. Ihre Knopfgrößen zu .btn-large, .btn-small, oder .btn-mini.

Erfordert Javascript

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.

Überblick und Beispiele

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.

Größen

Verwenden Sie die zusätzlichen Schaltflächenklassen .btn-mini, .btn-small, oder .btn-largezur Größenanpassung.

<div class = "btn-Gruppe" > 
  ...
  <ul class = "Dropdown-Menü nach rechts ziehen" > 
    <!-- Dropdown-Menü-Links -->
  </ul>
</div>

Beispiel-Markup

Wir erweitern die normalen Schaltflächen-Dropdowns, um eine zweite Schaltflächenaktion bereitzustellen, die als separater Dropdown-Trigger fungiert.

<div class = "btn-Gruppe" > 
  <button class = "btn" > Aktion </button> 
  <button class = "btn 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.

<div class = "btn-group dropup" > 
  <button class = "btn" > Dropup </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "Dropdown-Menü" > 
    <!-- Dropdown-Menü-Links -->
  </ul>
</div>

Leistungsstarke Basisklasse

Alle Navigationskomponenten hier – Registerkarten, Pillen und Listen – teilen sich in der gesamten Klasse das gleiche Basis-Markup und die gleichen Stile.nav .

Wann verwenden

Registerkarten und Pillen eignen sich hervorragend für Inhaltsabschnitte oder zum Navigieren zwischen Seiten mit verwandten Inhalten.

Komponentenausrichtung

Verwenden Sie zum Ausrichten von Navigationslinks die Hilfsklassen .pull-leftoder .pull-right. Beide Klassen fügen einen CSS-Float in der angegebenen Richtung hinzu.

Grundlegende Registerkarten

Nehmen Sie regelmäßig <ul>Links und fügen Sie hinzu .nav-tabs:

• Heim
• Profil
• Mitteilungen

<ul class = "nav nav-tabs" > 
  <li class = "aktiv" > 
    <a href = "#" > Startseite </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Basispillen

Nehmen Sie denselben HTML-Code, aber verwenden Sie .nav-pillsstattdessen:

• Heim
• Profil
• Mitteilungen

<ul class = "nav nav-pillen" > 
  <li class = "aktiv" > 
    <a href = "#" > Startseite </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Wie man sie stapelt

Da Tabs und Pillen standardmäßig horizontal sind, fügen Sie einfach eine zweite Klasse hinzu, .nav-stacked, damit sie vertikal gestapelt erscheinen.

Gestapelte Registerkarten

• Heim
• Profil
• Mitteilungen

<ul class = "nav nav-tabs nav-stacked" > 
  ...
</ul>

Gestapelte Pillen

• Heim
• Profil
• Mitteilungen

<ul class = "nav nav-Pillen nav-gestapelt" > 
  ...
</ul>

Reichhaltige Menüs leicht gemacht

Dropdown-Menüs in Bootstrap-Tabs und -Pillen sind super einfach und erfordern nur ein wenig zusätzlichen HTML-Code und ein leichtes jQuery-Plugin.

Gehen Sie zur Javascript-Seite, um die Dokumentation zum Initialisieren von Dropdowns in Bootstrap zu lesen.

Registerkarten mit Dropdowns

• Heim
• Hilfe
• Dropdown-Liste
  • Action
  • Another action
  • Something else here
  • Separated link

<ul class = "nav nav-tabs" > 
  <li class = "Dropdown" > 
    <a class = "Dropdown-Schalter" 
       data-toggle = "Dropdown"
       href = "#" >
        Dropdown-Liste
        <b class = "caret" ></b> 
      </a>
    <ul class = "Dropdown-Menü" > 
      <!-- Links -->
    </ul>
  </li>
</ul>

Pillen mit Dropdowns

• Heim
• Hilfe
• Dropdown-Liste
  • Action
  • Another action
  • Something else here
  • Separated link

<ul class = "nav nav-pillen" > 
  <li class = "Dropdown" > 
    <a class = "Dropdown-Schalter" 
       data-toggle = "Dropdown"
       href = "#" >
        Dropdown-Liste
        <b class = "caret" ></b> 
      </a>
    <ul class = "Dropdown-Menü" > 
      <!-- Links -->
    </ul>
  </li>
</ul>

Navigation im Anwendungsstil

Navigationslisten bieten eine einfache Möglichkeit, Gruppen von Navigationslinks mit optionalen Kopfzeilen zu erstellen. Sie werden am besten in Seitenleisten wie dem Finder in OS X verwendet.

Strukturell basieren sie auf den gleichen zentralen Navigationsstilen wie Registerkarten und Pillen, sodass die Verwendung und Anpassung unkompliziert sind.

Mit Ikonen

Auch Navigationslisten lassen sich einfach mit Symbolen ausstatten. Fügen Sie das richtige <i>Tag mit Klasse hinzu und Sie sind fertig.

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>

Beispiel Navigationsliste

Nehmen Sie eine Liste mit Links und fügen Sie hinzu class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > 
    Kopfzeile der Liste
  </li>
  <li class = "aktiv" > 
    <a href = "#" > Startseite </a> 
  </li>
  <li>
    <a href = "#" > Bibliothek </a> 
  </li>
  ...
</ul>

Beispiel mit Symbolen

Gleiches Beispiel, aber mit <i>Tags für Icons.

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href = "#" > 
      <i class = "icon-book" ></i> 
      Bibliothek
    </a>
  </li>
  ...
</ul>

Was ist inbegriffen

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.

Der Wechsel zwischen ihnen ist einfach und erfordert nur eine sehr geringe Änderung des Markups.

Registerkarten einblenden

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 .

Holen Sie sich das Javascript →

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.

Umschließen Sie für rechts- oder linksbündige Tabulatoren das .nav-tabsund .tab-contentin .tabbable.

Einfaches Markup

Die Verwendung von Registerkarten mit Tabulatoren erfordert ein umschließendes Div, eine Reihe von Registerkarten und eine Reihe von Inhaltsbereichen mit Tabulatoren.

<div class = "tabbable" > <!-- Nur für linke/rechte Tabulatoren erforderlich -->  
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab" > Abschnitt 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > Abschnitt 2 </a></li>  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane active" id = "tab1" >  
      <p> Ich bin in Abschnitt 1. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Hallo, ich bin in Abschnitt 2. </p>
    </div>
  </div>
</div>

Registerkarten auf der Unterseite

Drehen Sie die Reihenfolge des HTML um und fügen Sie eine Klasse hinzu, um Tabs unten zu platzieren.

<div class = "tabbable tabs-below" > 
  <div class = "tab-content" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

Registerkarten auf der linken Seite

Tauschen Sie die Klasse aus, um Tabulatoren auf der linken Seite zu platzieren.

<div class = "tabtable tabs-left" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Registerkarten rechts

Tauschen Sie die Klasse aus, um Tabulatoren auf der rechten Seite zu platzieren.

<div class = "Tabtable tabs-right" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Navbar-Gerüst

Die Navigationsleiste benötigt nur wenige Divs, um sie gut für die statische oder feste Anzeige zu strukturieren.

<div class = "Navigationsleiste" > 
  <div class = "navbar-inner" > 
    <div class = "container" > 
      ...
    </div>
  </div>
</div>

Navigationsleiste behoben

Befestigen Sie die Navigationsleiste am oberen oder unteren Rand des Ansichtsfensters mit einer zusätzlichen Klasse im äußersten Div, .navbar.

<div class = "navbar navbar-fixed-top" > 
  ...
</div>

<div class = "navbar navbar-fixed-bottom" > 
  ...
</div>

Denken Sie beim Anbringen der Navigationsleiste daran, den darunter liegenden verdeckten Bereich zu berücksichtigen. Fügen Sie mindestens 40 Pixel Polsterung hinzu<body> . Stellen Sie sicher, dass Sie dies nach dem Kern-Bootstrap-CSS und vor dem optionalen responsiven CSS hinzufügen.

Markenname

Ein einfacher Link, um Ihren Marken- oder Projektnamen anzuzeigen, erfordert nur ein Anker-Tag.

<a class = "marke" href = "#" >  
  Projektname
</a>

Formulare in der Navigationsleiste

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 " >  
</form>

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>

Optionale responsive Variante

Abhängig von der Menge an Inhalten in Ihrer Topbar möchten Sie möglicherweise die Responsive-Optionen implementieren. Wickeln Sie dazu Ihren Navigationsinhalt in ein enthaltendes div ein, .nav-collapse.collapse, und fügen Sie die Schaltfläche zum Umschalten der Navigationsleiste hinzu, .btn-navbar.

<div class = "Navigationsleiste" > 
  <div class = "navbar-inner" > 
    <div class = "container" > 
 
      <!-- .btn-navbar wird als Umschalter für reduzierten Inhalt der Navigationsleiste verwendet -->
      <a class = "btn btn-navbar" data-toggle = "collapse" data-target = ".nav-collapse" >   
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
      </a>
 
      <!-- Stellen Sie sicher, dass Sie die Marke draußen lassen, wenn Sie möchten, dass sie angezeigt wird -->
      <a class = "brand" href = "#" > Projektname </a>  
 
      <!-- Alles, was Sie mit 940px oder weniger verstecken wollen, platzieren Sie hier -->
      <div class = "nav-collapse" > 
        <!-- .nav, .navbar-Suche, .navbar-Formular usw. -->
      </div>
 
    </div>
  </div>
</div>

Navi-Links

Navigationselemente können einfach über ungeordnete Listen hinzugefügt werden.

<ul class = "nav" > 
  <li class = "aktiv" > 
    <a href = "#" > Startseite </a> 
  </li>
  <li><a href = "#" > Link </a></li> 
  <li><a href = "#" > Link </a></li> 
</ul>

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:

<ul class = "nav" > 
  ...
  <li class = "divider-vertikal" ></li> 
  ...
</ul>

Komponentenausrichtung

Um eine Navigation, ein Suchformular oder einen Text auszurichten, verwenden Sie .pull-leftoder.pull-right . Beide Klassen fügen einen CSS-Float in der angegebenen Richtung hinzu.

Dropdown-Menüs hinzufügen

Das Hinzufügen von Dropdowns und Dropdowns zum Navigationssystem ist super einfach, erfordert jedoch die Verwendung unseres Javascript-Plugins .

<ul class = "nav" > 
  <li class = "Dropdown" > 
    <a href = "#" 
          class = "Dropdown-Schalter"
          data-toggle = "Dropdown" >
          Konto
          <b class = "caret" ></b> 
    </a>
    <ul class = "Dropdown-Menü" > 
      ...
    </ul>
  </li>
</ul>

Holen Sie sich das Javascript →

Text in der Navigationsleiste

Umschließen Sie Textzeichenfolgen in einem <.navbar-text>, normalerweise in einem <p>Tag, um den richtigen Zeilenabstand und die richtige Farbe zu erhalten.

Warum sie verwenden

Die Breadcrumb-Navigation wird verwendet, um Benutzern zu zeigen, wo sie sich innerhalb einer App oder einer Website befinden, aber nicht für die primäre Navigation. Halten Sie ihre Verwendung spärlich und prägnant, um am effektivsten zu sein.

Beispiele

Es wird ein einzelnes Beispiel gezeigt, wie es auf mehreren Seiten angezeigt werden könnte.

• Heim

• Startseite /
• Bibliothek

• Startseite /
• Bibliothek /
• Daten

Markierung

HTML ist Ihre standardmäßige ungeordnete Liste mit Links.

<ul class = "breadcrumb" > 
  <li>
    <a href = "#" > Startseite </a> <span class = "divider" > / </span>   
  </li>
  <li>
    <a href = "#" > Bibliothek </a> <span class = "divider" > / </span>   
  </li>
  <li class = "active" > Daten </li> 
</ul>

Wann verwenden

Ultra-einfache und minimal gestylte 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.

Zustandsbehaftete Seitenlinks

Links sind anpassbar und funktionieren unter einer Reihe von Umständen mit der richtigen Klasse. .disabledfür nicht klickbare Links und .activefür die aktuelle Seite.

Flexible Ausrichtung

Fügen Sie eine von zwei optionalen Klassen hinzu, um die Ausrichtung von Paginierungslinks zu ändern: .pagination-centeredund .pagination-right.

Beispiele

Die Standard-Paginierungskomponente ist flexibel und funktioniert in einer Reihe von Variationen.

Markierung

Eingehüllt in eine <div>Paginierung ist nur eine <ul>.

<div class = "Seitenumbruch" > 
  <ul>
    <li><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 = "#" > Weiter </a></li> 
  </ul>
</div>

Über Pager

Die Pager-Komponente ist eine Reihe von Links für einfache Paginierungsimplementierungen mit leichtem Markup und noch leichteren Stilen. Es eignet sich hervorragend für einfache Websites wie Blogs oder Zeitschriften.

Optionaler deaktivierter Zustand

Pager-Links verwenden auch die allgemeine .disabledKlasse aus der Paginierung.

Standardbeispiel

Standardmäßig zentriert der Pager Links.

• Vorherige
• Nächste

<ul class = "Pager" > 
  <li>
    <a href = "#" > Zurück </a> 
  </li>
  <li>
    <a href = "#" > Weiter </a> 
  </li>
</ul>

Ausgerichtete Links

Alternativ können Sie jeden Link an den Seiten ausrichten:

• ← Älter
• Neuere →

<ul class = "Pager" > 
  <li class = "vorherige" > 
    <a href = "#" > ← Ältere </a> 
  </li>
  <li class = "weiter" > 
    <a href = "#" > Neuere → </a> 
  </li>
</ul>

Um

Abzeichen sind kleine, einfache Komponenten zum Anzeigen eines Indikators oder einer Art Zählung. Sie sind häufig in E-Mail-Clients wie Mail.app oder in mobilen Apps für Push-Benachrichtigungen zu finden.

Verfügbare Klassen

Bootstrap bietet eine leichte, flexible Komponente namens Hero Unit, um Inhalte auf Ihrer Website zu präsentieren. Es funktioniert gut auf Marketing- und inhaltsintensiven Websites.

Markierung

Wickeln Sie Ihren Inhalt divso ein:

<div class = "heldeneinheit" > 
  <h1> Überschrift </h1>
  <p> Slogan </p>
  <p>
    <a class = "btn btn-primär btn-groß" > 
      Mehr erfahren
    </a>
  </p>
</div>

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.

<div class = "Seitenkopf" > 
  <h1> Beispielseitenkopf </h1>
</div>

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.

  Aktion Aktion

• 

  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.

  Aktion Aktion

Warum Thumbnails verwenden?

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.

Das Markup

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 = "span3" > 
    <a href = "#" class = "miniaturbild" >  
      <img src = "https://placehold.it/260x180" 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 = "span3" > 
    <div class = "miniaturbild" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Thumbnail-Label </h5>
      <p> Miniaturbildbeschriftung hier... </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.

Umgeschriebene Basisklasse

Mit Bootstrap 2 haben wir die Basisklasse vereinfacht: .alertAnstelle von .alert-message. Wir haben auch das minimal erforderliche Markup reduziert <p>– standardmäßig ist no erforderlich, nur das äußere <div>.

Einzelne Warnmeldung

Für eine haltbarere Komponente mit weniger Code haben wir das differenzierende Aussehen für Blockwarnungen entfernt, Nachrichten, die mit mehr Polsterung und normalerweise mehr Text versehen sind. Die Klasse hat sich auch geändert zu .alert-block.

Geht super mit Javascript

Bootstrap wird mit einem großartigen jQuery-Plug-in geliefert, das Warnmeldungen unterstützt, sodass sie schnell und einfach verworfen werden können.

Holen Sie sich das Plugin »

Beispielwarnungen

Verpacken Sie Ihre Nachricht und ein optionales Schließen-Symbol in einem div mit einfacher Klasse.

<div class = "Alarm" > 
  <button class = "close" data-dismiss = "alert" > × </button>  
  <strong> Achtung! </strong> Überprüfe am besten dich selbst, du siehst nicht besonders gut aus.
</div>

Kopf hoch! iOS-Geräte benötigen eine href="#"zum Ablehnen von Warnungen. Stellen Sie sicher, dass es und das Datenattribut für Symbole zum Schließen von Ankern enthalten sind. 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.

Erweitern Sie die Standardwarnmeldung einfach um zwei optionale Klassen: .alert-blockfür mehr Auffüllung und Textsteuerelemente und .alert-headingfür eine passende Überschrift.

<div class = "alert alarm-block" > 
  <a class = "close" data-dismiss = "alert" href = "#" > × </a>   
  <h4 class = "alert-heading" > Warnung! </h4> 
  Überprüfe am besten dich selbst, du bist nicht...
</div>

Fehler oder Gefahr

<div class = "alert alarm-error" > 
  ...
</div>

Erfolg

<div class = "alert alert-success" > 
  ...
</div>

Information

<div class = "alert alarm-info" > 
  ...
</div>

Basic

Standard-Fortschrittsbalken mit vertikalem Farbverlauf.

<div class = "fortschritt" > 
  <div class = "bar" 
       style = " width : 60 %; " ></div> 
</div>

Gestreift

Verwendet einen Farbverlauf, um einen Streifeneffekt zu erzeugen (kein IE).

<div class = "fortschritt fortschritt-gestreift" > 
  <div class = "bar" 
       style = " width : 20 %; " ></div> 
</div>

Animiert

Nimmt das gestreifte Beispiel und animiert es (kein IE).

<div class = "Fortschritt Fortschritt-gestreift 
     aktiv" >
  <div class = "bar" 
       style = " width : 40 %; " ></div> 
</div>

Zusätzliche Farben

Fortschrittsbalken verwenden einige der gleichen Schaltflächen- und Alarmklassen für konsistente Stile.

Gestreifte Balken

Ähnlich wie bei den Volltonfarben haben wir verschiedene gestreifte Fortschrittsbalken.

Verhalten

Fortschrittsbalken verwenden CSS3-Übergänge. Wenn Sie also die Breite dynamisch über Javascript anpassen, wird die Größe reibungslos angepasst.

Wenn Sie die .activeKlasse verwenden, werden Ihre .progress-stripedFortschrittsbalken die Streifen von links nach rechts animieren.

Browserunterstützung

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.

Opera und IE unterstützen derzeit keine Animationen.

Brunnen

Verwenden Sie den Brunnen als einfachen Effekt für ein Element, um ihm einen Einfügungseffekt zu verleihen.

<div class = "gut" > 
  ...
</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>