Knoppie groepe

Gebruik knoppiegroepe om verskeie knoppies saam te voeg as een saamgestelde komponent. Bou hulle met 'n reeks <a>of <button>elemente.

Beste praktyke

Ons beveel die volgende riglyne aan vir die gebruik van knoppiegroepe en nutsbalke:

• Gebruik altyd dieselfde element in 'n enkele knoppie groep, <a>of <button>.
• Moenie knoppies van verskillende kleure in dieselfde knoppiesgroep meng nie.
• Gebruik ikone bykomend tot of in plaas van teks, maar maak seker dat alt- en titelteks insluit waar toepaslik.

Verwante knoppiegroepe met aftreklys (sien hieronder) moet afsonderlik uitgeroep word en moet altyd 'n aftreklys insluit om beoogde gedrag aan te dui.

Standaard voorbeeld

Hier is hoe die HTML lyk vir 'n standaard knoppie groep gebou met anker tag knoppies:

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

Werkbalk voorbeeld

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>

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. Kyk na die Javascript-dokumente daarvoor.

Kry die javascript »

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.

Voorbeeld opmaak

Soortgelyk aan 'n knoppiegroep, gebruik ons ​​opmaak gereelde knoppie-opmaak, maar met 'n handvol toevoegings om die styl te verfyn en Bootstrap se aftreklys jQuery-inprop te ondersteun.

<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. jou knoppie groottes na .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. U moet die belyning handmatig of met pasgemaakte javascript oplos.

Oorsig en voorbeelde

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.

Groottes

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

<div klas = "btn-groep" > 
  ...
  <ul klas = "aftreklys-kieslys trek-regs" > 
    <!-- aftreklys skakels -->
  </ul>
</div>

Voorbeeld opmaak

Ons brei uit op die normale knoppie-aftrekkies om 'n tweede knoppie-aksie te verskaf wat as 'n afsonderlike dropdown-sneller werk.

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

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>

Kragtige basisklas

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

Wanneer om te gebruik

Oortjies en pille is ideaal vir gedeeltes van inhoud of om tussen bladsye met verwante inhoud te navigeer.

Komponentbelyning

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

Basiese oortjies

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

• Tuis
• Profiel
• Boodskappe

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

• Tuis
• Profiel
• Boodskappe

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

Hoe om hulle te stapel

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

• Tuis
• Profiel
• Boodskappe

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

Gestapelde pille

• Tuis
• Profiel
• Boodskappe

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

Ryk spyskaarte maklik gemaak

Aftrekkieslyste in Bootstrap-oortjies en -pille is baie maklik en vereis net 'n bietjie ekstra HTML en 'n liggewig jQuery-inprop.

Gaan na die Javascript-bladsy om die dokumente oor die inisiasie van aftreklys in Bootstrap te lees.

Oortjies met aftreklys

• Tuis
• Help
• Aftreklys
  • Action
  • Another action
  • Something else here
  • Separated link

<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

• Tuis
• Help
• Aftreklys
  • Action
  • Another action
  • Something else here
  • Separated link

<ul klas = "nav nav-pille" > 
  <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>

Toepassingstyl navigasie

Nav-lyste bied '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.

Struktureel is hulle gebou op dieselfde kern nav-style as oortjies en pille, so gebruik en aanpassing is eenvoudig.

Met ikone

Nav-lyste is ook maklik om met ikone toe te rus. Voeg die regte <i>etiket by klas en jy is gereed.

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>

Voorbeeld nav lys

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

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

Voorbeeld met ikone

Dieselfde voorbeeld, maar met <i>etikette vir ikone.

<ul klas = "nav nav-lys" > 
  ...
  <li>
    <a href = "#" > 
      <i klas = "ikoon-boek" ></i> 
      Biblioteek
    </a>
  </li>
  ...
</ul>

Wat ingesluit is

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.

Om tussen hulle te verander is maklik en vereis net dat baie min opmaak verander word.

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

Kry die javascript →

Tabbare voorbeeld

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

Vir regs- of linksbelynde oortjies, draai die .nav-tabsen .tab-contentin .tabbable.

Eenvoudige opmaak

Die gebruik van tabbare oortjies vereis 'n omvou-div, 'n stel oortjies en 'n stel tabbare inhoudruite.

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

Oortjies aan die onderkant

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

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

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

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

Navbar steierwerk

Die navigasiebalk benodig slegs 'n paar div's om dit goed te struktureer vir statiese of vaste vertoon.

<div klas = "navbar" > 
  <div class = "navbar-inner" > 
    <div klas = "houer" > 
      ...
    </div>
  </div>
</div>

Vaste navigasiebalk

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

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

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

Wanneer jy die navigasiebalk aanbring, onthou om rekening te hou met die versteekte area daaronder. Voeg 40px of meer vulling by die <body>. Maak seker dat jy dit byvoeg na die kern Bootstrap CSS en voor die opsionele responsiewe CSS.

Handelsnaam

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

<a class = "brand" href = "#" >  
  Projek Naam
</a>

Vorms in navbar

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

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>

Opsionele responsiewe variasie

