Foarbyld

Wizigje, kontekstueel menu foar it werjaan fan listen mei keppelings. Ynteraktyf makke mei de dropdown JavaScript-plugin .

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Aksje </a></li>  
  <li><a tabindex = "-1" href = "#" > In oare aksje </a></li>  
  <li><a tabindex = "-1" href = "#" > Hjir noch wat </a></li>  
  <li class = "divider" ></li> 
  <li><a tabindex = "-1" href = "#" > Skieden keppeling </a></li>  
</ul>

Markup

Sjoch nei gewoan it dellûkmenu, hjir is de fereaske HTML. Jo moatte de trigger fan it dellûkmenu en it dellûkmenu yn .dropdown, as in oar elemint dat ferklearret position: relative;. Dan gewoan meitsje it menu.

<div class = "dropdown" > 
  <!-- Keppeling of knop om útklapmenu te wikseljen -->
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    <li><a tabindex = "-1" href = "#" > Aksje </a></li>  
    <li><a tabindex = "-1" href = "#" > In oare aksje </a></li>  
    <li><a tabindex = "-1" href = "#" > Hjir noch wat </a></li>  
    <li class = "divider" ></li> 
    <li><a tabindex = "-1" href = "#" > Skieden keppeling </a></li>  
  </ul>
</div>

Opsjes

Rjochtsje menu's nei rjochts út en foegje ekstra nivo's fan dropdowns ta.

It ôfstimmen fan de menu's

Taheakje .pull-rightoan in .dropdown-menurjochts rjochtsje it dellûkmenu.

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

Utskeakele menu opsjes

Taheakje .disabledoan in <li>yn it útklapmenu om de keppeling út te skeakeljen.

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Gewoane keppeling </a></li>  
  <li class = "útskeakele" ><a tabindex = "-1" href = "#" > Keppeling útskeakele </a></li>   
  <li><a tabindex = "-1" href = "#" > In oare keppeling </a></li>  
</ul>

Submenu's op dropdowns

Foegje in ekstra nivo fan dropdown-menu's ta, ferskine op hover lykas dy fan OS X, mei wat ienfâldige markup tafoegings. Taheakje .dropdown-submenuoan elk liyn in besteande útklapmenu foar automatyske styling.

Standert

Dropup

Links submenu

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
  ...
  <li class = "dropdown-submenu" > 
    <a tabindex = "-1" href = "#" > Mear opsjes </a>  
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

Foarbylden

Twa basisopsjes, tegearre mei twa mear spesifike fariaasjes.

Single knop groep

Wrap in rige fan knoppen mei .btnyn .btn-group.

<div class = "btn-group" > 
  <button class = "btn" > Lofts </button> 
  <button class = "btn" > Middel </button> 
  <button class = "btn" > Rjochts </button> 
</div>

Meardere knopgroepen

Kombinearje sets fan <div class="btn-group">yn in <div class="btn-toolbar">foar mear komplekse komponinten.

<div class = "btn-arkbalke" > 
  <div class = "btn-group" > 
    ...
  </div>
</div>

Fertikale knop groepen

Meitsje in set fan knoppen ferskine fertikaal steapele ynstee horizontaal.

<div class = "btn-group btn-group-vertical" > 
  ...
</div>

Checkbox en radio smaken

Knopgroepen kinne ek funksjonearje as radio's, wêr't mar ien knop aktyf kin wêze, of karfakjes, wêr't elk oantal knoppen aktyf wêze kinne. Besjoch de JavaScript-dokuminten dêrfoar.

Dropdowns yn knopgroepen

Heads up!Knoppen mei dropdowns moatte wurde yndividueel ferpakt yn har eigen .btn-groupbinnen in .btn-toolbarfoar goede rendering.

Oersjoch en foarbylden

Brûk elke knop om in útklapmenu te triggerjen troch it yn in te pleatsen .btn-groupen de juste menuopmaak te leverjen.

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#">   
    Aksje
    <span class = "caret" ></span> 
  </a>
  <ul class = "dropdown-menu" > 
    <!-- dropdown menu keppelings -->
  </ul>
