Komponente

V Bootstrap je vgrajenih na desetine komponent za večkratno uporabo, ki zagotavljajo navigacijo, opozorila, pojavna okna in še veliko več.

Skupine gumbov

Uporabite skupine gumbov, da združite več gumbov v eno sestavljeno komponento. Zgradite jih s serijo <a>ali <button>elementi.

Najboljše prakse

Priporočamo naslednje smernice za uporabo skupin gumbov in orodnih vrstic:

  • Vedno uporabite isti element v eni skupini gumbov <a>ali <button>.
  • Ne mešajte gumbov različnih barv v isto skupino gumbov.
  • Uporabite ikone poleg besedila ali namesto njega, vendar obvezno vključite nadomestno besedilo in besedilo naslova, kjer je to primerno.

Povezane skupine gumbov s spustnimi meniji (glejte spodaj) je treba priklicati ločeno in vedno vključiti spustno kazalko, ki označuje predvideno vedenje.

Privzeti primer

Takole je videti HTML za standardno skupino gumbov, zgrajeno z gumbi sidrnih oznak:

  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>

Primer orodne vrstice

Združite nize <div class="btn-group">v <div class="btn-toolbar">za bolj zapletene komponente.

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

Potrditveno polje in radijski okusi

Skupine gumbov lahko delujejo tudi kot radijski sprejemniki, kjer je lahko aktiven samo en gumb, ali potrditvena polja, kjer je lahko aktivnih poljubno število gumbov. Za to si oglejte dokumente Javascript .

Pridobite javascript »

Spustni meniji v skupinah gumbov

Glavo pokonci! Za pravilno upodabljanje morajo biti gumbi s spustnimi meniji posamezno zaviti .btn-groupv svoje ..btn-toolbar

Spustni meniji gumbov

Primer oznake

Podobno kot skupina gumbov, naša oznaka uporablja običajne oznake gumbov, vendar s peščico dodatkov za izboljšanje sloga in podporo Bootstrapovega spustnega vtičnika jQuery.

  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 = "dropdown-menu" >
  7. <!-- povezave do spustnega menija -->
  8. </ul>
  9. </div>

Deluje z vsemi velikostmi gumbov

Spustni meniji gumbov delujejo v kateri koli velikosti. vaši gumbi so velikosti do .btn-large, .btn-smallali .btn-mini.

Potreben je javascript

Za delovanje spustnih menijev gumbov je potreben spustni vtičnik Bootstrap .

V nekaterih primerih, na primer v mobilnih napravah, bodo spustni meniji segali izven vidnega polja. Poravnavo morate rešiti ročno ali z javascriptom po meri.


Spustni meni razdeljenih gumbov

Pregled in primeri

Na podlagi slogov in oznak skupine gumbov lahko preprosto ustvarimo razdeljen gumb. Razdeljeni gumbi imajo standardno dejanje na levi in ​​spustni preklop na desni s kontekstualnimi povezavami.

Velikosti

Uporabite dodatne razrede gumbov .btn-mini, .btn-smallali .btn-largeza določanje velikosti.

  1. <div class = "btn-group" >
  2. ...
  3. <ul class = "dropdown-menu pull-right" >
  4. <!-- povezave do spustnega menija -->
  5. </ul>
  6. </div>

Primer oznake

Razširimo običajne spustne menije gumbov, da zagotovimo dejanje drugega gumba, ki deluje kot ločen sprožilec spustnega menija.

  1. <div class = "btn-group" >
  2. <button class = "btn" > Dejanje </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "dropdown-menu" >
  7. <!-- povezave do spustnega menija -->
  8. </ul>
  9. </div>

Spustni meniji

Spustne menije lahko preklapljate tudi od spodaj navzgor z dodajanjem enega samega razreda neposrednemu nadrejenemu elementu .dropdown-menu. Obrnil bo smer .caretmenija in prestavil sam meni tako, da se premika od spodaj navzgor namesto od zgoraj navzdol.

  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 = "dropdown-menu" >
  7. <!-- povezave do spustnega menija -->
  8. </ul>
  9. </div>

Paginacija na več strani

Kdaj uporabiti

Izjemno poenostavljeno in minimalistično oblikovano označevanje strani po navdihu Rdio, odlično za aplikacije in rezultate iskanja. Velik blok je težko zgrešiti, zlahka ga je mogoče povečati in nudi velika območja klikanja.

Povezave do strani s stanjem

Povezave so prilagodljive in delujejo v številnih okoliščinah s pravim razredom. .disabledza povezave, na katere ni mogoče klikniti, in .activeza trenutno stran.

Prilagodljiva poravnava

Dodajte enega od dveh neobveznih razredov, da spremenite poravnavo povezav za označevanje strani: .pagination-centeredin .pagination-right.

Primeri

Privzeta komponenta paginacije je prilagodljiva in deluje v številnih različicah.

