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>

Gedeaktiveerde spyskaartopsies

Voeg .disabledby 'n <li>in die aftreklys om die skakel te deaktiveer.

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Gereelde skakel </a></li>  
  <li class = "disabled" ><a tabindex = "-1" href = "#" > Gedeaktiveerde skakel </a></li>   
  <li><a tabindex = "-1" href = "#" > Nog 'n skakel </a></li>  
</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.

Verstek

Dropup

Linker subkieslys

<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" > Links </button> 
  <button class = "btn" > Middel </button> 
  <button class = "btn" > Regs </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. Bekyk 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. Jy moet die belyning met die hand 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 jy die hrefkenmerk verwyder. Alternatiewelik kan jy pasgemaakte JavaScript implementeer 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 welVir 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.

Ek is in afdeling 1.

Hallo, ek is in afdeling 2.

Hoe gaan dit meisie, dit is afdeling 3.

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

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.

Ek is in afdeling A.

Hallo, ek is in Afdeling B.

Hoe gaan dit meisie, dit is Afdeling C.

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

Ek is in afdeling A.

Hallo, ek is in Afdeling B.

Hoe gaan dit meisie, dit is Afdeling C.

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

Ek is in afdeling A.

Hallo, ek is in Afdeling B.

Hoe gaan dit meisie, dit is Afdeling C.

<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, vereis 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-inprop .

<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 collapse" > 
        <!-- .nav, .navbar-search, .navbar-form, ens -->
      </div>
 
    </div>
  </div>
</div>

Let op! Die responsiewe navigasiebalk vereis die ineenvou-inprop en responsiewe Bootstrap CSS-lêer .

Omgekeerde variasie

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

<div class = "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 = "#"> 5 </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 klas = "paginering" > 
  <ul>
    <li klas = "gestrem" ><a href = "#" > « </a></li>  
    <li klas = "aktief" ><a href = "#" > 1 </a></li>  
    ...
  </ul>
</div>

U kan opsioneel aktiewe of gedeaktiveerde ankers vir streke uitruil om klikfunksionaliteit te verwyder terwyl u die beoogde style behou.

<div klas = "paginering" > 
  <ul>
    <li klas = "gestrem" ><span> « </span></li> 
    <li klas = "aktief" ><span> 1 </span></li> 
    ...
  </ul>
</div>

Groottes

Lus vir groter of kleiner paginering? Voeg .pagination-large, .pagination-small, of .pagination-miniby vir addisionele groottes.

<div class = "paginering paginering-groot" > 
  <ul>
    ...
  </ul>
</div>
<div klas = "paginering" > 
  <ul>
    ...
  </ul>
</div>
<div class = "paginering paginering-klein" > 
  <ul>
    ...
  </ul>
</div>
<div class = "paginering paginering-mini" > 
  <ul>
    ...
  </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

Etikette	Opmerk
Verstek	`<span class="label">Default</span>`
Sukses	`<span class="label label-success">Success</span>`
Waarskuwing	`<span class="label label-warning">Warning</span>`
Belangrik	`<span class="label label-important">Important</span>`
Inligting	`<span class="label label-info">Info</span>`
Omgekeerde	`<span class="label label-inverse">Inverse</span>`

Kentekens

Naam	Voorbeeld	Opmerk
Verstek	1	`<span class="badge">1</span>`
Sukses	2	`<span class="badge badge-success">2</span>`
Waarskuwing	4	`<span class="badge badge-warning">4</span>`
Belangrik	6	`<span class="badge badge-important">6</span>`
Inligting	8	`<span class="badge badge-info">8</span>`
Omgekeerde	10	`<span class="badge badge-inverse">10</span>`

Maklik opvoubaar

Vir maklike implementering sal etikette en kentekens eenvoudig ineenstort (via CSS se :emptykeurder) wanneer geen inhoud binne bestaan nie.

Helde eenheid

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

Hello Wêreld!

Dit is 'n eenvoudige held-eenheid, 'n eenvoudige jumbotron-styl komponent om ekstra aandag te vestig op uitgesproke inhoud of inligting.

Leer meer

<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 <small> Subteks vir kopskrif </small></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
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.

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 data-src =  "holder.js/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 klas = "thumbnails" >
  <li klas = "span4" >
    <div klas =  "thumbnail" >
      <img data-src = "holder.js/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.

Waarskuwing! Beste kyk self, jy lyk nie te goed nie.

<div klas = "waarskuwing" > 
  <button type = "button" class = "close" data-dismiss = "alert" > &tye; </knoppie>   
  <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 = "waarskuwing" > &tye; </a>

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" > &tye; </knoppie>

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.

Waarskuwing!

