Komponente

Deseci komponenata za višekratnu upotrebu ugrađene su u Bootstrap za pružanje navigacije, upozorenja, iskačućih prikaza i još mnogo toga.

Grupe dugmadi

Koristite grupe dugmadi da spojite više dugmadi zajedno kao jednu kompozitnu komponentu. Izgradite ih sa nizom <a>ili <button>elemenata.

Najbolje prakse

Preporučujemo sljedeće smjernice za korištenje grupa dugmadi i alatnih traka:

  • Uvijek koristite isti element u jednoj grupi gumba <a>ili <button>.
  • Nemojte miješati dugmad različitih boja u istoj grupi dugmadi.
  • Koristite ikone uz ili umjesto teksta, ali obavezno uključite alt i naslov teksta gdje je to prikladno.

Povezane grupe dugmadi sa padajućim menijima (pogledajte dole) treba da se pozivaju odvojeno i uvek uključuju padajući kursor za označavanje planiranog ponašanja.

Zadani primjer

Evo kako HTML izgleda za standardnu ​​grupu dugmadi izgrađenu sa dugmadima za oznake sidra:

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

Primjer trake s alatima

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>

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.

Preuzmite javascript »

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.

Padajući meni sa dugmetom

Primjer označavanja

Slično grupi dugmadi, naše označavanje koristi uobičajeno označavanje dugmadi, ali sa pregršt dodataka za preciziranje stila i podršku Bootstrap-ovom padajućem jQuery dodatku.

  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. vaše veličine dugmadi su .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

Pregled i primjeri

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.

Veličine

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

  1. <div class = "btn-group" >
  2. ...
  3. <ul class = "padajući meni povlačenje-desno" >
  4. <!-- veze padajućeg menija -->
  5. </ul>
  6. </div>

Primjer označavanja

Proširujemo obične padajuće menije za dugme kako bismo obezbedili drugu radnju dugmeta koja radi kao poseban okidač padajućeg menija.

  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>

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>

Paginacija na više stranica

Kada koristiti

Ultra pojednostavljena i minimalno stilizirana 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.

Linkovi stranica sa statusom

Veze su prilagodljive i rade u brojnim okolnostima sa pravom klasom. .disabledza linkove na koje se ne može kliknuti i .activeza trenutnu stranicu.

Fleksibilno poravnanje

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

Primjeri

Zadana komponenta paginacije je fleksibilna i radi u brojnim varijantama.

Markup

Umotano u <div>, paginacija je samo <ul>.

  1. <div class = "paginacija" >
  2. <ul>
  3. <li><a href = "#" > Prethodno </a></li>
  4. <li class = "aktivan" >
  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 = "#" > Sljedeće </a></li>
  11. </ul>
  12. </div>

Pejdžer Za brze prethodne i sledeće veze

O pejdžeru

Komponenta pagera je skup veza za jednostavne implementacije paginacije s laganim oznakama i još lakšim stilovima. Odličan je za jednostavne stranice poput blogova ili časopisa.

Opciono onemogućeno stanje

Linkovi pejdžera takođe koriste opštu .disabledklasu iz paginacije.

Zadani primjer

Podrazumevano, pejdžer centrira veze.

  1. <ul class = "pager" >
  2. <li>
  3. <a href = "#" > Prethodno </a>
  4. </li>
  5. <li>
  6. <a href = "#" > Sljedeće </a>
  7. </li>
  8. </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>
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>

O

Značke su male, jednostavne komponente za prikazivanje indikatora ili neke vrste brojanja. Obično se nalaze u klijentima e-pošte kao što je Mail.app ili u mobilnim aplikacijama za push obavijesti.

Dostupni časovi

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>

Jedinica heroja

Bootstrap pruža laganu, fleksibilnu komponentu koja se zove heroj jedinica za izlaganje sadržaja na vašoj web lokaciji. Dobro radi na marketingu i web lokacijama s velikim sadržajem.

Markup

Umotajte svoj sadržaj u divovako:

  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>

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

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

  • 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

  • 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 = "span3" >
  3. <a href = "#" class = "thumbnail" >
  4. <img src = "https://placehold.it/260x180" 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 = "span3" >
  3. <div class = "sličica" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> Oznaka sličice </h5>
  6. <p> Natpis sličice upravo ovdje... </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.

Lagane zadane postavke

Prepisana osnovna klasa

Uz Bootstrap 2, pojednostavili smo osnovnu klasu: .alertumjesto .alert-message. Također smo smanjili minimalno potrebnu oznaku—no <p>nije potrebno po defaultu, samo vanjski <div>.

Pojedinačna poruka upozorenja

Za trajniju komponentu sa manje koda, uklonili smo diferencirajući izgled za blokada upozorenja, poruke koje dolaze s više dopuna i obično više teksta. Klasa je također promijenjena u .alert-block.


Odlično ide uz javascript

Bootstrap dolazi sa odličnim jQuery dodatkom koji podržava poruke upozorenja, čineći njihovo odbacivanje brzim i lakim.

Nabavite dodatak »

Primjer upozorenja

Zamotajte svoju poruku i opcionalnu ikonu za zatvaranje u div s jednostavnom klasom.

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

Glavu gore! iOS uređaji zahtijevaju an href="#"za odbacivanje upozorenja. Obavezno ga uključite i atribut podataka za ikone zatvaranja sidra. 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.

Lako proširite standardnu ​​poruku upozorenja s dvije opcione klase: .alert-blockza više kontrola i kontrola teksta i .alert-headingza odgovarajući naslov.

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. <a class = "close" data-dismiss = "alert" href = "#" > × </a>
  3. <h4 class = "alert-heading" > 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"
  3. style = " širina : 60 %; " ></div>
  4. </div>

Prugasta

Koristi gradijent za stvaranje prugastog efekta (bez IE).

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

Animirani

Uzima prugasti primjer i animira ga (bez IE).

  1. <div class = "progres napredak-prugasti
  2. aktivan" >
  3. <div class = "bar"
  4. style = " širina : 40 %; " ></div>
  5. </div>

Opcije i podrška za pretraživač

Dodatne boje

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

Prugaste šipke

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

Ponašanje

Trake napretka koriste CSS3 tranzicije, tako da ako dinamički podešavate širinu putem javascripta, ona će glatko mijenjati veličinu.

Ako koristite .activeklasu, vaše .progress-stripedtrake napretka će animirati pruge slijeva nadesno.

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.

Opera i IE trenutno ne podržavaju animacije.

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>

Zatvori ikona

Use the generic close icon for dismissing content like modals and alerts.

  1. <button class="close">&times;</button>

iOS devices require an href="#" for click events if you rather use an anchor.

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