Voorbeeld

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

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

Opmerk

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

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

Opsies

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

Belyn die spyskaarte

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

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

Sub-kieslyste op aftreklys

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

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

Voorbeelde

Twee basiese opsies, tesame met twee meer spesifieke variasies.

Enkelknoppie groep

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

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

Veelvuldige knoppie groepe

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

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

Vertikale knoppie groepe

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

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

Merkblokkie en radiogeure

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

Aftrekkies in knoppiegroepe

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

Oorsig en voorbeelde

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

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

Werk met alle knopgroottes

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

Vereis javascript

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

In sommige gevalle - soos mobiele - sal aftrekkieslys buite die uitsigvenster strek. U moet die belyning handmatig of met pasgemaakte javascript oplos.

Verdeel knoppie aftrekkies

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

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

Groottes

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

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

Verlaat spyskaarte

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

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

Liggewig-standaarde Dieselfde opmaak, verskillende klasse

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

Basiese oortjies

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

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

Basiese pille

Neem dieselfde HTML, maar gebruik .nav-pillseerder:

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

Gestremde toestand

Vir enige navigasie-komponent (oortjies, pille of lys), voeg by .disabledvir grys skakels en geen hover-effekte nie . Skakels sal egter klikbaar bly, tensy persoonlike javascript geïmplementeer word om daardie klikke te voorkom.

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

Komponentbelyning

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

Stapelbaar

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

Gestapelde oortjies

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

Gestapelde pille

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

Aftrekkies

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

Oortjies met aftreklys

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

Pille met dropdowns

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

Nav lyste

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

Voorbeeld nav lys

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

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

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

Horisontale verdelers

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

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

Tabbare nav

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

Tabbare voorbeeld

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

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

Vervaag oortjies

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

Vereis jQuery-inprop

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

Tabblad in enige rigting

Oortjies aan die onderkant

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

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

Basiese navigasiebalk

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

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

Navbar komponente

Handelsmerk

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

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

Nav skakels

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

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

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

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

Vorms

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

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

Soek vorm

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

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

Komponentbelyning

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

Gebruik aftreklys

Voeg dropdowns en drop-ups by die nav met 'n bietjie opmaak en die dropdowns javascript plugin .

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

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

Teks

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

Opsionele vertoonvariasies

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

Bo vasgemaak

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

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

Vas aan die onderkant

Voeg .navbar-fixed-bottomeerder by.

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

Statiese boonste navigasiebalk

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

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

Responsiewe navigasiebalk

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

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

Omgekeerde variasie

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

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

Voorbeelde

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

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

Standaard paginering

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

<div klas = "paginering" > 
  <ul>
    <li><a href = "#" > Vorige </a></li> 
    <li><a href = "#"> 1 </a> </li> 
    <li><a href = "#"> 2 </a> </li> 
    <li><a href = "#"> 3 </a> </li> 
    <li><a href = "#"> 4 </a> </li> 
    <li><a href = "#" > Volgende </a></li> 
  </ul>
</div>

Opsies

Gestremde en aktiewe state

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

<div class = "paginering " > 
  <ul>
    <li class = "disabled" ><a href = "#" > Vorige </a></li>  
    <li klas = "aktief" ><a href = "#" > 1 </a></li>  
    ...
  </ul>
</div>

Belyning

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

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

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

Blader

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

Standaard voorbeeld

By verstek sentreer die pager skakels.

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

Belynde skakels

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

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

Opsionele gedeaktiveerde toestand

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

<ul klas = "pager" > 
  <li klas = "vorige gestremd" > 
    <a href = "#"> & larr ; Ouer </a> 
  </li>
  ...
</ul>

Etikette

Kentekens

Helde eenheid

'n Liggewig, buigsame komponent om sleutelinhoud op jou werf ten toon te stel. Dit werk goed op bemarkings- en inhoudswaar webwerwe.

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

Bladsykopskrif

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

Hoekom gebruik duimnaels