</div>

Wurket mei alle knop maten

Dropdown-knoppen wurkje yn elke grutte: .btn-large, .btn-small, of .btn-mini.

Fereasket JavaScript

Dropdown-knoppen fereaskje de Bootstrap dropdown-plugin om te funksjonearjen.

Yn guon gefallen - lykas mobyl - dellûkmenu's sille útwreidzje bûten de werjefteport. Jo moatte de ôfstimming manuell of mei oanpaste JavaScript oplosse.

Split knop dropdowns

Bouwe op 'e knopgroepstilen en markearring, kinne wy maklik in split knop meitsje. Splitknoppen hawwe in standert aksje oan 'e lofterkant en in útklapmenu oan' e rjochterkant mei kontekstuele keppelings.

<div class = "btn-group" > 
  <button class = "btn" > Aksje </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </knop>
  <ul class = "dropdown-menu" > 
    <!-- dropdown menu keppelings -->
  </ul>
</div>

Maten

Brûk de ekstra knopklassen .btn-mini, .btn-small, of .btn-largefoar grutte.

<div class = "btn-group" > 
  <button class = "btn btn-mini" > Aksje </button> 
  <button class = "btn btn-mini dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </knop>
  <ul class = "dropdown-menu" > 
    <!-- dropdown menu keppelings -->
  </ul>
</div>

Dropup menu's

Dropdown-menu's kinne ek fan ûnderen omheech wikselje troch in inkele klasse ta te foegjen oan 'e direkte âlder fan .dropdown-menu. It sil flip de rjochting fan de .careten reposition it menu sels te ferpleatsen fan ûnderen omheech ynstee fan top down.

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

Lichtgewicht standerts Deselde markup, ferskillende klassen

Alle nav-komponinten hjir - ljeppers, pillen en listen - diele deselde basismarkearring en stilen troch de .navklasse.

Basis ljeppers

Nim in reguliere <ul>keppelings en foegje ta .nav-tabs:

<ul class = "nav nav-tabs" > 
  <li class = "aktyf" > 
    <a href = "#" > Thús </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Basis pillen

Nim deselde HTML, mar brûk .nav-pillsynstee:

<ul class = "nav nav-pillen" > 
  <li class = "aktyf" > 
    <a href = "#" > Thús </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Utskeakele steat

Foar elke nav-komponint (ljeppers, pillen of list), tafoegje .disabledfoar grize keppelings en gjin hover-effekten . Keppelings sille lykwols klikber bliuwe, útsein as jo it hrefattribút fuortsmite. As alternatyf kinne jo oanpast JavaScript ymplementearje om dy klikken te foarkommen.

<ul class = "nav nav-pillen" > 
  ...
  <li class = "útskeakele" ><a href = "#" > Thús </a></li>  
  ...
</ul>

Component alignment

Om align nav keppelings, brûk de .pull-leftof .pull-rightnut klassen. Beide klassen sille in CSS-float tafoegje yn 'e oantsjutte rjochting.

Stapelber

As ljeppers en pillen binne standert horizontaal, foegje gewoan in twadde klasse ta, .nav-stacked, om se fertikaal steapele te sjen.

Opsteapele ljeppers

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

Opsteapele pillen

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

Dropdowns

Foegje dropdown-menu's ta mei in bytsje ekstra HTML en de dropdowns JavaScript-plugin .

Ljeppers mei dropdowns

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

Pillen mei dropdowns

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

Nav listen

In ienfâldige en maklike manier om groepen fan nav-keppelings te bouwen mei opsjonele kopteksten. Se wurde it bêste brûkt yn sydbalken lykas de Finder yn OS X.

Foarbyld nav list

Nim in list mei keppelings en foegje ta class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > Listkoptekst </li> 
  <li class = "aktyf" ><a href = "#" > Thús </a></li>  
  <li><a href = "#" > Bibleteek </a></li> 
  ...
</ul>