Markup

Zavito v <div>, paginacija je samo <ul>.

  1. <div class = "pagination" >
  2. <ul>
  3. <li><a href = "#" > Nazaj </a></li>
  4. <li class = "aktiven" >
  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 = "#" > Naprej </a></li>
  11. </ul>
  12. </div>

Pager Za hitre prejšnje in naslednje povezave

O pozivniku

Komponenta pozivnika je nabor povezav za preproste izvedbe paginacije z lažjimi oznakami in še lažjimi slogi. Odličen je za preprosta spletna mesta, kot so blogi ali revije.

Izbirno onemogočeno stanje

Povezave na Pager uporabljajo tudi splošni .disabledrazred iz paginacije.

Privzeti primer

Pozivnik privzeto centrira povezave.

  1. <ul class = "pager" >
  2. <li>
  3. <a href = "#" > Nazaj </a>
  4. </li>
  5. <li>
  6. <a href = "#" > Naprej </a>
  7. </li>
  8. </ul>

Poravnane povezave

Druga možnost je, da vsako povezavo poravnate ob straneh:

  1. <ul class = "pager" >
  2. <li class = "prejšnji" >
  3. <a href = "#" > Starejši </a>
  4. </li>
  5. <li class = "naslednji" >
  6. <a href = "#" > Novejši → </a>
  7. </li>
  8. </ul>
Etikete Markup
Privzeto <span class="label">Default</span>
Uspeh <span class="label label-success">Success</span>
Opozorilo <span class="label label-warning">Warning</span>
Pomembno <span class="label label-important">Important</span>
Informacije <span class="label label-info">Info</span>
Inverzna <span class="label label-inverse">Inverse</span>

O tem

Značke so majhne, ​​preproste komponente za prikaz indikatorja ali neke vrste števila. Običajno jih najdemo v e-poštnih odjemalcih, kot je Mail.app, ali v mobilnih aplikacijah za potisna obvestila.

Razpoložljivi razredi

Ime Primer Markup
Privzeto 1 <span class="badge">1</span>
Uspeh 2 <span class="badge badge-success">2</span>
Opozorilo 4 <span class="badge badge-warning">4</span>
Pomembno 6 <span class="badge badge-important">6</span>
Informacije 8 <span class="badge badge-info">8</span>
Inverzna 10 <span class="badge badge-inverse">10</span>

Herojska enota

Bootstrap ponuja lahko, prilagodljivo komponento, imenovano hero unit, za predstavitev vsebine na vašem spletnem mestu. Dobro deluje na spletnih mestih s trženjem in vsebino.

Markup

Zavijte svojo vsebino divtakole:

  1. <div class = "hero-unit" >
  2. <h1> Naslov </h1>
  3. <p> Slogan </p>
  4. <p>
  5. <a class = "btn btn-primary btn-large" >
  6. Nauči se več
  7. </a>
  8. </p>
  9. </div>

Pozdravljen, svet!

To je preprosta junaška enota, preprosta komponenta v slogu jumbotrona za privabljanje dodatne pozornosti na predstavljeno vsebino ali informacije.

Nauči se več

Glava strani

Preprosta lupina za h1ustrezno razporeditev in segmentacijo delov vsebine na strani. Uporablja lahko h1privzeti smallelement , kot tudi večino drugih komponent (z dodatnimi slogi).

  1. <div class = "page-header" >
  2. <h1> Primer glave strani </h1>
  3. </div>

Privzete sličice

Sličice Bootstrapa so privzeto oblikovane tako, da prikazujejo povezane slike z minimalno zahtevano oznako.

Zelo prilagodljiv

Z nekaj dodatnega označevanja je možno sličicam dodati kakršno koli vsebino HTML, kot so naslovi, odstavki ali gumbi.

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

    Akcija Akcija

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

    Akcija Akcija

Zakaj uporabljati sličice

Sličice (prej .media-griddo v1.4) so ​​odlične za mreže fotografij ali videoposnetkov, rezultate iskanja slik, maloprodajne izdelke, portfelje in še veliko več. Lahko so povezave ali statična vsebina.

Enostavno, prilagodljivo označevanje

Označevanje sličic je preprosto – vse, kar potrebujete, je a uls poljubnim številom lielementov. Prav tako je zelo prilagodljiv, saj omogoča vse vrste vsebine z le malo več oznak za zavijanje vaše vsebine.

Uporablja velikosti stolpcev mreže

Nazadnje, komponenta sličic uporablja obstoječe sistemske razrede mreže – kot je .span2ali .span3– za nadzor dimenzij sličic.

Oznaka

