Komponente

Deseci višekratnih komponenti napravljenih da obezbede navigaciju, upozorenja, iskačuće prikaze i još mnogo toga.

Primjeri

Dvije osnovne opcije, zajedno s još dvije specifične varijacije.

Grupa sa jednim dugmetom

Zamotajte niz dugmadi .btnu .btn-group.

  1. <div class = "btn-group" >
  2. <button class = "btn" > Lijevo </button>
  3. <button class = "btn" > Srednja </button>
  4. <button class = "btn" > Desno </button>
  5. </div>

Više grupa dugmadi

Kombinirajte skupove <div class="btn-group">u a <div class="btn-toolbar">za složenije komponente.

  1. <div class = "btn-toolbar" >
  2. <div class = "btn-group" >
  3. ...
  4. </div>
  5. </div>

Vertikalne grupe dugmadi

Neka skup dugmadi izgleda vertikalno naslagano, a ne horizontalno.

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

Potvrdni okvir i radio okusi

Grupe dugmadi takođe mogu funkcionisati kao radio uređaji, gde samo jedno dugme može biti aktivno, ili potvrdni okviri, gde može biti aktivan bilo koji broj dugmadi. Pogledajte JavaScript dokumente za to.

Padajući meni u grupama dugmadi

Glavu gore!Dugmad s padajućim izbornikom moraju biti pojedinačno umotana u svoje .btn-groupunutar a .btn-toolbarradi pravilnog prikazivanja.

Pregled i primjeri

Koristite bilo koje dugme da pokrenete padajući meni tako što ćete ga postaviti unutar a .btn-groupi obezbediti odgovarajuću oznaku menija.

  1. <div class = "btn-group" >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >
  3. Akcija
  4. <span class = "caret" ></span>
  5. </a>
  6. <ul class = "padajući meni" >
  7. <!-- veze padajućeg menija -->
  8. </ul>
  9. </div>

Radi sa svim veličinama dugmadi

Padajući meni gumba funkcionira u bilo kojoj veličini: .btn-large, .btn-small, ili .btn-mini.

Zahtijeva JavaScript

Padajući meni s gumbima zahtijeva da funkcionišu dodaci za padajući meni Bootstrap .

U nekim slučajevima – poput mobilnih – padajući meniji će se proširiti izvan okvira za prikaz. Poravnanje morate riješiti ručno ili pomoću prilagođenog JavaScripta.


Padajući meni dugmeta za razdvajanje

Nadovezujući se na stilove grupe dugmadi i oznake, lako možemo kreirati podijeljeno dugme. Dugmad za razdvajanje karakteriše standardna radnja sa leve strane i padajući prekidač na desnoj strani sa kontekstualnim vezama.

  1. <div class = "btn-group" >
  2. <button class = "btn" > Akcija </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "padajući meni" >
  7. <!-- veze padajućeg menija -->
  8. </ul>
  9. </div>

Veličine

Koristite dodatne klase dugmadi .btn-mini, .btn-smallili .btn-largeza određivanje veličine.

  1. <div class = "btn-group" >
  2. <button class = "btn btn-mini" > Akcija </button>
  3. <button class = "btn btn-mini dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "padajući meni" >
  7. <!-- veze padajućeg menija -->
  8. </ul>
  9. </div>

Dropup meniji

Padajući meniji se takođe mogu prebacivati ​​odozdo prema gore dodavanjem jedne klase neposrednom roditelju .dropdown-menu. Preokrenut će smjer .careti pozicionirati sam meni tako da se kreće odozdo prema gore umjesto odozgo prema dolje.

  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. </button>
  6. <ul class = "padajući meni" >
  7. <!-- veze padajućeg menija -->
  8. </ul>
  9. </div>

Standardna paginacija

