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:

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

Toolbar Beispill

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

<div class = "btn-toolbar" > 
  <div class = "btn-group" > 
    ...
  </div>
</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.

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#">   
    Aktioun
    <span class = "caret" ></span> 
  </a>
  <ul class = "dropdown-menu" > 
    <!-- Dropdown-Menü Linken -->
  </ul>
</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.

<div class = "btn-group" > 
  ...
  <ul class = "Dropdown-Menu pull-right" > 
    <!-- Dropdown-Menü Linken -->
  </ul>
</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.

<div class = "btn-group" > 
  <button class = "btn" > Aktioun </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </knapp>
  <ul class = "dropdown-menu" > 
    <!-- Dropdown-Menü Linken -->
  </ul>
</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.

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

Liichtgewiicht Standards Selwecht Markup, verschidde Klassen

Mächteg Basis Klass

All nav Komponente hei-Tabs, Pëllen, a Lëschte- deelen déi selwecht Basis Markup a Stiler duerch d' .navKlass.

Wéini ze benotzen

Tabs a Pëllen si super fir Sektiounen vum Inhalt oder fir tëscht Säiten vum verwandten Inhalt ze navigéieren.

Komponent Ausrichtung

Fir nav Linken auszegläichen, benotzt d' .pull-leftoder .pull-rightUtility Klassen. Béid Klassen addéieren e CSS Float an der spezifizéierter Richtung.

Basis Tabs

Huelt regelméisseg <ul>Linken a füügt .nav-tabs:

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

Basis Pëllen

Huelt datselwecht HTML, awer benotzt .nav-pillsamplaz:

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

Stackbar Maacht Tabs oder Pëllen vertikal

Wéi stackelen ech se

Als Tabs a Pëllen sinn par défaut horizontal, füügt just eng zweet Klass, .nav-stacked, fir datt se vertikal gestapelt schéngen.

Gestapelt Tabs

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

Stack Pëllen

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

Dropdowns Fir fortgeschratt nav Komponente

Räich Menue einfach gemaach

Dropdown-Menüen an Bootstrap Tabs a Pillen si super einfach a erfuerderen nëmmen e bëssen extra HTML an e liichte jQuery Plugin.

Gitt op d'Javascript Säit fir d'Dokumenter ze liesen iwwer d' Initialiséierung vun Dropdowns am Bootstrap.

Tabs mat Dropdowns

<ul class = "nav nav-tabs" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "Dropdown"
       href = "#" >
        Fale loossen
        <b class = "caret" ></b> 
      </a>
    <ul class = "dropdown-menu" > 
      <!-- Linken -->
    </ul>
  </li>
</ul>

Pillen mat Dropdowns

<ul class = "nav nav-pillen" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "Dropdown"
       href = "#" >
        Fale loossen
        <b class = "caret" ></b> 
      </a>
    <ul class = "dropdown-menu" > 
      <!-- Linken -->
    </ul>
  </li>
</ul>

Nav Lëschte Baut einfach gestapelt Navs, super fir Sidebars

Applikatioun-Stil Navigatioun

Nav Lëschte bidden en einfachen an einfache Wee fir Gruppe vu Nav Links mat optionalen Header ze bauen. Si sinn am beschten an Sidebars wéi de Finder am OS X benotzt.

Strukturell si se op deeselwechte Kärnav-Stiler gebaut wéi Tabs a Pëllen, sou datt d'Benotzung an d'Personaliséierung einfach sinn.

Mat Ikonen

Nav Lëschte sinn och einfach mat Ikonen ze equipéieren. Füügt de passenden <i>Tag mat der Klass an Dir sidd ageriicht.

Horizontal Deeler

Füügt en horizontalen Trenndeel un andeems Dir en eidele Lëscht Element mat der Klass erstellt .divider, sou wéi:

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

Beispill nav Lëscht

Huelt eng Lëscht vu Linken a füügt class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > 
    Lëscht Header
  </li>
  <li class = "aktiv" > 
    <a href = "#" > Home </a> 
  </li>
  <li>
    <a href = "#" > Bibliothéik </a> 
  </li>
  ...
</ul>

Beispill mat Ikonen

Selwecht Beispill, awer mat <i>Tags fir Ikonen.

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

Tabbable nav Bréngt Tabs zum Liewen iwwer Javascript

