Komponente

Deseci komponenti za višekratnu upotrebu napravljenih za pružanje navigacije, upozorenja, skočnih prozora i više.

Primjeri

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

Grupa s jednom tipkom

Omotajte niz gumba .btns .btn-group.

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

Više grupa gumba

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

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

Okomite grupe gumba

Neka skup gumba izgleda okomito naslagani umjesto vodoravno.

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

Potvrdni okvir i radijski okusi

Grupe gumba također mogu funkcionirati kao radio, gdje može biti aktivan samo jedan gumb, ili okviri za potvrdu, gdje može biti aktivan bilo koji broj gumba. Za to pogledajte JavaScript dokumente .

Padajući izbornici u grupama gumba

Glavu gore!Gumbi s padajućim izbornikom moraju biti zasebno umotani u svoje .btn-groupunutar .btn-toolbarza ispravno prikazivanje.

Pregled i primjeri

Upotrijebite bilo koji gumb za pokretanje padajućeg izbornika tako da ga postavite unutar .btn-groupi date odgovarajuću oznaku izbornika.

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

Radi sa svim veličinama gumba

Padajući izbornici gumba rade u bilo kojoj veličini: .btn-large, .btn-smallili .btn-mini.

Zahtijeva JavaScript

Za rad padajućih gumba potreban je Bootstrap dodatak za padajući izbornik.

U nekim će se slučajevima, poput mobilnih uređaja, padajući izbornici proširiti izvan okvira za prikaz. Morate riješiti poravnanje ručno ili prilagođenim JavaScriptom.


Padajući izbornici gumba Split

Nadovezujući se na stilove i označavanje grupe gumba, možemo jednostavno stvoriti podijeljeni gumb. Podijeljeni gumbi imaju standardnu ​​radnju s lijeve strane i padajući izbornik s desne strane s 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 izbornik" >
  7. <!-- veze padajućeg izbornika -->
  8. </ul>
  9. </div>

Veličine

Iskoristite dodatne klase gumba .btn-mini, .btn-smallili .btn-largeza dimenzioniranje.

  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 izbornik" >
  7. <!-- veze padajućeg izbornika -->
  8. </ul>
  9. </div>

Padajući izbornici

Padajući izbornici također se mogu prebacivati ​​odozdo prema gore dodavanjem jedne klase neposrednom roditelju .dropdown-menu. Okrenut će smjer .careti promijeniti položaj samog izbornika da se kreće odozdo prema gore umjesto odozgo prema dolje.

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

Standardna paginacija

Jednostavno označavanje stranica inspirirano Rdioom, izvrsno za aplikacije i rezultate pretraživanja. Veliki blok teško je promašiti, lako ga je prilagoditi i pruža velika područja klika.

  1. <div class = "pagination" >
  2. <ul>
  3. <li><a href = "#" > Prethodna </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 = "#" > Dalje </a></li>
  10. </ul>
  11. </div>

Mogućnosti

Onesposobljena i aktivna stanja

Veze se mogu prilagoditi različitim okolnostima. Koristite .disabledza poveznice na koje se ne može kliknuti i .activeza označavanje trenutne stranice.

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

Po izboru možete zamijeniti aktivna ili onemogućena sidra za raspone kako biste uklonili funkcionalnost klika uz zadržavanje željenih stilova.

  1. <div class = "pagination" >
  2. <ul>
  3. <li class = "disabled" ><span> « </span></li>
  4. <li class = "active" ><span> 1 </span></li>
  5. ...
  6. </ul>
  7. </div>

Veličine

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

  1. <div class = "pagination pagination-large" >
  2. <ul>
  3. ...
  4. </ul>
  5. </div>
  6. <div class = "pagination" >
  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 opcijske klase za promjenu poravnanja veza na stranice: .pagination-centeredi .pagination-right.

  1. <div class = "pagination pagination-centered" >
  2. ...
  3. </div>
  1. <div class = "pagination pagination-right" >
  2. ...
  3. </div>

Pager

Brze prethodne i sljedeće veze za jednostavne implementacije paginacije s laganim označavanjem i stilovima. Izvrstan je za jednostavne stranice poput blogova ili časopisa.

