Bootstrap

Osnovni CSS

Osnovni elementi HTML oblikovani in izboljšani z razširljivimi razredi.

Glavo pokonci! Ti dokumenti so za različico 2.3.2, ki ni več uradno podprta. Oglejte si najnovejšo različico Bootstrapa!

Tipografija

Naslovi

Na voljo so vsi naslovi HTML <h1>do <h6>.

h1. Naslov 1

h2. Naslov 2

h3. Naslov 3

h4. Naslov 4

h5. Naslov 5
h6. Naslov 6

Kopija telesa

Globalna privzeta vrednost Bootstrapa font-sizeje 14px , line-heightz 20px . To velja za <body>in vse odstavke. Poleg tega <p>(odstavki) prejmejo spodnji rob polovice višine vrstice (privzeto 10 slikovnih pik).

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Mecen sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p> ... </p>

Glavna kopija telesa

Naj odstavek izstopa z dodajanjem .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p class = "lead" > ... </p>

Zgrajeno z manj

Tipografska lestvica temelji na dveh spremenljivkah LESS v spremenljivkah.less : @baseFontSizein @baseLineHeight. Prva je osnovna velikost pisave, ki se uporablja povsod, druga pa je osnovna višina vrstice. Te spremenljivke in nekaj preproste matematike uporabljamo za ustvarjanje robov, obrob in višin vrstic vseh naših vrst in še več. Prilagodite jih in Bootstrap se prilagodi.

Poudarek

Uporabite privzete oznake za poudarjanje HTML z lahkimi slogi.

<small>

Za zmanjšanje poudarka v vrstici ali blokih besedila uporabite majhno oznako.

Ta vrstica besedila naj bi bila obravnavana kot drobni tisk.

<p> <small> Ta vrstica besedila naj bi bila obravnavana kot drobni tisk. </small> </p>

Krepko

Za poudarjanje delčka besedila z večjo težo pisave.

Naslednji delček besedila je upodobljen kot krepko besedilo .

<strong> upodobljeno kot krepko besedilo </strong>

Poševno

Za poudarjanje delčka besedila s poševnim tiskom.

Naslednji delček besedila je upodobljen kot ležeče besedilo .

<em> upodobljeno kot ležeče besedilo </em>

Glavo pokonci!Prosto uporabite <b>in <i>v HTML5. <b>je namenjeno poudarjanju besed ali besednih zvez brez izražanja dodatnega pomena, medtem ko <i>je večinoma za glas, tehnične izraze itd.

Razredi poravnave

Preprosto ponovno poravnajte besedilo s komponentami z razredi za poravnavo besedila.

Levo poravnano besedilo.

Sredinsko poravnano besedilo.

Desno poravnano besedilo.

  1. <p class = "text-left" > Levo poravnano besedilo. </p> 
  2. <p class = "text-center" > Sredinsko poravnano besedilo. </p> 
  3. <p class = "text-right" > Desno poravnano besedilo. </p>

Poudarjeni razredi

Prenesite pomen z barvo s peščico poudarjenih uporabnih razredov.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

  1. <p class = "muted" > Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. </p> 
  2. <p class = "text-warning" > Etiam porta sem malesuada magna mollis euismod. </p> 
  3. <p class = "text-error" > Donec ullamcorper nulla non metus auctor fringilla. </p> 
  4. <p class = "text-info" > Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis. </p> 
  5. <p class = "text-success" > Duis mollis, est non commodo luctus, nisi erat porttitor ligula. </p>

Okrajšave

Stilizirana izvedba <abbr>elementa HTML za okrajšave in akronime za prikaz razširjene različice ob lebdenju. Okrajšave z titleatributom imajo svetlo pikčasto spodnjo obrobo in kazalec pomoči ob lebdenju, kar zagotavlja dodaten kontekst pri lebdenju.

<abbr>

Za razširjeno besedilo pri dolgem pomiku nad okrajšavo vključite titleatribut.

Okrajšava besede atribut je attr .

<abbr title = "attribute" > attr </abbr>

<abbr class="initialism">

Dodajte .initialismkratici za nekoliko manjšo velikost pisave.

HTML je najboljša stvar od narezanega kruha.

<abbr title = "HyperText Markup Language" class = "initialism" > HTML </abbr>

Naslovi

Predstavite kontaktne podatke za najbližjega prednika ali celotno delo.

<address>

Ohranite oblikovanje tako, da končate vse vrstice z <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Polno ime
[email protected] 
  1. <naslov>
  2.   <strong> Twitter, Inc. </strong><br>
  3.   795 Folsom Ave, apartma 600 <br>
  4.   San Francisco, CA 94107 <br>
  5.   <abbr title = "Phone" > P: </abbr> (123) 456-7890 
  6. </naslov>
  7.  
  8. <naslov>
  9.   <strong> Polno ime </strong><br>
  10.   <a href = "mailto:#" > [email protected] </a> 
  11. </naslov>

Blockquotes

Za citiranje blokov vsebine iz drugega vira v vašem dokumentu.

Privzeti citat bloka

Zavijte <blockquote>kateri koli HTML kot citat. Za neposredne ponudbe priporočamo <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. </p>
  3. </blockquote>

