Bootstrap

Osnovni CSS

Temeljni HTML elementi oblikovani i poboljšani proširivim klasama.

Glavu gore! Ovi dokumenti su za v2.3.2, koji više nije službeno podržan. Provjerite najnoviju verziju Bootstrapa!

Tipografija

Naslovi

Svi HTML zaglavlja, <h1>do <h6>su dostupni.

h1. Naslov 1

h2. Naslov 2

h3. Naslov 3

h4. Naslov 4

h5. Naslov 5
h6. Naslov 6

Kopija tijela

Bootstrapova globalna zadana vrijednostfont-size je 14px , s line-height20px . Ovo se primjenjuje na i sve odlomke. Osim toga, (odlomci) dobivaju donju marginu polovice svoje visine retka (10 px prema zadanim postavkama).<body><p>

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.

Mecena 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 tijela

Istaknite odlomak dodavanjem .lead.

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

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

Izgrađeno s manje

Tipografska ljestvica temelji se na dvije MANJE varijable u varijablama.manje : @baseFontSizei @baseLineHeight. Prva je osnovna veličina fonta koja se koristi u cijelom tekstu, a druga je osnovna visina retka. Koristimo te varijable i neke jednostavne matematike za stvaranje margina, ispuna i visina redaka svih naših tipova i više. Prilagodite ih i Bootstrap će se prilagoditi.

Naglasak

Iskoristite zadane HTML oznake za naglašavanje s laganim stilovima.

<small>

Za uklanjanje naglaska u tekstu ili blokova teksta, koristite malu oznaku.

Ovaj redak teksta trebao bi se tretirati kao sitni tisak.

<p> <small> Ovaj redak teksta treba tretirati kao sitni ispis. </small> </p>

Podebljano

Za naglašavanje isječka teksta s većom težinom fonta.

Sljedeći isječak teksta prikazan je podebljanim tekstom .

<strong> prikazano podebljanim tekstom </strong>

Kurziv

Za naglašavanje isječka teksta kurzivom.

Sljedeći isječak teksta prikazuje se kao tekst u kurzivu .

<em> prikazano kao kurzivni tekst </em>

Glavu gore!Slobodno koristite <b>i <i>u HTML5. <b>namijenjen je isticanju riječi ili fraza bez prenošenja dodatne važnosti, dok <i>je uglavnom za glas, tehničke izraze itd.

Klase usklađivanja

Jednostavno poravnajte tekst s komponentama pomoću klasa za poravnanje teksta.

Lijevo poravnat tekst.

Tekst poravnat po sredini.

Tekst poravnat udesno.

  1. <p class = "text-left" > Tekst poravnat ulijevo. </p> 
  2. <p class = "text-center" > Centar poravnat tekst. </p> 
  3. <p class = "text-right" > Tekst poravnat udesno. </p>

Klase s naglaskom

Prenesite značenje bojom uz pregršt isticanja korisnih klasa.

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>

Kratice

Stilizirana implementacija HTML <abbr>elementa za kratice i akronime za prikaz proširene verzije pri lebdenju. Kratice s titleatributom imaju svijetlu točkastu donju granicu i pokazivač pomoći pri lebdenju, pružajući dodatni kontekst pri lebdenju.

<abbr>

Za prošireni tekst pri dugom lebdenju kratice uključite titleatribut.

Skraćenica riječi atribut je attr .

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

<abbr class="initialism">

Dodajte .initialismkraticu za malo manju veličinu fonta.

HTML je najbolja stvar od rezanog kruha.

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

Adrese

Predstavite kontakt podatke za najbližeg pretka ili cjelokupno djelo.

<address>

Sačuvajte formatiranje završavajući sve retke s <br>.

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

Blok citati

Za citiranje blokova sadržaja iz drugog izvora unutar vašeg dokumenta.

Zadani blok citat

Zamotajte <blockquote>bilo koji HTML kao citat. Za izravne citate preporučujemo <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>

Opcije blok citata