Jednostavna paginacija inspirirana Rdio-om, odlična za aplikacije i rezultate pretraživanja. Veliki blok je teško promašiti, lako je skalabilan i pruža velike površine klikova.

  1. <div class = "paginacija" >
  2. <ul>
  3. <li><a href = "#" > Prethodno </a></li>
  4. <li><a href = "#" > 1 </a></li>
  5. <li><a href = "#" > 2 </a></li>
  6. <li><a href = "#" > 3 </a></li>
  7. <li><a href = "#" > 4 ​​</a></li>
  8. <li><a href = "#" > 5 </a></li>
  9. <li><a href = "#" > Sljedeće </a></li>
  10. </ul>
  11. </div>

Opcije

Onemogućeno i aktivno stanje

Linkovi su prilagodljivi različitim okolnostima. Koristi .disabledse za veze na koje se ne može kliknuti i .activeza označavanje trenutne stranice.

  1. <div class = "paginacija" >
  2. <ul>
  3. <li class = "disabled" ><a href = "#" > « </a></li>
  4. <li class = "active" ><a href = "#" > 1 </a></li>
  5. ...
  6. </ul>
  7. </div>

Opciono možete zamijeniti aktivna ili onemogućena sidra za raspone kako biste uklonili funkcionalnost klika uz zadržavanje predviđenih stilova.

  1. <div class = "paginacija" >
  2. <ul>
  3. <li class = "onemogućeno" ><span> « </span></li>
  4. <li class = "aktivan" ><span> 1 </span></li>
  5. ...
  6. </ul>
  7. </div>

Veličine

Želite veću ili manju paginaciju? Dodajte .pagination-large, .pagination-small, ili .pagination-miniza dodatne veličine.

  1. <div class = "pagination pagination-large" >
  2. <ul>
  3. ...
  4. </ul>
  5. </div>
  6. <div class = "paginacija" >
  7. <ul>
  8. ...
  9. </ul>
  10. </div>
  11. <div class = "pagination pagination-small" >
  12. <ul>
  13. ...
  14. </ul>
  15. </div>
  16. <div class = "pagination pagination-mini" >
  17. <ul>
  18. ...
  19. </ul>
  20. </div>

Poravnanje

Dodajte jednu od dvije neobavezne klase da promijenite poravnanje veza za paginaciju: .pagination-centeredi .pagination-right.

  1. <div class = "paginacija centrirana na paginaciju" >
  2. ...
  3. </div>
  1. <div class = "paginacija paginacija-desno" >
  2. ...
  3. </div>

Pejdžer

Brze prethodne i sljedeće veze za jednostavne implementacije paginacije s laganim oznakama i stilovima. Odličan je za jednostavne stranice poput blogova ili časopisa.

Zadani primjer

Podrazumevano, pejdžer centrira veze.

  1. <ul class = "pager" >
  2. <li><a href = "#" > Prethodno </a></li>
  3. <li><a href = "#" > Sljedeće </a></li>
  4. </ul>

Poravnane veze

Alternativno, svaku vezu možete poravnati sa strane:

  1. <ul class = "pager" >
  2. <li class = "prethodni" >
  3. <a href = "#" > Stariji </a>
  4. </li>
  5. <li class = "sljedeća" >
  6. <a href = "#" > Noviji → </a>
  7. </li>
  8. </ul>

Opciono onemogućeno stanje

Veze pejdžera takođe koriste opštu .disableduslužnu klasu iz paginacije.

  1. <ul class = "pager" >
  2. <li class = "prethodni onemogućen" >
  3. <a href = "#" > Stariji </a>
  4. </li>
  5. ...
  6. </ul>

Etikete

Etikete Markup
Default <span class="label">Default</span>
Uspjeh <span class="label label-success">Success</span>
Upozorenje <span class="label label-warning">Warning</span>
Bitan <span class="label label-important">Important</span>
Info <span class="label label-info">Info</span>
Inverzno <span class="label label-inverse">Inverse</span>

Značke

Ime Primjer Markup
Default 1 <span class="badge">1</span>
Uspjeh 2 <span class="badge badge-success">2</span>
Upozorenje 4 <span class="badge badge-warning">4</span>
Bitan 6 <span class="badge badge-important">6</span>
Info 8 <span class="badge badge-info">8</span>
Inverzno 10 <span class="badge badge-inverse">10</span>

