Komponente

Tientalle herbruikbare komponente is in Bootstrap ingebou om navigasie, waarskuwings, popovers en nog baie meer te verskaf.

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:

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

Werkbalk voorbeeld

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

  1. <div klas = "btn-nutsbalk" >
  2. <div klas = "btn-groep" >
  3. ...
  4. </div>
  5. </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.

Knoppie aftrekkies

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.

  1. <div klas = "btn-groep" >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >
  3. Aksie
  4. <span class = "caret" ></span>
  5. </a>
  6. <ul class = "dropdown-menu" >
  7. <!-- aftreklys skakels -->
  8. </ul>
  9. </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.


Verdeel knoppie aftrekkies

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.

  1. <div klas = "btn-groep" >
  2. ...
  3. <ul klas = "aftreklys-kieslys trek-regs" >
  4. <!-- aftreklys skakels -->
  5. </ul>
  6. </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.

  1. <div klas = "btn-groep" >
  2. <button class = "btn" > Handeling </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </knoppie>
  6. <ul class = "dropdown-menu" >
  7. <!-- aftreklys skakels -->
  8. </ul>
  9. </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.

  1. <div class = "btn-group dropup" >
  2. <button class = "btn" > Dropup </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </knoppie>
  6. <ul class = "dropdown-menu" >
  7. <!-- aftreklys skakels -->
  8. </ul>
  9. </div>

Multicon-bladsy paginering

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

  1. <div klas = "paginering" >
  2. <ul>
  3. <li><a href = "#" > Vorige </a></li>
  4. <li klas = "aktief" >
  5. <a href = "#"> 1 </a> _
  6. </li>
  7. <li><a href = "#"> 2 </a> </li>
  8. <li><a href = "#"> 3 </a> </li>
  9. <li><a href = "#"> 4 </a> </li>
  10. <li><a href = "#" > Volgende </a></li>
  11. </ul>
  12. </div>

Pager Vir vinnige vorige en volgende skakels

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.

  1. <ul klas = "pager" >
  2. <li>
  3. <a href = "#" > Vorige </a>
  4. </li>
  5. <li>
  6. <a href = "#" > Volgende </a>
  7. </li>
  8. </ul>

Belynde skakels

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

  1. <ul klas = "pager" >
  2. <li klas = "vorige" >
  3. <a href = "#"> & larr ; Ouer </a>
  4. </li>
  5. <li klas = "volgende" >
  6. <a href = "#" > Nuwer → </a>
  7. </li>
  8. </ul>
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>

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

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>

Helde eenheid

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:

  1. <div klas = "held-eenheid" >
  2. <h1> Opskrif </h1>
  3. <p> Byskrif </p>
  4. <p>
  5. <a klas = "btn btn-primêre btn-groot" >
  6. Leer meer
  7. </a>
  8. </p>
  9. </div>

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

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.

  1. <div class = "page-header" >
  2. <h1> Voorbeeld bladsyopskrif </h1>
  3. </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 :

  1. <ul class = "thumbnails" >
  2. <li klas = "span3" >
  3. <a href = "#" class = "thumbnail" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </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:

  1. <ul class = "thumbnails" >
  2. <li klas = "span3" >
  3. <div class = "thumbnail" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> Kleinkiekie-etiket </h5>
  6. <p> Kleinkiekie-onderskrif reg hier... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

Meer voorbeelde

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

Liggewig verstekke

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.

Waarskuwing! Beste kyk self, jy lyk nie te goed nie.
  1. <div klas = "waarskuwing" >
  2. <button class = "close" data-dismiss = "alert" > × </button>
  3. <strong> Waarskuwing! </strong> Beste kyk self, jy lyk nie te goed nie.
  4. </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.

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.

  1. <div class = "waarskuwing waarskuwing-blok" >
  2. <a class = "close" data-dismiss = "alert" href = "#" > × </a>
  3. <h4 class = "alert-heading" > Waarskuwing! </h4>
  4. Beste check self, jy is nie...
  5. </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.
  1. <div class = "alert alert-error" >
  2. ...
  3. </div>

Sukses

Wel gedaan! Jy het hierdie belangrike waarskuwingsboodskap suksesvol gelees.
  1. <div class = "waarskuwing waarskuwing-sukses" >
  2. ...
  3. </div>

Inligting

Let op! Hierdie waarskuwing benodig jou aandag, maar dit is nie baie belangrik nie.
  1. <div class = "waarskuwing waarskuwing-inligting" >
  2. ...
  3. </div>

Voorbeelde en opmaak

Basies

Verstek vorderingsbalk met 'n vertikale gradiënt.

  1. <div klas = "vordering" >
  2. <div klas = "bar"
  3. style = " breedte : 60 %; " ></div>
  4. </div>

Gestreepte

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

  1. <div class = "vordering vordering-gestreep" >
  2. <div klas = "bar"
  3. style = " breedte : 20 %; " ></div>
  4. </div>

Geanimeerde

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

  1. <div class = "vordering vordering-gestreep
  2. aktief" >
  3. <div klas = "bar"
  4. style = " breedte : 40 %; " ></div>
  5. </div>

Opsies en blaaierondersteuning

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.

Kyk, ek is in 'n put!
  1. <div klas = "wel" >
  2. ...
  3. </div>

Maak ikoon toe

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

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

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

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