Možnosti blokovnih citatov

Spremembe sloga in vsebine za preproste različice standardnega navedka.

Poimenovanje vira

Dodajte <small>oznako za identifikacijo vira. Zavijte ime izvornega dela v <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Nekdo znan v naslovu vira 
  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. </p>
  3.   <small> Nekdo znan <cite title = "Source Title" > Izvorni naslov </cite></small> 
  4. </blockquote>

Nadomestni prikazi

Uporabite .pull-rightza lebdeč, desno poravnan blok citata.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Nekdo znan v naslovu vira 
  1. <blockquote class = "pull-right" > 
  2.   ...
  3. </blockquote>

Seznami

Neurejeno

Seznam postavk, pri katerih vrstni red ni izrecno pomemben.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molesteie lorem in masa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  1. <ul>
  2.   <li> ... </li>
  3. </ul>

Naročeno

Seznam postavk, pri katerih je vrstni red izrecno pomemben.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molesteie lorem in masa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
  1. <ol>
  2.   <li> ... </li>
  3. </ol>

Brez sloga

Odstranite privzeto list-stylein levo obrobo na elementih seznama (samo neposredni podrejeni).

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molesteie lorem in masa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  1. <ul class = "unstyled" > 
  2.   <li> ... </li>
  3. </ul>

V vrsti

Vse elemente seznama postavite v eno vrstico z inline-blocknekaj lahkega odmika.

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
  1. <ul class = "inline" > 
  2.   <li> ... </li>
  3. </ul>

Opis

Seznam izrazov z njihovimi pripadajočimi opisi.

Seznami opisov
Opisni seznam je kot nalašč za definiranje izrazov.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod. 
  1. <dl>
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

Horizontalni opis

Izraze in opise <dl>postavite drug ob drugem.

Seznami opisov
Opisni seznam je kot nalašč za definiranje izrazov.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. 
  1. <dl class = "dl-horizontal" > 
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

Glavo pokonci!Horizontalni opisni seznami bodo skrajšali izraze, ki so predolgi, da bi se prilegali popravku v levem stolpcu text-overflow. V ožjih pogledih se bodo spremenili v privzeto naloženo postavitev.

Koda

V vrsti

Zavijte vstavljene delčke kode z <code>.

Na primer, <section>mora biti zavit kot vstavljeni. 
  1. Na primer <code > & lt ; razdelek & gt ;</ code > mora biti zavit kot v vrstici .

Osnovni blok

Uporabite <pre>za več vrstic kode. Prepričajte se, da ste izognili morebitnim oglatim oklepajem v kodi za pravilno upodabljanje.

<p>Tukaj je primer besedila ...</p>
  1. <pred>
  2.   <p>Tukaj je primer besedila ...</p>
  3. </pre>

Glavo pokonci!Prepričajte se, da je koda znotraj <pre>oznak čim bližje levi; upodobil bo vse zavihke.

Po želji lahko dodate .pre-scrollablerazred, ki bo nastavil največjo višino 350 slikovnih pik in zagotovil drsni trak na osi y.

Mize

Privzeti slogi

Za osnovno oblikovanje – rahlo oblazinjenje in le vodoravne pregrade – dodajte osnovni razred .tablekateremu koli <table>.

# Ime Priimek Uporabniško ime
1 Mark Otto @mdo
2 Jacob Thornton @debela
3 Larry ptica @twitter 
  1. <table class = "table" > 
  2.   …
  3. </table>

Izbirni pouk

.tableV osnovni razred dodajte katerega koli od naslednjih razredov .

.table-striped

Doda zebraste črte v katero koli vrstico tabele znotraj <tbody>prek :nth-childizbirnika CSS (ni na voljo v IE7-8).

# Ime Priimek Uporabniško ime
1 Mark Otto @mdo
2 Jacob Thornton @debela
3 Larry ptica @twitter 
  1. <table class = "table table-striped" > 
  2.   …
  3. </table>

.table-bordered

Mizi dodajte obrobe in zaobljene vogale.

# Ime Priimek Uporabniško ime
1 Mark Otto @mdo
Mark Otto @getbootstrap
2 Jacob Thornton @debela
3 Ptica Larry @twitter 
  1. <table class = "table table-bordered" > 
  2.   …
  3. </table>

.table-hover

Omogoči stanje lebdenja nad vrsticami tabele znotraj <tbody>.

# Ime Priimek Uporabniško ime
1 Mark Otto @mdo
2 Jacob Thornton @debela
3 Ptica Larry @twitter 
  1. <table class = "table table-hover" > 
  2.   …
  3. </table>

.table-condensed

Naredi mize bolj kompaktne tako, da prepolovi oblazinjenje celic.

# Ime Priimek Uporabniško ime
1 Mark Otto @mdo
2 Jacob Thornton @debela
3 Ptica Larry @twitter 
  1. <table class = "table table-condensed" > 
  2.   …
  3. </table>

Izbirni razredi vrstic

Uporabite kontekstualne razrede za barvanje vrstic tabele.

