Komponenten

Dosende vu wiederverwendbare Komponenten sinn a Bootstrap agebaut fir Navigatioun, Alarmer, Popovers a vill méi ze bidden.

Knäppchen Gruppen

Benotzt Knäpperchergruppen fir verschidde Knäppercher zesummen als ee Kompositkomponent ze verbannen. Build hinnen mat enger Serie vun <a>oder <button>Elementer.

Beschte Praktiken

Mir recommandéieren déi folgend Richtlinnen fir Knäppchengruppen an Toolbaren ze benotzen:

  • Benotzt ëmmer datselwecht Element an enger eenzeger Knäppchengrupp, <a>oder <button>.
  • Mëschung net Knäppercher vu verschiddene Faarwen an der selwechter Knäpperchergrupp.
  • Benotzt Ikonen zousätzlech zu oder amplaz vum Text, awer gitt sécher datt den Alt- an den Titeltext wou entsprécht.

Zesummenhang Knäppercher mat Dropdowns (kuckt hei ënnendrënner) sollen separat opgeruff ginn an ëmmer en Dropdown-Caret enthalen fir virgesinnt Verhalen unzeweisen.

Standard Beispill

Hei ass wéi den HTML fir eng Standardknäppchengrupp ausgesäit, déi mat Ankertagknäppchen gebaut ass:

  1. <div class = "btn-group" >
  2. <button class = "btn" > 1 </button>
  3. <button class = "btn" > 2 </button>
  4. <button class = "btn" > 3 </button>
  5. </div>

Toolbar Beispill

Kombinéiert Sätze vun <div class="btn-group">an eng <div class="btn-toolbar">fir méi komplex Komponenten.

  1. <div class = "btn-toolbar" >
  2. <div class = "btn-group" >
  3. ...
  4. </div>
  5. </div>

Checkbox a Radio Goûten

Knäppercher kënnen och als Radios funktionnéieren, wou nëmmen ee Knäppchen aktiv ka sinn, oder Checkboxen, wou all Zuel vu Knäpper aktiv ka sinn. Kuckt d'Javascript-Dokumenter fir dat.

Kritt de Javascript »

Dropdowns a Knäppchen Gruppen

Kapp erop! Knäppercher mat dropdowns muss individuell an hir eege .btn-groupbannent engem .btn-toolbarfir richteg Render- gewéckelt ginn.

Knäppchen dropdowns

Iwwersiicht an Beispiller

Benotzt all Knäppchen fir e Dropdown-Menü auszeléisen andeems Dir en an engem plazéiert .btn-groupan déi richteg Menümarkéierung ubitt.

Beispill Markup

Ähnlech wéi eng Knäpperchergrupp benotzt eis Markup regelméisseg Knäppercher, awer mat enger Handvoll Ergänzunge fir de Stil ze verfeineren an dem Bootstrap's Dropdown jQuery Plugin z'ënnerstëtzen.

  1. <div class = "btn-group" >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#">
  3. Aktioun
  4. <span class = "caret" ></span>
  5. </a>
  6. <ul class = "dropdown-menu" >
  7. <!-- Dropdown-Menü Linken -->
  8. </ul>
  9. </div>

Schafft mat all Knäppchen Gréissten

Knäppchen Dropdowns funktionnéieren zu all Gréisst. Är Knäppchen Gréissten ze .btn-large, .btn-smalloder .btn-mini.

Verlaangt Javascript

Button Dropdowns erfuerderen de Bootstrap Dropdown Plugin fir ze funktionéieren.

An e puer Fäll - wéi mobil - Dropdown-Menüen verlängeren sech ausserhalb vum Viewport. Dir musst d'Ausrichtung manuell oder mat personaliséierte Javascript léisen.


Split Knäppchen Dropdowns

Iwwersiicht an Beispiller

Bauen op de Knäppchen Grupp Stiler a Markup, kënne mir einfach e Split Knäppchen erstellen. Split Knäppercher hunn eng Standardaktioun op der lénker Säit an e Dropdown-Knäppchen op der rietser mat kontextuellen Linken.

Gréissten

Benotzt déi extra Knäppercher Klassen .btn-mini, .btn-smalloder .btn-largefir d'Gréisst.

  1. <div class = "btn-group" >
  2. ...
  3. <ul class = "Dropdown-Menu pull-right" >
  4. <!-- Dropdown-Menü Linken -->
  5. </ul>
  6. </div>

Beispill Markup