Promjene stila i sadržaja za jednostavne varijacije standardnog blok citata.

Imenovanje izvora

Dodajte <small>oznaku za identifikaciju izvora. Omotajte naziv izvornog djela u <cite>.

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

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

Alternativni prikazi

Koristite .pull-rightza lebdeći, desno poravnat blok citat.

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

Netko poznat u naslovu izvora 
  1. <blockquote class = "pull-right" > 
  2.   ...
  3. </blockquote>

Popisi

Neuređeno

Popis stavki u kojima redoslijed nije izričito bitan.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Cijeli broj molestie lorem at massa
  • 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>

Naručeno

Popis stavki u kojima je redoslijed izričito bitan.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Cijeli broj molestie lorem at massa
  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>

Nestilizirano

Uklonite zadane list-stylei lijeve ispune na stavkama popisa (samo neposredno podređeni).

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Cijeli broj molestie lorem at massa
  • 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>

U redu

Stavite sve stavke popisa u jedan redak s inline-blocklaganim ispunom.

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

Opis

Popis pojmova s ​​pripadajućim opisima.

Liste opisa
Popis opisa savršen je za definiranje pojmova.
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

Napravite pojmove i opise <dl>poredane jedan do drugoga.

Liste opisa
Popis opisa savršen je za definiranje pojmova.
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>

Glavu gore!Horizontalni popisi opisa skratit će pojmove koji su predugački da stanu u popravak lijevog stupca text-overflow. U užim prikazima, oni će se promijeniti u zadani naslagani raspored.

Kodirati

U redu

Zamotajte ugrađene isječke koda s <code>.

Na primjer, <section>treba biti omotan kao inline. 
  1. Na primjer , <code> & lt ; odjeljak & gt ;</ code > trebao bi biti omotan kao umetnuti .

Osnovni blok

Koristite <pre>za više redaka koda. Obavezno izbjegnite sve uglaste zagrade u kodu radi ispravnog prikazivanja.

<p>Uzorak teksta ovdje...</p>
  1. <pre>
  2.   <p>Primjer teksta ovdje...</p>
  3. </pre>

Glavu gore!Svakako držite kod unutar <pre>oznaka što bliže lijevoj strani; prikazat će sve kartice.

Po izboru možete dodati .pre-scrollableklasu koja će postaviti maksimalnu visinu od 350 px i dati traku za pomicanje osi y.

Stolovi

Zadani stilovi

Za osnovni stil—lagana podstava i samo horizontalni razdjelnici—dodajte osnovnu klasu .tablebilo kojem <table>.

# Ime Prezime Korisničko ime
1 Ocjena Otto @mdo
2 Jakovu Thornton @mast
3 Larry ptica @cvrkut 
  1. <table class = "table" > 
  2.   …
  3. </table>

Fakultativna nastava

Dodajte bilo koju od sljedećih klasa .tableosnovnoj klasi.

.table-striped

Dodaje zebraste pruge u bilo koji redak tablice unutar <tbody>putem :nth-childCSS selektora (nije dostupno u IE7-8).

# Ime Prezime Korisničko ime
1 Ocjena Otto @mdo
2 Jakovu Thornton @mast
3 Larry ptica @cvrkut 
  1. <table class = "table table-striped" > 
  2.   …
  3. </table>

.table-bordered

Dodajte obrube i zaobljene kutove na stol.

# Ime Prezime Korisničko ime
1 Ocjena Otto @mdo
Ocjena Otto @getbootstrap
2 Jakovu Thornton @mast
3 Ptica Larry @cvrkut 
  1. <table class = "table table-bordered" > 
  2.   …
  3. </table>

.table-hover

Omogućite stanje lebdenja na recima tablice unutar <tbody>.

# Ime Prezime Korisničko ime
1 Ocjena Otto @mdo
2 Jakovu Thornton @mast
3 Ptica Larry @cvrkut 
  1. <table class = "table table-hover" > 
  2.   …
  3. </table>

