Voorbeeld

Wisselbare, kontekstuele kieslys vir die vertoon van lyste skakels. Interaktief gemaak met die aftreklys JavaScript-inprop .

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Handeling </a></li>  
  <li><a tabindex = "-1" href = "#" > Nog 'n handeling </a></li>  
  <li><a tabindex = "-1" href = "#" > Iets anders hier </a></li>  
  <li klas = "verdeler" ></li> 
  <li><a tabindex = "-1" href = "#" > Geskeide skakel </a></li>  
</ul>

Opmerk

Kyk net na die aftreklys, hier is die vereiste HTML. Jy moet die aftreklys se sneller en die aftrekkieslys binne vou .dropdown, of 'n ander element wat verklaar position: relative;. Skep dan net die spyskaart.

<div class = "dropdown" > 
  <!-- Skakel of knoppie om aftreklys te wissel -->
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    <li><a tabindex = "-1" href = "#" > Handeling </a></li>  
    <li><a tabindex = "-1" href = "#" > Nog 'n handeling </a></li>  
    <li><a tabindex = "-1" href = "#" > Iets anders hier </a></li>  
    <li klas = "verdeler" ></li> 
    <li><a tabindex = "-1" href = "#" > Geskeide skakel </a></li>  
  </ul>
</div>

Opsies

Belyn spyskaarte na regs en voeg bykomende vlakke van aftrekkies by.

Belyn die spyskaarte

Voeg .pull-rightby 'n .dropdown-menuna regs-belyn die aftreklys.

<ul class = "dropdown-menu pull-right" role = "menu" aria-labelledby = "dLabel" >   
  ...
</ul>

Gedeaktiveerde spyskaartopsies

Voeg .disabledby 'n <li>in die aftreklys om die skakel te deaktiveer.

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Gereelde skakel </a></li>  
  <li class = "disabled" ><a tabindex = "-1" href = "#" > Gedeaktiveerde skakel </a></li>   
  <li><a tabindex = "-1" href = "#" > Nog 'n skakel </a></li>  
</ul>

Sub-kieslyste op aftreklys

Voeg 'n ekstra vlak van aftrekkieslys by, wat op die muis verskyn soos dié van OS X, met 'n paar eenvoudige opmaak-byvoegings. Voeg .dropdown-submenuby enige liin 'n bestaande aftreklys vir outomatiese stilering.

Verstek

Dropup

Linker subkieslys

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
  ...
  <li klas = "aftreklys-submenu" > 
    <a tabindex = "-1" href = "#" > Meer opsies </a>  
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

Voorbeelde

Twee basiese opsies, tesame met twee meer spesifieke variasies.

Enkelknoppie groep

Draai 'n reeks knoppies toe met .btnin .btn-group.

<div klas = "btn-groep" > 
  <button class = "btn" > Links </button> 
  <button class = "btn" > Middel </button> 
  <button class = "btn" > Regs </button> 
</div>

Veelvuldige knoppie groepe

Kombineer stelle <div class="btn-group">in 'n <div class="btn-toolbar">vir meer komplekse komponente.

<div klas = "btn-nutsbalk" > 
  <div klas = "btn-groep" > 
    ...
  </div>
</div>

Vertikale knoppie groepe

Laat 'n stel knoppies vertikaal gestapel vertoon eerder as horisontaal.

<div klas = "btn-groep btn-groep-vertikaal" > 
  ...
</div>

Merkblokkie en radiogeure

Knoppiegroepe kan ook as radio's funksioneer, waar slegs een knoppie aktief mag wees, of merkblokkies, waar enige aantal knoppies aktief mag wees. Bekyk die JavaScript-dokumente daarvoor.

Aftrekkies in knoppiegroepe

Let op!Knoppies met aftreklys moet individueel in hul eie toegedraai word .btn-groupbinne 'n .btn-toolbarvir behoorlike weergawe.

Oorsig en voorbeelde

Gebruik enige knoppie om 'n aftreklys te aktiveer deur dit binne 'n te plaas .btn-groupen die regte spyskaartopmaak te verskaf.