Razred Opis
.success Označuje uspešno ali pozitivno dejanje.
.error Označuje nevarno ali potencialno negativno dejanje.
.warning Označuje opozorilo, ki bi morda zahtevalo pozornost.
.info Uporablja se kot alternativa privzetim slogom.
# Izdelek Plačilo sprejeto Stanje
1 TB - mesečno 01.04.2012 Odobreno
2 TB - mesečno 4. 2. 2012 Zavrnjeno
3 TB - mesečno 3. 4. 2012 V teku
4 TB - mesečno 4. 4. 2012 Pokličite za potrditev 
  1. ...
  2.   < tr class = "uspeh" >
  3.     <td> 1 < /td>
  4.     <td>TB – mesečno</ td >
  5.     <td> 1. 4. 2012 < / td >
  6.     <td>Odobreno</ td >
  7.   </ tr >
  8. ...

Podprto označevanje tabele

Seznam podprtih elementov HTML tabele in način njihove uporabe.

Oznaka Opis
<table> Ovojni element za prikaz podatkov v obliki tabele
<thead> Element vsebnika za vrstice glave tabele ( <tr>) za označevanje stolpcev tabele
<tbody> Vsebniški element za vrstice tabele ( <tr>) v telesu tabele
<tr> Vsebniški element za niz celic tabele ( <td>oz<th> ), ki se pojavi v eni vrstici
<td> Privzeta celica tabele
<th> Posebna celica tabele za oznake stolpcev (ali vrstic, odvisno od obsega in umestitve).
<caption> Opis ali povzetek tega, kar tabela vsebuje, še posebej uporabno za bralnike zaslona 
  1. <tabela>
  2.   <napis> ... </caption>
  3.   <thead>
  4.     <tr>
  5.       <th> ... </th>
  6.       <th> ... </th>
  7.     </tr>
  8.   </thead>
  9.   <tbody>
  10.     <tr>
  11.       <td> ... </td>
  12.       <td> ... </td>
  13.     </tr>
  14.   </tbody>
  15. </table>

Obrazci

Privzeti slogi

Posamezni kontrolniki obrazcev prejmejo slog, vendar brez kakršnega koli zahtevanega osnovnega razreda <form>ali velikih sprememb v oznakah. Rezultat so zložene, levo poravnane oznake na vrhu kontrolnikov obrazca.

Legenda Tukaj je primer besedila pomoči na ravni bloka. 
  1. <obrazec>
  2.   <fieldset>
  3.     <legend> Legenda </legend>
  4.     <label> Ime oznake </label>
  5.     <input type = "text" placeholder = "Vnesite nekaj ..." >  
  6.     <span class = "help-block" > Tukaj je primer besedila pomoči na ravni bloka. </span> 
  7.     <label class = "checkbox" > 
  8.       <input type = "checkbox" > Preverite me 
  9.     </label>
  10.     <button type = "submit" class = "btn" > Pošlji </button>  
  11.   </fieldset>
  12. </form>

Izbirne postavitve

V Bootstrap so vključene tri izbirne postavitve obrazcev za običajne primere uporabe.

Iskalni obrazec

Dodajte .form-searchv obrazec in .search-queryv <input>za dodatno zaobljen vnos besedila.

  1. <form class = "form-search" > 
  2.   <input type = "text" class = "input-medium search-query" >  
  3.   <button type = "submit" class = "btn" > Iskanje </button>  
  4. </form>

Inline oblika

Dodajte .form-inlineza levo poravnane oznake in kontrolnike blokov v vrstici za kompaktno postavitev.

  1. <form class = "form-inline" > 
  2.   <input type = "text" class = "input-small" placeholder = "Email" >   
  3.   <input type = "password" class = "input-small" placeholder = "Password" >   
  4.   <label class = "checkbox" > 
  5.     <input type = "checkbox" > Zapomni si me 
  6.   </label>
  7.   <button type = "submit" class = "btn" > Prijavite se </button>  
  8. </form>

Horizontalna oblika

Oznake poravnajte desno in jih premaknite na levo, da bodo prikazane v isti vrstici kot kontrolniki. Zahteva največ sprememb oznak iz privzetega obrazca:

  • Dodaj.form-horizontal v obrazec
  • Zavijte oznake in kontrolnike.control-group
  • Dodajte .control-labelna etiketo
  • .controlsZa pravilno poravnavo ovijte vse povezane kontrole
  1. <form class = "form-horizontal" > 
  2.   <div class = "control-group" > 
  3.     <label class = "control-label" for = "inputEmail" > E-pošta </label>  
  4.     <div class = "controls" > 
  5.       <input type = "text" id = "inputEmail" placeholder = "Email" >   
  6.     </div>
  7.   </div>
  8.   <div class = "control-group" > 
  9.     <label class = "control-label" for = "inputPassword" > Geslo </label>  
  10.     <div class = "controls" > 
  11.       <input type = "password" id = "inputPassword" placeholder = "Password" >   
  12.     </div>
  13.   </div>
  14.   <div class = "control-group" > 
  15.     <div class = "controls" > 
  16.       <label class = "checkbox" > 
  17.         <input type = "checkbox" > Zapomni si me 
  18.       </label>
  19.       <button type = "submit" class = "btn" > Prijavite se </button>  
  20.     </div>
  21.   </div>
  22. </form>

Podprti kontrolniki obrazcev