NoatFoar nêst binnen in nav list, befetsje class="nav nav-list"op eltse nested <ul>.

Horizontale dividers

Foegje in horizontale divider ta troch in leech listitem te meitsjen mei de klasse .divider, lykas sa:

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

Tabbable nav

Bring jo ljeppers ta libben mei in ienfâldige plugin om te wikseljen tusken ynhâld fia ljeppers. Bootstrap yntegreart tabbere ljeppers yn fjouwer stilen: boppe (standert), rjochts, ûnder en lofts.

Foarbyld fan Tabbable

Om ljeppers ljepperber te meitsjen, meitsje in .tab-panemei unike ID foar elke ljepper en wrap se yn .tab-content.

Ik bin yn seksje 1.

Hoi, ik bin yn seksje 2.

Wat mei famke, dit is seksje 3.

<div class = "tabbable" > <!-- Allinnich fereaske foar lofter/rjochter ljeppers -->  
  <ul class = "nav nav-tabs" > 
    <li class = "aktyf" ><a href = "#tab1" data-toggle = "tab" > Seksje 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > Seksje 2 </a></li>  
  </ul>
  <div class = "tab-ynhâld" > 
    <div class = "tab-pane active" id = "tab1" >  
      <p> Ik bin yn seksje 1. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Hoi, ik bin yn seksje 2. </p>
    </div>
  </div>
</div>

Fade yn ljeppers

Om ljeppers yn te ferdwinen, foegje .fadejo ta oan elk .tab-pane.

Fereasket jQuery plugin

Alle tabbere ljeppers wurde oandreaun troch ús lichtgewicht jQuery-plugin. Lês mear oer hoe't jo tabbere ljeppers ta libben bringe kinne op 'e JavaScript docs side .

Tabbable yn elke rjochting

Ljeppers op 'e boaiem

Flip de folchoarder fan 'e HTML en foegje in klasse ta om ljeppers op' e boaiem te pleatsen.

Ik sit yn seksje A.

Hoi, ik sit yn seksje B.

Wat mei famke, dit is seksje C.

<div class = "tabable tabs-below" > 
  <div class = "tab-ynhâld" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

Ljeppers oan de linkerkant

Wissel de klasse om ljeppers oan de linkerkant te pleatsen.

Ik sit yn seksje A.

Hoi, ik sit yn seksje B.

Wat mei famke, dit is seksje C.

<div class = "tabable tabs-left" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-ynhâld" > 
    ...
  </div>
</div>

Ljeppers oan de rjochterkant

Wissel de klasse om ljeppers oan de rjochterkant te pleatsen.

Ik sit yn seksje A.

Hoi, ik sit yn seksje B.

Wat mei famke, dit is seksje C.

<div class = "tabable tabs-right" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-ynhâld" > 
    ...
  </div>
</div>

Basis navigaasjebalke