Mir erweideren op déi normal Knäppchen Dropdowns fir eng zweet Knäppchen Aktioun ze bidden déi als separat Dropdown Ausléiser funktionnéiert.

  1. <div class = "btn-group" >
  2. <button class = "btn" > Aktioun </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </knapp>
  6. <ul class = "dropdown-menu" >
  7. <!-- Dropdown-Menü Linken -->
  8. </ul>
  9. </div>

Dropup Menüen

Dropdown-Menüen kënnen och vun ënnen erop gewiesselt ginn andeems een eng eenzeg Klass un den direkten Elterendeel bäidréit .dropdown-menu. Et flipt d'Richtung vun der .careta repositionéiert de Menü selwer fir vun ënnen no uewen ze réckelen anstatt uewen erof.

  1. <div class = "btn-group dropup" >
  2. <button class = "btn" > Dropup </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </knapp>
  6. <ul class = "dropdown-menu" >
  7. <!-- Dropdown-Menü Linken -->
  8. </ul>
  9. </div>

Multicon-Säit Paginatioun

Wéini ze benotzen

Ultra simplistesch a minimal stylesch Paginatioun inspiréiert vu Rdio, super fir Apps a Sichresultater. De grousse Block ass schwéier ze verpassen, liicht skalierbar a bitt grouss Klickflächen.

Staatlech Säit Linken

Links sinn personaliséierbar a funktionnéieren an enger Rei vun Ëmstänn mat der richteger Klass. .disabledfir onklickbar Linken a .activefir déi aktuell Säit.

Flexibel Ausrichtung

Füügt entweder vun zwou fakultativ Klassen fir d'Ausrichtung vun de Paginéierungslinks z'änneren: .pagination-centeredan .pagination-right.

Beispiller

De Standardpaginatiounskomponent ass flexibel a funktionnéiert an enger Rei vu Variatiounen.

Markup

Agewéckelt an engem <div>, Paginatioun ass just eng <ul>.

  1. <div class = "paginéieren" >
  2. <ul>
  3. <li><a href = "#" > Virdrun </a></li>
  4. <li class = "aktiv" >
  5. <a href = "#"> 1 </a> _
  6. </li>
  7. <li><a href = "#"> 2 </a> </li>
  8. <li > <a href = "#"> 3 </a></li>
  9. <li><a href = "#"> 4 </a> </li>
  10. <li><a href = "#" > Nächst </a></li>
  11. </ul>
  12. </div>

Pager Fir séier virdrun an nächst Linken

Iwwer pager

De Pager Komponent ass eng Rei vu Linken fir einfach Paginéierungsimplementatiounen mat liicht Markup an nach méi hell Stiler. Et ass super fir einfache Site wéi Blogs oder Zäitschrëften.

Fakultativ behënnert Staat

Pager Links benotzen och d'allgemeng .disabledKlass vun der Paginatioun.

Standard Beispill

Par défaut zentréiert de Pager Links.

  1. <ul class = "pager" >
  2. <li>
  3. <a href = "#" > Virdrun </a>
  4. </li>
  5. <li>
  6. <a href = "#" > Nächst </a>
  7. </li>
  8. </ul>

Ausgeriicht Linken

Alternativ kënnt Dir all Link op d'Säiten ausriichten:

  1. <ul class = "pager" >
  2. <li class = "virdrun" >
  3. <a href = "#"> & larr ; Eeler </a>
  4. </li>
  5. <li class = "nächst" >
  6. <a href = "#" > Méi nei → </a>
  7. </li>
  8. </ul>
Etiketten Markup
Default <span class="label">Default</span>
Erfolleg <span class="label label-success">Success</span>
Warnung <span class="label label-warning">Warning</span>
Wichteg <span class="label label-important">Important</span>
Info <span class="label label-info">Info</span>
Inverse <span class="label label-inverse">Inverse</span>

Iwwer

Schëlder si kleng, einfach Komponente fir en Indikator oder Zuel vun enger Zort ze weisen. Si ginn allgemeng an E-Mail Clienten wéi Mail.app oder op mobilen Apps fir Push Notifikatiounen fonnt.

Verfügbar Klassen

Numm Beispill Markup
Default 1 <span class="badge">1</span>
Erfolleg 2 <span class="badge badge-success">2</span>
Warnung 4 <span class="badge badge-warning">4</span>
Wichteg 6 <span class="badge badge-important">6</span>
Info 8 <span class="badge badge-info">8</span>
Inverse 10 <span class="badge badge-inverse">10</span>

Held Eenheet