Primeri standardnih kontrolnikov obrazca, podprtih v vzorčni postavitvi obrazca.

Vložki

Najpogostejši kontrolnik obrazca, besedilna vnosna polja. Vključuje podporo za vse vrste HTML5: besedilo, geslo, datum in čas, lokalni datum in čas, datum, mesec, čas, teden, številka, e-pošta, url, iskanje, tel in barva.

Zahteva uporabo določenega typeves čas.

  1. <input type = "text" placeholder = "Text input" >

Textarea

Kontrolnik obrazca, ki podpira več vrstic besedila. Po potrebi spremenite rowsatribut.

  1. <textarea rows = "3" ></textarea>

Potrditvena polja in radijski sprejemniki

Potrditvena polja so namenjena izbiri ene ali več možnosti na seznamu, medtem ko so radijski sprejemniki namenjeni izbiri ene možnosti izmed mnogih.

Privzeto (naloženo)


  1. <label class = "checkbox" > 
  2.   <input type = "checkbox" value = "" >  
  3.   Prva možnost je to in to – ne pozabite vključiti, zakaj je super
  4. </label>
  5.  
  6. <label class = "radio" > 
  7.   <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" potrjeno >     
  8.   Prva možnost je to in to – ne pozabite vključiti, zakaj je super
  9. </label>
  10. <label class = "radio" > 
  11.   <input type = "radio" name = "optionsRadios" id = "optionsRadios2 " value = "option2" >    
  12.   Druga možnost je lahko nekaj drugega in če jo izberete, boste preklicali izbiro prve možnosti
  13. </label>

Vgrajena potrditvena polja

Dodajte .inlinerazred nizu potrditvenih polj ali radijev, da se kontrolniki prikažejo v isti vrstici.

  1. <label class = "checkbox inline" > 
  2.   <input type = "checkbox" id = "inlineCheckbox1" value = "option1" > 1   
  3. </label>
  4. <label class = "checkbox inline" > 
  5.   <input type = "checkbox" id = "inlineCheckbox2" value = "option2" > 2   
  6. </label>
  7. <label class = "checkbox inline" > 
  8.   <input type = "checkbox" id = "inlineCheckbox3" value = "option3" > 3   
  9. </label>

Izbira

Uporabite privzeto možnost ali določite a multiple="multiple"za prikaz več možnosti hkrati.


  1. <izberi>
  2.   <možnost> 1 </možnost>
  3.   <option> 2 </option>
  4.   <možnost> 3 </možnost>
  5.   <option> 4 </option>
  6.   <option> 5 </option>
  7. </izberi>
  8.  
  9. <select multiple = "multiple" > 
  10.   <možnost> 1 </možnost>
  11.   <option> 2 </option>
  12.   <možnost> 3 </možnost>
  13.   <option> 4 </option>
  14.   <option> 5 </option>
  15. </izberi>

Razširitev kontrol obrazca

Poleg obstoječih kontrolnikov brskalnika Bootstrap vključuje tudi druge uporabne komponente obrazcev.

Predhodni in priloženi vnosi

Dodajte besedilo ali gumbe pred ali za katerim koli besedilnim vnosom. Upoštevajte, da selectelementi tukaj niso podprti.

Privzete možnosti

Zavijte an .add-onin an inputz enim od dveh razredov, da dodate ali dodate besedilo k vnosu.

@

0,00 
  1. <div class = "input-prepend" > 
  2.   <span class = "add-on" > @ </span> 
  3.   <input class = "span2" id = "prependedInput" type = "text" placeholder = "Uporabniško ime" >    
  4. </div>
  5. <div class = "input-append" > 
  6.   <input class = "span2" id = "appendedInput " type = "text" >   
  7.   <span class = "add-on" > 0,00 </span> 
  8. </div>

Kombinirano

.add-onZa dodajanje in dodajanje vnosa uporabite oba razreda in dva primerka .

$ 0,00 
  1. <div class = "input-prepend input-append" > 
  2.   <span class = "add-on" > $ </span> 
  3.   <input class = "span2" id = "appendedPrependedInput " type = "text" >   
  4.   <span class = "add-on" > 0,00 </span> 
  5. </div>

Gumbi namesto besedila

Namesto <span>z besedilom uporabite a .btn, da vnosu pripnete gumb (ali dva).

  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedInputButton " type = "text" >   
  3.   <button class = "btn" type = "button" > Pojdi! </button>  
  4. </div>
  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedInputButtons " type = "text" >   
  3.   <button class = "btn" type = "button" > Iskanje </button>  
  4.   <button class = "btn" type = "button" > Možnosti </button>  
  5. </div>