Wat ass mat abegraff

Bréngt Är Tabs zum Liewen mat engem einfache Plugin fir tëscht Inhalt iwwer Tabs ze wiesselen. Bootstrap integréiert Tabs Tabs a véier Stiler: uewen (Standard), riets, ënnen a lénks.

Zwëschen hinnen z'änneren ass einfach a brauch nëmme ganz wéineg Markup z'änneren.

Fade an Tabs

Fir d'Tabs ze verschwannen, füügt .fadeall .tab-pane.

Verlaangt jQuery Plugin

All tabbar Tabs ginn ugedriwwen vun eisem liichte jQuery Plugin. Liest méi iwwer wéi Dir Tabbar Tabs zum Liewen op der Javascript Dokumenter Säit bréngt .

Gitt d'Javascript →

Tabable Beispill

Fir Tabs Tabbar ze maachen, erstellt eng .tab-paneeenzegaarteg ID fir all Tab a wéckelt se an .tab-content.

Ech sinn am Sektioun 1.

Howdy, I'm in Section 2.

What up girl, this is Section 3.

Fir riets oder lénks ausgeriicht Tabs, wéckelt d' .nav-tabsan .tab-contentan .tabbable.

Einfach Markup

Tabbar Tabs benotzen erfuerdert eng Wrapping Div, eng Rei vun Tabs, an eng Rei vun Tabable Panels vum Inhalt.

<div class = "tabbable" > <!-- Nëmmen néideg fir lénks/riets Tabs -->  
  <ul class = "nav nav-tabs" > 
    <li class = "aktiv" ><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> Ech sinn an der Sektioun 1. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Moien, ech sinn an der Sektioun 2. </p>
    </div>
  </div>
</div>

Tabbar an all Richtung

Tabs um ënnen

Flip d'Uerdnung vum HTML a füügt eng Klass un fir Tabs um Buedem ze setzen.

Ech sinn an der Sektioun A.

Howdy, I'm in Section B.

What up girl, this is Section C.

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

Tabs op der lénker Säit

Tauscht d'Klass fir Tabs op der lénker Säit ze setzen.

Ech sinn an der Sektioun A.

Howdy, I'm in Section B.

What up girl, this is Section C.

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

Tabs op der rietser Säit

Tauscht d'Klass fir Tabs op der rietser Säit ze setzen.

Ech sinn an der Sektioun A.

Howdy, I'm in Section B.

What up girl, this is Section C.

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

Statesch Navbar Beispill

E Beispill vun enger statesch (net un der Spëtzt fixéiert) Navbar mat Projet Numm, Navigatioun, a Sich Form.

Navbar Steier

D'Navbar erfuerdert nëmmen e puer Divs fir se gutt fir statesch oder fix Display ze strukturéieren.

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

Fixéiert Navbar

Fixéiert d'Navbar uewen oder ënnen vum Viewport mat enger zousätzlech Klass op der äusserst Divi .navbar,.

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

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

Wann Dir d'Navbar befestegt, erënnert Iech un dat verstoppt Gebitt drënner ze berechnen. Füügt 40px oder méi Polsterung un d' <body>. Gitt sécher dëst no der Core Bootstrap CSS a virun der optionaler reaktiounsfäeger CSS ze addéieren.

Markennumm

En einfache Link fir Är Mark oder Projet Numm ze weisen erfuerdert nëmmen en Ankertag.

<a class = "brand" href = "#" >  
  Projet Numm
</a>

Formen an navbar

Fir eng Form an der Navbar richteg ze stiléieren an ze positionéieren, füügt déi entspriechend Klassen un wéi hei ënnendrënner. Fir e Standardformular, enthalen .navbar-forman entweder .pull-leftoder .pull-rightfir se richteg ze alignéieren.

<form class = "navbar-form pull-left" > 
  <input type = "text" class = "span2" >  
</form>

Fir e méi personaliséierte Sichformular, füügt .navbar-searchden forman .search-queryun den Input fir spezialiséiert Stiler an der Navbar.

<form class = "navbar-search pull-left" > 
  <input type = "text" class = "search-query" placeholder = "Sich" >   
</form>

Optional reaktiounsfäeger Variatioun