.table-condensed

Čini stolove kompaktnijima rezanjem podloge na pola.

# Ime Prezime Korisničko ime
1 Ocjena Otto @mdo
2 Jakovu Thornton @mast
3 Ptica Larry @cvrkut 
  1. <table class = "table table-condensed" > 
  2.   …
  3. </table>

Neobavezne klase redova

Koristite kontekstualne klase za bojanje redaka tablice.

Klasa Opis
.success Označava uspješnu ili pozitivnu radnju.
.error Označava opasnu ili potencijalno negativnu radnju.
.warning Označava upozorenje koje bi moglo zahtijevati pozornost.
.info Koristi se kao alternativa zadanim stilovima.
# Proizvod Plaćanje primljeno Status
1 TBC - mjesečno 01.04.2012 Odobreno
2 TBC - mjesečno 04.02.2012 Odbijeno
3 TBC - mjesečno 04.03.2012 U tijeku
4 TBC - mjesečno 04.04.2012 Nazovite da potvrdite 
  1. ...
  2.   < tr class = "success" >
  3.     <td> 1 < /td>
  4.     <td>TB - mjesečno</ td >
  5.     < td> 1. 4. 2012. < / td>
  6.     <td>Odobreno</ td >
  7.   </ tr >
  8. ...

Podržano označavanje tablice

Popis podržanih HTML elemenata tablice i kako ih treba koristiti.

Označiti Opis
<table> Element omotača za prikaz podataka u tabelarnom obliku
<thead> Element spremnika za retke zaglavlja tablice ( <tr>) za označavanje stupaca tablice
<tbody> Element spremnika za retke tablice ( <tr>) u tijelu tablice
<tr> Element spremnika za skup ćelija tablice ( <td>ili <th>) koji se pojavljuje u jednom retku
<td> Zadana ćelija tablice
<th> Posebna ćelija tablice za oznake stupca (ili retka, ovisno o opsegu i položaju).
<caption> Opis ili sažetak onoga što tablica sadrži, posebno korisno za čitače zaslona 
  1. <stol>
  2.   <caption> ... </caption>
  3.   <head>
  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>

Obrasci

Zadani stilovi

Pojedinačne kontrole obrasca dobivaju stil, ali bez potrebne osnovne klase <form>ili velikih promjena u označavanju. Rezultat su naslagane, lijevo poravnate oznake na vrhu kontrola obrasca.

Legenda Primjer teksta pomoći na razini bloka ovdje. 
  1. <obrazac>
  2.   <set polja>
  3.     <legend> Legenda </legend>
  4.     <label> Naziv oznake </label>
  5.     <input type = "text" placeholder = "Upišite nešto..." >  
  6.     <span class = "help-block" > Primjer teksta pomoći na razini bloka ovdje. </span> 
  7.     <label class = "checkbox" > 
  8.       <input type = "checkbox" > Pogledaj me 
  9.     </label>
  10.     <button type = "submit" class = "btn" > Pošalji </button>  
  11.   </fieldset>
  12. </form>

Izborni rasporedi

Uz Bootstrap uključena su tri izborna izgleda obrazaca za uobičajene slučajeve upotrebe.

Obrazac za pretraživanje

Dodajte .form-searchu obrazac i .search-queryu <input>za dodatno zaokruženi unos teksta.

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

Inline obrazac

Dodajte .form-inlineza lijevo poravnate oznake i kontrole umetnutih blokova za kompaktan izgled.

  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" > Zapamti me 
  6.   </label>
  7.   <button type = "submit" class = "btn" > Prijavite se </button>  
  8. </form>

Horizontalni oblik

Desno poravnajte oznake i pomaknite ih ulijevo kako bi se pojavile u istom retku kao kontrole. Zahtijeva najviše izmjena oznaka iz zadanog obrasca:

  • Dodajte .form-horizontalu obrazac
  • Umotajte oznake i kontrole.control-group
  • Dodaj .control-labelna oznaku
  • Zamotajte sve povezane kontrole .controlsradi pravilnog poravnanja
  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" > Lozinka </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" > Zapamti me 
  18.       </label>
  19.       <button type = "submit"  class = "btn" > Prijavite se </button>
  20.     </div>
  21.   </div>
  22. </form>