Spustni meniji gumbov

  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedDropdownButton " type = "text" >   
  3.   <div class = "btn-group" > 
  4.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  5.       Akcija
  6.       <span class = "caret" ></span> 
  7.     </button>
  8.     <ul class = "dropdown-menu" > 
  9.       ...
  10.     </ul>
  11.   </div>
  12. </div>
  1. <div class = "input-prepend" > 
  2.   <div class = "btn-group" > 
  3.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  4.       Akcija
  5.       <span class = "caret" ></span> 
  6.     </button>
  7.     <ul class = "dropdown-menu" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   <input class = "span2" id = "prependedDropdownButton" type = "text" >   
  12. </div>
  1. <div class = "input-prepend input-append" > 
  2.   <div class = "btn-group" > 
  3.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  4.       Akcija
  5.       <span class = "caret" ></span> 
  6.     </button>
  7.     <ul class = "dropdown-menu" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   <input class = "span2" id = "appendedPrependedDropdownButton " type = "text" >   
  12.   <div class = "btn-group" > 
  13.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  14.       Akcija
  15.       <span class = "caret" ></span> 
  16.     </button>
  17.     <ul class = "dropdown-menu" > 
  18.       ...
  19.     </ul>
  20.   </div>
  21. </div>

Segmentirane spustne skupine

  1. <obrazec>
  2.   <div class = "input-prepend" > 
  3.     <div class = "btn-group" > ... </div> 
  4.     <input type = "text" > 
  5.   </div>
  6.   <div class = "input-append" > 
  7.     <input type = "text" > 
  8.     <div class = "btn-group" > ... </div> 
  9.   </div>
  10. </form>

Iskalni obrazec

  1. <form class = "form-search" > 
  2.   <div class = "input-append" > 
  3.     <input type = "text" class = "span2 search-query" >  
  4.     <button type = "submit" class = "btn" > Iskanje </button>  
  5.   </div>
  6.   <div class = "input-prepend" > 
  7.     <button type = "submit" class = "btn" > Iskanje </button>  
  8.     <input type = "text" class = "span2 search-query" >  
  9.   </div>
  10. </form>

Nadzor velikosti

Uporabite relativne razrede velikosti, kot so .input-largeali uskladite svoje vnose z velikostmi stolpcev mreže z uporabo .span*razredov.

Vhodi na ravni bloka

Naj se kateri koli <input>ali <textarea>element obnaša kot element na ravni bloka.

  1. <input class = "input-block-level" type = "text" placeholder = ".input-block-level" >

Relativna velikost

  1. <input class = "input-mini" type = "text" placeholder = ".input-mini" >   
  2. <input class = "input-small" type = "text" placeholder = ".input-small" >   
  3. <input class = "input-medium" type = "text" placeholder = ".input-medium" >   
  4. <input class = "input-large" type = "text" placeholder = ".input-large" >   
  5. <input class = "input-xlarge" type = "text" placeholder = ".input-xlarge" >   
  6. <input class = "input-xxlarge" type = "text" placeholder = ".input-xxlarge" >

Glavo pokonci!V prihodnjih različicah bomo spremenili uporabo teh relativnih vnosnih razredov, da bodo ustrezali našim velikostim gumbov. Na primer, .input-largebo povečal oblazinjenje in velikost pisave vnosa.

Dimenzioniranje mreže

Uporabite .span1za .span12za vnose, ki se ujemajo z enakimi velikostmi stolpcev mreže.

  1. <input class = "span1" type = "text" placeholder = ".span1" >   
  2. <input class = "span2" type = "text" placeholder = ".span2" >   
  3. <input class = "span3" type = "text" placeholder = ".span3" >   
  4. <select class = "span1" > 
  5.   ...
  6. </izberi>
  7. <select class = "span2" > 
  8.   ...
  9. </izberi>
  10. <select class = "span3" > 
  11.   ...
  12. </izberi>

Za več vnosov mreže na vrstico uporabite .controls-rowmodifikatorski razred za pravilen razmik . Lebdi vnose, da strne prazen prostor, nastavi ustrezne robove in počisti lebdeče.

  1. <div class = "controls" > 
  2.   <input class = "span5" type = "text" placeholder = ".span5" >   
  3. </div>
  4. <div class = "controls controls-row" > 
  5.   <input class = "span4" type = "text" placeholder = ".span4" >   
  6.   <input class = "span1" type = "text" placeholder = ".span1" >   
  7. </div>
  8. ...

Neuredljivi vnosi

Predstavite podatke v obliki, ki je ni mogoče urejati brez uporabe dejanske oznake obrazca.

Tukaj je nekaj vrednosti 
  1. <span class = "input-xlarge uneditable-input" > Nekaj ​​vrednosti tukaj </span>

Dejanja obrazca

Zaključite obrazec s skupino dejanj (gumbi). Ko so gumbi postavljeni znotraj .form-actions, bodo gumbi samodejno zamaknjeni, da bodo poravnani s kontrolniki obrazca.

  1. <div class = "form-actions" > 
  2.   <button type = "submit" class = "btn btn-primary" > Shrani spremembe </button>  
  3.   <button type = "button" class = "btn" > Prekliči </button>  
  4. </div>

Besedilo pomoči

Podpora na ravni vrstice in bloka za besedilo pomoči, ki se pojavi okoli kontrolnikov obrazca.

Vgrajena pomoč

Besedilo pomoči v vrstici 
  1. <input type = "text" ><span class = "help-inline" > Besedilo pomoči v vrstici </span>

Blokiraj pomoč

Daljši blok besedila pomoči, ki se prelomi v novo vrstico in se lahko razširi čez eno vrstico. 
  1. <input type = "text" ><span class = "help-block" > Daljši blok besedila pomoči, ki se prelomi v novo vrstico in se lahko razširi čez eno vrstico. </span>