Afhangende van die hoeveelheid inhoud in jou boonste balk, wil jy dalk die responsiewe opsies implementeer. Om dit te doen, draai jou nav-inhoud in 'n div, .nav-collapse.collapse, en voeg die navbar-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" > 
        <!-- .nav, .navbar-search, .navbar-form, ens -->
      </div>
 
    </div>
  </div>
</div>

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>

Komponentbelyning

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

Voeg aftrekkieslys by

Die byvoeging van dropdowns en drop-ups by die nav is super eenvoudig, maar vereis wel die gebruik van ons javascript-inprop .

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

Kry die javascript →

Teks in die navigasiebalk

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

Hoekom hulle gebruik

Broodkrummelnavigasie word gebruik as 'n manier om gebruikers te wys waar hulle binne 'n toepassing of 'n werf is, maar nie vir primêre navigasie nie. Hou hul gebruik yl en bondig om die doeltreffendste te wees.

Voorbeelde

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

• Tuis

• Tuis /
• Biblioteek

• Tuis /
• Biblioteek /
• Data

Opmerk

HTML is jou standaard ongeordende lys met skakels.

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

Wanneer om te gebruik

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

Statige bladsyskakels

Skakels is aanpasbaar en werk in 'n aantal omstandighede met die regte klas. .disabledvir onklikbare skakels en .activevir huidige bladsy.

Buigsame belyning

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

Voorbeelde

Die verstekpaginering-komponent is buigsaam en werk in 'n aantal variasies.

Opmerk

Gewikkel in 'n <div>, paginering is net 'n <ul>.

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

Oor pager

Die pager-komponent is 'n stel skakels vir eenvoudige paginering-implementerings met ligte opmaak en selfs ligter style. Dit is ideaal vir eenvoudige werwe soos blogs of tydskrifte.

Opsionele gedeaktiveerde toestand

Pager-skakels gebruik ook die algemene .disabledklas vanaf die paginering.

Standaard voorbeeld

By verstek sentreer die pager skakels.

• Vorige
• Volgende

<ul klas = "pager" > 
  <li>
    <a href = "#" > Vorige </a> 
  </li>
  <li>
    <a href = "#" > Volgende </a> 
  </li>
</ul>

Belynde skakels

Alternatiewelik kan jy elke skakel na die kante in lyn bring:

• ← Ouer
• Nuwer →

<ul klas = "pager" > 
  <li klas = "vorige" > 
    <a href = "#"> & larr ; Ouer </a> 
  </li>
  <li klas = "volgende" > 
    <a href = "#" > Nuwer → </a> 
  </li>
</ul>

Oor

Kentekens is klein, eenvoudige komponente vir die vertoon van 'n aanwyser of telling van een of ander aard. Hulle word algemeen gevind in e-poskliënte soos Mail.app of op mobiele toepassings vir stootkennisgewings.

Beskikbare klasse

Bootstrap bied 'n liggewig, buigsame komponent wat 'n helde-eenheid genoem word om inhoud op u webwerf ten toon te stel. Dit werk goed op bemarkings- en inhoudswaar webwerwe.

Opmerk

Wikkel jou inhoud in 'n divsoortgelyke manier:

<div klas = "held-eenheid" > 
  <h1> Opskrif </h1>
  <p> Byskrif </p>
  <p>
    <a klas = "btn btn-primêre btn-groot" > 
      Leer meer
    </a>
  </p>
</div>

'n Eenvoudige dop om h1gedeeltes van inhoud op 'n bladsy behoorlik uit te spasieer en te segmenteer. Dit kan die h1se verstek small, element sowel as die meeste ander komponente (met bykomende style) gebruik.

<div class = "page-header" > 
  <h1> Voorbeeld bladsyopskrif </h1>
</div>

Verstek-kleinkiekies

Bootstrap se duimnaels is by verstek ontwerp om gekoppelde beelde te vertoon met minimale vereiste opmaak.

Hoogs aanpasbaar

Met 'n bietjie ekstra opmaak is dit moontlik om enige soort HTML-inhoud soos opskrifte, paragrawe of knoppies by kleinkiekies by te voeg.

• 

  Kleinkiekie-etiket

  Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida by eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

  Aksie Aksie

• 

  Kleinkiekie-etiket

  Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida by eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

  Aksie Aksie

Hoekom gebruik duimnaels

Kleinkiekies (voorheen .media-gridtot v1.4) is ideaal vir roosters van foto's of video's, beeldsoekresultate, kleinhandelprodukte, portefeuljes, en nog baie meer. Dit kan skakels of statiese inhoud wees.

Eenvoudige, buigsame opmaak

Kleinkiekie-opmaak is eenvoudig - 'n ulmet enige aantal lielemente is al wat nodig is. Dit is ook baie buigsaam, wat voorsiening maak vir enige tipe inhoud met net 'n bietjie meer opmaak om jou inhoud toe te draai.

Gebruik roosterkolomgroottes

Laastens gebruik die duimnaels-komponent bestaande roosterstelselklasse—soos .span2of — .span3vir beheer van duimnael-afmetings.

Die opmaak

Soos voorheen genoem, is die vereiste opmaak vir duimnaels lig en eenvoudig. Hier is 'n blik op die verstekopstelling vir gekoppelde beelde :

