Components

Tsientallen werbrûkbere komponinten binne yn Bootstrap ynboud om navigaasje, warskôgings, popovers en folle mear te leverjen.

Knop groepen

Brûk knopgroepen om meardere knoppen byinoar te kombinearjen as ien gearstalde komponint. Bou se mei in searje <a>of <button>eleminten.

Jo kinne ek kombinearje sets fan <div class="btn-group">yn in <div class="btn-toolbar">foar mear komplekse projekten.

Foarbyld markup

Hjir is hoe't de HTML sjocht foar in standert knopgroep boud mei anker-tag-knoppen:

<div class = "btn-group" > 
  <a class = "btn" href = "#"> 1 </a> _  
  <a class = "btn" href = "#"> 2 </a> _  
  <a class = "btn" href = "#"> 3 </a> _  
</div>

En mei in arkbalke foar meardere groepen:

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

Checkbox en radio smaken

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

Krij it javaskript »

Heads up

CSS foar knopgroepen is yn in apart bestân, button-groups.less.

Knop dropdowns

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

Foarbyld markup

Fergelykber mei in knopgroep brûkt ús markup gewoane knopmarkearring, mar mei in hantsjefol tafoegings om de styl te ferfine en de dropdown jQuery-plugin fan Bootstrap te stypjen.

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

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.

Foarbyld markup

Wy wreidzje út op 'e normale knop-dropdowns om in twadde knop-aksje te leverjen dy't wurket as in aparte dropdown-trigger.

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

Lichtgewicht standerts Deselde markup, ferskillende klassen

Krêftige basisklasse

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

Wêrom ljeppers en pillen

Ljeppers en pillen yn Bootstrap binne boud op in <ul>mei deselde kearn HTML, in list fan keppelings. Ruilje tusken ljeppers of pillen mei mar in klasse.

Beide opsjes binne geweldich foar sub-seksjes fan ynhâld of navigearje tusken siden mei relatearre ynhâld.

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>

Stapelber Meitsje ljeppers of pillen fertikaal

Hoe't se stapelje

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 Foar avansearre nav komponinten

Rike menu's makke maklik

Dropdown-menu's yn Bootstrap-ljeppers en pillen binne super maklik en fereaskje mar in bytsje ekstra HTML en in lichtgewicht jQuery-plugin.

Gean nei de Javascript-side om de dokuminten te lêzen oer it initialisearjen fan dropdowns yn Bootstrap.

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 Bou ienfâldige opsteapele nav's, geweldich foar sydbalken

Navigaasje yn applikaasjestyl

Nav-listen jouwe 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.

Struktureel binne se boud op deselde kearnnavigaasjestilen as ljeppers en pillen, sadat gebrûk en oanpassing ienfâldich binne.

Mei ikoanen

Nav-listen binne ek maklik út te rusten mei ikoanen. Foegje de juste <i>tag ta mei klasse en jo binne ynsteld.

Foarbyld nav list

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

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

Foarbyld mei ikoanen

Itselde foarbyld, mar mei <i>tags foar ikoanen.

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

Tabbable nav Bring ljeppers ta libben fia javascript

Wat is ynbegrepen

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.

It feroarjen tusken har is maklik en fereasket allinich it feroarjen fan heul bytsje markup.

Foarbyld fan Tabbable

Om ljeppers ljepperber te meitsjen, wrapje de .nav-tabsyn in oare div mei klasse .tabbable.

Ik bin yn seksje 1.

Hoi, ik bin yn seksje 2.

Wat mei famke, dit is seksje 3.

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

Krij it javascript →

Rjochtfeardige markup

It brûken fan tabbere ljeppers fereasket in wrapping div, in set fan ljeppers, en in set fan tabable panels of ynhâld.

<div class = "tabel" > 
  <ul class = "nav nav-tabs" > 
    <li class = "aktyf" ><a href = "#1" data-toggle = "tab" > Seksje 1 </a></li>   
    <li><a href = "#2" data-toggle = "tab" > Seksje 2 </a></li>  
  </ul>
  <div class = "tab-ynhâld" > 
    <div class = "tab-pane active" id = "1" >  
      <p> Ik bin yn seksje 1. </p>
    </div>
    <div class = "tab-pane" id = "2" >  
      <p> Hoi, ik bin yn seksje 2. </p>
    </div>
  </div>
</div>

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>

Statyske navbar foarbyld

