Na desetine komponent za večkratno uporabo, izdelanih za zagotavljanje navigacije, opozoril, pojavnih oken in še več.
Preklopni kontekstualni meni za prikaz seznamov povezav. Interaktiven s spustnim vtičnikom javascript .
- <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >
- <li><a tabindex = "-1" href = "#" > Dejanje </a></li>
- <li><a tabindex = "-1" href = "#" > Drugo dejanje </a></li>
- <li><a tabindex = "-1" href = "#" > Tukaj je še nekaj </a></li>
- <li class = "divider" ></li>
- <li><a tabindex = "-1" href = "#" > Ločena povezava </a></li>
- </ul>
Če pogledamo samo spustni meni, je tukaj zahtevani HTML. Sprožilec spustnega menija in spustni meni morate zaviti v .dropdown
ali drug element, ki deklarira position: relative;
. Nato samo ustvarite meni.
- <div class = "dropdown" >
- <!-- Povezava ali gumb za preklop spustnega menija -->
- <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >
- <li><a tabindex = "-1" href = "#" > Dejanje </a></li>
- <li><a tabindex = "-1" href = "#" > Drugo dejanje </a></li>
- <li><a tabindex = "-1" href = "#" > Tukaj je še nekaj </a></li>
- <li class = "divider" ></li>
- <li><a tabindex = "-1" href = "#" > Ločena povezava </a></li>
- </ul>
- </div>
Poravnajte menije na desno in dodajte dodatne ravni spustnih menijev.
Dodajte .pull-right
a .dropdown-menu
za poravnavo spustnega menija v desno.
- <ul class = "dropdown-menu pull-right" role = "menu" aria-labelledby = "dLabel" >
- ...
- </ul>
Dodajte dodatno raven spustnih menijev, ki se prikažejo ob lebdenju miške kot tisti v OS X, z nekaj preprostimi dodatki za označevanje. Dodajte .dropdown-submenu
kateremu koli li
v obstoječem spustnem meniju za samodejno oblikovanje.
- <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >
- ...
- <li class = "dropdown-submenu" >
- <a tabindex = "-1" href = "#" > Več možnosti </a>
- <ul class = "dropdown-menu" >
- ...
- </ul>
- </li>
- </ul>
Preprosto 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.
- <div class = "pagination" >
- <ul>
- <li><a href = "#" > Nazaj </a></li>
- <li><a href = "#" > 1 </a></li>
- <li><a href = "#" > 2 </a></li>
- <li><a href = "#" > 3 </a></li>
- <li><a href = "#" > 4 </a></li>
- <li><a href = "#" > Naprej </a></li>
- </ul>
- </div>
Povezave so prilagodljive različnim okoliščinam. Uporabite .disabled
za povezave, ki jih ni mogoče klikniti, in .active
za označevanje trenutne strani.
- <div class = "pagination" >
- <ul>
- <li class = "disabled" ><a href = "#" > Nazaj </a></li>
- <li class = "active" ><a href = "#" > 1 </a></li>
- ...
- </ul>
- </div>
Dodajte enega od dveh neobveznih razredov, da spremenite poravnavo povezav za označevanje strani: .pagination-centered
in .pagination-right
.
- <div class = "pagination pagination-centered" >
- ...
- </div>
- <div class = "pagination pagination-right" >
- ...
- </div>
Hitre prejšnje in naslednje povezave za preproste izvedbe označevanja strani z lahkimi oznakami in slogi. Odličen je za preprosta spletna mesta, kot so blogi ali revije.
Pozivnik privzeto centrira povezave.
- <ul class = "pager" >
- <li><a href = "#" > Prejšnji </a></li>
- <li><a href = "#" > Naprej </a></li>
- </ul>
Druga možnost je, da vsako povezavo poravnate ob straneh:
- <ul class = "pager" >
- <li class = "prejšnji" >
- <a href = "#" > ← Starejši </a>
- </li>
- <li class = "naslednji" >
- <a href = "#" > Novejši → </a>
- </li>
- </ul>
Povezave pozivnikov uporabljajo tudi splošni .disabled
uporabni razred iz paginacije.
- <ul class = "pager" >
- <li class = "previous disabled" >
- <a href = "#" > ← Starejši </a>
- </li>
- ...
- </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> |
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> |
Lahka, prilagodljiva komponenta za predstavitev ključne vsebine na vašem spletnem mestu. Dobro deluje na spletnih mestih s trženjem in vsebino.
To je preprosta junaška enota, preprosta komponenta v slogu jumbotrona za privabljanje dodatne pozornosti na predstavljeno vsebino ali informacije.
- <div class = "hero-unit" >
- <h1> Naslov </h1>
- <p> Slogan </p>
- <p>
- <a class = "btn btn-primary btn-large" >
- Nauči se več
- </a>
- </p>
- </div>
Preprosta lupina za h1
ustrezno razporeditev in segmentacijo delov vsebine na strani. Uporablja lahko h1
privzeti small
element , kot tudi večino drugih komponent (z dodatnimi slogi).
- <div class = "page-header" >
- <h1> Primer glave strani </h1>
- </div>
Sličice Bootstrapa so privzeto oblikovane tako, da prikazujejo povezane slike z minimalno zahtevano oznako.
Z nekaj dodatnega označevanja je možno sličicam dodati kakršno koli vsebino HTML, kot so naslovi, odstavki ali gumbi.
Sličice (prej .media-grid
do 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.
Označevanje sličic je preprosto – vse, kar potrebujete, je a ul
s poljubnim številom li
elementov. Prav tako je zelo prilagodljiv, saj omogoča vse vrste vsebine z le malo več oznak za zavijanje vaše vsebine.
Nazadnje, komponenta sličic uporablja obstoječe sistemske razrede mreže – kot je .span2
ali .span3
– za nadzor dimenzij sličic.
Kot smo že omenili, je zahtevana oznaka za sličice lahka in enostavna. Tukaj je pogled na privzeto nastavitev za povezane slike :
- <ul class = "thumbnails" >
- <li class = "span4" >
- <a href = "#" class = "thumbnail" >
- <img src = "https://placehold.it/300x200" alt = "" >
- </a>
- </li>
- ...
- </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:
- <ul class = "thumbnails" >
- <li class = "span4" >
- <div class = "thumbnail" >
- <img src = "https://placehold.it/300x200" alt = "" >
- <h3> Oznaka sličice </h3>
- <p> Napis sličice ... </p>
- </div>
- </li>
- ...
- </ul>
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.
Zavijte poljubno besedilo in izbirni gumb za opustitev .alert
za osnovno opozorilno opozorilno sporočilo.
- <div class = "alert" >
- <button type = "button" class = "close" data-dismiss = "alert" > × </button>
- <strong> Opozorilo! </strong> Najbolje, da preverite sami, niste videti preveč dobro.
- </div>
Brskalnika Mobile Safari in Mobile Opera poleg data-dismiss="alert"
atributa zahtevata tudi href="#"
za opustitev opozoril pri uporabi <a>
oznake.
- <a href = "#" class = "close" data-dismiss = "alert" > × </button>
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.
- <button type = "button" class = "close" data-dismiss = "alert" > × </button>
Uporabite vtičnik za opozorila jQuery za hitro in enostavno opustitev opozoril.
Za daljša sporočila povečajte oblazinjenje na vrhu in dnu ovoja opozorila tako, da dodate .alert-block
.
Najbolje, da preverite sami, ne izgledate preveč dobro. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
- <div class = "alert alert-block" >
- <button type = "button" class = "close" data-dismiss = "alert" > × </button>
- <h4> Opozorilo! </h4>
- Najbolje, da preverite sami, niste ...
- </div>
Dodajte neobvezne razrede, da spremenite konotacijo opozorila.
- <div class = "alert alert-error" >
- ...
- </div>
- <div class = "alert alert-success" >
- ...
- </div>
- <div class = "alert alert-info" >
- ...
- </div>
Privzeta vrstica napredka z navpičnim gradientom.
- <div class = "progress" >
- <div class = "bar" style = " width : 60 %; " ></div>
- </div>
Uporablja gradient za ustvarjanje črtastega učinka. Ni na voljo v IE7-8.
- <div class = "progress progress-striped" >
- <div class = "bar" style = " width : 20 %; " ></div>
- </div>
Dodajte .active
za .progress-striped
animacijo črt od desne proti levi. Ni na voljo v vseh različicah IE.
- <div class = "progress progress-striped active" >
- <div class = "bar" style = " width : 40 %; " ></div>
- </div>
Postavite več palic v isto .progress
, da jih zložite.
- <div class = "progress" >
- <div class = "bar bar-success" style = " width : 35 %; " ></div>
- <div class = "bar bar-warning" style = " width : 20 %; " ></div>
- <div class = "bar bar-danger" style = " width : 10 %; " ></div>
- </div>
Vrstice napredka uporabljajo nekaj istega gumba in razredov opozoril za dosledne sloge.
- <div class = "progress progress-info" >
- <div class = "bar" style = " width : 20 % " ></div>
- </div>
- <div class = "progress progress-success" >
- <div class = "bar" style = " width : 40 % " ></div>
- </div>
- <div class = "opozorilo o napredku napredka" >
- <div class = "bar" style = " width : 60 % " ></div>
- </div>
- <div class = "progress progress-danger" >
- <div class = "bar" style = " width : 80 % " ></div>
- </div>
Podobno kot pri enobarvnih barvah imamo raznolike črtaste vrstice napredka.
- <div class = "progress progress-info progress-striped" >
- <div class = "bar" style = " width : 20 % " ></div>
- </div>
- <div class = "progress progress-success progress-striped" >
- <div class = "bar" style = " width : 40 % " ></div>
- </div>
- <div class = "progress progress-warning progress-striped" >
- <div class = "bar" style = " width : 60 % " ></div>
- </div>
- <div class = "progress progress-danger progress-striped" >
- <div class = "bar" style = " width : 80 % " ></div>
- </div>
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.
Različice, starejše od Internet Explorerja 10 in Opera 12, ne podpirajo animacij.
Uporabite vodnjak kot preprost učinek na elementu, da mu zagotovite vstavljeni učinek.
- <div class = "well" >
- ...
- </div>
Kontrolirajte oblazinjenje in zaobljene vogale z dvema izbirnima razredoma modifikatorja.
- <div class = "dobro dobro-veliko" >
- ...
- </div>
- <div class = "well well-small" >
- ...
- </div>
Uporabite splošno ikono za zapiranje za opustitev vsebine, kot so modali in opozorila.
- <button class = "close" > × </button>
Naprave iOS zahtevajo href="#" za dogodke klikov, če raje uporabljate sidro.
- <a class = "close" href = "#" > × </a>
Preprosti, osredotočeni razredi za majhne nastavitve zaslona ali vedenja.
Lebdi element levo
- razred = "povleci-levo"
- . potegnite - levo {
- lebdi : levo ;
- }
Lebdi element desno
- class = "povleci desno"
- . potegnite - desno {
- lebdi : desno ;
- }
Spremenite barvo elementa v#999
- class = "utišan"
- . utišan {
- barva : #999;
- }
Počistite float
na katerem koli elementu
- class = "clearfix"
- . clearfix {
- * povečava : 1 ;
- &: prej ,
- &: po {
- prikaz : tabela ;
- vsebina : "" ;
- }
- &: po {
- jasno : oboje ;
- }
- }