Podržane kontrole obrazaca

Primjeri standardnih kontrola obrasca podržanih u primjeru izgleda obrasca.

Unosi

Najčešća kontrola obrazaca, tekstualna polja za unos. Uključuje podršku za sve vrste HTML5: tekst, lozinka, datum i vrijeme, lokalni datum i vrijeme, datum, mjesec, vrijeme, tjedan, broj, e-pošta, url, pretraživanje, telefon i boja.

Zahtijeva korištenje navedenogtype u svakom trenutku.

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

Textarea

Kontrola obrasca koja podržava više redaka teksta. Po potrebi promijenite rowsatribut.

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

Polje za potvrdu i radio

Potvrdni okviri služe za odabir jedne ili više opcija na popisu, dok radiji služe za odabir jedne opcije od više njih.

Zadano (složeno)


  1. <label class = "checkbox" > 
  2.   <input type = "checkbox" value = "" >  
  3.   Prva opcija je ovo i to—obavezno navedite zašto je super
  4. </label>
  5.  
  6. <label class = "radio" > 
  7.   <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" označeno >     
  8.   Prva opcija je ovo i to—obavezno navedite zašto je super
  9. </label>
  10. <label class = "radio" > 
  11.   <input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2" >    
  12.   Opcija dva može biti nešto drugo i ako je odaberete, poništit ćete odabir prve opcije
  13. </label>

Inline potvrdni okviri

Dodajte .inlineklasu nizu potvrdnih okvira ili radija da bi se kontrole pojavile u istom retku.

  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>

Odaberite% s

Upotrijebite zadanu opciju ili navedite multiple="multiple"za prikaz više opcija odjednom.


  1. <odaberi>
  2.   <opcija> 1 </opcija>
  3.   <opcija> 2 </opcija>
  4.   <opcija> 3 </opcija>
  5.   <opcija> 4 </opcija>
  6.   <opcija> 5 </opcija>
  7. </odaberi>
  8.  
  9. <select multiple = "multiple" > 
  10.   <opcija> 1 </opcija>
  11.   <opcija> 2 </opcija>
  12.   <opcija> 3 </opcija>
  13.   <opcija> 4 </opcija>
  14.   <opcija> 5 </opcija>
  15. </odaberi>

Proširivanje kontrola obrasca

Dodavanjem postojećih kontrola preglednika, Bootstrap uključuje i druge korisne komponente obrazaca.

Pridodani i pridodani ulazi

Dodajte tekst ili gumbe prije ili poslije bilo kojeg unosa temeljenog na tekstu. Imajte na umu da selectelementi ovdje nisu podržani.

Zadane opcije

Zamotajte an .add-oni an inputu jednu od dvije klase da biste dodali tekst ispred ili na ulaz.

@

.00 
  1. <div class = "input-prepend" > 
  2.   <span class = "add-on" > @ </span> 
  3.   <input class = "span2" id = "prependedInput" type = "text" placeholder = "Username" >    
  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

Koristite obje klase i dvije instance da .add-onbiste dodali ulaz ispred i ispred njega.

$ .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 umjesto teksta

Umjesto <span>s tekstom, upotrijebite a .btnda priložite gumb (ili dva) unosu.

  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedInputButton " type = "text" >   
  3.   <button class = "btn" type = "button" > Kreni! </button>  
  4. </div>
  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedInputButtons " type = "text" >   
  3.   <button class = "btn" type = "button" > Traži </button>  
  4.   <button class = "btn" type = "button" > Opcije </button>  
  5. </div>

