Komponendid

Kümned korduvkasutatavad komponendid, mis on loodud navigeerimise, hoiatuste, hüpikaknate ja muu pakkumiseks.

Näited

Kaks põhivalikut koos kahe spetsiifilisema variandiga.

Üks nuppude rühm

Pakkige rida nuppe .btnsisse .btn-group.

  1. <div class = "btn-grupp" >
  2. <button class = "btn" > Vasak </button>
  3. <button class = "btn" > Keskmine </button>
  4. <button class = "btn" > Parem </button>
  5. </div>

Mitu nupurühma

Keerulisemate komponentide jaoks ühendage komplektid <div class="btn-group">a-ks .<div class="btn-toolbar">

  1. <div class = "btn-tööriistariba" >
  2. <div class = "btn-grupp" >
  3. ...
  4. </div>
  5. </div>

Vertikaalsed nupurühmad

Muutke nuppude komplekt vertikaalselt virnastatud, mitte horisontaalselt.

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

Märkekasti ja raadio maitsed

Nupurühmad võivad toimida ka raadiotena, kus aktiivne võib olla ainult üks nupp, või märkeruutudena, kus võib olla aktiivne suvaline arv nuppe. Vaadake selle jaoks JavaScripti dokumente .

Nupurühmade rippmenüüd

Pea püsti!Rippmenüüga nupud peavad olema õigeks renderdamiseks eraldi mähitud .btn-group..btn-toolbar

Ülevaade ja näited

Kasutage mis tahes nuppu rippmenüü käivitamiseks, asetades selle a -sse .btn-groupja esitades õige menüümärgistuse.

  1. <div class = "btn-grupp" >
  2. <a class = "btn dropdown-toggle" data-toggle = "rippmenüü" href = "#" >
  3. Tegevus
  4. <span class = "caret" ></span>
  5. </a>
  6. <ul class = "rippmenüü" >
  7. <!-- rippmenüü lingid -->
  8. </ul>
  9. </div>

Töötab kõigi nuppude suurustega

Nuppude rippmenüüd töötavad mis tahes suuruses: .btn-large, .btn-small, või .btn-mini.

Nõuab JavaScripti

Nuppude rippmenüüde toimimiseks on vaja Bootstrapi rippmenüü pistikprogrammi .

Mõnel juhul (nt mobiilis) ulatuvad rippmenüüd vaateavast väljapoole. Peate joonduse lahendama käsitsi või kohandatud JavaScriptiga.


Jagamisnupu rippmenüüd

Tuginedes nupurühmade stiilidele ja märgistusele, saame hõlpsasti luua jagatud nupu. Tükeldatud nuppudel on vasakul tavaline toiming ja paremal rippmenüü lüliti kontekstipõhiste linkidega.

  1. <div class = "btn-grupp" >
  2. <button class = "btn" > Toiming </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "rippmenüü" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "rippmenüü" >
  7. <!-- rippmenüü lingid -->
  8. </ul>
  9. </div>

Suurused

Kasutage suuruse määramiseks lisanuppude klasse .btn-mini, .btn-smallvõi ..btn-large

  1. <div class = "btn-grupp" >
  2. <button class = "btn btn-mini" > Toiming </button>
  3. <button class = "btn btn-mini rippmenüü-toggle" data-toggle = "rippmenüü" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "rippmenüü" >
  7. <!-- rippmenüü lingid -->
  8. </ul>
  9. </div>

Rippmenüüd

Rippmenüüd saab ka alt üles lülitada, lisades ühe klassi üksuse vahetule vanemale .dropdown-menu. See pöörab suunda ja asetab .caretmenüü ise ümber, et liikuda alt üles, mitte ülevalt alla.

  1. <div class = "btn-group dropup" >
  2. <button class = "btn" > Kukkumine </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "rippmenüü" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "rippmenüü" >
  7. <!-- rippmenüü lingid -->
  8. </ul>
  9. </div>

Standardne lehekülgede arv