Nadzorna stanja obrazca

Zagotovite povratne informacije uporabnikom ali obiskovalcem z osnovnimi povratnimi informacijami o kontrolnikih obrazcev in oznakah.

Fokus vnosa

Na nekaterih kontrolnikih obrazca odstranimo privzete outlinesloge in box-shadownamesto njih uporabimo a za :focus.

  1. <input class = "input-xlarge" id = "focusedInput" type = "text" value = "To je fokusirano ..." >

Neveljavni vnosi

Slogovni vnosi prek privzete funkcije brskalnika z :invalid. Določite type, dodajte requiredatribut, če polje ni izbirno, in (če je primerno) podajte apattern .

To ni na voljo v različicah Internet Explorerja 7–9 zaradi pomanjkanja podpore za psevdo izbirnike CSS.

  1. <input class = "span3" type = "email" required >

Onemogočeni vnosi

Dodajte disabledatribut na vnos, da preprečite uporabniški vnos in sprožite nekoliko drugačen videz.

  1. <input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "Onemogočen vnos tukaj ..." onemogočen >

Stanja veljavnosti

Bootstrap vključuje sloge preverjanja za napake, opozorila, informacije in sporočila o uspehu. Za uporabo dodajte ustrezen razred v okolico .control-group.

Morda je šlo kaj narobe
Popravite napako
Uporabniško ime je zasedeno
Juhu! 
  1. <div class = "opozorilo nadzorne skupine" > 
  2.   <label class = "control-label" for = "inputWarning" > Vnos z opozorilom </label>  
  3.   <div class = "controls" > 
  4.     <input type = "text" id = "inputWarning" >  
  5.     <span class = "help-inline" > Morda je šlo nekaj narobe </span> 
  6.   </div>
  7. </div>
  8.  
  9. <div class = "napaka nadzorne skupine" > 
  10.   <label class = "control-label" for = "inputError" > Vnos z napako </label>  
  11.   <div class = "controls" > 
  12.     <input type = "text" id = "inputError" >  
  13.     <span class = "help-inline" > Popravite napako </span> 
  14.   </div>
  15. </div>
  16.  
  17. <div class = "control-group info" > 
  18.   <label class = "control-label" for = "inputInfo" > Vnos z informacijami </label>  
  19.   <div class = "controls" > 
  20.     <input type = "text" id = "inputInfo" >  
  21.     <span class = "help-inline" > Uporabniško ime je že zasedeno </span> 
  22.   </div>
  23. </div>
  24.  
  25. <div class = "uspeh nadzorne skupine" > 
  26.   <label class = "control-label" for = "inputSuccess" > Uspešen vnos </label>  
  27.   <div class = "controls" > 
  28.     <input type = "text" id = "inputSuccess" >  
  29.     <span class = "help-inline" > Juhu! </span> 
  30.   </div>
  31. </div>

Gumbi

Privzeti gumbi

Sloge gumbov je mogoče uporabiti za karkoli z uporabljenim .btnrazredom. Vendar pa jih običajno želite uporabiti le <a>za <button>elemente in za najboljše upodabljanje.

Gumb razred="" Opis
btn Standardni sivi gumb s prelivom
btn btn-primary Zagotavlja dodatno vizualno težo in identificira primarno dejanje v nizu gumbov
btn btn-info Uporablja se kot alternativa privzetim slogom
btn btn-success Označuje uspešno ali pozitivno dejanje
btn btn-warning Označuje, da je pri tem dejanju potrebna previdnost
btn btn-danger Označuje nevarno ali potencialno negativno dejanje
btn btn-inverse Nadomestni temno sivi gumb, ki ni vezan na semantično dejanje ali uporabo
btn btn-link Odstranite poudarek gumba tako, da bo videti kot povezava, hkrati pa ohranite obnašanje gumba

Združljivost med brskalniki

IE9 ne obreže prelivov ozadja na zaobljenih vogalih, zato ga odstranimo. Povezano, IE9 onemogočene buttonelemente spremeni v jankifikacijo, tako da besedilo postane sivo z neprijetno senco besedila, ki je ne moremo popraviti.

Velikosti gumbov

Ste všeč večji ali manjši gumbi? Dodajte .btn-large, .btn-smallali .btn-miniza dodatne velikosti.

  1. <p>
  2.   <button class = "btn btn-large btn-primary" type = "button" > Velik gumb </button>  
  3.   <button class = "btn btn-large" type = "button" > Velik gumb </button>  
  4. </p>
  5. <p>
  6.   <button class = "btn btn-primary" type = "button" > Privzeti gumb </button>  
  7.   <button class = "btn" type = "button" > Privzeti gumb </button>  
  8. </p>
  9. <p>
  10.   <button class = "btn btn-small btn-primary" type = "button" > Majhen gumb </button>  
  11.   <button class = "btn btn-small" type = "button" > Majhen gumb </button>  
  12. </p>
  13. <p>
  14.   <button class = "btn btn-mini btn-primary" type = "button" > Mini gumb </button>  
  15.   <button class = "btn btn-mini" type = "button" > Mini gumb </button>  
  16. </p>