Zadani primjer

Prema zadanim postavkama, dojavljivač centrira veze.

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

Usklađene veze

Alternativno, svaku vezu možete poravnati sa strane:

  1. <ul class = "pager" >
  2. <li klasa = "prethodna" >
  3. <a href = "#" > Starije </a>
  4. </li>
  5. <li class = "sljedeća" >
  6. <a href = "#" > Novije → </a>
  7. </li>
  8. </ul>

Izborno onemogućeno stanje

Pager veze također koriste opću .disabledupotrebnu klasu iz paginacije.

  1. <ul class = "pager" >
  2. <li class = "previous disabled" >
  3. <a href = "#" > Starije </a>
  4. </li>
  5. ...
  6. </ul>

Etikete

Etikete Markup
Zadano <span class="label">Default</span>
Uspjeh <span class="label label-success">Success</span>
Upozorenje <span class="label label-warning">Warning</span>
Važno <span class="label label-important">Important</span>
Info <span class="label label-info">Info</span>
Inverzan <span class="label label-inverse">Inverse</span>

Značke

Ime Primjer Markup
Zadano 1 <span class="badge">1</span>
Uspjeh 2 <span class="badge badge-success">2</span>
Upozorenje 4 <span class="badge badge-warning">4</span>
Važno 6 <span class="badge badge-important">6</span>
Info 8 <span class="badge badge-info">8</span>
Inverzan 10 <span class="badge badge-inverse">10</span>

Lako sklopiv

Za jednostavnu implementaciju, oznake i značke jednostavno će se skupiti (putem CSS-ovog :emptyselektora) kada unutar njih ne postoji nikakav sadržaj.

Jedinica heroja

Lagana, fleksibilna komponenta za prikazivanje ključnog sadržaja na vašoj web stranici. Dobro radi na marketinškim i sadržajnim stranicama.

Pozdrav svijete!

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

Saznajte više

  1. <div class = "hero-unit" >
  2. <h1> Naslov </h1>
  3. <p> Slogan </p>
  4. <p>
  5. <a class = "btn btn-primary btn-large" >
  6. Saznajte više
  7. </a>
  8. </p>
  9. </div>

Zaglavlje stranice