Kleinkiekies (voorheen.media-grid tot 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 aantalli elemente 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.span3 — vir beheer van duimnael-afmetings.

Opmerk

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 = "span4" > 
    <a href = "#" class = "thumbnail" >  
      <img src = "https://placehold.it/300x200" 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 = "span4" > 
    <div class = "thumbnail" > 
      <img src = "https://placehold.it/300x200" alt = "" >  
      <h3> Kleinkiekie-etiket </h3>
      <p> Kleinkiekie-onderskrif... </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.

Verstekwaarskuwing

Vou enige teks en 'n opsionele toemaakknoppie in .alertvir 'n basiese waarskuwingsboodskap.

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

Maak knoppies toe

Mobile Safari- en Mobile Opera-blaaiers, benewens die data-dismiss="alert"kenmerk, vereis 'n href="#"vir die afwysing van waarskuwings wanneer 'n <a>merker gebruik word.

<a href = "#" class = "close" data-dismiss = "alert" > × </button>   

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.

<button type = "button" class = "close" data-dismiss = "alert" > × </button>   

Verwerp waarskuwings via javascript

Gebruik die waarskuwings jQuery-inprop vir vinnige en maklike afwysing van waarskuwings.

Opsies

Vir langer boodskappe, verhoog die vulling aan die bo- en onderkant van die waarskuwingsomhulsel deur by te voeg .alert-block.

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

Kontekstuele alternatiewe

Voeg opsionele klasse by om 'n waarskuwing se konnotasie te verander.

Fout of gevaar

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

Sukses

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

Inligting

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

Voorbeelde en opmaak

Basies

Verstek vorderingsbalk met 'n vertikale gradiënt.

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

Gestreepte

Gebruik 'n gradiënt om 'n gestreepte effek te skep. Nie beskikbaar in IE7-8 nie.

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

Geanimeerde

Voeg .activeby .progress-stripedom die strepe regs na links te animeer. Nie beskikbaar in alle weergawes van IE nie.

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

Gestapel

Plaas verskeie stawe in dieselfde .progressom hulle te stapel.

<div klas = "vordering" > 
  <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>

Opsies

Bykomende kleure

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

<div class = "vordering vordering-inligting" > 
  <div class = "bar" style = " breedte : 20 % " ></div>   
</div>
<div class = "vordering vordering-sukses" > 
  <div class = "bar" style = " breedte : 40 % " ></div>   
</div>
<div class = "vordering vordering-waarskuwing" > 
  <div class = "bar" style = " breedte : 60 % " ></div>   
</div>
<div class = "vordering vordering-gevaar" > 
  <div class = "bar" style = " breedte : 80 % " ></div>   
</div>

Gestreepte tralies

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

<div class = "vordering vordering-inligting vordering-gestreep" > 
  <div class = "bar" style = " breedte : 20 % " ></div>   
</div>
<div class = "vordering vordering-sukses vordering-gestreep" > 
  <div class = "bar" style = " breedte : 40 % " ></div>   
</div>
<div class = "vordering vordering-waarskuwing vordering-gestreep" > 
  <div class = "bar" style = " breedte : 60 % " ></div>   
</div>
<div class = "vordering vordering-gevaar vordering-gestreep" > 
  <div class = "bar" style = " breedte : 80 % " ></div>   
</div>

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.

Weergawes vroeër as Internet Explorer 10 en Opera 12 ondersteun nie animasies nie.

Wells

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

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

Opsionele klasse

Beheer vulling en afgeronde hoeke met twee opsionele wysigingsklasse.

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

<div class = "wel goed-klein" > 
  ...
</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>  

Helperklasse

Eenvoudige, gefokusde klasse vir klein vertoning of gedrag tweaks.

.trek-links

Swaai 'n element links

klas = "trek-links"

. trek - links {
  dryf : links ;
}

.trek-regs

Draai 'n element regs

klas = "trek-regs"

. trek - regs {
  dryf : regs ;
}

.gedemp

Verander 'n element se kleur na#999

klas = "gedemp"

. gedemp {
  kleur : #999; 
}

.clearfix

Vee die floatop enige element uit

klas = "clearfix"

. clearfix {
  * zoem : 1 ; 
  &: voor ,
  &: na {
    vertoon : tabel ;
    inhoud : "" ; 
  }
  &: na {
    duidelik : beide ;
  }
}