Bootstrap bitt e liichte, flexibele Komponent genannt Heldenheet fir Inhalt op Ärem Site ze weisen. Et funktionnéiert gutt op Marketing an Inhalt-schwéier Siten.

Markup

Wickelt Ären Inhalt an engem divLike sou:

  1. <div class = "hero-unit" >
  2. <h1> Iwwerschrëft </h1>
  3. <p> Tagline </p>
  4. <p>
  5. <a class = "btn btn-primär btn-large" >
  6. Léier méi
  7. </a>
  8. </p>
  9. </div>

Moien Welt!

Dëst ass eng einfach Heldenheet, en einfachen Jumbotron-Stil Komponent fir extra Opmierksamkeet op Featured Inhalt oder Informatioun ze ruffen.

Léier méi

Säit Header

Eng einfach Schuel fir eng h1passend Plaz aus a segmentéiert Sektiounen vum Inhalt op enger Säit. Et kann d' h1Standard small, Element wéi och déi meescht aner Komponenten (mat zousätzlech Stiler) benotzen.

  1. <div class = "page-header" >
  2. <h1> Beispill Säit Header </ h1>
  3. </div>

Standard Miniatur

Par défaut sinn d'Bootstrap Thumbnails entwéckelt fir verlinkte Biller mat minimaler erfuerderlecher Markup ze weisen.

Héich personaliséierbar

Mat e bëssen extra Markup ass et méiglech all Zort HTML Inhalt wéi Rubriken, Abschnitter oder Knäppercher a Miniatur ze addéieren.

  • Thumbnail Label

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies Vehicula ut id elit.

    Aktioun Aktioun

  • Thumbnail Label

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies Vehicula ut id elit.

    Aktioun Aktioun

Firwat Thumbnails benotzen

Thumbnails (virdrun .media-gridbis v1.4) si super fir Gitter vu Fotoen oder Videoen, Bild Sichresultater, Retail Produkter, Portfolioen, a vill méi. Si kënne Linken oder statesche Inhalter sinn.

Einfach, flexibel Markup

Thumbnail Markup ass einfach - e ulmat all Zuel vun liElementer ass alles wat néideg ass. Et ass och super flexibel, et erlaabt all Typ vun Inhalt mat just e bësse méi Markup fir Ären Inhalt ze wéckelen.

Benotzt Gitterkolonnegréissten

Schlussendlech benotzt d'Miniaturkomponenten existent Gittersystemklassen - wéi .span2oder .span3- fir d'Kontroll vun de Miniatur Dimensiounen.

D'Markup

Wéi virdru scho gesot, ass déi erfuerderlech Markup fir Thumbnails liicht an einfach. Hei ass e Bléck op d'Default-Setup fir verlinkte Biller :

  1. <ul class = "thumbnails" >
  2. <li class = "span3" >
  3. <a href = "#" class = "Thumbnail" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

Fir personaliséiert HTML Inhalt an Miniaturbiller ännert d'Markup liicht. Fir Blockniveau Inhalt iwwerall z'erméiglechen, tausche mir de <a>fir e <div>Like:

  1. <ul class = "thumbnails" >
  2. <li class = "span3" >
  3. <div class = "thumbnail" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> Thumbnail Label </h5>
  6. <p> Thumbnail Iwwerschrëft hei... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

Méi Beispiller

Entdeckt all Är Optiounen mat de verschiddene Gitterklassen déi Iech verfügbar sinn. Dir kënnt och verschidde Gréissten kombinéieren a passen.

Liichtgewiicht Defaults

Ëmgeschriwwen Basis Klass

Mat Bootstrap 2 hu mir d'Basisklass vereinfacht: .alertamplaz .alert-message. Mir hunn och de minimale erfuerderleche Markup reduzéiert - nee <p>ass Standard erfuerderlech, just déi baussenzeg<div> .

Single Alarm Message

Fir eng méi haltbar Komponent mat manner Code, hu mir den differenzéierten Look fir Blockalarmer ewechgeholl, Messagen déi mat méi Polsterung an typesch méi Text kommen. D'Klass ass och geännert ginn .alert-block.


Gitt super mat Javascript

Bootstrap kënnt mat engem super jQuery Plugin deen Alarmmeldungen ënnerstëtzt, sou datt se séier an einfach entlooss ginn.

Kritt de Plugin »

Beispill Alarmer

Wickelt Äre Message an eng optional Zoumaache Ikon an enger Div mat einfacher Klass.