Lako sklopivi

Za jednostavnu implementaciju, oznake i značke će se jednostavno skupiti (preko CSS-ovog :emptyselektora) kada u njima nema sadržaja.

Jedinica heroja

Lagana, fleksibilna komponenta za izlaganje ključnog sadržaja na vašoj web lokaciji. Dobro radi na marketingu i web lokacijama s velikim sadržajem.

Zdravo svijete!

Ovo je jednostavna jedinica heroja, jednostavna komponenta u stilu jumbotrona za privlačenje dodatne pažnje na istaknuti sadržaj ili informacije.

Nauči više

  1. <div class = "heroj-jedinica" >
  2. <h1> Naslov </h1>
  3. <p> Tagline </p>
  4. <p>
  5. <a class = "btn btn-primary btn-large" >
  6. Nauči više
  7. </a>
  8. </p>
  9. </div>

Zaglavlje stranice

Jednostavna ljuska za h1odgovarajući prostor i segmentiranje dijelova sadržaja na stranici. Može koristiti h1zadani smallelement, kao i većinu drugih komponenti (sa dodatnim stilovima).

  1. <div class = "page-header" >
  2. <h1> Primjer zaglavlja stranice <small> Podtekst za zaglavlje </small></h1>
  3. </div>

Zadane sličice

Prema zadanim postavkama, sličice Bootstrapa su dizajnirane da prikazuju povezane slike sa minimalnim potrebnim oznakama.

Vrlo prilagodljiv

Uz malo dodatne oznake, moguće je dodati bilo koju vrstu HTML sadržaja poput naslova, pasusa ili dugmadi u sličice.

  • 300x200

    Thumbnail label

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

    Akcija Akcija

  • 300x200

    Thumbnail label

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

    Akcija Akcija

  • 300x200

    Thumbnail label

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

    Akcija Akcija

Zašto koristiti sličice

Sličice (ranije .media-griddo v1.4) su odlične za mreže fotografija ili video zapisa, rezultate pretraživanja slika, maloprodajne proizvode, portfelje i još mnogo toga. To mogu biti linkovi ili statični sadržaj.

Jednostavna, fleksibilna oznaka

Označavanje sličica je jednostavno – sve što je potrebno je ulsa bilo kojim brojem elemenata. liTakođe je super fleksibilan, omogućavajući bilo koju vrstu sadržaja sa samo malo više oznaka za umotavanje vašeg sadržaja.

Koristi veličine stupaca mreže

Konačno, komponenta sličica koristi postojeće klase sistema mreže—kao .span2ili .span3—za kontrolu dimenzija sličica.

Markup

Kao što je ranije spomenuto, potrebne oznake za sličice su lagane i jednostavne. Evo pogleda na zadanu postavku za povezane slike :

  1. <ul class = "sličice" >
  2. <li class = "span4" >
  3. <a href = "#" class = "thumbnail" >
  4. <img data-src = "holder.js/300x200" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

Za prilagođeni HTML sadržaj u sličicama, oznake se neznatno mijenjaju. Da bismo dozvolili sadržaj na nivou bloka bilo gdje, mijenjamo <a>za nešto <div>slično:

  1. <ul class = "sličice" >
  2. <li class = "span4" >
  3. <div class = "sličica" >
  4. <img data-src = "holder.js/300x200" alt = "" >
  5. <h3> Oznaka sličice </h3>
  6. <p> Sličica... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

Više primjera

Istražite sve svoje mogućnosti s različitim mrežnim klasama koje su vam dostupne. Također možete miješati i spajati različite veličine.

Podrazumevano upozorenje

Umotajte bilo koji tekst i opciono dugme za odbacivanje .alertza osnovnu poruku upozorenja.

Upozorenje! Najbolje da se proveri, ne izgledaš baš dobro.
  1. <div class = "alert" >
  2. <button type = "button" class = "close" data-dismiss = "alert" > × </button>
  3. <strong> Upozorenje! </strong> Najbolje provjerite sami, ne izgledate baš dobro.
  4. </div>