Padajući izbornik gumba

  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.       Akcijski
  6.       <span class = "caret" ></span> 
  7.     </button>
  8.     <ul class = "padajući izbornik" > 
  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.       Akcijski
  5.       <span class = "caret" ></span> 
  6.     </button>
  7.     <ul class = "padajući izbornik" > 
  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.       Akcijski
  5.       <span class = "caret" ></span> 
  6.     </button>
  7.     <ul class = "padajući izbornik" > 
  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.       Akcijski
  15.       <span class = "caret" ></span> 
  16.     </button>
  17.     <ul class = "padajući izbornik" > 
  18.       ...
  19.     </ul>
  20.   </div>
  21. </div>

Segmentirane padajuće grupe

  1. <obrazac>
  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>

Obrazac za pretraživanje

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

Kontrola veličine

Koristite klase relativne veličine kao što .input-largesu ili uskladite svoje unose s veličinama stupaca rešetke pomoću .span*klasa.

Ulazi na razini bloka

Neka se bilo koji <input>ili <textarea>element ponaša kao element na razini bloka.

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

Relativno dimenzioniranje

  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" >

Glavu gore!U budućim verzijama promijenit ćemo upotrebu ovih relativnih klasa unosa kako bi odgovarale našim veličinama gumba. Na primjer,.input-large povećat će ispunu i veličinu fonta unosa.

Dimenzioniranje mreže

Koristite .span1do .span12za unose koji odgovaraju istim veličinama stupaca rešetke.

  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. </odaberi>
  7. <select class = "span2" > 
  8.   ...
  9. </odaberi>
  10. <select class = "span3" > 
  11.   ...
  12. </odaberi>

Za višestruke ulaze mreže po retku, koristite .controls-rowklasu modifikatora za pravilan razmak . Pomiče ulaze kako bi smanjio bijeli prostor, postavlja odgovarajuće margine i briše pomicanje.

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

Unosi koji se ne mogu uređivati

Predstavite podatke u obliku koji se ne može uređivati ​​bez korištenja stvarnog označavanja obrasca.

Neka vrijednost ovdje 
  1. <span class = "input-xlarge uneditable-input" > Neke vrijednosti ovdje </span>

Akcije obrazaca

Završite obrazac s grupom akcija (gumbi). Kada se stave unutar .form-actions, gumbi će se automatski uvući kako bi se poravnali s kontrolama obrasca.

  1. <div class = "form-actions" > 
  2.   <button type = "submit" class = "btn btn-primary" > Spremi promjene </button>  
  3.   <button type = "button" class = "btn" > Odustani </button>  
  4. </div>

Tekst pomoći

Inline i block level podrška za tekst pomoći koji se pojavljuje oko kontrola obrasca.

Inline pomoć

Inline tekst pomoći 
  1. <input type = "text" ><span class = "help-inline" > Umetnuti tekst pomoći </span>

Blokirajte pomoć

Dulji blok teksta pomoći koji se lomi u novi redak i može se protezati dalje od jednog retka. 
  1. <input type = "text" ><span class = "help-block" > Duži blok teksta pomoći koji se lomi u novi redak i može se protezati dalje od jednog retka. </span>

Kontrolna stanja obrazaca

Pružite povratne informacije korisnicima ili posjetiteljima s osnovnim povratnim informacijama o kontrolama obrazaca i oznakama.

Fokus unosa

Uklanjamo zadane outlinestilove na nekim kontrolama obrazaca i primjenjujemo box-shadowumjesto njih za :focus.

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

Nevažeći unosi

Unosi stila putem zadane funkcije preglednika s :invalid. Navedite type, dodajte requiredatribut ako polje nije izborno i (ako je primjenjivo) navedite pattern.

Ovo nije dostupno u verzijama Internet Explorera 7-9 zbog nedostatka podrške za CSS pseudo selektore.

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

Onemogućeni ulazi

Dodajte disabledatribut na unos kako biste spriječili korisnički unos i pokrenuli malo drugačiji izgled.

  1. <input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "Ovdje onemogućen unos..." onemogućen >