Kot smo že omenili, je zahtevana oznaka za sličice lahka in enostavna. Tukaj je pogled na privzeto nastavitev za povezane slike :

  1. <ul class = "thumbnails" >
  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 vsebino HTML po meri v sličicah se oznaka nekoliko spremeni. Da dovolimo vsebino na ravni bloka kjer koli, zamenjamo <a>za <div>všeček tako:

  1. <ul class = "thumbnails" >
  2. <li class = "span3" >
  3. <div class = "thumbnail" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> Oznaka sličice </h5>
  6. <p> Napis sličice tukaj ... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

Več primerov

Raziščite vse svoje možnosti z različnimi razredi mreže, ki so vam na voljo. Lahko tudi mešate in kombinirate različne velikosti.

Lahke privzete nastavitve

Prepisan osnovni razred

Z Bootstrap 2 smo poenostavili osnovni razred: .alertnamesto .alert-message. Zmanjšali smo tudi minimalno zahtevano oznako – <p>privzeto ni zahtevana, samo zunanji <div>.

Eno opozorilno sporočilo

Za trajnejšo komponento z manj kode smo odstranili razlikovalni videz za blokovna opozorila, sporočila, ki imajo več oblazinjenja in običajno več besedila. Tudi razred se je spremenil v .alert-block.


Odlično se ujema z javascriptom

Bootstrap je opremljen z odličnim vtičnikom jQuery, ki podpira opozorilna sporočila, zaradi česar je njihovo opuščanje hitro in enostavno.

Prenesite vtičnik »

Primeri opozoril

Zavijte svoje sporočilo in izbirno ikono za zapiranje v div s preprostim razredom.

Opozorilo! Najbolje, da preverite sami, ne izgledate preveč dobro.
  1. <div class = "alert" >
  2. <button class = "close" data-dismiss = "alert" > × </button>
  3. <strong> Opozorilo! </strong> Najbolje, da preverite sami, niste videti preveč dobro.
  4. </div>

Glavo pokonci! Naprave iOS zahtevajo href="#"za opustitev opozoril. Ne pozabite vključiti tega in podatkovnega atributa za ikone za zapiranje sidra. Lahko pa uporabite <button>element z atributom podatkov, kar smo izbrali za naše dokumente. Ko uporabljate <button>, morate vključiti, sicer type="button"vaši obrazci morda ne bodo oddani.

Preprosto razširite standardno opozorilno sporočilo z dvema izbirnima razredoma: .alert-blockza več oblazinjenja in kontrolnikov besedila ter .alert-headingza ujemajoči se naslov.

Opozorilo!

Najbolje, da preverite sami, ne izgledate preveč 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" > Opozorilo! </h4>
  4. Najbolje, da preverite sami, niste ...
  5. </div>

Kontekstualne alternative Dodajte neobvezne razrede, da spremenite konotacijo opozorila

Napaka ali nevarnost

Oh šment! Spremenite nekaj stvari in poskusite znova oddati.
  1. <div class = "alert alert-error" >
  2. ...
  3. </div>

Uspeh

Dobro opravljeno! Uspešno ste prebrali to pomembno opozorilno sporočilo.
  1. <div class = "alert alert-success" >
  2. ...
  3. </div>

Informacije

Glavo pokonci! To opozorilo zahteva vašo pozornost, vendar ni zelo pomembno.
  1. <div class = "alert alert-info" >
  2. ...
  3. </div>

Primeri in oznake

Osnovno

Privzeta vrstica napredka z navpičnim gradientom.

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

Črtasto

Uporablja gradient za ustvarjanje črtastega učinka (brez IE).

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

Animirano

Vzame črtasti primer in ga animira (brez IE).

  1. <div class = "napredek napredek-črtast
  2. aktivno" >
  3. <div class = "bar"
  4. style = " width : 40 %; " ></div>
  5. </div>

Možnosti in podpora brskalnika

Dodatne barve

Vrstice napredka uporabljajo nekaj istega gumba in razredov opozoril za dosledne sloge.

Črtaste palice

Podobno kot pri enobarvnih barvah imamo raznolike črtaste vrstice napredka.

Vedenje

Vrstice napredka uporabljajo prehode CSS3, tako da če dinamično prilagodite širino prek javascripta, se bo gladko spremenila velikost.

Če uporabljate .activerazred, bodo vaše .progress-stripedvrstice napredka animirale črte od leve proti desni.

Podpora za brskalnik

Vrstice napredka uporabljajo prelive, prehode in animacije CSS3, da dosežejo vse svoje učinke. Te funkcije niso podprte v IE7-9 ali starejših različicah Firefoxa.

Opera in IE trenutno ne podpirata animacij.

Wells

Uporabite vodnjak kot preprost učinek na elementu, da mu zagotovite vstavljeni učinek.

Glej, v vodnjaku sem!
  1. <div class = "well" >
  2. ...
  3. </div>

Zapri ikono

Uporabite splošno ikono za zapiranje za opustitev vsebine, kot so modali in opozorila.

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

Naprave iOS zahtevajo href="#" za dogodke klikov, če raje uporabljate sidro.

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