Odbaci dugmad

Mobile Safari i Mobile Opera pretraživači, pored data-dismiss="alert"atributa, zahtijevaju i href="#"za odbacivanje upozorenja kada se koristi <a>oznaka.

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

Alternativno, možete koristiti <button>element s atributom podataka, što smo odlučili učiniti za naše dokumente. Kada koristite <button>, morate uključiti type="button"ili se vaši obrasci možda neće poslati.

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

Odbaci upozorenja putem JavaScripta

Koristite jQuery dodatak za upozorenja za brzo i jednostavno odbacivanje upozorenja.


Opcije

Za duže poruke povećajte razmak na vrhu i dnu omota upozorenja dodavanjem .alert-block.

Upozorenje!

Najbolje je da se sami provjerite, ne izgledate dobro. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

  1. <div class = "alert alert-block" >
  2. <button type = "button" class = "close" data-dismiss = "alert" > × </button>
  3. <h4> Upozorenje! </h4>
  4. Najbolje da se sami provjerite, niste...
  5. </div>

Kontekstualne alternative

Dodajte opcione klase da promijenite konotaciju upozorenja.

Greška ili opasnost

Oh snap! Promijenite nekoliko stvari i pokušajte ponovo poslati.
  1. <div class = "alert alert-error" >
  2. ...
  3. </div>

Uspjeh

Dobro urađeno! Uspješno ste pročitali ovu važnu poruku upozorenja.
  1. <div class = "alert alert-success" >
  2. ...
  3. </div>

Informacije

Glavu gore! Ovo upozorenje treba vašu pažnju, ali nije previše važno.
  1. <div class = "alert alert-info" >
  2. ...
  3. </div>

Primjeri i oznake

Basic

Zadana traka napretka s vertikalnim gradijentom.

  1. <div class = "progress" >
  2. <div class = "bar" style = " width : 60 %; " ></div>
  3. </div>

Prugasta

Koristi gradijent za stvaranje prugastog efekta. Nije dostupno u IE7-8.

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

Animirani

Dodajte .activeu .progress-stripedda animirate pruge s desna na lijevo. Nije dostupno u svim verzijama IE.

  1. <div class = "progress progress-striped-striped active" >
  2. <div class = "bar" style = " width : 40 %; " ></div>
  3. </div>

Stacked

Stavite više šipki u iste .progressda ih složite.

  1. <div class = "progress" >
  2. <div class = "bar bar-success" style = " širina : 35 %; " ></div>
  3. <div class = "bar bar-warning" style = " širina : 20 %; " ></div>
  4. <div class = "bar bar-danger" style = " širina : 10 %; " ></div>
  5. </div>

Opcije

Dodatne boje

Trake napretka koriste neke od istih tipki i klasa upozorenja za dosljedne stilove.

  1. <div class = "progress progress-info" >
  2. <div class = "bar" style = " width : 20 % " ></div>
  3. </div>
  4. <div class = "progress progress-success" >
  5. <div class = "bar" style = " width : 40 % " ></div>
  6. </div>
  7. <div class = "progress progress-warning" >
  8. <div class = "bar" style = " width : 60 % " ></div>
  9. </div>
  10. <div class = "progress progress-danger" >
  11. <div class = "bar" style = " width : 80 % " ></div>
  12. </div>

Prugaste šipke

Slično jednobojnim bojama, imamo različite prugaste trake napretka.

  1. <div class = "progress progress-info progress-striped" >
  2. <div class = "bar" style = " width : 20 % " ></div>
  3. </div>
  4. <div class = "progress progress-success progress-striped" >
  5. <div class = "bar" style = " width : 40 % " ></div>
  6. </div>
  7. <div class = "progress progress-warning progress-striped" >
  8. <div class = "bar" style = " width : 60 % " ></div>
  9. </div>
  10. <div class = "napredak napredak-opasnost napredak-prugasti" >
  11. <div class = "bar" style = " width : 80 % " ></div>
  12. </div>