Rdiost inspireeritud lihtne lehekülgede lehekülg, mis sobib suurepäraselt rakenduste ja otsingutulemuste jaoks. Suurt plokki on raske mööda vaadata, see on kergesti skaleeritav ja pakub suuri klõpsamisalasid.

  1. <div class = "lehekülgede jagamine" >
  2. <ul>
  3. <li><a href = "#" > Eelmine </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 = "#" > Järgmine </a></li>
  10. </ul>
  11. </div>

Valikud

Keelatud ja aktiivsed olekud

Lingid on kohandatavad erinevate olukordade jaoks. Kasutage .disabledklõpsamatute linkide jaoks ja .activepraeguse lehe näitamiseks.

  1. <div class = "lehekülgede jagamine" >
  2. <ul>
  3. <li class = "keelatud" ><a href = "#" > « </a></li>
  4. <li class = "aktiivne" ><a href = "#" > 1 </a></li>
  5. ...
  6. </ul>
  7. </div>

Saate valikuliselt vahetada aktiivsed või keelatud ankrud vahemike vastu, et eemaldada klõpsamisfunktsioon, säilitades samal ajal kavandatud stiilid.

  1. <div class = "lehekülgede jagamine" >
  2. <ul>
  3. <li class = "keelatud" ><span> « </span></li>
  4. <li class = "aktiivne" ><span> 1 </span></li>
  5. ...
  6. </ul>
  7. </div>

Suurused

Kas soovite suuremat või väiksemat lehekülge? Lisage .pagination-large, .pagination-smallvõi .pagination-minilisasuuruste jaoks.

  1. <div class = "lehekülgede arv-suur" >
  2. <ul>
  3. ...
  4. </ul>
  5. </div>
  6. <div class = "lehekülgede jagamine" >
  7. <ul>
  8. ...
  9. </ul>
  10. </div>
  11. <div class = "lehekülgede arv-väike" >
  12. <ul>
  13. ...
  14. </ul>
  15. </div>
  16. <div class = "lehekülgede leheküljed-mini" >
  17. <ul>
  18. ...
  19. </ul>
  20. </div>

Joondamine

Leheküljelinkide joonduse muutmiseks lisage üks kahest valikulisest klassist: .pagination-centeredja .pagination-right.

  1. <div class = "lehekülgede lehekülgede vahetamise keskus" >
  2. ...
  3. </div>
  1. <div class = "lehekülgede lehekülgede muutmine paremal" >
  2. ...
  3. </div>

Peiler

Kiired eelmised ja järgmised lingid lihtsate lehekülgede rakendamiseks kerge märgistuse ja stiilidega. See on suurepärane lihtsate saitide jaoks, nagu ajaveebid või ajakirjad.

Vaikimisi näide

Vaikimisi tsentreerib piipar lingid.

  1. <ul class = "piiler" >
  2. <li><a href = "#" > Eelmine </a></li>
  3. <li><a href = "#" > Järgmine </a></li>
  4. </ul>

Joondatud lingid

Teise võimalusena saate iga lingi külgedele joondada:

  1. <ul class = "piiler" >
  2. <li class = "eelmine" >
  3. <a href = "#" > Vanemad </a>
  4. </li>
  5. <li class = "järgmine" >
  6. <a href = "#" > Uuem → </a>
  7. </li>
  8. </ul>

Valikuline keelatud olek

Peileri lingid kasutavad ka üldist .disabledkasuliku klassi lehekülgedelt.

  1. <ul class = "piiler" >
  2. <li class = "eelmine keelatud" >
  3. <a href = "#" > Vanemad </a>
  4. </li>
  5. ...
  6. </ul>

Sildid

Sildid Märgistus
Vaikimisi <span class="label">Default</span>
Edu <span class="label label-success">Success</span>
Hoiatus <span class="label label-warning">Warning</span>
Tähtis <span class="label label-important">Important</span>
Info <span class="label label-info">Info</span>
Pöördvõrdeline <span class="label label-inverse">Inverse</span>

Märgid