<div klas = "btn-groep" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    Aksie
    <span class = "caret" ></span> 
  </a>
  <ul class = "dropdown-menu" > 
    <!-- aftreklys skakels -->
  </ul>
</div>

Werk met alle knopgroottes

Knoppie-aftrekkies werk op enige grootte: .btn-large, .btn-small, of .btn-mini.

Vereis JavaScript

Knoppie-aftrekkies vereis die Bootstrap-aftrek-inprop om te funksioneer.

In sommige gevalle - soos mobiele - sal aftrekkieslys buite die uitsigvenster strek. Jy moet die belyning met die hand of met pasgemaakte JavaScript oplos.

Verdeel knoppie aftrekkies

Deur voort te bou op die knoppiegroepstyle en opmaak, kan ons maklik 'n verdeelknoppie skep. Verdeel-knoppies het 'n standaardaksie aan die linkerkant en 'n aftrek-skakelaar aan die regterkant met kontekstuele skakels.

<div klas = "btn-groep" > 
  <button class = "btn" > Handeling </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </knoppie>
  <ul class = "dropdown-menu" > 
    <!-- aftreklys skakels -->
  </ul>
</div>

Groottes

Gebruik die ekstra knoppieklasse .btn-mini, .btn-small, of .btn-largevir grootte.

<div klas = "btn-groep" > 
  <button class = "btn btn-mini" > Aksie </button> 
  <button class = "btn btn-mini dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </knoppie>
  <ul class = "dropdown-menu" > 
    <!-- aftreklys skakels -->
  </ul>
</div>

Verlaat spyskaarte

Aftrekkieslyste kan ook van onder na bo gewissel word deur 'n enkele klas by die onmiddellike ouer van te voeg .dropdown-menu. Dit sal die rigting van die .caretomdraai en die spyskaart self herposisioneer om van onder na bo te beweeg in plaas van bo na onder.

<div class = "btn-group dropup" > 
  <button class = "btn" > Dropup </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </knoppie>
  <ul class = "dropdown-menu" > 
    <!-- aftreklys skakels -->
  </ul>
</div>

Liggewig-standaarde Dieselfde opmaak, verskillende klasse

Alle nav-komponente hier—oortjies, pille en lyste— deel dieselfde basisopmerk en style deur die .navklas.

Basiese oortjies

Neem gereelde <ul>skakels en voeg by .nav-tabs:

<ul class = "nav nav-tabs" > 
  <li klas = "aktief" > 
    <a href = "#" > Tuis </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Basiese pille

Neem dieselfde HTML, maar gebruik .nav-pillseerder:

<ul klas = "nav nav-pille" > 
  <li klas = "aktief" > 
    <a href = "#" > Tuis </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Gestremde toestand

Vir enige navigasie-komponent (oortjies, pille of lys), voeg by .disabledvir grys skakels en geen hover-effekte nie . Skakels sal egter klikbaar bly, tensy jy die hrefkenmerk verwyder. Alternatiewelik kan jy pasgemaakte JavaScript implementeer om daardie klikke te voorkom.

<ul klas = "nav nav-pille" > 
  ...
  <li class = "disabled" ><a href = "#" > Tuis </a></li>  
  ...
</ul>

Komponentbelyning

Om navigasieskakels in lyn te bring, gebruik die .pull-leftof .pull-rightnutsklasse. Beide klasse sal 'n CSS-float in die gespesifiseerde rigting byvoeg.

Stapelbaar

Aangesien oortjies en pille by verstek horisontaal is, voeg net 'n tweede klas by, .nav-stacked, om hulle vertikaal gestapel te laat lyk.

Gestapelde oortjies

<ul klas = "nav nav-tabs nav-gestapel" > 
  ...
</ul>

Gestapelde pille

<ul klas = "nav nav-pille nav-gestapel" > 
  ...
</ul>

Aftrekkies

Voeg aftrekkieslyste by met 'n bietjie ekstra HTML en die aftreklys JavaScript-inprop .

Oortjies met aftreklys

<ul class = "nav nav-tabs" > 
  <li klas = "aftreklys" > 
    <a class = "dropdown-wissel" 
       data-toggle = "aftreklys"
       href = "#" >
        Aftreklys
        <b class = "caret" ></b> 
      </a>
    <ul class = "dropdown-menu" > 
      <!-- skakels -->
    </ul>
  </li>