Ustvarite gumbe na ravni bloka – tiste, ki zajemajo celotno širino nadrejenega elementa – tako, da dodate .btn-block.

  1. <button class = "btn btn-large btn-block btn-primary" type = "button" > Gumb ravni bloka </button>  
  2. <button class = "btn btn-large btn-block" type = "button" > Gumb ravni bloka </button>

Onemogočeno stanje

Naredite gumbe, ki jih ni mogoče klikniti, tako da jih zbledite za 50 %.

Sidrni element

Dodajte .disabledrazred <a>gumbom.

Primarna povezava Povezava 

  1. <a href = "#" class = "btn btn-large btn-primary disabled" > Primarna povezava </a>  
  2. <a href = "#" class = "btn btn-large disabled" > Povezava </a>

Glavo pokonci!Tu uporabljamo .disabledkot pomožni razred, podoben običajnemu .activerazredu, zato predpona ni potrebna. Poleg tega je ta razred samo za estetiko; morate uporabiti JavaScript po meri, da onemogočite povezave tukaj.

Element gumba

Dodajte disabledatribut <button>gumbom.

  1. <button type = "button" class = "btn btn-large btn-primary disabled" disabled = "disabled" > Primarni gumb </button>   
  2. <button type = "button" class = "btn btn-large" disabled > Gumb </button>

En razred, več oznak

Uporabite .btnrazred na elementu <a>, <button>ali .<input>

Povezava 
  1. <a class = "btn" href = "" > Povezava </a>  
  2. <button class = "btn" type = "submit" > Gumb </button>  
  3. <input class = "btn" type = "button" value = "Input" >   
  4. <input class = "btn" type = "submit" value = "Submit" >

Najboljša praksa je, da poskusite element uskladiti s svojim kontekstom, da zagotovite ujemajoče se upodabljanje med brskalniki. Če imate input, uporabite <input type="submit">za gumb.

Slike

Dodajte razrede <img>elementu za preprosto oblikovanje slik v katerem koli projektu.

140x140 140x140 140x140 
  1. <img src = "..." class = "img-rounded" >  
  2. <img src = "..." class = "img-circle" >  
  3. <img src = "..." class = "img-polaroid" >

Glavo pokonci! .img-roundedin .img-circlene delujejo v IE7-8 zaradi pomanjkanja border-radiuspodpore.

Ikone proizvajalca Glyphicons

Glifi ikon

140 ikon v obliki sprite, na voljo v temno sivi (privzeto) in beli barvi, zagotavlja Glyphicons .

  • ikona-steklo
  • ikona-glasba
  • ikona-iskanje
  • ikona-ovojnica
  • ikona-srce
  • ikona-zvezda
  • ikona-zvezda-prazna
  • uporabnik ikone
  • ikona-film
  • ikona-th-velika
  • ikona-th
  • ikona-th-seznam
  • ikona-ok
  • ikona-odstrani
  • icon-zoom-in
  • icon-zoom-out
  • ikona izklopljena
  • ikona-signal
  • ikona-zobnik
  • ikona-smetnjak
  • ikona-dom
  • ikona-datoteka
  • ikona-čas
  • ikona-cesta
  • ikona-prenos-alt
  • ikona za prenos
  • nalaganje ikon
  • ikona-prejeto
  • ikona-igra-krog
  • ikona-ponovitev
  • ikona-osvežitev
  • ikona-seznam-alt
  • ikona-ključavnica
  • ikona-zastavica
  • ikona-slušalke
  • ikona-izklop glasnosti
  • ikona-zmanjšanje glasnosti
  • ikona za povečanje glasnosti
  • ikona-qrcode
  • ikona-črtna koda
  • oznaka ikone
  • oznake ikon
  • knjiga ikon
  • ikona-zaznamek
  • tisk ikon
  • ikona-kamera
  • ikona-pisava
  • ikona-krepko
  • ikona-ležeče
  • višina-besedila ikone
  • icon-text-width
  • ikona-poravnaj-levo
  • icon-align-center
  • ikona-poravnaj-desno
  • icon-align-justify
  • seznam ikon
  • icon-indent-left
  • icon-indent-desno
  • icon-facetime-video
  • ikona-slika
  • ikona-svinčnik
  • ikona-zemljevid-marker
  • prilagoditev ikon
  • odtenek ikon
  • urejanje ikon
  • delitev ikon
  • preverjanje ikon
  • ikona-premik
  • ikona-korak-nazaj
  • ikona-hitro-nazaj
  • ikona-nazaj
  • igranje ikon
  • ikona-pavza
  • ikona-stop
  • ikona-naprej
  • ikona-hitro naprej
  • ikona-korak-naprej
  • ikona-izmet
  • ikona-ševron-levo
  • ikona-ševron-desno
  • ikona-plus-znak
  • ikona-znak-minus
  • ikona-odstrani-znak
  • ikona-ok-znak
  • ikona-vprašanje-znak
  • ikona-info-znak
  • ikona-posnetek zaslona
  • ikona-odstrani-krog
  • ikona-ok-krog
  • ikona-prepoved-krog
  • ikona-puščica-levo
  • ikona-puščica-desno
  • ikona-puščica-gor
  • ikona-puščica-dol
  • icon-share-alt
  • icon-resize-full
  • icon-resize-small
  • ikona-plus
  • ikona-minus
  • ikona-zvezdica
  • ikona-klicaj-znak
  • ikona-darilo
  • ikona-list
  • ikona-ogenj
  • ikona-odprto oko
  • ikona-zapiranje oči
  • ikona-opozorilni-znak
  • ikona-ravnina
  • ikona-koledar
  • ikona-naključno
  • ikona-komentar
  • ikona-magnet
  • icon-chevron-up
  • ikona-ševron-dol
  • icon-retweet
  • ikona nakupovalnega vozička
  • ikona-mapa-zapiranje
  • ikona-mapa-odprta
  • icon-resize-vertical
  • icon-resize-horizontal
  • ikona-hdd
  • ikona megafon
  • ikona-zvon
  • ikona-certifikat
  • ikona-palec gor
  • ikona-palec-dol
  • ikona-desna-roka
  • ikona-leva-roka
  • ikona-roka navzgor
  • ikona-roka-dol
  • ikona-krog-puščica-desno
  • ikona-krog-puščica-levo
  • ikona-krog-puščica-gor
  • ikona-krog-puščica-dol
  • ikona-globus
  • ikona-ključ
  • ikona-naloge
  • ikona-filter
  • ikona-aktovka
  • ikona-celozaslonski