Opgepasst! Beschte kontrolléiert Iech selwer, Dir sicht net ze gutt.
  1. <div class = "alarm" >
  2. <button class = "close" data-dismiss = "alarm" > × </button>
  3. <strong> Opgepasst! </strong> Am beschten kontrolléiert Iech selwer, Dir gesitt net ze gutt aus.
  4. </div>

Kapp erop! iOS Apparater erfuerderen e href="#"fir d'Entloossung vun Alarmer. Vergewëssert Iech et an d'Datenattributer fir Anker Zoumaache Symboler. Alternativ kënnt Dir en <button>Element mam Datattribut benotzen, wat mir gewielt hunn fir eis Dokumenter ze maachen. Wann Dir benotzt <button>, musst Dir enthalentype="button" oder Är Formulaire kënnen net ofginn.

Einfach de Standard Alarmmeldung mat zwou fakultativ Klassen verlängeren: .alert-blockfir méi Polsterung an Textkontrollen a .alert-headingfir eng passende Rubrik.

Opgepasst!

Beschte kontrolléiert Iech selwer, Dir sicht net ze gutt. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

  1. <div class = "alarm alert-block" >
  2. <a class = "close" data-dismiss = "alarm" href = "#" > × </a>
  3. <h4 class = "alert-heading" > Opgepasst! </h4>
  4. Beschte kontrolléiert Iech selwer, Dir sidd net ...
  5. </div>

Kontextuell Alternativen Füügt optional Klassen un fir d'Konnotatioun vun enger Alarm z'änneren

Feeler oder Gefor

Oh snap! Ännert e puer Saachen a probéiert nach eng Kéier ofzeginn.
  1. <div class = "alarm alert-error" >
  2. ...
  3. </div>

Erfolleg

Gutt gemaach! Dir hutt dës wichteg Alarmmeldung erfollegräich gelies.
  1. <div class = "alarm alert-success" >
  2. ...
  3. </div>

Informatiounen

Kapp erop! Dës Alarm brauch Är Opmierksamkeet, awer et ass net super wichteg.
  1. <div class = "alarm alert-info" >
  2. ...
  3. </div>

Beispiller a Markup

Basis

Standard Fortschrëtt Bar mat engem vertikalen Gradient.

  1. <div class = "Progress" >
  2. <div class = "bar"
  3. style = " Breet : 60 %; " ></div>
  4. </div>

Gestreift

Benotzt e Gradient fir e gesträifte Effekt ze kreéieren (keng IE).

  1. <div class = "Fortschrëtter gestreift" >
  2. <div class = "bar"
  3. style = " Breet : 20 %; " ></div>
  4. </div>

Animéiert

Huelt dat gesträifte Beispill an animéiert et (keng IE).

  1. <div class = "Fortschrëtt Fortschrëtter gestreift
  2. aktiv" >
  3. <div class = "bar"
  4. style = " Breet : 40 %; " ></div>
  5. </div>

Optiounen a Browser Ënnerstëtzung

Zousätzlech Faarwen

Fortschrëtt Baren benotzen e puer vun der selwechter Knäppchen an Alarm Klassen fir konsequent Stiler.

Gestreift Baren

Ähnlech wéi déi zolidd Faarwen hu mir variéiert gesträifte Fortschrëttbarren.

Verhalen

Fortschrëtt Baren benotzen CSS3 Transitioune, also wann Dir dynamesch d'Breet via Javascript ajustéieren, wäert et glat änneren.

Wann Dir d' .activeKlass benotzt, .progress-stripedwäerten Är Fortschrëtter Baren d'Sträifen vu lénks op riets animéieren.

Browser Ënnerstëtzung

Fortschrëtter Baren benotzen CSS3 Gradienten, Iwwergäng an Animatiounen fir all hir Effekter z'erreechen. Dës Funktiounen ginn net an IE7-9 oder méi al Versioune vu Firefox ënnerstëtzt.

Opera an IE ënnerstëtzen keng Animatiounen zu dëser Zäit.

Wells

Benotzt d'Wuel als einfachen Effekt op en Element fir en inset Effekt ze ginn.

Kuckt, ech sinn an enger Brunn!
  1. <div class = "well" >
  2. ...
  3. </div>

Zoumaachen Ikon

Benotzt déi generesch Zoumaache Ikon fir Inhalter wéi Modalen an Alarmer ze entloossen.

  1. <button class = "zou" > × </button>

iOS Apparater erfuerderen en href = "#" fir Klickevenementer wann Dir léiwer en Anker benotzt.

  1. <a class = "close" href = "#"> & mol; </a>