Nimi Näide Märgistus
Vaikimisi 1 <span class="badge">1</span>
Edu 2 <span class="badge badge-success">2</span>
Hoiatus 4 <span class="badge badge-warning">4</span>
Tähtis 6 <span class="badge badge-important">6</span>
Info 8 <span class="badge badge-info">8</span>
Pöördvõrdeline 10 <span class="badge badge-inverse">10</span>

Kergesti kokkupandav

Lihtsaks rakendamiseks tõmbuvad sildid ja märgid lihtsalt kokku (CSS-i :emptyvalija kaudu), kui sees pole sisu.

Kangelase üksus

Kerge ja paindlik komponent teie saidi põhisisu esitlemiseks. See töötab hästi turundus- ja sisurohketel saitidel.

Tere, Maailm!

See on lihtne kangelasüksus, lihtne jumbotron-stiilis komponent, mis tõmbab esiletoodud sisule või teabele lisatähelepanu.

Lisateavet

  1. <div class = "kangelaseüksus" >
  2. <h1> Pealkiri </h1>
  3. <p> Tunnuslause </p>
  4. <p>
  5. <a class = "btn btn-primary btn-large" >
  6. Lisateavet
  7. </a>
  8. </p>
  9. </div>

Lehe päis

Lihtne kest h1lehe sisuosade sobivaks eraldamiseks ja segmenteerimiseks. See võib kasutada nii h1vaikeelementi smallkui ka enamikku muid komponente (koos täiendavate stiilidega).

  1. <div class = "lehe päis" >
  2. <h1> Näidislehe päis <small> Päise alltekst </small></h1>
  3. </div>

Vaikimisi pisipildid

Vaikimisi on Bootstrapi pisipildid loodud lingitud piltide esitlemiseks minimaalse nõutava märgistusega.

Väga kohandatav

Veidi lisamärgistusega on võimalik pisipiltidesse lisada igasugust HTML-sisu, näiteks pealkirju, lõike või nuppe.

  • 300x200

    Pisipildi silt

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

    Tegevus Tegevus

  • 300x200

    Pisipildi silt

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

    Tegevus Tegevus

  • 300x200

    Pisipildi silt

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

    Tegevus Tegevus

Miks kasutada pisipilte?

Pisipildid (varem .media-gridkuni versioonini 1.4) sobivad suurepäraselt fotode või videote, pildiotsingu tulemuste, jaemüügitoodete, portfellide ja palju muu jaoks. Need võivad olla lingid või staatiline sisu.

Lihtne, paindlik märgistus

Pisipiltide märgistus on lihtne – piisab ulsuvalise arvu lielementidega a. See on ka ülipaindlik, võimaldades mis tahes tüüpi sisu ja sisu pakkimiseks veidi rohkem märgistust.

Kasutab ruudustiku veergude suurusi

Lõpuks kasutab pisipiltide komponent pisipiltide mõõtmete juhtimiseks olemasolevaid ruudustikusüsteemi klasse, nagu .span2või ..span3

Märgistus

Nagu varem mainitud, on pisipiltide jaoks vajalik märgistus kerge ja arusaadav. Siin on ülevaade lingitud piltide vaikeseadetest :

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

Pisipiltide kohandatud HTML-sisu puhul muutub märgistus veidi. Blokeerimistaseme sisu lubamiseks kõikjal vahetame selle <a>sarnase vastu <div>:

  1. <ul class = "pisipildid" >
  2. <li class = "span4" >
  3. <div class = "pisipilt" >
  4. <img data-src = "holder.js/300x200" alt = "" >
  5. <h3> Pisipildi silt </h3>
  6. <p> Pisipildi pealdis... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

Veel näiteid

Tutvuge kõigi teile saadaolevate ruudustikuklassidega. Samuti saate segada ja sobitada erinevaid suurusi.

Vaikemärguanne

.alertPõhilise hoiatusteate saamiseks mähkige tekst ja valikuline loobumisnupp .

Hoiatus! Parim on kontrollida ennast, sa ei näe liiga hea välja.
  1. <div class = "hoiatus" >
  2. <button type = "button" class = "sulge" data-dismiss = "hoiatus" > × </button>
  3. <strong> Hoiatus! </strong> Kontrollige ennast, te ei näe liiga hea välja.
  4. </div>