</ul>

Pille met dropdowns

<ul klas = "nav nav-pille" >
  <li klas = "aftreklys" >
    <a class = "dropdown-wissel"
       data-wissel= "aftreklys"
       href= "#" >
        Aftreklys
        <b klas = "caret" ></b>
      </a>
    <ul klas = "dropdown-menu" >
      <!-- skakels -->
    </ul>
  </li>
</ul>

Nav lyste

'n Eenvoudige en maklike manier om groepe nav-skakels met opsionele opskrifte te bou. Hulle word die beste gebruik in sidebars soos die Finder in OS X.

Voorbeeld nav lys

Neem 'n lys van skakels en voeg by class="nav nav-list":

<ul klas = "nav nav-lys" > 
  <li class = "nav-header" > Lysopskrif </li> 
  <li klas = "aktief" ><a href = "#" > Tuis </a></li>  
  <li><a href = "#" > Biblioteek </a></li> 
  ...
</ul>

Let welVir nes binne 'n navigasielys, sluit class="nav nav-list"op enige geneste <ul>.

Horisontale verdelers

Voeg 'n horisontale verdeler by deur 'n leë lysitem met die klas te skep .divider, soos so:

<ul klas = "nav nav-lys" > 
  ...
  <li klas = "verdeler" ></li> 
  ...
</ul>

Tabbare nav

Bring jou oortjies lewendig met 'n eenvoudige inprop om tussen inhoud via oortjies te wissel. Bootstrap integreer tabbare oortjies in vier style: bo (verstek), regs, onder en links.

Tabbare voorbeeld

Om oortjies tabbaar te maak, skep 'n .tab-paneunieke ID vir elke oortjie en draai dit in .tab-content.

Ek is in afdeling 1.

Hallo, ek is in afdeling 2.

Hoe gaan dit meisie, dit is afdeling 3.

<div class = "tabbable" > <!-- Slegs nodig vir links/regs oortjies -->  
  <ul class = "nav nav-tabs" > 
    <li klas = "aktief" ><a href = "#tab1" data-toggle = "tab" > Afdeling 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > Afdeling 2 </a></li>  
  </ul>
  <div class = "tab-inhoud" > 
    <div class = "tab-paneel aktief" id = "tab1" >  
      <p> Ek is in Afdeling 1. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Hallo, ek is in Afdeling 2. </p>
    </div>
  </div>
</div>

Vervaag oortjies

Om oortjies te laat vervaag, voeg .fadeby elke .tab-pane.

Vereis jQuery-inprop

Alle tabbare oortjies word aangedryf deur ons liggewig jQuery-inprop. Lees meer oor hoe om oortjies met oortjies lewendig te maak op die JavaScript-dokumente-bladsy .

Tabblad in enige rigting

Oortjies aan die onderkant

Draai die volgorde van die HTML om en voeg 'n klas by om oortjies onderaan te plaas.

Ek is in afdeling A.

Hallo, ek is in Afdeling B.

Hoe gaan dit meisie, dit is Afdeling C.

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

Oortjies aan die linkerkant

Ruil die klas om oortjies aan die linkerkant te plaas.

Ek is in afdeling A.

Hallo, ek is in Afdeling B.

Hoe gaan dit meisie, dit is Afdeling C.

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

Oortjies aan die regterkant

Ruil die klas om oortjies aan die regterkant te plaas.

Ek is in afdeling A.

Hallo, ek is in Afdeling B.

Hoe gaan dit meisie, dit is Afdeling C.

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

Basiese navigasiebalk

Om mee te begin, is navigasiebalke staties (nie aan die bokant vas nie) en sluit ondersteuning vir 'n projeknaam en basiese navigasie in. Plaas een op enige plek binne 'n .container, wat die breedte van jou werf en inhoud bepaal.

<div klas = "navbar" > 
  <div class = "navbar-inner" > 
    <a class = "brand" href = "#" > Titel </a>  
    <ul klas = "nav" > 
      <li klas = "aktief" ><a href = "#" > Tuis </a></li>  
      <li><a href = "#" > Skakel </a></li> 
      <li><a href = "#" > Skakel </a></li> 
    </ul>
  </div>