Podrška za pretraživač

Trake napretka koriste CSS3 gradijente, prijelaze i animacije kako bi postigli sve svoje efekte. Ove funkcije nisu podržane u IE7-9 ili starijim verzijama Firefoxa.

Verzije starije od Internet Explorer 10 i Opera 12 ne podržavaju animacije.

Stilovi apstraktnih objekata za pravljenje različitih tipova komponenti (kao što su komentari na blogu, tvitovi, itd.) koje sadrže sliku poravnatu lijevo ili desno uz tekstualni sadržaj.

Zadani primjer

Podrazumevani mediji dozvoljavaju da se medijski objekat (slike, video, audio) lebdi levo ili desno od bloka sadržaja.

64x64

Naslov medija

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

Naslov medija

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

Naslov medija

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.
  1. <div class = "mediji" >
  2. <a class = "pull-left" href = "#" >
  3. <img class = "media-object" data-src = "holder.js/64x64" >
  4. </a>
  5. <div class = "medijsko tijelo" >
  6. <h4 class = "media-heading" > Naslov medija </h4>
  7. ...
  8.  
  9. <!-- Ugniježđeni medijski objekat -->
  10. <div class = "mediji" >
  11. ...
  12. </div>
  13. </div>
  14. </div>

Lista medija

Uz malo dodatne oznake, možete koristiti medije unutar liste (korisno za teme komentara ili liste članaka).

  • 64x64

    Naslov medija

    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.

    64x64

    Ugniježđeni medijski naslov

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

    Ugniježđeni medijski naslov

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

    Ugniježđeni medijski naslov

    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.
  • 64x64

    Naslov medija

    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.
  1. <ul class = "media-list" >
  2. <li class = "mediji" >
  3. <a class = "pull-left" href = "#" >
  4. <img class = "media-object" data-src = "holder.js/64x64" >
  5. </a>
  6. <div class = "medijsko tijelo" >
  7. <h4 class = "media-heading" > Naslov medija </h4>
  8. ...
  9.  
  10. <!-- Ugniježđeni medijski objekat -->
  11. <div class = "mediji" >
  12. ...
  13. </div>
  14. </div>
  15. </li>
  16. </ul>

Wells

Koristite bunar kao jednostavan efekat na elementu da mu date umetnuti efekat.

Vidi, ja sam u bunaru!
  1. <div class = "dobro" >
  2. ...
  3. </div>

Izborna nastava

Kontrolirajte padding i zaobljene uglove s dvije opcione klase modifikatora.

Vidi, ja sam u bunaru!
  1. <div class = "dobro dobro-veliko" >
  2. ...
  3. </div>
Vidi, ja sam u bunaru!
  1. <div class = "dobro dobro-malo" >
  2. ...
  3. </div>

Zatvori ikona

Koristite generičku ikonu za zatvaranje za odbacivanje sadržaja kao što su modali i upozorenja.

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

iOS uređaji zahtijevaju href="#"događaje klika ako biste radije koristili sidro.

  1. <a class = "close" href = "#" > × </a>

Časovi za pomoćnike

Jednostavne, fokusirane klase za mala podešavanja prikaza ili ponašanja.

.povucite-lijevo

Pomaknite element lijevo

  1. klasa = "povuci-lijevo"
  1. . povuci - lijevo {
  2. float : lijevo ;
  3. }

.povuci-desno

Pomaknite element udesno

  1. class = "povuci-desno"
  1. . povuci - desno {
  2. float : desno ;
  3. }

.muted

Promijenite boju elementa u#999

  1. class = "utišano"
  1. . prigušen {
  2. boja : #999;
  3. }

.clearfix

Obrišite floatna bilo kojem elementu

  1. class = "jasan popravak"
  1. . ispraviti {
  2. * zum : 1 ;
  3. &: prije ,
  4. &: nakon {
  5. displej : sto ;
  6. sadržaj : "" ;
  7. }
  8. &: nakon {
  9. jasno : oba ;
  10. }
  11. }