Beste kyk self, jy lyk nie te goed nie. Nulla vitae elit libero, 'n pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

<div class = "waarskuwing waarskuwing-blok" > 
  <button type = "button" class = "close" data-dismiss = "alert" > &tye; </knoppie>   
  <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

O snap! Verander 'n paar dinge en probeer weer indien.

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

Sukses

Wel gedaan! Jy het hierdie belangrike waarskuwingsboodskap suksesvol gelees.

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

Inligting

Let op! Hierdie waarskuwing benodig jou aandag, maar dit is nie baie belangrik nie.

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

Abstrakte voorwerpstyle vir die bou van verskillende soorte komponente (soos blogopmerkings, tweets, ens.) wat 'n links- of regs-belynde prent langs tekstuele inhoud bevat.

Standaard voorbeeld

Die verstekmedia laat toe om 'n media-voorwerp (prente, video, oudio) links of regs van 'n inhoudblok te laat dryf.

Media opskrif

Cras sit amet nibh libero, in 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 in faucibus.

Media opskrif

<div klas = "media" > 
  <a klas = "trek-links" href = "#" >  
    <img class = "media-object" data-src = "holder.js/64x64" >  
  </a>
  <div klas = "media-liggaam" > 
    <h4 class = "media-heading" > Media-opskrif </h4> 
    ...
 
    <!-- Geneste media-objek -->
    <div klas = "media" > 
      ...
    </div>
  </div>
</div>

Media lys

Met 'n bietjie ekstra opmaak, kan jy media binne lys gebruik (nuttig vir kommentaar drade of artikellyste).

Media opskrif

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Geneste media-opskrif
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Geneste media-opskrif
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Geneste media-opskrif
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Media opskrif
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

<ul klas = "media-lys" > 
  <li klas = "media" > 
    <a klas = "trek-links" href = "#" >  
      <img class = "media-object" data-src = "holder.js/64x64" >  
    </a>
    <div klas = "media-liggaam" > 
      <h4 class = "media-heading" > Media-opskrif </h4> 
      ...
 
      <!-- Geneste media-objek -->
      <div klas = "media" > 
        ...
     </div>
    </div>
  </li>
</ul>

Wells

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

Kyk, ek is in 'n put!

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

Opsionele klasse

Beheer vulling en afgeronde hoeke met twee opsionele wysigingsklasse.

Kyk, ek is in 'n put!

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

Kyk, ek is in 'n put!

<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 vereis 'n href="#"vir klik-gebeurtenisse as jy eerder 'n anker wil 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 ;
  }
}

Aftrekkieslyste

Voorbeeld

Opmerk

Opsies

Belyn die spyskaarte

Gedeaktiveerde spyskaartopsies

Sub-kieslyste op aftreklys

Knoppie groepe

Voorbeelde

Enkelknoppie groep

Veelvuldige knoppie groepe

Vertikale knoppie groepe

Merkblokkie en radiogeure

Aftrekkies in knoppiegroepe

Knoppie aftrekkieslys

Oorsig en voorbeelde

Werk met alle knopgroottes

Vereis JavaScript

Verdeel knoppie aftrekkies

Groottes

Verlaat spyskaarte

Nav: oortjies, pille en lyste

Liggewig-standaarde Dieselfde opmaak, verskillende klasse

Basiese oortjies

Basiese pille

Gestremde toestand

Komponentbelyning

Stapelbaar

Gestapelde oortjies

Gestapelde pille

Aftrekkies

Oortjies met aftreklys

Pille met dropdowns

Nav lyste

Voorbeeld nav lys

Horisontale verdelers

Tabbare nav

Tabbare voorbeeld

Vervaag oortjies

Vereis jQuery-inprop

Tabblad in enige rigting

Oortjies aan die onderkant

Oortjies aan die linkerkant

Oortjies aan die regterkant

Navbar

Basiese navigasiebalk

Navbar komponente

Handelsmerk

Nav skakels

Vorms

Soek vorm

Komponentbelyning

Gebruik aftreklys

Teks

Opsionele vertoonvariasies

Bo vasgemaak

Vas aan die onderkant

Statiese boonste navigasiebalk

Responsiewe navigasiebalk

Omgekeerde variasie

Broodkrummels

Voorbeelde

Paginering Twee opsies om deur inhoud te blaai

Standaard paginering

Opsies

Gestremde en aktiewe state

Groottes

Belyning

Blader

Standaard voorbeeld

Belynde skakels

Opsionele gedeaktiveerde toestand

Etikette en kentekens

Etikette

Kentekens

Maklik opvoubaar

Tipografiese komponente

Helde eenheid

Hello Wêreld!

Bladsykopskrif