Loobu nupud

data-dismiss="alert"Mobiilse Safari ja Mobile Opera brauserid nõuavad märgendi kasutamisel lisaks atribuudile href="#"ka hoiatuste tühistamist.<a>

  1. <a href = "#" class = "sulge" data-dismiss = "hoiatus" > × </a>

Teise võimalusena võite kasutada <button>andmeatribuudiga elementi, mille oleme oma dokumentide jaoks valinud. Kui kasutate <button>, peate lisama, type="button"vastasel juhul ei pruugi teie vormid esitada.

  1. <button type = "button" class = "sulge" data-dismiss = "hoiatus" > × </button>

Loobu märguannetest JavaScripti kaudu

Hoiatuste kiireks ja lihtsaks tühistamiseks kasutage hoiatuste jQuery pistikprogrammi .


Valikud

Pikemate sõnumite puhul suurendage märguandeümbrise üla- ja alaosa polsterdust, lisades .alert-block.

Hoiatus!

Kontrollige ennast, te ei näe liiga hea välja. 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 = "sulge" data-dismiss = "hoiatus" > × </button>
  3. <h4> Hoiatus! </h4>
  4. Parim on kontrollida ennast, sa ei ole...
  5. </div>

Kontekstuaalsed alternatiivid

Lisage valikulisi klasse, et muuta hoiatuse konnotatsiooni.

Viga või oht

Oh näpust! Muutke mõnda asja ja proovige uuesti esitada.
  1. <div class = "alert alert-error" >
  2. ...
  3. </div>

Edu

Hästi tehtud! Lugesite selle olulise hoiatussõnumi edukalt läbi.
  1. <div class = "alert alert-success" >
  2. ...
  3. </div>

Teave

Pea püsti! See hoiatus vajab teie tähelepanu, kuid see pole eriti oluline.
  1. <div class = "alert alert-info" >
  2. ...
  3. </div>

Näited ja märgistus

Põhiline

Vaikimisi vertikaalse gradiendiga edenemisriba.

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

Triibuline

Kasutab triibulise efekti loomiseks gradienti. Pole saadaval IE7-8 puhul.

  1. <div class = "edenemine edenemise triibuline" >
  2. <div class = "bar" style = " laius : 20 %; " ></div>
  3. </div>

Animeeritud

Lisage triipude animeerimiseks .activeparemalt .progress-stripedvasakule. Pole saadaval kõigis IE versioonides.

  1. <div class = "edenemine edenemise triibuline aktiivne" >
  2. <div class = "bar" style = " laius : 40 %; " ></div>
  3. </div>

Laotud

Asetage mitu riba ühte, .progresset need virnastada.

  1. <div class = "edenemine" >
  2. <div class = "bar-success" style = " laius : 35 %; " ></div>
  3. <div class = "bar bar-warning" style = " laius : 20 %; " ></div>
  4. <div class = "latt-oht" style = " laius : 10 %; " ></div>
  5. </div>

Valikud

Lisavärvid

Edenemisribad kasutavad ühtsete stiilide jaoks samu nuppe ja hoiatusklasse.

  1. <div class = "edenemise edenemisteave" >
  2. <div class = "bar" style = " laius : 20 % " ></div>
  3. </div>
  4. <div class = "edenemine edenemine-edu" >
  5. <div class = "bar" style = " width : 40 % " ></div>
  6. </div>
  7. <div class = "edenemise edenemise hoiatus" >
  8. <div class = "bar" style = " laius : 60 % " ></div>
  9. </div>
  10. <div class = "edenemise edenemise oht" >
  11. <div class = "bar" style = " laius : 80 % " ></div>
  12. </div>

Triibulised latid