</div>

Navbar komponente

Handelsmerk

'n Eenvoudige skakel om jou handelsmerk- of projeknaam te wys, benodig net 'n ankermerker.

<a class = "brand" href = "#" > Projeknaam </a>

Nav skakels

Nav-items is maklik om via ongeordende lyste by te voeg.

<ul klas = "nav" > 
  <li klas = "aktief" > 
    <a href = "#" > Tuis </a> 
  </li>
  <li><a href = "#" > Skakel </a></li> 
  <li><a href = "#" > Skakel </a></li> 
</ul>

Jy kan maklik verdelers by jou nav-skakels voeg met 'n leë lysitem en 'n eenvoudige klas. Voeg dit net tussen skakels by:

<ul klas = "nav" > 
  ...
  <li klas = "verdeler-vertikaal" ></li> 
  ...
</ul>

Vorms

Om 'n vorm in die navigasiebalk behoorlik te stileer en te posisioneer, voeg die toepaslike klasse by soos hieronder getoon. Vir 'n verstekvorm, sluit in .navbar-formen of .pull-leftof .pull-rightom dit behoorlik te belyn.

<vorm klas = "navbar-vorm trek-links" > 
  <input type = "text" class = "span2" >  
  <button type = "submit" class = "btn" > Dien in </button>  
</form>

Soek vorm

Vir 'n meer pasgemaakte soekvorm, voeg .navbar-searchby die formen .search-queryby die invoer vir gespesialiseerde style in die navigasiebalk.

<form class = "navbar-search pull-links" > 
  <input type = "text" class = "search-query" plekhouer = "Soek" >   
</form>

Komponentbelyning

Belyn navigasieskakels, soekvorm of teks, gebruik die .pull-leftof .pull-rightnutsklasse. Beide klasse sal 'n CSS-float in die gespesifiseerde rigting byvoeg.

Gebruik aftreklys

Voeg dropdowns en drop-ups by die nav met 'n bietjie opmaak en die dropdowns JavaScript-inprop .

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

Besoek die JavaScript-aftrekkiesdokumentasie vir meer opmaak en inligting oor oproepaftrekkies.

Teks

Draai stringe teks toe in 'n element met .navbar-text, gewoonlik op 'n <p>merker vir behoorlike leiding en kleur.

Opsionele vertoonvariasies

Bevestig die navigasiebalk aan die bokant of onderkant van die uitsigpoort met 'n bykomende klas op die buitenste div, .navbar.

Bo vasgemaak

Voeg by .navbar-fixed-topen onthou om rekening te hou met die versteekte area daaronder deur ten minste 40px paddingby die <body>. Maak seker dat jy dit byvoeg na die kern Bootstrap CSS en voor die opsionele responsiewe CSS.

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

Vas aan die onderkant

Voeg .navbar-fixed-bottomeerder by.

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

Statiese boonste navigasiebalk

Skep 'n volle wydte navigasiebalk wat saam met die bladsy wegrol deur by te voeg .navbar-static-top. In teenstelling met die .navbar-fixed-topklas, hoef jy nie enige vulling op die body.

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

Responsiewe navigasiebalk

Om 'n invouende responsiewe navigasiebalk te implementeer, draai jou navigasiebalkinhoud in 'n div, .nav-collapse.collapse, en voeg die navigasiebalk-wisselknoppie, .btn-navbar.

<div klas = "navbar" > 
  <div class = "navbar-inner" > 
    <div klas = "houer" > 
 
      <!-- .btn-navbar word gebruik as die skakelaar vir ingevoude navbar-inhoud -->
      <a class = "btn btn-navbar" data-toggle = "collapse" data-target = ".nav-collapse" >   
        <span klas = "ikoonbalk" ></span> 
        <span klas = "ikoonbalk" ></span> 
        <span klas = "ikoonbalk" ></span> 
      </a>
 
      <!-- Maak seker dat jy die handelsmerk daar buite laat as jy dit wil wys -->
      <a class = "brand" href = "#" > Projeknaam </a>  
 
      <!-- Alles wat jy wil versteek teen 940px of minder, plaas hier binne -->
      <div class = "nav-collapse collapse" > 
        <!-- .nav, .navbar-search, .navbar-form, ens -->
      </div>
 
    </div>
  </div>