Stanja provjere valjanosti

Bootstrap uključuje stilove provjere valjanosti za pogreške, upozorenja, informacije i poruke o uspjehu. Za korištenje dodajte odgovarajuću klasu u okruženje .control-group.

Možda je nešto pošlo po zlu
Ispravite grešku
Korisničko ime je zauzeto
Juhu! 
  1. <div class = "upozorenje kontrolne grupe" > 
  2.   <label class = "control-label" for = "inputWarning" > Unos s upozorenjem </label>  
  3.   <div class = "controls" > 
  4.     <input type = "text" id = "inputWarning" >  
  5.     <span class = "help-inline" > Možda nešto nije u redu </span> 
  6.   </div>
  7. </div>
  8.  
  9. <div class = "pogreška kontrolne grupe" > 
  10.   <label class = "control-label" for = "inputError" > Unos s pogreškom </label>  
  11.   <div class = "controls" > 
  12.     <input type = "text" id = "inputError" >  
  13.     <span class = "help-inline" > Ispravite pogrešku </span> 
  14.   </div>
  15. </div>
  16.  
  17. <div class = "control-group info" > 
  18.   <label class = "control-label" for = "inputInfo" > Unos s informacijama </label>  
  19.   <div class = "controls" > 
  20.     <input type = "text" id = "inputInfo" >  
  21.     <span class = "help-inline" > Korisničko ime je već zauzeto </span> 
  22.   </div>
  23. </div>
  24.  
  25. <div class = "uspjeh kontrolne grupe" > 
  26.   <label class = "control-label" for = "inputSuccess" > Uspješan unos </label>  
  27.   <div class = "controls" > 
  28.     <input type = "text" id = "inputSuccess" >  
  29.     <span class = "help-inline" > Juhu! </span> 
  30.   </div>
  31. </div>

Gumbi

Zadani gumbi

Stilovi gumba mogu se primijeniti na bilo što s .btnprimijenjenom klasom. Međutim, obično ćete to željeti primijeniti samo na elemente <a>i <button>za najbolje prikazivanje.

Dugme klasa="" Opis
btn Standardni sivi gumb s gradijentom
btn btn-primary Pruža dodatnu vizualnu težinu i identificira primarnu radnju u nizu gumba
btn btn-info Koristi se kao alternativa zadanim stilovima
btn btn-success Označava uspješnu ili pozitivnu radnju
btn btn-warning Označava da treba biti oprezan s ovom radnjom
btn btn-danger Označava opasnu ili potencijalno negativnu radnju
btn btn-inverse Alternativni tamnosivi gumb, nije vezan uz semantičku radnju ili upotrebu
btn btn-link Umanjite naglasak na gumbu tako da izgleda kao poveznica uz zadržavanje ponašanja gumba

Kompatibilnost s više preglednika

IE9 ne obrezuje pozadinske gradijente na zaobljenim kutovima, pa ga uklanjamo. S tim u vezi, IE9 jankifies onemogućene buttonelemente, pretvarajući tekst u siv s gadnom sjenkom teksta koju ne možemo popraviti.

Veličine gumba

Želite li veće ili manje gumbe? Dodajte .btn-large, .btn-small, ili .btn-miniza dodatne veličine.

  1. <p>
  2.   <button class = "btn btn-large btn-primary" type = "button" > Veliki gumb </button>  
  3.   <button class = "btn btn-large" type = "button" > Veliki gumb </button>  
  4. </p>
  5. <p>
  6.   <button class = "btn btn-primary" type = "button" > Zadani gumb </button>  
  7.   <button class = "btn" type = "button" > Zadani gumb </button>  
  8. </p>
  9. <p>
  10.   <button class = "btn btn-small btn-primary" type = "button" > Mali gumb </button>  
  11.   <button class = "btn btn-small" type = "button" > Mali 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>

Stvorite gumbe na razini bloka—one koji se protežu cijelom širinom nadređenog—dodavanjem .btn-block.

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