Sarnaselt ühevärvilistele värvidele on meil erinevad triibulised edenemisribad.

  1. <div class = "edenemise edenemise info progress-triibuline" >
  2. <div class = "bar" style = " laius : 20 % " ></div>
  3. </div>
  4. <div class = "edenemine progress-edu edenemine-triibuline" >
  5. <div class = "bar" style = " width : 40 % " ></div>
  6. </div>
  7. <div class = "edenemishoiatus edenemise triibuline" >
  8. <div class = "bar" style = " laius : 60 % " ></div>
  9. </div>
  10. <div class = "edenemise edenemine-oht progressi-triibuline" >
  11. <div class = "bar" style = " laius : 80 % " ></div>
  12. </div>

Brauseri tugi

Edenemisribad kasutavad kõigi efektide saavutamiseks CSS3 gradiente, üleminekuid ja animatsioone. Firefoxi IE7-9 või vanemad versioonid neid funktsioone ei toeta.

Internet Explorer 10 ja Opera 12 varasemad versioonid ei toeta animatsioone.

Abstraktsed objektistiilid erinevat tüüpi komponentide (nt ajaveebi kommentaarid, säutsud jne) koostamiseks, millel on tekstilise sisu kõrval vasakul või paremal joondatud pilt.

Vaikimisi näide

Vaikimisi meedium võimaldab hõljuda meediaobjekti (pildid, video, heli) sisuplokist vasakule või paremale.

64x64

Meedia pealkiri

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

Meedia pealkiri

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

Meedia pealkiri

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 = "meedia" >
  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" > Meediumipealkiri </h4>
  7. ...
  8.  
  9. <!-- Pesastatud meediumiobjekt -->
  10. <div class = "meedia" >
  11. ...
  12. </div>
  13. </div>
  14. </div>

Meedia nimekiri

Veidi lisamärgistusega saate kasutada loendis olevaid meediume (kasulik kommentaarilõimede või artiklite loendite jaoks).

  • 64x64

    Meedia pealkiri

    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

    Pesastatud meediumipealkiri

    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

    Pesastatud meediumipealkiri

    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

    Pesastatud meediumipealkiri

    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

    Meedia pealkiri

    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 = "meediumiloend" >
  2. <li class = "meedia" >
  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" > Meediumipealkiri </h4>
  8. ...
  9.  
  10. <!-- Pesastatud meediumiobjekt -->
  11. <div class = "meedia" >
  12. ...
  13. </div>
  14. </div>
  15. </li>
  16. </ul>

Wells

Kasutage kaevu lihtsa efektina elemendil, et anda sellele sisendefekt.

Vaata, ma olen kaevus!
  1. <div klass = "hästi" >
  2. ...
  3. </div>

Vabatahtlikud klassid

Juhtpolster ja ümarad nurgad kahe valikulise modifikaatoriklassiga.

Vaata, ma olen kaevus!
  1. <div class = "hästi hästi-suur" >
  2. ...
  3. </div>
Vaata, ma olen kaevus!
  1. <div class = "hästi hästi-väike" >
  2. ...
  3. </div>

Sule ikoon

Kasutage üldist sulgemisikooni sisust, nagu modaalid ja hoiatused, loobumiseks.

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

iOS-i seadmed nõuavad href="#"klikisündmusi, kui eelistaksite ankrut kasutada.

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

Abistajate klassid

Lihtsad ja keskendunud tunnid väikeste kuvari või käitumise muudatuste tegemiseks.

.tõmba-vasakule

Hõljutage element vasakule

  1. klass = "tõmba vasakule"
  1. . tõmba - vasakule {
  2. ujuk : vasak ;
  3. }

.tõmmake paremale

Hõljutage element paremale

  1. klass = "tõmba paremale"
  1. . tõmba - paremale {
  2. ujuk : parem ;
  3. }

.vaigistatud

Muutke elemendi värviks#999

  1. klass = "vaigistatud"
  1. . vaigistatud {
  2. värv : #999;
  3. }

.selgitada

Tühjendage floatsuvaline element

  1. klass = "puhastus"
  1. . clearfix {
  2. * suum : 1 ;
  3. &: enne ,
  4. &: pärast {
  5. kuva : laud ;
  6. sisu : "" ;
  7. }
  8. &: pärast {
  9. selge : mõlemad ;
  10. }
  11. }