In foarbyld fan in statyske (net fêst oan 'e boppekant) navbar mei projektnamme, navigaasje en sykfoarm.

Navbar steigers

De navbar fereasket mar in pear divs om it goed te strukturearjen foar statyske as fêste werjefte.

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

Om de navbar fêst te meitsjen oan 'e boppekant fan' e viewport, tafoegje .navbar-fixed-topoan 'e bûtenste div .navbar,. Yn jo CSS moatte jo ek rekken hâlde mei de oerlap dy't it feroarsaket troch ta te foegjen padding-top: 40px;oan jo <body>.

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

Merknamme

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

<a class = "brand" href = "#"> _  
  Projekt namme
</a>

Sykje formulier

Sykformulieren ûntfange oanpaste stilen yn 'e navbar mei de .navbar-searchklasse. Omfetsje .pull-leftof .pull-rightop 'e om it formút te rjochtsjen.

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

Opsjoneel responsive fariaasje

Ofhinklik fan 'e hoemannichte ynhâld yn jo topbalke, wolle jo miskien de responsive opsjes ymplementearje. Om dit te dwaan, wrap jo nav-ynhâld yn in befetsjende div, .nav-collapse.collapse, en heakje de navbar-skeakelknop 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" > 
        <!-- .nav, .navbar-search, .navbar-form, ensfh -->
      </div>
 
    </div>
  </div>
</div>

Heads up! De responsive navbar fereasket de ynklapplugin .

Nav keppelings

Nav-items binne ienfâldich 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>

Dropdowns tafoegje

Dropdowns tafoegje oan de nav is super ienfâldich, mar fereasket it gebrûk fan ús javascript-plugin .

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

Krij it javascript →

Wêrom brûke se

Breadcrumb-navigaasje wurdt brûkt as in manier om brûkers sjen te litten wêr't se binne binnen in app of in side, mar net foar primêre navigaasje. Hâld har gebrûk sparse en koart om it meast effektyf te wêzen.

Foarbylden

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

Markup

HTML is jo standert net-oardere list mei keppelings.

<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 = "aktyf" > 
    <a href = "#" > Gegevens </a> 
  </li>
</ul>

Multicon-pagina paginaasje

Wannear te brûken

Ultra-simplistysk en minimaal stylige paginaasje ynspireare troch Rdio, geweldig foar apps en sykresultaten. It grutte blok is min te missen, maklik skalberber en leveret grutte klikgebieten.

Stateful side keppelings

Keppelings binne oanpasber en wurkje yn in oantal omstannichheden mei de juste klasse. .disabledfoar net-klikbere keppelings en .activefoar aktuele side.

Fleksibele ôfstimming

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

Foarbylden

De standert pagineringskomponint is fleksibel en wurket yn in oantal fariaasjes.

Markup

Ferpakt yn in <div>, paginering is gewoan in <ul>.

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

Pager Foar rappe foarige en folgjende keppelings

Oer pager

De pager-komponint is in set fan keppelings foar ienfâldige pagineringsimplementaasjes mei ljochte markup en noch lichtere 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>

Labels	Markup
Standert	`<span class="label">Default</span>`
Nij	`<span class="label label-success">New</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>`

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

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 yn te pakken.

Brûkt grid kolom maten

As lêste brûkt de komponint thumbnails besteande rastersysteemklassen - lykas .span2of .span3- foar kontrôle fan thumbnail-dimensjes.

De markearring

Lykas earder neamd, is de fereaske markearring foar thumbnails ljocht en ienfâldich. Hjir is in blik op de standert opset foar keppele ôfbyldings :

<ul class = "thumbnails" > 
  <li class = "span3" > 
    <a href = "#" class = "thumbnail"> _  
      <img src = "https://placehold.it/260x180" 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 = "span3" > 
    <div class = "thumbnail" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Miniatuerlabel </h5>
      <p> Miniatuerûnderskrift hjir... </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.

Lichtgewicht standerts

Herskreaun basis klasse

Mei Bootstrap 2 hawwe wy de basisklasse ferienfâldige: .alertynstee fan .alert-message. Wy hawwe ek de minimale fereaske markup fermindere - nee <p>is standert fereaske, allinich de bûtenste <div>.

Single warskôging berjocht

Foar in duorsumer komponint mei minder koade, hawwe wy it differinsjearjende uterlik foar blokwarskôgings fuortsmiten, berjochten dy't komme mei mear padding en typysk mear tekst. De klasse is ek feroare yn .alert-block.

Giet geweldich mei javascript

Bootstrap komt mei in geweldige jQuery-plugin dy't warskôgingsberjochten stipet, wêrtroch't se fluch en maklik ôfwize.

Krij de plugin »

Foarbyld alerts

Wrap jo berjocht en in opsjoneel slute ikoan yn in div mei ienfâldige klasse.

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

<div class = "alert" > 
  <a class = "slute" > × </a> 
  <strong> Warskôging! </strong> Best kontrolearje jo sels, jo sjogge net te goed.
</div>

Wreidzje it standert warskôgingsberjocht maklik út mei twa opsjonele klassen: .alert-blockfoar mear padding- en tekstkontrôles en .alert-headingfoar in oerienkommende koptekst.

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" > 
  <a class = "slute" > × </a> 
  <h4 class = "alert-heading" > 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 = " width : 60 %; " ></div> 
</div>

Striped

Brûkt in gradient om in striped effekt te meitsjen.

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

Animated

Nimt it gestreepte foarbyld en animearret it.

<div class = "foarútgong foarútgong-gefaar 
     progress-striped aktyf" >
  <div class = "bar" 
       style = " width : 40 %; " ></div> 
</div>

Opsjes en browserstipe

Oanfoljende kleuren

Foarútgongsbalken brûke guon fan deselde klassenammen as knoppen en warskôgings foar ferlykbere styling.

.progress-info
.progress-success
.progress-danger

As alternatyf kinne jo de MINDER bestannen oanpasse en jo eigen kleuren en maten rôlje.

Hâlden en dragen

Foarútgongsbalken brûke CSS3-transysjes, dus as jo de breedte dynamysk oanpasse fia javascript, sil de grutte soepel feroarje.

As jo de .activeklasse brûke, .progress-stripedsille jo foarútgongsbalken de strepen fan links nei rjochts animearje.

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-8 of âldere ferzjes fan Firefox.

Opera stipet op dit stuit gjin animaasjes.

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>

Badges

Brûk in badge op in elemint foar in net-lêzen tellen of as in ienfâldige yndikator.

<span class = "badge" > 3 </div>

Ikoan slute

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

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

Knopgroepen Doch mei oan knoppen foar mear arkbalke-like funksjonaliteit

Knop groepen

Foarbyld markup

Checkbox en radio smaken

Heads up

Knoppen dropdowns Kontekstuele útklapmenu's boud op knopgroepen

Knop dropdowns

Foarbyld markup

Split knop dropdowns

Foarbyld markup

Nav, ljeppers en pillen Heech oanpasbere navigaasje yn liststyl

Lichtgewicht standerts Deselde markup, ferskillende klassen

Krêftige basisklasse

Wêrom ljeppers en pillen

Basis ljeppers

Basis pillen

Stapelber Meitsje ljeppers of pillen fertikaal

Hoe't se stapelje

Opsteapele ljeppers

Opsteapele pillen

Dropdowns Foar avansearre nav komponinten

Rike menu's makke maklik

Ljeppers mei dropdowns

Pillen mei dropdowns

Nav-listen Bou ienfâldige opsteapele nav's, geweldich foar sydbalken

Navigaasje yn applikaasjestyl

Mei ikoanen

Foarbyld nav list

Foarbyld mei ikoanen

Tabbable nav Bring ljeppers ta libben fia javascript

Wat is ynbegrepen

Foarbyld fan Tabbable

Oanpaste jQuery-plugin

Rjochtfeardige markup

Tabbable yn elke rjochting

Ljeppers op 'e boaiem

Ljeppers oan de linkerkant

Ljeppers oan de rjochterkant

Navbar

Statyske navbar foarbyld

Navbar steigers

Merknamme

Sykje formulier

Opsjoneel responsive fariaasje

Nav keppelings

Dropdowns tafoegje

Broodkruimels

Wêrom brûke se

Foarbylden

Markup

Paginaasje Twa opsjes foar blêdzjen troch ynhâld

Multicon-pagina paginaasje

Wannear te brûken

Stateful side keppelings

Fleksibele ôfstimming

Foarbylden

Markup

Pager Foar rappe foarige en folgjende keppelings

Oer pager

Standert foarbyld

Oanpaste keppelings

Inline labels Labelje en annotearje tekst

Miniatueren Grids fan ôfbyldings, fideo's, tekst, en mear

Standert thumbnails

Heech oanpasber

Miniatuerlabel

Miniatuerlabel

Wêrom brûke thumbnails

Ienfâldige, fleksibele markup

Brûkt grid kolom maten

De markearring

Mear foarbylden

Alerts Styles foar súkses, warskôging, en flater berjochten

Lichtgewicht standerts

Herskreaun basis klasse

Single warskôging berjocht

Giet geweldich mei javascript

Foarbyld alerts

Warskôging!

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