<ul class = "thumbnails" > 
  <li klas = "span3" > 
    <a href = "#" class = "thumbnail" >  
      <img src = "https://placehold.it/260x180" alt = "" >  
    </a>
  </li>
  ...
</ul>

Vir pasgemaakte HTML-inhoud in duimnaels, verander die opmaak effens. Om blokvlak-inhoud op enige plek toe te laat, ruil ons die <a>vir 'n <div>soortgelyke:

<ul class = "thumbnails" > 
  <li klas = "span3" > 
    <div class = "thumbnail" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Kleinkiekie-etiket </h5>
      <p> Kleinkiekie-onderskrif reg hier... </p>
    </div>
  </li>
  ...
</ul>

Meer voorbeelde

Verken al jou opsies met die verskillende roosterklasse wat tot jou beskikking is. Jy kan ook verskillende groottes meng en pas.

Herskryf basisklas

Met Bootstrap 2 het ons die basisklas vereenvoudig: .alertin plaas van .alert-message. Ons het ook die minimum vereiste opmaak verminder—nee <p>word by verstek vereis, net die buitenste <div>.

Enkele waarskuwingsboodskap

Vir 'n meer duursame komponent met minder kode, het ons die onderskeidende voorkoms vir blokwaarskuwings, boodskappe wat met meer opvulling en gewoonlik meer teks kom, verwyder. Die klas het ook verander na .alert-block.

Gaan goed saam met javascript

Bootstrap kom met 'n wonderlike jQuery-inprop wat waarskuwingsboodskappe ondersteun, wat dit vinnig en maklik maak om dit te ontslaan.

Kry die inprop »

Voorbeeld waarskuwings

Draai jou boodskap en 'n opsionele sluit-ikoon in 'n div toe met eenvoudige klas.

<div klas = "waarskuwing" > 
  <button class = "close" data-dismiss = "alert" > × </button>  
  <strong> Waarskuwing! </strong> Beste kyk self, jy lyk nie te goed nie.
</div>

Let op! iOS-toestelle vereis 'n href="#"vir die afwysing van waarskuwings. Maak seker dat jy dit en die data-kenmerk vir anker-sluiting-ikone insluit. Alternatiewelik kan u 'n <button>element met die data-kenmerk gebruik, wat ons gekies het om vir ons dokumente te doen. Wanneer jy gebruik <button>, moet jy insluit type="button"of jou vorms mag nie indien nie.

Brei die standaardwaarskuwingsboodskap maklik uit met twee opsionele klasse: .alert-blockvir meer opvulling en tekskontroles en .alert-headingvir 'n bypassende opskrif.

<div class = "waarskuwing waarskuwing-blok" > 
  <a class = "close" data-dismiss = "alert" href = "#" > × </a>   
  <h4 class = "alert-heading" > Waarskuwing! </h4> 
  Beste check self, jy is nie...
</div>

Fout of gevaar

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

Sukses

<div class = "waarskuwing waarskuwing-sukses" > 
  ...
</div>

Inligting

<div class = "waarskuwing waarskuwing-inligting" > 
  ...
</div>

Basies

Verstek vorderingsbalk met 'n vertikale gradiënt.

<div klas = "vordering" > 
  <div klas = "bar" 
       style = " breedte : 60 %; " ></div> 
</div>

Gestreepte

Gebruik 'n gradiënt om 'n gestreepte effek te skep (geen IE nie).

<div class = "vordering vordering-gestreep" > 
  <div klas = "bar" 
       style = " breedte : 20 %; " ></div> 
</div>

Geanimeerde

Neem die gestreepte voorbeeld en animeer dit (geen IE).

<div class = "vordering vordering-gestreep 
     aktief" >
  <div klas = "bar" 
       style = " breedte : 40 %; " ></div> 
</div>

Bykomende kleure

Vorderingstawe gebruik sommige van dieselfde knoppie- en waarskuwingsklasse vir konsekwente style.

Gestreepte tralies

Soortgelyk aan die soliede kleure, het ons verskillende gestreepte vorderingstawe.

Gedrag

Vorderingstawe gebruik CSS3-oorgange, so as jy die breedte via JavaScript dinamies aanpas, sal dit glad verander.

As jy die .activeklas gebruik, .progress-stripedsal jou vorderingstawe die strepe van links na regs animeer.

Blaaier ondersteuning

Vorderingstawe gebruik CSS3-gradiënte, oorgange en animasies om al hul effekte te bereik. Hierdie kenmerke word nie in IE7-9 of ouer weergawes van Firefox ondersteun nie.

Opera en IE ondersteun nie tans animasies nie.

Wells

Gebruik die put as 'n eenvoudige effek op 'n element om dit 'n inset effek te gee.

<div klas = "wel" > 
  ...
</div>

Maak ikoon toe

Gebruik die generiese toemaakikoon om inhoud soos modale en waarskuwings af te wys.

×

<button class = "close" > × </knoppie> 

iOS-toestelle benodig 'n href="#" vir klikgebeurtenisse as jy eerder 'n anker gebruik.

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