Om te begjinnen binne navbars statysk (net fêst oan 'e boppekant) en befetsje stipe foar in projektnamme en basisnavigaasje. Pleats ien oeral binnen in .container, dy't de breedte fan jo side en ynhâld ynstelt.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <a class = "brand" href = "#"> Titel </a> _  
    <ul class = "nav" > 
      <li class = "aktyf" ><a href = "#" > Thús </a></li>  
      <li><a href = "#" > Keppeling </a></li> 
      <li><a href = "#" > Keppeling </a></li> 
    </ul>
  </div>
</div>

Navbar komponinten

Merk

In ienfâldige keppeling om jo merk- of projektnamme te sjen, fereasket allinich in ankertag.

<a class = "brand" href = "#"> Projektnamme </a> _

Nav keppelings

Nav-items binne ienfâldich ta te foegjen fia net-oardere listen.

<ul class = "nav" > 
  <li class = "aktyf" > 
    <a href = "#" > Thús </a> 
  </li>
  <li><a href = "#" > Keppeling </a></li> 
  <li><a href = "#" > Keppeling </a></li> 
</ul>

Jo kinne maklik tafoegje dividers oan jo nav keppelings mei in lege list item en in ienfâldige klasse. Foegje dit gewoan ta tusken keppelings:

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

Formulieren

Om in formulier goed te stylearjen en te pleatsen binnen de navbar, foegje de passende klassen ta lykas hjirûnder werjûn. Foar in standertfoarm, befetsje .navbar-formen of .pull-leftof .pull-rightom it goed út te rjochtsjen.

<form class = "navbar-form pull-left" > 
  <input type = "text" class = "span2" >  
  <button type = "submit" class = "btn" > Ferstjoere </button>  
</form>

Sykje formulier

Foar in mear oanpaste sykfoarm, tafoegje .navbar-searchoan de formen .search-queryoan de ynfier foar spesjalisearre stilen yn de navbar.

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

Component alignment

Align nav keppelings, sykje formulier, of tekst, brûk de .pull-leftof .pull-rightnut klassen. Beide klassen sille in CSS-float tafoegje yn 'e oantsjutte rjochting.

It brûken fan dropdowns

Foegje dropdowns en drop-ups ta oan de nav mei in bytsje markup en de dropdowns JavaScript plugin .

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

Besykje de dokumintaasje foar JavaScript-útklapmenu 's foar mear markearring en ynformaasje oer dropdowns foar skiljen.

Tekst

Wrap strings fan tekst yn in elemint mei .navbar-text, meastal op in <p>tag foar goede lieding en kleur.

Opsjonele display fariaasjes

Befestigje de navbar oan 'e boppe- of ûnderkant fan' e viewport mei in ekstra klasse op 'e bûtenste div .navbar,.

Fêst oan boppe

Foegje .navbar-fixed-topit ferburgen gebiet dêrûnder en tink om rekken te hâlden troch op syn minst 40px paddingta te foegjen oan de <body>. Wês wis dat jo dit tafoegje nei de kearn Bootstrap CSS en foar de opsjonele responsive CSS.

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

Fêst oan ûnderkant

Add .navbar-fixed-bottomynstee.

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

Statyske top navbar

Meitsje in navigaasjebalke mei folsleine breedte dy't mei de side fuort rôlet troch ta te foegjen .navbar-static-top. Oars as de .navbar-fixed-topklasse, hoege jo net te feroarjen gjin padding op de body.

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

Responsive navigaasjebalke

Om in ynfallende responsive navbar te ymplementearjen, wrap jo navbar-ynhâld yn in befetsjende div, .nav-collapse.collapse, en heakje de navbar-wikselknop ta .btn-navbar,.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "container" > 
 
      <!-- .btn-navbar wurdt brûkt as skeakel foar ynklapte navbar-ynhâld -->
      <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>
 
      <!-- Wês wis dat jo it merk derút litte as jo it sjen wolle -->
      <a class = "brand" href = "#"> Projektnamme </a> _  
 
      <!-- Alles wat jo wolle ferburgen op 940px of minder, pleats hjir binnen -->
      <div class = "nav-collapse collapse" > 
        <!-- .nav, .navbar-search, .navbar-form, ensfh -->
      </div>
 
    </div>
  </div>
</div>

Heads up! De responsive navbar fereasket it ynstoartplugin en it responsive Bootstrap CSS-bestân .

Inverted fariaasje

Feroarje it uterlik fan 'e navigaasjebalke troch ta te foegjen .navbar-inverse.

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

Foarbylden

In inkeld foarbyld werjûn sa't it kin wurde werjûn oer meardere siden.

<ul class = "breadcrumb" > 
  <li><a href = "#" > Thús </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Bibleteek </a> <span class = "divider" > / </span></li>   
  <li class = "active" > Gegevens </li> 
</ul>

Standert paginering

Ienfâldige paginaasje ynspireare troch Rdio, geweldig foar apps en sykresultaten. It grutte blok is min te missen, maklik skalberber en leveret grutte klikgebieten.

<div class = "pagina's" > 
  <ul>
    <li><a href = "#" > Foarige </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 = "#" > Folgjende </a></li> 
  </ul>
</div>

Opsjes

Utskeakele en aktive steaten

Keppelings binne oanpasber foar ferskate omstannichheden. Brûk .disabledfoar net-klikbere keppelings en .activeom de aktuele side oan te jaan.

<div class = "pagina's" > 
  <ul>
    <li class = "útskeakele" > <a href = "#"> « </a></li>  
    <li class = "aktyf" ><a href = "#"> 1 </a> </li>  
    ...
  </ul>
</div>

Jo kinne opsjoneel aktive of útskeakele ankers útwikselje foar spanten om klikfunksjonaliteit te ferwiderjen, wylst jo bedoelde stilen behâlde.

<div class = "pagina's" > 
  <ul>
    <li class = "útskeakele" ><span> « </span></li> 
    <li class = "aktyf" ><span> 1 </span></li> 
    ...
  </ul>
</div>

Maten

Wolle jo in gruttere of lytsere paginaasje? Add .pagination-large, .pagination-small, of .pagination-minifoar ekstra maten.

<div class = "pagination pagination-large" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagina's" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-small" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-mini" > 
  <ul>
    ...
  </ul>
</div>

Alignment

Foegje ien fan twa opsjonele klassen ta om de ôfstimming fan pagineringskeppelings te feroarjen: .pagination-centereden .pagination-right.

<div class = "pagination paginaasje-sintraal" > 
  ...
</div>

<div class = "pagination pagination-right" > 
  ...
</div>

Pager

Fluch foarige en folgjende keppelings foar ienfâldige paginaasje-ymplemintaasjes mei ljochte markup en stilen. It is geweldich foar ienfâldige siden lykas blogs of tydskriften.

Standert foarbyld

Standert sintraat de pager keppelings.

<ul class = "pager" > 
  <li><a href = "#" > Foarige </a></li> 
  <li><a href = "#" > Folgjende </a></li> 
</ul>

Oanpaste keppelings

As alternatyf kinne jo elke keppeling oan 'e kanten rjochtsje:

<ul class = "pager" > 
  <li class = "foarige" > 
    <a href = "#"> & larr ; Aldere </a> 
  </li>
  <li class = "folgjende" > 
    <a href = "#"> Nijer &rarr ; </a> 
  </li>
</ul>

Opsjoneel útskeakele steat

Pager-keppelings brûke ek de algemiene .disablednutklasse fan 'e paginaasje.

<ul class = "pager" > 
  <li class = "foarige útskeakele" > 
    <a href = "#"> & larr ; Aldere </a> 
  </li>
  ...
</ul>

Labels

Labels	Markup
Standert	`<span class="label">Default</span>`
Sukses	`<span class="label label-success">Success</span>`
Warskôging	`<span class="label label-warning">Warning</span>`
Belangryk	`<span class="label label-important">Important</span>`
Info	`<span class="label label-info">Info</span>`
Omkearde	`<span class="label label-inverse">Inverse</span>`

Badges

Namme	Foarbyld	Markup
Standert	1	`<span class="badge">1</span>`
Sukses	2	`<span class="badge badge-success">2</span>`
Warskôging	4	`<span class="badge badge-warning">4</span>`
Belangryk	6	`<span class="badge badge-important">6</span>`
Info	8	`<span class="badge badge-info">8</span>`
Omkearde	10	`<span class="badge badge-inverse">10</span>`

Maklik ynklapber

Foar maklike ymplemintaasje sille labels en badges gewoan ynstoarte (fia de :emptyseleksje fan CSS) as der gjin ynhâld bestiet.

Hero ienheid

In lichtgewicht, fleksibel komponint om wichtige ynhâld op jo side te werjaan. It wurket goed op marketing en ynhâld-swiere siden.

Hallo wrâld!

Dit is in ienfâldige helde-ienheid, in ienfâldige komponint yn jumbotron-styl om ekstra omtinken te freegjen foar featured ynhâld of ynformaasje.

Lear mear

<div class = "hero-unit" > 
  <h1> Koptekst </h1>
  <p> Tagline </p>
  <p>
    <a class = "btn btn-primary btn-large" > 
      Lear mear
    </a>
  </p>
</div>

Sidekoptekst

In ienfâldige shell foar in h1passend romte út en segment seksjes fan ynhâld op in side. It kin it h1standert smallelemint brûke, lykas de measte oare komponinten (mei ekstra stilen).

<div class = "page-header" > 
  <h1> Foarbyld fan koptekst <small> Subtekst foar koptekst </small></h1>
</div>

Standert thumbnails

Standert binne de thumbnails fan Bootstrap ûntworpen om keppele ôfbyldings wer te jaan mei minimale fereaske markup.

Heech oanpasber

Mei in bytsje ekstra opmaak is it mooglik om elke soart HTML-ynhâld lykas kopteksten, paragrafen of knoppen ta te foegjen oan thumbnails.

Miniatuerlabel

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.

Aksje Aksje
Miniatuerlabel

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.

Aksje Aksje
Miniatuerlabel

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.

Aksje Aksje

Wêrom brûke thumbnails

Miniatueren (earder .media-gridoant v1.4) binne geweldich foar rasteren fan foto's of fideo's, ôfbyldingssykresultaten, retailprodukten, portfolios, en folle mear. Se kinne keppelings wêze as statyske ynhâld.

Ienfâldige, fleksibele markup

Miniatuermarkearring is ienfâldich - in ulmei elk oantal lieleminten is alles dat nedich is. It is ek super fleksibel, wêrtroch elk type ynhâld mei mar in bytsje mear markup mooglik is om jo ynhâld te ferpakken.

Brûkt grid kolom maten

As lêste, de thumbnails komponint brûkt besteande raster systeem klassen-lykas .span2of .span3- foar kontrôle fan thumbnail diminsjes.

Markup

Lykas earder neamd, is de fereaske markup foar thumbnails ljocht en rjochtlinich. Hjir is in blik op de standert opset foar keppele ôfbyldings :

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

Foar oanpaste HTML-ynhâld yn thumbnails feroaret de markearring in bytsje. Om ynhâld op bloknivo oeral ta te stean, ruilje wy de <a>foar in <div>like sa:

<ul class = "thumbnails" > 
  <li class = "span4" > 
    <div class = "thumbnail" > 
      <img data-src = "holder.js/300x200" alt = "" >  
      <h3> Miniatuerlabel </h3>
      <p> Miniatuerûnderskrift... </p>
    </div>
  </li>
  ...
</ul>

Mear foarbylden

Ferkenne al jo opsjes mei de ferskate rasterklassen beskikber foar jo. Jo kinne ek mix en match ferskillende maten.

Standert warskôging

Wrap eltse tekst en in opsjoneel ôfwize knop yn .alertfoar in basis warskôging alert berjocht.

Warskôging! Best kontrolearje jo sels, jo sjogge net te goed.

<div class = "alert" > 
  <button type = "button" class = "slute" data-dismiss = "alarm" > × </knop>   
  <strong> Warskôging! </strong> Best kontrolearje jo sels, jo sjogge net te goed.
</div>

Knoppen ôfwize

Mobile Safari en Mobile Opera browsers, neist it data-dismiss="alert"attribút, fereaskje in href="#"foar it ûntslaan fan warskôgings by it brûken fan in <a>tag.

<a href = "#" class = "slute" data-dismiss = "alarm"> & times; </a>

As alternatyf kinne jo in <button>elemint brûke mei it data-attribút, dat wy hawwe keazen foar ús dokuminten. By it brûken fan <button>, moatte jo opnimme type="button"of jo formulieren kinne net yntsjinje.

<button type = "button" class = "slute" data-dismiss = "alarm" > × </knop>

Ferwiderje warskôgings fia JavaScript

Brûk de warskôgings jQuery plugin foar flugge en maklike ûntslach fan warskôgings.

Opsjes

Foar langere berjochten ferheegje de padding oan 'e boppe- en ûnderkant fan' e warskôgingswrapper troch ta te foegjen .alert-block.

Warskôging!

Best kontrolearje jo sels, jo sjogge net te goed. Nulla vitae elit libero, in pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

<div class = "alert alert-block" > 
  <button type = "button" class = "slute" data-dismiss = "alarm" > × </knop>   
  <h4> Warskôging! </h4>
  Best check jo sels, do bist net ...
</div>

Kontekstuele alternativen

Foegje opsjonele klassen ta om de konnotaasje fan in warskôging te feroarjen.

Flater of gefaar

Oh snap! Feroarje in pear dingen en besykje it opnij yn te stjoeren.

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

Sukses

Goed dien! Jo hawwe dit wichtige warskôgingsberjocht mei súkses lêzen.

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

Ynformaasje

Heads up! Dizze warskôging hat jo oandacht nedich, mar it is net super wichtich.

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

Foarbylden en markearring

Basic

Standert foarútgongbalke mei in fertikale gradient.

<div class = "foarútgong" > 
  <div class = "bar" style = " breedte : 60 %; " ></div>   
</div>

Striped

Brûkt in gradient om in gestreept effekt te meitsjen. Net beskikber yn IE7-8.

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

Animated

Taheakje .activeoan .progress-stripedom de strepen fan rjochts nei lofts te animearjen. Net beskikber yn alle ferzjes fan IE.

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

Opsteapele

Plak meardere balken yn itselde .progressom se te stapeljen.

<div class = "foarútgong" > 
  <div class = "bar bar-success" style = " breedte : 35 %; " ></div>   
  <div class = "bar bar-warning" style = " breedte : 20 %; " ></div>   
  <div class = "bar bar-danger" style = " breedte : 10 %; " ></div>   
</div>

Opsjes

Oanfoljende kleuren

Foarútgongsbalken brûke guon fan deselde knop- en warskôgingsklassen foar konsekwinte stilen.

<div class = "foarútgong-ynfo" > 
  <div class = "bar" style = " breedte : 20 % " ></div>   
</div>
<div class = "foarútgong-sukses" > 
  <div class = "bar" style = " breedte : 40 % " ></div>   
</div>
<div class = "foarútgong warskôging" > 
  <div class = "bar" style = " breedte : 60 % " ></div>   
</div>
<div class = "foarútgong foarútgong-gefaar" > 
  <div class = "bar" style = " breedte : 80 % " ></div>   
</div>

Striped bars

Fergelykber mei de solide kleuren hawwe wy farieare gestreepte foarútgongsbalken.

<div class = "progress progress-info progress-striped" > 
  <div class = "bar" style = " breedte : 20 % " ></div>   
</div>
<div class = "foarútgong foarútgong-sukses foarútgong-striped" > 
  <div class = "bar" style = " breedte : 40 % " ></div>   
</div>
<div class = "foarútgong foarútgong-warskôging foarútgong-striped" > 
  <div class = "bar" style = " breedte : 60 % " ></div>   
</div>
<div class = "foarútgong foarútgong-gefaar foarútgong-striped" > 
  <div class = "bar" style = " breedte : 80 % " ></div>   
</div>

Browser stipe

Foarútgongsbalken brûke CSS3-gradiënten, transysjes en animaasjes om al har effekten te berikken. Dizze funksjes wurde net stipe yn IE7-9 of âldere ferzjes fan Firefox.

Ferzjes earder as Internet Explorer 10 en Opera 12 stypje gjin animaasjes.

Abstrakte objektstilen foar it bouwen fan ferskate soarten komponinten (lykas blogkommentaar, tweets, ensfh.)

Standert foarbyld

De standertmedia kinne in mediaobjekt (ôfbyldings, fideo, audio) nei lofts of rjochts fan in ynhâldblok driuwe.

Media heading

Cras sit amet nibh libero, yn 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 yn 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" > Mediakop </h4> 
    ...
 
    <!-- Nested media object -->
    <div class = "media" > 
      ...
    </div>
  </div>
</div>

Media list

Mei in bytsje ekstra opmaak kinne jo media yn 'e list brûke (nuttich foar kommentaar threads of artikellisten).

Media heading

Cras sit amet nibh libero, yn 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, yn 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, yn 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, yn 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, yn 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" > Mediakop </h4> 
      ...
 
      <!-- Nested media object -->
      <div class = "media" > 
        ...
     </div>
    </div>
  </li>
</ul>

Wells

Brûk de put as in ienfâldich effekt op in elemint om it in ynset effekt te jaan.

Sjoch, ik sit yn in put!

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

Opsjonele klassen

Kontrolearje padding en rûne hoeken mei twa opsjonele modifier klassen.

Sjoch, ik sit yn in put!

<div class = "goed grut" > 
  ...
</div>

Sjoch, ik sit yn in put!

<div class = "wol goed-lyts" > 
  ...
</div>

Ikoan slute

Brûk it generike slute ikoan foar it ôfwizen fan ynhâld lykas modalen en warskôgings.

<button class = "slute" > × </knop>

iOS-apparaten fereaskje in href="#"foar-klik-eveneminten as jo leaver in anker wolle brûke.

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

Helper klassen

Ienfâldige, rjochte klassen foar lytse werjefte of gedrach tweaks.

.pull-lofts

Float in elemint lofts

class = "loftspul"

. pull - lofts {
  float : lofts ;
}

.pull-rjochts

Float in elemint rjochts

class = "rjochts lûke"

. pull - rjochts {
  float : rjochts ;
}

.mute

Feroarje de kleur fan in elemint nei#999

class = "muted"

. muted {
  kleur : #999; 
}

.clearfix

Wiskje de floatop elk elemint

class = "clearfix"

. clearfix {
  * zoom : 1 ; 
  &: foar ,
  &: nei {
    werjaan : tabel ;
    ynhâld : "" ; 
  }
  &: nei {
    dúdlik : beide ;
  }
}

Dropdown menu's

Foarbyld

Markup

Opsjes

It ôfstimmen fan de menu's

Utskeakele menu opsjes

Submenu's op dropdowns

Knop groepen

Foarbylden

Single knop groep

Meardere knopgroepen

Fertikale knop groepen

Checkbox en radio smaken

Dropdowns yn knopgroepen

Knop útklapmenu's

Oersjoch en foarbylden

Wurket mei alle knop maten

Fereasket JavaScript

Split knop dropdowns

Maten

Dropup menu's

Nav: ljeppers, pillen en listen

Lichtgewicht standerts Deselde markup, ferskillende klassen

Basis ljeppers

Basis pillen

Utskeakele steat

Component alignment

Stapelber

Opsteapele ljeppers

Opsteapele pillen

Dropdowns

Ljeppers mei dropdowns

Pillen mei dropdowns

Nav listen

Foarbyld nav list

Horizontale dividers

Tabbable nav

Foarbyld fan Tabbable

Fade yn ljeppers

Fereasket jQuery plugin

Tabbable yn elke rjochting

Ljeppers op 'e boaiem

Ljeppers oan de linkerkant

Ljeppers oan de rjochterkant

Navbar

Basis navigaasjebalke

Navbar komponinten

Merk

Nav keppelings

Formulieren

Sykje formulier

Component alignment

It brûken fan dropdowns

Tekst

Opsjonele display fariaasjes

Fêst oan boppe

Fêst oan ûnderkant

Statyske top navbar

Responsive navigaasjebalke

Inverted fariaasje

Broodkruimels

Foarbylden

Paginaasje Twa opsjes foar blêdzjen troch ynhâld

Standert paginering

Opsjes

Utskeakele en aktive steaten

Maten

Alignment

Pager

Standert foarbyld

Oanpaste keppelings

Opsjoneel útskeakele steat

Labels en badges

Labels

Badges

Maklik ynklapber

Typografyske komponinten

Hero ienheid

Hallo wrâld!

Sidekoptekst