</div>

Let op! Die responsiewe navigasiebalk vereis die ineenvou-inprop en responsiewe Bootstrap CSS-lêer .

Omgekeerde variasie

Verander die voorkoms van die navigasiebalk deur by te voeg .navbar-inverse.

<div class = "navbar navbar-inverse" > 
  ...
</div>

Voorbeelde

'n Enkele voorbeeld word gewys soos dit op verskeie bladsye vertoon kan word.

<ul class = "broodkrummel" > 
  <li><a href = "#" > Tuis </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Biblioteek </a> <span class = "divider" > / </span></li>   
  <li klas = "aktief" >  Data </li>
</ul>

Standaard paginering

Eenvoudige paginering geïnspireer deur Rdio, ideaal vir toepassings en soekresultate. Die groot blok is moeilik om te mis, maklik skaalbaar en bied groot klikareas.

<div klas = "paginering" > 
  <ul>
    <li><a href = "#" > Vorige </a></li> 
    <li><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 = "#"> 5 </a> </li> 
    <li><a href = "#" > Volgende </a></li> 
  </ul>
</div>

Opsies

Gestremde en aktiewe state

Skakels is aanpasbaar vir verskillende omstandighede. Gebruik .disabledvir onklikbare skakels en .activeom die huidige bladsy aan te dui.

<div klas = "paginering" > 
  <ul>
    <li klas = "gestrem" ><a href = "#" > « </a></li>  
    <li klas = "aktief" ><a href = "#" > 1 </a></li>  
    ...
  </ul>
</div>

U kan opsioneel aktiewe of gedeaktiveerde ankers vir streke uitruil om klikfunksionaliteit te verwyder terwyl u die beoogde style behou.

<div klas = "paginering" > 
  <ul>
    <li klas = "gestrem" ><span> « </span></li> 
    <li klas = "aktief" ><span> 1 </span></li> 
    ...
  </ul>
</div>

Groottes

Lus vir groter of kleiner paginering? Voeg .pagination-large, .pagination-small, of .pagination-miniby vir addisionele groottes.

<div class = "paginering paginering-groot" > 
  <ul>
    ...
  </ul>
</div>
<div klas = "paginering" > 
  <ul>
    ...
  </ul>
</div>
<div class = "paginering paginering-klein" > 
  <ul>
    ...
  </ul>
</div>
<div class = "paginering paginering-mini" > 
  <ul>
    ...
  </ul>
</div>

Belyning

Voeg een van twee opsionele klasse by om die belyning van pagineringskakels te verander: .pagination-centereden .pagination-right.

<div class = "paginering paginering-gesentreerd" > 
  ...
</div>

<div class = "paginering paginering-regs" > 
  ...
</div>

Blader

Vinnige vorige en volgende skakels vir eenvoudige paginering-implementerings met ligte opmaak en style. Dit is ideaal vir eenvoudige werwe soos blogs of tydskrifte.

Standaard voorbeeld

By verstek sentreer die pager skakels.

<ul klas = "pager" > 
  <li><a href="#">Previous</a></li>
  <li><a href="#">Next</a></li>
</ul>

Aligned links

Alternatively, you can align each link to the sides:

<ul class="pager">
  <li class="previous">
    <a href="#">&larr; Older</a>
  </li>
  <li class="next">
    <a href="#">Newer &rarr;</a>
  </li>
</ul>

Optional disabled state

Pager links also use the general .disabled utility class from the pagination.

<ul class="pager">
  <li class="previous disabled">
    <a href="#">&larr; Older</a>
  </li>
  ...
</ul>

Labels

Labels	Markup
Default	`<span class="label">Default</span>`
Success	`<span class="label label-success">Success</span>`
Warning	`<span class="label label-warning">Warning</span>`
Important	`<span class="label label-important">Important</span>`
Info	`<span class="label label-info">Info</span>`
Inverse	`<span class="label label-inverse">Inverse</span>`

