Knop groepen

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

Best practices

Wy riede de folgjende rjochtlinen oan foar it brûken fan knopgroepen en arkbalken:

• Brûk altyd itselde elemint yn ien knopgroep, <a>of <button>.
• Meitsje gjin knoppen fan ferskate kleuren yn deselde knopgroep.
• Brûk ikoanen neist of yn stee fan tekst, mar wês wis dat alt- en titeltekst opnimme wêr't passend is.

Related Button groepen mei dropdowns (sjoch hjirûnder) moatte wurde neamd út apart en altyd befetsje in dropdown caret om oan te jaan bedoeld gedrach.

Standert foarbyld

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

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

Foarbyld fan Toolbar

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>

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 »

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.

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>

Wurket mei alle knop maten

Button dropdowns wurkje op elke grutte. jo knop maten nei .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 viewport. Jo moatte de ôfstimming manuell of mei oanpast javascript oplosse.

Oersjoch en foarbylden

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.

Maten

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

<div class = "btn-group" > 
  ...
  <ul class = "dropdown-menu pull-right" > 
    <!-- dropdown menu keppelings -->
  </ul>
</div>

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

Dropup menu's

Dropdown-menu's kinne ek fan ûnderen nei boppen 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>

Krêftige basisklasse

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

Wannear te brûken

Ljeppers en pillen binne geweldich foar seksjes fan ynhâld of navigearje tusken siden mei relatearre ynhâld.

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.

Basis ljeppers

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

• Thús
• Profyl
• Berjochten

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

• Thús
• Profyl
• Berjochten

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

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

• Thús
• Profyl
• Berjochten

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

Opsteapele pillen

• Thús
• Profyl
• Berjochten

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

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

• Thús
• Help
• Dropdown
  • Action
  • Another action
  • Something else here
  • Separated link

<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

• Thús
• Help
• Dropdown
  • Action
  • Another action
  • Something else here
  • Separated link

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

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.

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>

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>

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.

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 .

Krij it javascript →

Foarbyld fan Tabbable

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

Foar rjochts of lofts rjochte ljeppers, wrap de .nav-tabsen .tab-contentyn .tabbable.

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

Ljeppers op 'e boaiem

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

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

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

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

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>

Fêste navigaasjebalke

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

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

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

As jo ​​​​de navigaasjebalke oanbringe, tink dan om rekken te hâlden mei it ferburgen gebiet derûnder. Foegje 40px of mear fan padding ta oan de <body>. Wês wis dat jo dit tafoegje nei de kearn Bootstrap CSS en foar de opsjonele responsive CSS.

Merknamme

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

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

Formulieren yn navbar

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" >  
</form>

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>

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>

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>

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>

Component alignment

Om in nav, sykfoarm of tekst út te rjochtsjen, brûk de .pull-leftof .pull-rightnutklassen. Beide klassen sille in CSS-float tafoegje yn 'e oantsjutte rjochting.

It tafoegjen fan útklapmenu's

It tafoegjen fan dropdowns en drop-ups 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 →

Tekst yn 'e navigaasjebalke

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

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.

• Thús

• Thús /
• Biblioteek

• Thús /
• Biblioteek /
• Data

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 = "active" > Gegevens </li> 
</ul>

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>

Oer pager

De pager-komponint is in set keppelings foar ienfâldige paginaasje-ymplemintaasjes mei ljochte markup en noch lichtere stilen. It is geweldich foar ienfâldige siden lykas blogs of tydskriften.

Opsjoneel útskeakele steat

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

Standert foarbyld

Standert sintraat de pager keppelings.

• Foarige
• Folgjende

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

• ← Alder
• Nijer →

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

Oer

Badges binne lytse, ienfâldige komponinten foar it werjaan fan in yndikator of telling fan wat soarte. Se wurde faak fûn yn e-postkliïnten lykas Mail.app of op mobile apps foar push-notifikaasjes.

Beskikbere klassen

Bootstrap leveret in lichtgewicht, fleksibel komponint neamd in held-ienheid om ynhâld op jo side te sjen. It wurket goed op marketing en ynhâld-swiere siden.

Markup

Wrap jo ynhâld yn in divlike sa:

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

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

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.

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.

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

Heads up! iOS-apparaten fereaskje in href="#"foar it ûntslaan fan warskôgings. Wês der wis fan dat jo it opnimme en it data-attribút foar anker slute ikoanen. 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.

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

<div class = "alert alert-block" > 
  <a class = "close" data-dismiss = "alert" href = "#"> × </a> _   
  <h4 class = "alert-heading" > Warskôging! </h4> 
  Best check jo sels, do bist net ...
</div>

Flater of gefaar

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

Sukses

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

Ynformaasje

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

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 (gjin IE).

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

Animated

Nimt it gestreepte foarbyld en animearret it (gjin IE).

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

Oanfoljende kleuren

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

Striped bars

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

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

Opera en IE stypje 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.

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

Ikoan slute

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

×

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

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

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