Jednostavna ljuska za h1prikladno raspoređivanje i segmentiranje dijelova sadržaja na stranici. Može koristiti h1zadani small, element kao i većinu drugih komponenti (s 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, Bootstrapove sličice dizajnirane su za prikaz povezanih slika s minimalnim potrebnim oznakama.

Vrlo prilagodljiv

Uz malo dodatnog označavanja, moguće je sličicama dodati bilo koju vrstu HTML sadržaja poput naslova, odlomaka ili gumba.

  • 300x200

    Oznaka sličice

    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.

    Akcijski Akcijski

  • 300x200

    Oznaka sličice

    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.

    Akcijski Akcijski

  • 300x200

    Oznaka sličice

    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.

    Akcijski Akcijski

Zašto koristiti sličice

Sličice (prethodno .media-griddo v1.4) izvrsne su za mreže fotografija ili videozapisa, rezultate pretraživanja slika, maloprodajne proizvode, portfelje i još mnogo toga. Mogu biti poveznice ili statični sadržaj.

Jednostavno, fleksibilno označavanje

Označavanje minijatura je jednostavno - sve što je potrebno je a uls bilo kojim brojem elemenata. liTakođer je super fleksibilan, dopuštajući bilo koju vrstu sadržaja sa samo malo više oznaka za omotavanje vašeg sadržaja.

Koristi veličine stupaca mreže

Na kraju, komponenta sličica koristi postojeće klase sustava rešetki—kao što je .span2ili.span3 — za kontrolu dimenzija sličica.

Markup

Kao što je ranije spomenuto, potrebno označavanje za minijature je lagano i jednostavno. Evo pogleda na zadanu postavku za povezane slike :

  1. <ul class = "thumbnails" >
  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 minijaturama, oznaka se malo mijenja. Kako bismo dopustili sadržaj na razini bloka bilo gdje, mijenjamo <a>za lajk <div>tako:

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

Više primjera

Istražite sve svoje mogućnosti s različitim klasama rešetki koje su vam dostupne. Također možete kombinirati različite veličine.

Zadano upozorenje

Zamotajte bilo koji tekst i dodatni gumb za odbacivanje .alertza osnovnu poruku upozorenja.

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

Gumbi za odbacivanje

Preglednici Mobile Safari i Mobile Opera, osim data-dismiss="alert"atributa, zahtijevaju i href="#"za odbacivanje upozorenja prilikom korištenja <a>oznake.

  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>

Odbacite upozorenja putem JavaScripta

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


Mogućnosti

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

Upozorenje!

Najbolje provjeri, ne izgledaš baš 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 provjerite sami, niste...
  5. </div>

Kontekstualne alternative

Dodajte izborne klase za promjenu konotacije upozorenja.

Pogreška ili opasnost

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

Uspjeh

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

Informacija

Glavu gore! Ovo upozorenje zahtijeva vašu pozornost, ali nije super važno.
  1. <div class = "alert alert-info" >
  2. ...
  3. </div>

Primjeri i oznake

Osnovni, temeljni

Zadana traka napretka s okomitim 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 .activeza .progress-stripedanimiranje pruga zdesna nalijevo. Nije dostupno u svim verzijama IE-a.

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

Složeno

Stavite više šipki u istu .progresskako biste ih složili.

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

Mogućnosti

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 = "progress progress-danger progress-striped" >
  11. <div class = "bar" style = " width : 80 % " ></div>
  12. </div>

Podrška za preglednik

Trake napretka koriste CSS3 gradijente, prijelaze i animacije za postizanje svih njihovih učinaka. Ove značajke nisu podržane u IE7-9 ili starijim verzijama Firefoxa.

Inačice starije od Internet Explorera 10 i Opere 12 ne podržavaju animacije.

Stilovi apstraktnih objekata za izgradnju različitih vrsta komponenti (kao što su komentari na blogu, tweetovi itd.) koji imaju lijevo ili desno poravnanu sliku uz tekstualni sadržaj.

Zadani primjer

Zadani mediji dopuštaju plutanje medijskog objekta (slike, video, audio) lijevo ili desno od bloka sadržaja.

64x64

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. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
64x64

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. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
64x64

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. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  1. <div class = "media" >
  2. <a class = "pull-left" href = "#" >
  3. <img class = "media-object" data-src = "holder.js/64x64" >
  4. </a>
  5. <div class = "media-body" >
  6. <h4 class = "media-heading" > Medijski naslov </h4>
  7. ...
  8.  
  9. <!-- Ugniježđeni medijski objekt -->
  10. <div class = "media" >
  11. ...
  12. </div>
  13. </div>
  14. </div>

Popis medija

Uz malo dodatnog označavanja, možete koristiti unutarnju listu medija (korisno za niti komentara ili popise članaka).

  • 64x64

    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

    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

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

Wells

Upotrijebite bušotinu kao jednostavan učinak na element kako biste mu dali umetnuti učinak.

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

Fakultativna nastava

Kontrolirajte ispunu i zaobljene kutove s dvije opcijske klase modifikatora.

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

Ikona za zatvaranje

Upotrijebite generičku ikonu za zatvaranje za odbacivanje sadržaja poput modala i upozorenja.

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

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

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

Pomoćne klase

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

.povuci-lijevo

Pomakni element ulijevo

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

.povuci-desno

Pomaknite element udesno

  1. klasa = "povuci desno"
  1. . povuci - desno {
  2. lebdjeti : desno ;
  3. }

.prigušen

Promjena boje elementa u#999

  1. klasa = "utišano"
  1. . isključen {
  2. boja : #999;
  3. }

.clearfix

Očistite floatbilo koji element

  1. klasa = "clearfix"
  1. . clearfix {
  2. * zumiranje : 1 ;
  3. &: prije ,
  4. &: nakon {
  5. prikaz : stol ;
  6. sadržaj : "" ;
  7. }
  8. &: nakon {
  9. jasno : oboje ;
  10. }
  11. }