Badges

Name	Example	Markup
Default	1	`<span class="badge">1</span>`
Success	2	`<span class="badge badge-success">2</span>`
Warning	4	`<span class="badge badge-warning">4</span>`
Important	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>`

Easily collapsible

For easy implementation, labels and badges will simply collapse (via CSS's :empty selector) when no content exists within.

Hero unit

A lightweight, flexible component to showcase key content on your site. It works well on marketing and content-heavy sites.

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Learn more

<div class="hero-unit">
  <h1>Heading</h1>
  <p>Tagline</p>
  <p>
    <a class="btn btn-primary btn-large">
      Learn more
    </a>
  </p>
</div>

Page header

A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small, element as well most other components (with additional styles).

<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

Default thumbnails

By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.

Highly customizable

With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.

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.

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

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

Action Action

Why use thumbnails

Thumbnails (previously .media-grid up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.

Simple, flexible markup

Thumbnail markup is simple—a ul with any number of li elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.

Uses grid column sizes

Lastly, the thumbnails component uses existing grid system classes—like .span2 or .span3—for control of thumbnail dimensions.

Markup

As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup for linked images:

<ul class="thumbnails">
  <li class="span4">
    <a href="#" class="thumbnail">
      <img data-src="holder.js/300x200" alt="">
    </a>
  </li>
  ...
</ul>

For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <a> for a <div> like so:

<ul class="thumbnails">
  <li class="span4">
    <div class="thumbnail">
      <img data-src="holder.js/300x200" alt="">
      <h3>Thumbnail label</h3>
      <p>Thumbnail caption...</p>
    </div>
  </li>
  ...
</ul>

More examples

Explore all your options with the various grid classes available to you. You can also mix and match different sizes.

Default alert

Wrap any text and an optional dismiss button in .alert for a basic warning alert message.

Warning! Best check yo self, you're not looking too good.

<div class="alert">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  <strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>

Dismiss buttons

Mobile Safari and Mobile Opera browsers, in addition to the data-dismiss="alert" attribute, require an href="#" for the dismissal of alerts when using an <a> tag.

<a href="#" class="close" data-dismiss="alert">&times;</a>

Alternatively, you may use a <button> element with the data attribute, which we have opted to do for our docs. When using <button>, you must include type="button" or your forms may not submit.

<button type="button" class="close" data-dismiss="alert">&times;</button>

Dismiss alerts via JavaScript

Use the alerts jQuery plugin for quick and easy dismissal of alerts.

Options

For longer messages, increase the padding on the top and bottom of the alert wrapper by adding .alert-block.

Warning!

Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

<div class="alert alert-block">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  <h4>Warning!</h4>
  Best check yo self, you're not...
</div>

Contextual alternatives

Add optional classes to change an alert's connotation.

Error or danger

Oh snap! Change a few things up and try submitting again.

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

Success

Well done! You successfully read this important alert message.

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

Information

Heads up! This alert needs your attention, but it's not super important.

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

Examples and markup

Basic

Default progress bar with a vertical gradient.

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

Striped

Uses a gradient to create a striped effect. Not available in IE7-8.

<div class="progress progress-striped">
  <div class="bar" style="width: 20%;"></div>
</div>

Animated

Add .active to .progress-striped to animate the stripes right to left. Not available in all versions of IE.

<div class="progress progress-striped active">
  <div class="bar" style="width: 40%;"></div>
</div>

Stacked

Place multiple bars into the same .progress to stack them.

<div class="progress">
  <div class="bar bar-success" style="width: 35%;"></div>
  <div class="bar bar-warning" style="width: 20%;"></div>
  <div class="bar bar-danger" style="width: 10%;"></div>
</div>

Options

Additional colors

Progress bars use some of the same button and alert classes for consistent styles.

<div class="progress progress-info">
  <div class="bar" style="width: 20%"></div>
</div>
<div class="progress progress-success">
  <div class="bar" style="width: 40%"></div>
</div>
<div class="progress progress-warning">
  <div class="bar" style="width: 60%"></div>
</div>
<div class="progress progress-danger">
  <div class="bar" style="width: 80%"></div>
</div>

Striped bars

Similar to the solid colors, we have varied striped progress bars.

<div class="progress progress-info progress-striped">
  <div class="bar" style="width: 20%"></div>
</div>
<div class="progress progress-success progress-striped">
  <div class="bar" style="width: 40%"></div>
</div>
<div class="progress progress-warning progress-striped">
  <div class="bar" style="width: 60%"></div>
</div>
<div class="progress progress-danger progress-striped">
  <div class="bar" style="width: 80%"></div>
</div>

Browser support

Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.

Versions earlier than Internet Explorer 10 and Opera 12 do not support animations.

Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.

Default example

The default media allow to float a media object (images, video, audio) to the left or right of a content block.

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Media heading

<div class="media">
  <a class="pull-left" href="#">
    <img class="media-object" data-src="holder.js/64x64">
  </a>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
 
    <!-- Nested media object -->
    <div class="media">
      ...
    </div>
  </div>
</div>

Media list

With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Nested media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Nested media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Nested media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

<ul class="media-list">
  <li class="media">
    <a class="pull-left" href="#">
      <img class="media-object" data-src="holder.js/64x64">
    </a>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
 
      <!-- Nested media object -->
      <div class="media">
        ...
     </div>
    </div>
  </li>
</ul>

Wells

Use the well as a simple effect on an element to give it an inset effect.

Look, I'm in a well!

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

Optional classes

Control padding and rounded corners with two optional modifier classes.

Look, I'm in a well!

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

Look, I'm in a well!

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

Close icon

Use the generic close icon for dismissing content like modals and alerts.

<button class="close">&times;</button>

iOS devices require an href="#" for click events if you would rather use an anchor.

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

Helper classes

Simple, focused classes for small display or behavior tweaks.

.pull-left

Float an element left

class="pull-left"

.pull-left {
  float: left;
}

.pull-right

Float an element right

class="pull-right"

.pull-right {
  float: right;
}

.muted

Change an element's color to #999

class="muted"

.muted {
  color: #999;
}

.clearfix

Clear the float on any element

class="clearfix"

.clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
  }
  &:after {
    clear: both;
  }
}

Aftrekkieslyste

Voorbeeld

Opmerk

Opsies

Belyn die spyskaarte

Gedeaktiveerde spyskaartopsies

Sub-kieslyste op aftreklys

Knoppie groepe

Voorbeelde

Enkelknoppie groep

Veelvuldige knoppie groepe

Vertikale knoppie groepe

Merkblokkie en radiogeure

Aftrekkies in knoppiegroepe

Knoppie aftrekkieslys

Oorsig en voorbeelde

Werk met alle knopgroottes

Vereis JavaScript

Verdeel knoppie aftrekkies

Groottes

Verlaat spyskaarte

Nav: oortjies, pille en lyste

Liggewig-standaarde Dieselfde opmaak, verskillende klasse

Basiese oortjies

Basiese pille

Gestremde toestand

Komponentbelyning

Stapelbaar

Gestapelde oortjies

Gestapelde pille

Aftrekkies

Oortjies met aftreklys

Pille met dropdowns

Nav lyste

Voorbeeld nav lys

Horisontale verdelers

Tabbare nav

Tabbare voorbeeld

Vervaag oortjies

Vereis jQuery-inprop

Tabblad in enige rigting

Oortjies aan die onderkant

Oortjies aan die linkerkant

Oortjies aan die regterkant

Navbar

Basiese navigasiebalk

Navbar komponente

Handelsmerk

Nav skakels

Vorms

Soek vorm

Komponentbelyning

Gebruik aftreklys

Teks

Opsionele vertoonvariasies

Bo vasgemaak

Vas aan die onderkant

Statiese boonste navigasiebalk

Responsiewe navigasiebalk

Omgekeerde variasie

Broodkrummels

Voorbeelde

Paginering Twee opsies om deur inhoud te blaai

Standaard paginering

Opsies

Gestremde en aktiewe state

Groottes

Belyning

Blader

Standaard voorbeeld

Aligned links

Optional disabled state

Labels and badges

Labels

Badges

Easily collapsible

Typographic components

Hero unit

Hello, world!

Page header