Pripisovanje glifikonov

Glyphicons Halflings običajno niso na voljo brezplačno, vendar je dogovor med Bootstrapom in ustvarjalci Glyphicons to omogočil brezplačno za vas kot razvijalce. V zahvalo vas prosimo, da vključite neobvezno povezavo nazaj do Glyphicons , kadar koli je to izvedljivo.

Kako uporabiti

Vse ikone zahtevajo <i>oznako z edinstvenim razredom s predpono icon-. Za uporabo postavite naslednjo kodo skoraj kamor koli:

  1. <i class = "icon-search" ></i>

Na voljo so tudi slogi za obrnjene (bele) ikone, pripravljene z enim dodatnim razredom. Ta razred bomo posebej uveljavili pri lebdenju in aktivnih stanjih za navigacijske in spustne povezave.

  1. <i class = "icon-search icon-white" ></i>

Glavo pokonci!Pri uporabi poleg nizov besedila, na primer pri gumbih ali navigacijskih povezavah, ne pozabite pustiti presledka za <i>oznako za pravilen razmik.

Primeri ikon

Uporabite jih v gumbih, skupinah gumbov za orodno vrstico, navigacijo ali predpriložene vnose obrazcev.

Gumbi

Skupina gumbov v orodni vrstici gumbov
  1. <div class = "btn-toolbar" > 
  2.   <div class = "btn-group" > 
  3.     <a class = "btn" href = "#" ><i class = "icon-align-left" ></i></a>   
  4.     <a class = "btn" href = "#" ><i class = "icon-align-center" ></i></a>   
  5.     <a class = "btn" href = "#" ><i class = "icon-align-right" ></i></a>   
  6.     <a class = "btn" href = "#" ><i class = "icon-align-justify" ></i></a>   
  7.   </div>
  8. </div>
Spustni meni v skupini gumbov
Uporabnik 
  1. <div class = "btn-group" > 
  2.   <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> Uporabnik </a>   
  3.   <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>    
  4.   <ul class = "dropdown-menu" > 
  5.     <li><a href = "#" ><i class = "icon-pencil" ></i> Uredi </a></li>  
  6.     <li><a href = "#" ><i class = "icon-trash" ></i> Izbriši </a></li>  
  7.     <li><a href = "#" ><i class = "icon-ban-circle" ></i> Prepoved </a></li>  
  8.     <li class = "divider" ></li> 
  9.     <li><a href = "#" ><i class = "i" ></i> Naredi skrbnika </a></li>  
  10.   </ul>
  11. </div>
Velikosti gumbov
zvezda zvezda zvezda 
  1. <a class = "btn btn-large" href = "#" ><i class = "icon-star" ></i> Zvezdica </a>   
  2. <a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i> Zvezdica </a>   
  3. <a class = "btn btn-mini" href = "#" ><i class = "icon-star" ></i> Zvezdica </a>

Navigacija

  1. <ul class = "nav nav-list" > 
  2.   <li class = "active" ><a href = "#" ><i class = "icon-home icon-white" ></i> Domov </a></li>   
  3.   <li><a href = "#" ><i class = "icon-book" ></i> Knjižnica </a></li>  
  4.   <li><a href = "#" ><i class = "icon-pencil" ></i> Aplikacije </a></li>  
  5.   <li><a href = "#" ><i class = "i" ></i> Razno </a></li>  
  6. </ul>

Polja obrazca

  1. <div class = "control-group" > 
  2.   <label class = "control-label" for = "inputIcon" > E-poštni naslov </label>  
  3.   <div class = "controls" > 
  4.     <div class = "input-prepend" > 
  5.       <span class = "add-on" ><i class = "icon-envelope" ></i></span>  
  6.       <input class = "span2" id = "inputIcon" type = "text" >   
  7.     </div>
  8.   </div>
  9. </div>