Ofhängeg vum Betrag vum Inhalt an Ärer Topbar, wëllt Dir vläicht déi reaktiounsfäeg Optiounen ëmsetzen. Fir dat ze maachen, wéckelt Ären nav Inhalt an engem enthalen div, .nav-collapse.collapse, a füügt den navbar Toggle Knäppchen .btn-navbar,.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "container" > 
 
      <!-- .btn-navbar gëtt als Toggle fir zesummegeklappt Navbar Inhalt benotzt -->
      <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>
 
      <!-- Vergewëssert Iech d'Mark dobaussen ze loossen wann Dir se wëllt weisen -->
      <a class = "brand" href = "#" > Projet Numm </a>  
 
      <!-- Alles wat Dir wëllt verstoppt op 940px oder manner, plazéiert hei bannen -->
      <div class = "nav-collapse" > 
        <!-- .nav, .navbar-search, .navbar-form, etc -->
      </div>
 
    </div>
  </div>
</div>

Kapp erop! Déi reaktiounsfäeger Navbar erfuerdert den Zesummebroch Plugin a reaktiounsfäeger Bootstrap CSS Datei .

Nav Linken

Nav Elementer sinn einfach ze addéieren iwwer ongeuerdnete Lëschten.

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

Dir kënnt einfach Dividere fir Är nav Linken mat engem eidele Lëscht Element an enger einfacher Klass addéieren. Füügt just dëst tëscht Linken derbäi:

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

Komponent Ausrichtung

Fir eng Navigatioun, Sichform oder Text auszegläichen, benotzt d' .pull-leftUtility .pull-rightKlassen. Béid Klassen addéieren e CSS Float an der spezifizéierter Richtung.

Füügt Dropdown-Menüen

D'Dropdowns an d'Dropups op d'Navigatioun addéieren ass super einfach, awer erfuerdert d'Benotzung vun eisem Javascript Plugin .

<ul class = "nav" > 
  <li class = "dropdown" > 
    <a href = "#" 
          class = "dropdown-toggle"
          data-toggle = "Dropdown" >
          Kont
          <b class = "caret" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

Gitt d'Javascript →

Text an der Navbar

Wrap Strings vun Text an engem <.navbar-text>, normalerweis op engem <p>Tag fir richteg Leedung a Faarf.

Firwat se benotzen

Breadcrumb Navigatioun gëtt als Wee benotzt fir Benotzer ze weisen wou se an enger App oder op engem Site sinn, awer net fir primär Navigatioun. Halt hir Benotzung sparsam a succinct fir am effektivsten ze sinn.

Beispiller

Een eenzegt Beispill gewisen wéi et op verschidde Säiten ugewise ka ginn.

Markup

HTML ass Är Standard onordéiert Lëscht mat Linken.

<ul class = "breadcrumb" > 
  <li>
    <a href = "#" > Home </a> <span class = "divider" > / </span>   
  </li>
  <li>
    <a href = "#" > Bibliothéik </a> <span class = "divider" > / </span>   
  </li>
  <li class = "active" > Daten </li> 
</ul>

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

<div class = "paginéieren" > 
  <ul>
    <li><a href = "#" > Virdrun </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 = "#" > Nächst </a></li> 
  </ul>
</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.

<ul class = "pager" > 
  <li>
    <a href = "#" > Virdrun </a> 
  </li>
  <li>
    <a href = "#" > Nächst </a> 
  </li>
</ul>

Ausgeriicht Linken

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

<ul class = "pager" > 
  <li class = "virdrun" > 
    <a href = "#"> & larr ; Eeler </a> 
  </li>
  <li class = "nächst" > 
    <a href = "#" > Méi nei → </a> 
  </li>
</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:

<div class = "hero-unit" > 
  <h1> Iwwerschrëft </h1>
  <p> Tagline </p>
  <p>
    <a class = "btn btn-primär btn-large" > 
      Léier méi
    </a>
  </p>
</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.

<div class = "page-header" > 
  <h1> Beispill Säit Header </ h1>
</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 :

<ul class = "thumbnails" > 
  <li class = "span3" > 
    <a href = "#" class = "Thumbnail" >  
      <img src = "https://placehold.it/260x180" alt = "" >  
    </a>
  </li>
  ...
</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:

<ul class = "thumbnails" > 
  <li class = "span3" > 
    <div class = "thumbnail" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Thumbnail Label </h5>
      <p> Thumbnail Iwwerschrëft hei... </p>
    </div>
  </li>
  ...
