Komponendid

Bootstrapi on sisse ehitatud kümneid korduvkasutatavaid komponente, mis pakuvad navigeerimist, hoiatusi, hüpikaknaid ja palju muud.

Nupurühmad

Kasutage nupurühmi, et ühendada mitu nuppu üheks komposiitkomponendiks. Koostage need elementide seeria <a>või <button>elementide abil.

Parimad tavad

Soovitame nupurühmade ja tööriistaribade kasutamiseks järgida järgmisi juhiseid.

  • Kasutage alati sama elementi ühes nupurühmas <a>või <button>.
  • Ärge segage samasse nupurühma erinevat värvi nuppe.
  • Kasutage ikoone lisaks tekstile või selle asemel, kuid vajadusel lisage kindlasti alternatiiv- ja pealkirjatekst.

Rippmenüüdega seotud nuppude rühmad (vt allpool) tuleks eraldi välja kutsuda ja need peavad alati sisaldama rippmenüüd, mis näitab kavandatud käitumist.

Vaikimisi näide

Ankurmärgendi nuppudega loodud standardset nupurühma otsib HTML järgmiselt.

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

Tööriistariba näide

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>

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 .

Hankige javascript »

Nupurühmade rippmenüüd

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

Nuppude rippmenüüd

Märgistuse näide

Sarnaselt nupurühmaga kasutab meie märgistus tavalist nuppude märgistust, kuid stiili täpsustamiseks ja Bootstrapi rippmenüü jQuery pistikprogrammi toetamiseks on lisatud käputäis täiendusi.

  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 suurustega nuppudega

Nuppude rippmenüüd töötavad igas suuruses. teie nuppude suurus on .btn-large, .btn-smallvõ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 JavaScripti abil.


Jagamisnupu rippmenüüd

Ülevaade ja näited

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.

Suurused

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

  1. <div class = "btn-grupp" >
  2. ...
  3. <ul class = "rippmenüü paremale tõmbamine" >
  4. <!-- rippmenüü lingid -->
  5. </ul>
  6. </div>

Märgistuse näide

Laiendame tavaliste nuppude rippmenüüd, et pakkuda teist nuputoimingut, mis toimib eraldi rippmenüü käivitajana.

  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>

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>

Mitmeleheküljeline lehekülgede lehekülg

Millal kasutada

Rdiost inspireeritud ülilihtsustatud ja minimaalse stiiliga 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.

Olulised lehelingid

Lingid on kohandatavad ja töötavad õige klassiga paljudes olukordades. .disabledklõpsamatute linkide ja .activepraeguse lehe jaoks.

Paindlik joondus

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

Näited

Lehekülgede vaikekomponent on paindlik ja töötab mitmes variandis.

Märgistus

Mähkituna on <div>lehekülgede arv vaid <ul>.

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

Piiler Kiirete eelmiste ja järgmiste linkide jaoks

Piileri kohta

Piiparkomponent on linkide komplekt lihtsate lehekülgede rakendamiseks kerge märgistuse ja veelgi heledamate stiilidega. See on suurepärane lihtsate saitide jaoks, nagu ajaveebid või ajakirjad.

Valikuline keelatud olek

Peileri lingid kasutavad ka .disabledlehekülgede üldklassi.

Vaikimisi näide

Vaikimisi tsentreerib piipar lingid.

  1. <ul class = "piiler" >
  2. <li>
  3. <a href = "#" > Eelmine </a>
  4. </li>
  5. <li>
  6. <a href = "#" > Järgmine </a>
  7. </li>
  8. </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>
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>

Umbes

Märgid on väikesed lihtsad komponendid mingisuguse indikaatori või arvu kuvamiseks. Neid leidub tavaliselt meiliklientides (nt Mail.app) või tõukemärguannete jaoks mobiilirakendustes.

Saadaolevad klassid

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>

Kangelase üksus

Bootstrap pakub teie saidi sisu esitlemiseks kerget ja paindlikku komponenti, mida nimetatakse kangelaseks. See töötab hästi turundus- ja sisurohketel saitidel.

Märgistus

Pakkige oma sisu divsarnasesse vormi nii:

  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>

Tere, Maailm!

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

Lisateavet

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

  • 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

  • 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 eelnevalt mainitud, on pisipiltide jaoks vajalik märgistus kerge ja arusaadav. Siin on ülevaade lingitud piltide vaikeseadetest :

  1. <ul class = "pisipildid" >
  2. <li class = "span3" >
  3. <a href = "#" class = "pisipilt" >
  4. <img src = "https://placehold.it/260x180" 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 = "span3" >
  3. <div class = "pisipilt" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> Pisipildi silt </h5>
  6. <p> Pisipildi pealdis siin... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

Veel näiteid

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

Kerged vaikesätted

Ümber kirjutatud baasklass

Bootstrap 2 abil oleme põhiklassi lihtsustanud: .alertselle asemel, et .alert-message. Samuti oleme vähendanud minimaalset nõutavat märgistust – <p>vaikimisi pole nõutav, vaid ainult välimine <div>.

Üks hoiatusteade

Väiksema koodiga vastupidavama komponendi jaoks oleme eemaldanud blokeeritud hoiatuste, suurema täidisega sõnumite ja tavaliselt rohkema tekstiga eristava välimuse. Ka klass on muutunud klassiks .alert-block.


Sobib suurepäraselt javascriptiga

Bootstrapil on suurepärane jQuery pistikprogramm, mis toetab hoiatussõnumeid, muutes nendest loobumise kiireks ja lihtsaks.

Hankige pistikprogramm »

Näidishoiatused

Pakkige oma sõnum ja valikuline sulgemisikoon lihtsa klassiga lahtrisse.

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

Pea püsti! iOS-i seadmed nõuavad href="#"hoiatuste tühistamist. Lisage kindlasti see ja ankru sulgemise ikoonide andmeatribuut. 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.

Laiendage standardset hoiatusteadet hõlpsalt kahe valikulise klassiga: .alert-blockrohkem polsterdust ja teksti juhtelemente ning .alert-headingsobivat pealkirja.

Hoiatus!

Parim on kontrollida ennast, sa 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. <a class = "close" data-dismiss = "alert" href = "#" > × </a>
  3. <h4 class = "alert-heading" > Hoiatus! </h4>
  4. Parim on kontrollida ennast, sa ei ole...
  5. </div>

Kontekstipõhised 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 = "baar"
  3. style = " laius : 60 %; " ></div>
  4. </div>

Triibuline

Kasutab triibulise efekti loomiseks gradienti (ilma IEta).

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

Animeeritud

Võtab triibulise näite ja animeerib selle (ilma IE-d).

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

Valikud ja brauseri tugi

Lisavärvid

Edenemisribad kasutavad ühtsete stiilide jaoks samu nuppe ja hoiatusklasse.

Triibulised latid

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

Käitumine

Edenemisribad kasutavad CSS3 üleminekuid, nii et kui muudate laiust dünaamiliselt JavaScripti kaudu, muutub selle suurus sujuvalt.

Kui kasutate .activeklassi, .progress-stripedanimeerivad teie edenemisribad triipe vasakult paremale.

Brauseri tugi

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

Opera ja IE ei toeta praegu animatsioone.

Wells

Kasutage kaevu lihtsa efektina elemendil, et anda sellele sisendefekt.

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

Sule ikoon

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

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

Kui kasutate ankrut, nõuavad iOS-i seadmed klikisündmuste jaoks märki href="#".

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