Onesposobljeno stanje

Učinite da gumbi izgledaju nemoguće kliknuti tako da ih izblijedite za 50%.

Element sidra

Dodajte .disabledklasu <a>gumbima.

Primarna veza Veza 

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

Glavu gore!Ovdje koristimo .disabledkao uslužnu klasu, sličnu uobičajenoj .activeklasi, tako da nije potreban prefiks. Također, ova klasa je samo za estetiku; morate koristiti prilagođeni JavaScript da biste ovdje onemogućili veze.

Element gumba

Dodajte disabledatribut <button>gumbima.

  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>

Jedna klasa, više oznaka

Koristite .btnklasu na elementu <a>, <button>, ili .<input>

Veza 
  1. <a class = "btn" href = "" > Veza </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" >

Kao najbolja praksa, pokušajte uskladiti element sa svojim kontekstom kako biste osigurali podudarno prikazivanje u više preglednika. Ako imate input, upotrijebite <input type="submit">za gumb.

Slike

Dodajte klase <img>elementu kako biste jednostavno stilizirali slike u bilo kojem projektu.

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

Glavu gore! .img-roundedi .img-circlene rade u IE7-8 zbog nedostatka border-radiuspodrške.

Ikone tvrtke Glyphicons

Glifovi ikona

140 ikona u obliku spritea, dostupnih u tamno sivoj (zadano) i bijeloj boji, pruža Glyphicons .

  • ikona-čaša
  • ikona-glazba
  • pretraživanje ikona
  • ikona-omotnica
  • ikona-srce
  • ikona-zvijezda
  • ikona-zvijezda-prazna
  • ikona-korisnik
  • ikona-film
  • ikona-th-velika
  • ikona-th
  • ikona-th-list
  • ikona-ok
  • ikona-ukloni
  • ikona-zoom-in
  • ikona-umanjivanje
  • ikona isključena
  • ikona-signal
  • ikona-zupčanik
  • ikona-smeće
  • ikona-dom
  • ikona-datoteka
  • ikona-vrijeme
  • ikona-put
  • ikona-preuzimanje-alt
  • ikona za preuzimanje
  • slanje ikona
  • ikona-inbox
  • ikona-igranje-krug
  • ikona-ponoviti
  • ikona-osvježi
  • ikona-popis-alt
  • ikona-brava
  • ikona-barjak
  • ikona-slušalice
  • ikona-isključena glasnoća
  • ikona-smanjenje glasnoće
  • ikona za povećanje glasnoće
  • ikona-qrcode
  • ikona-crtični kod
  • ikona-oznaka
  • oznake ikona
  • knjiga ikona
  • ikona-oznaka
  • ispis ikona
  • ikona-kamera
  • ikona-font
  • ikona-podebljano
  • ikona-kurziv
  • ikona-tekst-visina
  • širina-teksta-ikone
  • ikona-poravnaj-lijevo
  • središte poravnanja ikona
  • ikona-poravnaj-desno
  • icon-align-justify
  • popis ikona
  • ikona-uvlaka-lijevo
  • ikona-uvlaka-desno
  • icon-facetime-video
  • ikona-slika
  • ikona-olovka
  • ikona-karta-oznaka
  • podešavanje ikone
  • ikona-boja
  • uređivanje ikona
  • dijeljenje ikona
  • ikona-provjera
  • ikona-kretanje
  • ikona-korak-natrag
  • ikona-brzo-natrag
  • ikona-natrag
  • ikona-igra
  • ikona-pauza
  • ikona-stop
  • ikona-naprijed
  • ikona-brzo-unaprijed
  • ikona-korak-naprijed
  • ikona-izbacivanje
  • ikona-ševron-lijevo
  • ikona-ševron-desno
  • ikona-plus-znak
  • ikona-znak-minus
  • ikona-ukloni-znak
  • ikona-ok-znak
  • ikona-upitnik-znak
  • ikona-info-znak
  • ikona-snimka zaslona
  • ikona-ukloni-krug
  • ikona-ok-krug
  • ikona-zabrana-krug
  • ikona-strelica-lijevo
  • ikona-strelica-desno
  • ikona-strelica-gore
  • ikona-strelica-dolje
  • icon-share-alt
  • icon-resize-full
  • icon-resize-small
  • ikona-plus
  • ikona-minus
  • ikona-zvjezdica
  • ikona-uzvičnik-znak
  • ikona-dar
  • ikona-list
  • ikona-vatra
  • ikona-oko-otvoreno
  • ikona-zatvaranje očiju
  • ikona-znak-upozorenje
  • ikona-ravnina
  • ikona-kalendar
  • ikona-nasumična
  • ikona-komentar
  • ikona-magnet
  • ikona-ševron-gore
  • ikona-ševron-dolje
  • ikona-retweet
  • ikona-kolica-kolica
  • ikona-mapa-zatvaranje
  • ikona-mapa-otvorena
  • icon-resize-vertical
  • icon-resize-horizontal
  • ikona-hdd
  • ikona-megafon
  • ikona-zvono
  • ikona-certifikat
  • ikona-palac gore
  • ikona-palac-dolje
  • ikona-ruka-desna
  • ikona-ruka-lijeva
  • ikona-ruka gore
  • ikona-ruka-dolje
  • ikona-krug-strelica-desno
  • ikona-krug-strelica-lijevo
  • ikona-krug-strelica-gore
  • ikona-krug-strelica-dolje
  • ikona-globus
  • ikona-ključ
  • ikone-zadaci
  • ikona-filtar
  • ikona-aktovka
  • ikona-puni zaslon