</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.

<div class = "alarm" > 
  <button class = "close" data-dismiss = "alarm" > × </button>  
  <strong> Opgepasst! </strong> Am beschten kontrolléiert Iech selwer, Dir gesitt net ze gutt aus.
</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.

<div class = "alarm alert-block" > 
  <a class = "close" data-dismiss = "alarm" href = "#" > × </a>   
  <h4 class = "alert-heading" > Opgepasst! </h4> 
  Beschte kontrolléiert Iech selwer, Dir sidd net ...
</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.

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

Erfolleg

Gutt gemaach! Dir hutt dës wichteg Alarmmeldung erfollegräich gelies.

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

Informatiounen

Kapp erop! Dës Alarm brauch Är Opmierksamkeet, awer et ass net super wichteg.

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

Beispiller a Markup

Basis

Standard Fortschrëtt Bar mat engem vertikalen Gradient.

<div class = "Progress" > 
  <div class = "bar" 
       style = " Breet : 60 %; " ></div> 
</div>

Gestreift

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

<div class = "Fortschrëtter gestreift" > 
  <div class = "bar" 
       style = " Breet : 20 %; " ></div> 
</div>

Animéiert

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

<div class = "Fortschrëtt Fortschrëtter gestreift 
     aktiv" >
  <div class = "bar" 
       style = " Breet : 40 %; " ></div> 
</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!

<div class = "well" > 
  ...
</div>

Zoumaachen Ikon

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

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

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

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

Knäppchen Gruppen Maacht mat Knäppercher fir méi Toolbar-ähnlech Funktionalitéit

Knäppchen Gruppen

Beschte Praktiken

Standard Beispill

Toolbar Beispill

Checkbox a Radio Goûten

Dropdowns a Knäppchen Gruppen

Button Dropdown Menus Gebaut op Knäppchen Gruppen fir kontextuell Menüen ze bidden

Knäppchen dropdowns

Iwwersiicht an Beispiller

Beispill Markup

Schafft mat all Knäppchen Gréissten

Verlaangt Javascript

Split Knäppchen Dropdowns

Iwwersiicht an Beispiller

Gréissten

Beispill Markup

Dropup Menüen

Nav, Tabs, a Pëllen Héich personaliséierbar Lëscht-Stil Navigatioun

Liichtgewiicht Standards Selwecht Markup, verschidde Klassen

Mächteg Basis Klass

Wéini ze benotzen

Komponent Ausrichtung

Basis Tabs

Basis Pëllen

Stackbar Maacht Tabs oder Pëllen vertikal

Wéi stackelen ech se

Gestapelt Tabs

Stack Pëllen

Dropdowns Fir fortgeschratt nav Komponente

Räich Menue einfach gemaach

Tabs mat Dropdowns

Pillen mat Dropdowns

Nav Lëschte Baut einfach gestapelt Navs, super fir Sidebars

Applikatioun-Stil Navigatioun

Mat Ikonen

Horizontal Deeler

Beispill nav Lëscht

Beispill mat Ikonen

Tabbable nav Bréngt Tabs zum Liewen iwwer Javascript

Wat ass mat abegraff

Fade an Tabs

Verlaangt jQuery Plugin

Tabable Beispill

Einfach Markup

Tabbar an all Richtung

Tabs um ënnen

Tabs op der lénker Säit

Tabs op der rietser Säit

Navbar

Statesch Navbar Beispill

Navbar Steier

Fixéiert Navbar

Markennumm

Formen an navbar

Optional reaktiounsfäeger Variatioun

Nav Linken

Komponent Ausrichtung

Füügt Dropdown-Menüen

Text an der Navbar

Brout

Firwat se benotzen

Beispiller

Markup

Paginéierung Zwou Optiounen fir duerch Inhalt ze paging

Multicon-Säit Paginatioun

Wéini ze benotzen

Staatlech Säit Linken

Flexibel Ausrichtung

Beispiller

Markup

Pager Fir séier virdrun an nächst Linken

Iwwer pager

Fakultativ behënnert Staat

Standard Beispill

Ausgeriicht Linken

Inline Etiketten Label an annotéiert Text

Badges Indikatoren an ongelies Zuelen

Iwwer

Verfügbar Klassen