Atribucija glifikona

Glyphicons Halflings obično nisu dostupni besplatno, ali dogovor između Bootstrapa i kreatora Glyphiconsa omogućio je to besplatno za vas kao programere. Kao zahvalu, molimo vas da uključite neobaveznu vezu natrag na Glyphicons kad god je to praktično.

Kako koristiti

Sve ikone zahtijevaju <i>oznaku s jedinstvenom klasom, s prefiksom icon-. Za korištenje, postavite sljedeći kod bilo gdje:

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

Dostupni su i stilovi za obrnute (bijele) ikone, pripremljene s jednom dodatnom klasom. Posebno ćemo primijeniti ovu klasu na lebdenje i aktivna stanja za navigacijske i padajuće veze.

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

Glavu gore!Kada koristite tekstualne nizove pored, kao u gumbima ili navigacijskim vezama, svakako ostavite razmak nakon <i>oznake radi pravilnog razmaka.

Primjeri ikona

Upotrijebite ih u gumbima, grupama gumba za alatnu traku, navigaciju ili unose obrazaca ispred.

Gumbi

Grupa gumba na alatnoj traci gumba
  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>
Padajući izbornik u grupi gumba
Korisnik 
  1. <div class = "btn-group" > 
  2.   <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> Korisnik </a>   
  3.   <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>    
  4.   <ul class = "padajući izbornik" > 
  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> Zabrani </a></li>  
  8.     <li class = "divider" ></li> 
  9.     <li><a href = "#" ><i class = "i" ></i> Postavi administratora </a></li>  
  10.   </ul>
  11. </div>
Veličine gumba
Zvijezda Zvijezda Zvijezda 
  1. <a class = "btn btn-large" href = "#" ><i class = "icon-star" ></i> Zvjezdica </a>   
  2. <a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i> Zvjezdica </a>   
  3. <a class = "btn btn-mini" href = "#" ><i class = "icon-star" ></i> Zvjezdica </a>

Navigacija

  1. <ul class = "nav nav-list" > 
  2.   <li class = "active" ><a href = "#" ><i class = "icon-home icon-white" ></i> Početna </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 obrazaca

  1. <div class = "control-group" > 
  2.   <label class = "control-label" for = "inputIcon" > Adresa e-pošte </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>