Bootstrap

Base CSS

Osnovni HTML elementi stilizovani i poboljšani proširivim klasama.

Tipografija

Naslovi

Svi HTML naslovi <h1>su <h6>dostupni.

h1. Naslov 1

h2. Naslov 2

h3. Naslov 3

h4. Naslov 4

h5. Naslov 5
h6. Naslov 6

Body copy

Bootstrap-ova globalna zadana vrijednost je font-size14px , sa 20px . Ovo se primjenjuje na i sve paragrafe. Osim toga, (paragrafi) dobijaju donju marginu od polovine svoje visine linije (10px po defaultu).line-height<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.

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

Kopija glavnog tijela

Istaknite pasus dodavanjem .lead.

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

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

Izgrađen sa manje

Tipografska skala je zasnovana na dvije MANJE varijable u varijablama.less : @baseFontSizei @baseLineHeight. Prva je osnovna veličina fonta koja se koristi u cijelom, a druga je visina osnovne linije. Koristimo te varijable i neku jednostavnu matematiku da kreiramo margine, ispune i visine linija svih naših tipova i još mnogo toga. Prilagodite ih i Bootstrap se prilagođava.

Naglasak

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

<small>

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

Ovaj red teksta treba da se tretira kao sitna slova.

<p> <small> Ovaj red teksta treba da se tretira kao sitna slova. </small> </p>

Bold

Za isticanje isječka teksta sa većom težinom fonta.

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

<strong> prikazano kao podebljani tekst </strong>

Kurziv

Za isticanje isječka teksta kurzivom.

Sljedeći isječak teksta prikazan je kao kurziv tekst .

<em> prikazano kao kurziv tekst </em>

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

Klase poravnanja

Lako poravnajte tekst sa komponentama pomoću klasa poravnanja teksta.

Lijevo poravnat tekst.

Centrirano poravnat tekst.

Desno poravnat tekst.

  1. <p class = "text-left" > Lijevo poravnat tekst. </p> 
  2. <p class = "text-center" > Tekst poravnat po sredini. </p> 
  3. <p class = "text-right" > Desno poravnat tekst. </p>

Naglasne klase

Prenesite značenje kroz boju uz pregršt uslužnih klasa za naglašavanje.

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>

Skraćenice

Stilizirana implementacija HTML <abbr>elementa za skraćenice i akronime za prikaz proširene verzije pri lebdenju. Skraćenice s titleatributom imaju donji rub sa svijetlim tačkama i kursor pomoći pri lebdenju, pružajući dodatni kontekst pri lebdenju.

<abbr>

Za prošireni tekst pri dugom zadržavanju miša iznad kratice, uključite titleatribut.

Skraćenica riječi atribut je attr .

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

<abbr class="initialism">

Dodajte .initialismskraćenici za malo manju veličinu fonta.

HTML je najbolja stvar od narezanog kruha.

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

Adrese

Predstavite kontakt podatke za najbližeg pretka ili kompletan rad.

<address>

Sačuvajte formatiranje završavajući sve redove sa <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, Suite 600 <br>
  4.   San Francisco, CA 94107 <br>
  5.   <abbr title = "Telefon" > 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>

Blockquotes

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

Zadani blok citat

Zamotajte <blockquote>bilo koji HTML kao citat. Za direktne 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 na standardnom blok citatu.

Imenovanje izvora

Dodajte <small>oznaku za identifikaciju izvora. Umotajte ime izvornog djela u <cite>.

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

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

Alternativni prikazi

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

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

Neko poznat u naslovu izvora 
  1. <blockquote class = "povuci-desno" > 
  2.   ...
  3. </blockquote>

Liste

Neuređeno

Spisak stavki u kojima redosled nije izričito bitan.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer 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

Lista stavki u kojima je redoslijed izričito bitan.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer 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>

Unstyled

Uklonite podrazumevani list-stylei levi padding na stavkama liste (samo za neposrednu decu).

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer 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

Postavite sve stavke liste u jednu liniju sa inline-blocki nekim laganim dopunama.

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

Opis

Lista pojmova sa njihovim pridruženim opisima.

Liste opisa
Lista opisa je savršena 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

Postavite termine i opise <dl>jedan pored drugog.

Liste opisa
Lista opisa je savršena 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!Horizontalne liste opisa će skratiti pojmove koji su predugački da bi stali u ispravku lijevog stupca text-overflow. U užim okvirima za prikaz, oni će se promijeniti u zadani naslagani izgled.

Kod

U redu

Zamotajte umetnute isječke koda sa <code>.

Na primjer, <section>treba biti umotan kao inline. 
  1. Na primjer , <code> & lt ; odjeljak & gt ;</ code > treba biti umotan kao inline .

Osnovni blok

Koristi <pre>se za više redova koda. Obavezno izbacite sve ugaone zagrade u kodu radi pravilnog prikazivanja.

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

Glavu gore!Obavezno držite kod unutar <pre>tagova što bliže lijevoj strani; to će prikazati sve kartice.

Opciono možete dodati .pre-scrollableklasu koja će postaviti maksimalnu visinu od 350px i obezbediti traku za pomeranje po y osi.

Stolovi

Zadani stilovi

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

# Ime Prezime Korisničko ime
1 Mark Otto @mdo
2 Jacob Thornton @debeo
3 Larry ptica @twitter 
  1. <table class = "table" > 
  2.   …
  3. </table>

Izborna nastava

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

.table-striped

Dodaje zebraste pruge u bilo koji red tabele u okviru <tbody>CSS :nth-childselektora (nije dostupno u IE7-8).

# Ime Prezime Korisničko ime
1 Mark Otto @mdo
2 Jacob Thornton @debeo
3 Larry ptica @twitter 
  1. <table class = "table table-striped" > 
  2.   …
  3. </table>

.table-bordered

Dodajte ivice i zaobljene uglove tablici.

# Ime Prezime Korisničko ime
1 Mark Otto @mdo
Mark Otto @getbootstrap
2 Jacob Thornton @debeo
3 Larry the Bird @twitter 
  1. <table class = "table table-bordered" > 
  2.   …
  3. </table>

.table-hover

Omogućite stanje lebdenja na redovima tabele unutar <tbody>.

# Ime Prezime Korisničko ime
1 Mark Otto @mdo
2 Jacob Thornton @debeo
3 Larry the Bird @twitter 
  1. <table class = "table table-hover" > 
  2.   …
  3. </table>

.table-condensed

Čini stolove kompaktnijima rezanjem ćelija na pola.

# Ime Prezime Korisničko ime
1 Mark Otto @mdo
2 Jacob Thornton @debeo
3 Larry the Bird @twitter 
  1. <tablica class = "tabela tablica-kondenzirana" > 
  2.   …
  3. </table>

Opcione klase redova

Koristite kontekstualne klase za bojenje redova tablice.

Klasa Opis
.success Označava uspješnu ili pozitivnu akciju.
.error Ukazuje na opasnu ili potencijalno negativnu radnju.
.warning Označava upozorenje na koje bi možda trebalo obratiti pažnju.
.info Koristi se kao alternativa zadanim stilovima.
# Proizvod Plaćanje preuzeto Status
1 TB - Mjesečno 01.04.2012 Odobreno
2 TB - Mjesečno 04.02.2012 Odbijeno
3 TB - Mjesečno 03.04.2012 Na čekanju
4 TB - Mjesečno 04.04.2012 Pozovite da potvrdite 
  1. ...
  2.   < tr class = "uspjeh" >
  3.     <td> 1 < /td>
  4.     <td>TB - mjesečno</ td >
  5.     <td> 01 / 04 / 2012 < /td>
  6.     <td>Odobreno</ td >
  7.   </ tr >
  8. ...

Podržano označavanje tabele

Lista podržanih HTML elemenata tabele i kako ih treba koristiti.

Tag Opis
<table> Element omotača za prikaz podataka u tabelarnom formatu
<thead> Element kontejnera za redove zaglavlja tabele ( <tr>) za označavanje kolona tabele
<tbody> Element kontejnera za redove tabele ( <tr>) u telu tabele
<tr> Element kontejnera za skup ćelija tabele ( <td>ili <th>) koji se pojavljuje u jednom redu
<td> Zadana ćelija tabele
<th> Posebna ćelija tabele za oznake kolone (ili reda, u zavisnosti od opsega i položaja).
<caption> Opis ili sažetak onoga što tabela sadrži, posebno korisno za čitače ekrana 
  1. <tablica>
  2.   <caption> ... </caption>
  3.   <glava>
  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>

Forms

Zadani stilovi

Pojedinačne kontrole obrasca dobijaju stilizovanje, ali bez ikakve potrebne osnovne klase na <form>ili velikih promena u markupu. Rezultat je naslaganih, lijevo poravnatih oznaka na vrhu kontrola obrasca.

Legenda Primjer teksta pomoći na nivou bloka ovdje. 
  1. <forma>
  2.   <fieldset>
  3.     <legend> Legenda </legend>
  4.     <label> Ime oznake </label>
  5.     <input type = "text" placeholder = "Unesite nešto..." >  
  6.     <span class = "help-block" > Primjer teksta pomoći na nivou bloka ovdje. </span> 
  7.     <label class = "checkbox" > 
  8.       <input type = "checkbox" > Provjerite me 
  9.     </label>
  10.     <button type = "submit" class = "btn" > Pošalji </button>  
  11.   </fieldset>
  12. </form>

Opcioni izgledi

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

Obrazac za pretragu

Dodajte .form-searchu obrazac i .search-queryza <input>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 formular

Dodajte .form-inlineza lijevo poravnate naljepnice i kontrole inline 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 = "Lozinka" >   
  4.   <label class = "checkbox" > 
  5.     <input type = "checkbox" > Zapamti me 
  6.   </label>
  7.   <button type = "submit" class = "btn" > Prijavite se </button>  
  8. </form>

Horizontalna forma

Desno poravnajte oznake i pomaknite ih ulijevo kako bi se pojavile na istoj liniji kao i kontrole. Zahtijeva najviše promjena oznaka iz zadanog obrasca:

  • Dodajte .form-horizontalu obrazac
  • Umotajte etikete i kontrole.control-group
  • Dodajte .control-labelna etiketu
  • 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 = "Lozinka" >   
  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 obrasca

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

Inputs

Najčešća kontrola obrasca, polja za unos zasnovana na tekstu. Uključuje podršku za sve HTML5 tipove: tekst, lozinku, datetime, datetime-local, datum, mjesec, vrijeme, sedmicu, broj, email, url, pretragu, tel i boju.

Zahtijeva korištenje navedenog typeu svakom trenutku.

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

Textarea

Kontrola obrasca koja podržava više redova teksta. Promijenite rowsatribut po potrebi.

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

Polje za potvrdu i radio

Potvrdni okviri služe za odabir jedne ili više opcija na listi, dok radio uređaji služe za odabir jedne opcije od više.

Zadano (naslagano)


  1. <label class = "checkbox" > 
  2.   <input type = "checkbox" value = "" >  
  3.   Prva opcija je ovo i ono - obavezno navedite zašto je to odlično
  4. </label>
  5.  
  6. <label class = "radio" > 
  7.   <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" checked >     
  8.   Prva opcija je ovo i ono - obavezno navedite zašto je to odlično
  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 odabirom nje poništit će se izbor opcije jedan
  13. </label>

Inline potvrdni okviri

Dodajte .inlineklasu u niz polja za potvrdu ili radija da bi se kontrole pojavile na istoj liniji.

  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>

Odabire

Koristite zadanu opciju ili navedite a multiple="multiple"da biste prikazali više opcija odjednom.


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

Proširivanje kontrola obrasca

Dodajući povrh postojećih kontrola pretraživača, Bootstrap uključuje i druge korisne komponente obrasca.

Prethodni i pridodati ulazi

Dodajte tekst ili dugmad prije ili poslije bilo kakvog unosa zasnovanog na tekstu. Imajte na umu da selectelementi ovdje nisu podržani.

Zadane opcije

Omotajte an .add-oni an inputs jednom od dvije klase da biste dodali tekst na početku ili unosu.

@

.00 
  1. <div class = "input-prepend" > 
  2.   <span class = "dodatak" > @ </span> 
  3.   <input class = "span2" id = "prependedInput" type = "text" placeholder = "Korisničko ime" >    
  4. </div>
  5. <div class = "input-append" > 
  6.   <input class = "span2" id = "appendedInput " type = "text" >   
  7.   <span class = "dodatak" > .00 </span> 
  8. </div>

Kombinovano

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

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

Dugmad umjesto teksta

Umjesto a <span>sa tekstom, koristite a .btnda priložite dugme (ili dva) na unos.

  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 meni sa dugmetom

  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 = "padajući meni" >
  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 = "padajući meni" >
  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 = "padajući meni" > 
  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 = "padajući meni" > 
  18.       ...
  19.     </ul>
  20.   </div>
  21. </div>

Segmentirane padajuće grupe

  1. <forma>
  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 pretragu

  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 relativne klase veličine poput .input-largeili uskladite svoje unose sa veličinama stupaca mreže pomoću .span*klasa.

Blokirajte nivoe ulaza

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

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

Relativna veličina

  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, mijenjat ćemo upotrebu ovih relativnih ulaznih klasa kako bi odgovarale našim veličinama gumba. Na primjer, .input-largepovećat će padding i veličinu fonta unosa.

Dimenzioniranje mreže

Koristite .span1do .span12za ulaze koji odgovaraju istim veličinama stupaca 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. </select>
  7. <select class = "span2" > 
  8.   ...
  9. </select>
  10. <select class = "span3" > 
  11.   ...
  12. </select>

Za višestruke unose mreže po redu, koristite .controls-rowklasu modifikatora za pravilan razmak . Pomiče ulaze da bi sažimao razmak, postavlja odgovarajuće margine i briše float.

  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 obrascu koji se ne može uređivati ​​bez korištenja stvarnih oznaka obrasca.

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

Radnje forme

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

  1. <div class = "form-actions" > 
  2.   <button type = "submit" class = "btn btn-primary" > Sačuvaj promjene </button>  
  3.   <button type = "button" class = "btn" > Otkaži </button>  
  4. </div>

Tekst pomoći

Ugrađena i blok 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" > Inline tekst pomoći </span>

Blokirajte pomoć

Duži blok teksta pomoći koji se prelama na novi red i može se protezati preko jednog reda. 
  1. <input type = "text" ><span class = "help-block" > Duži blok teksta pomoći koji se prelama na novi red i može se protezati preko jednog reda. </span>

Kontrolna stanja obrasca

Dajte povratne informacije korisnicima ili posjetiteljima s osnovnim povratnim informacijama o kontrolama obrasca i oznakama.

Fokus unosa

Uklanjamo podrazumevane outlinestilove na nekim kontrolama obrasca i primenjujemo a box-shadowna njegovo mesto za :focus.

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

Nevažeći ulazi

Unosi stilova putem zadane funkcionalnosti pretraživača sa :invalid. Navedite a type, dodajte requiredatribut ako polje nije opcionalno i (ako je primjenjivo) navedite apattern .

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

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

Onemogućeni ulazi

Dodajte disabledatribut na ulaz 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 validacije

Bootstrap uključuje stilove validacije za poruke o grešci, upozorenjima, informacijama i uspjehu. Da biste koristili, 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
Woohoo! 
  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 je nešto pošlo po zlu </span> 
  6.   </div>
  7. </div>
  8.  
  9. <div class = "greška kontrolne grupe" > 
  10.   <label class = "control-label" for = "inputError" > Unos s greškom </label>  
  11.   <div class = "controls" > 
  12.     <input type = "text" id = "inputError" >  
  13.     <span class = "help-inline" > Ispravite grešku </span> 
  14.   </div>
  15. </div>
  16.  
  17. <div class = "informacije o kontrolnoj grupi" > 
  18.   <label class = "control-label" for = "inputInfo" > Unos sa 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" > Unos uspješno </label>  
  27.   <div class = "controls" > 
  28.     <input type = "text" id = "inputSuccess" >  
  29.     <span class = "help-inline" > Woohoo! </span> 
  30.   </div>
  31. </div>

Dugmad

Zadana dugmad

Stilovi dugmeta se mogu primeniti na bilo šta sa .btnprimenjenom klasom. Međutim, obično ćete želeti da ih primenite samo na elemente <a>i <button>elemente za najbolji prikaz.

Dugme class="" Opis
btn Standardno sivo dugme sa gradijentom
btn btn-primary Pruža dodatnu vizualnu težinu i identificira primarnu radnju u setu dugmadi
btn btn-info Koristi se kao alternativa zadanim stilovima
btn btn-success Označava uspješnu ili pozitivnu akciju
btn btn-warning Označava da treba biti oprezan s ovom radnjom
btn btn-danger Ukazuje na opasnu ili potencijalno negativnu radnju
btn btn-inverse Alternativno tamno sivo dugme, nije vezano za semantičku radnju ili upotrebu
btn btn-link Smanjite naglasak na dugmetu tako što ćete ga učiniti da izgleda kao veza uz zadržavanje ponašanja dugmeta

Kompatibilnost među pretraživačima

IE9 ne obrezuje pozadinske gradijente na zaobljenim uglovima, pa ga uklanjamo. S tim u vezi, IE9 jankifikuje onemogućene buttonelemente, čineći tekst sivim sa gadnom senkom teksta koju ne možemo popraviti.

Veličine dugmadi

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

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

Kreirajte dugmad na nivou bloka—ona koja obuhvataju punu širinu roditelja— dodavanjem .btn-block.

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

Disabled state

Učinite da dugmad izgledaju na koja se ne može kliknuti tako što ćete ih izblijediti za 50%.

Sidreni element

Dodajte .disabledklasu <a>dugmadima.

Primarna veza Veza 

  1. <a href = "#" class = "btn btn-large btn-primary disabled" > Primarni link </a>  
  2. <a href = "#" class = "btn btn-large disabled" > Link </a>

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

Element dugmeta

Dodajte disabledatribut <button>dugmadima.

  1. <button type = "button" class = "btn btn-large btn-primary disabled" disabled = "disabled" > Primarno dugme </button>   
  2. <button type = "button" class = "btn btn-large" disabled > Dugme </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" > Dugme </button>  
  3. <input class = "btn" type = "button" value = "Input" >   
  4. <input class = "btn" type = "submit" value = "Submit" >

Kao najbolju praksu, pokušajte da uskladite element za vaš kontekst kako biste osigurali podudaranje prikazivanja u različitim pretraživačima. Ako imate input, koristite <input type="submit">za svoje dugme.

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-circle" >  
  3. <img src = "..." class = "img-polaroid" >

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

Ikone od Glyphicons

Ikona glifovi

140 ikona u obliku sprite-a, dostupnih u tamno sivoj (podrazumevano) i beloj, obezbeđuju Glyphicons .

  • staklo za ikone
  • ikona-muzika
  • ikona-pretraga
  • ikona-koverta
  • ikona-srce
  • ikona-zvezda
  • ikona-zvjezdica-prazna
  • ikona-korisnik
  • ikona-film
  • ikona-th-large
  • ikona-th
  • icon-th-list
  • ikona-ok
  • ikona-ukloni
  • ikona-zum-in
  • ikona-zum-out
  • ikona isključena
  • ikona-signal
  • icon-cog
  • ikona-smeće
  • ikona-dom
  • icon-file
  • ikona-vrijeme
  • ikona-put
  • ikona-preuzimanje-alt
  • preuzimanje ikona
  • ikona-upload
  • ikona-inbox
  • ikona-igra-krug
  • ikona-ponavljanje
  • icon-refresh
  • ikona-list-alt
  • icon-lock
  • ikona-zastava
  • ikona-slušalice
  • ikona-isključena jačina zvuka
  • ikona-smanjivanje jačine zvuka
  • ikona-pojačavanje jačine zvuka
  • ikona-qrcode
  • ikona-barkod
  • ikona-oznaka
  • ikone oznake
  • knjiga ikona
  • icon-bookmark
  • icon-print
  • ikona-kamera
  • ikona-font
  • ikona podebljano
  • ikona-kurziv
  • ikona-tekst-visina
  • ikona-tekst-širina
  • ikona-poravnaj-lijevo
  • ikona-poravnanje-centar
  • ikona-poravnati-desno
  • ikona-poravnati-justify
  • lista ikona
  • ikona-uvlaka-lijevo
  • ikona-uvlaka-desno
  • ikona-facetime-video
  • ikona-slika
  • ikona-olovka
  • ikona-mapa-marker
  • ikona-podesite
  • ikona boja
  • icon-edit
  • icon-share
  • ikona-provjera
  • icon-move
  • ikona-korak-nazad
  • ikona-brzo-nazad
  • ikona unazad
  • ikona igra
  • ikona-pauza
  • ikona-stop
  • icon-forward
  • ikona-premotavanje unaprijed
  • ikona-korak-napred
  • ikona-izbaci
  • ikona-ševron-lijevo
  • ikona-ševron-desno
  • ikona-plus-znak
  • ikona-minus-znak
  • ikona-ukloni-znak
  • ikona-ok-znak
  • ikona-pitanje-znak
  • ikona-info-znak
  • ikona-screenshot
  • ikona-ukloni-krug
  • ikona-ok-krug
  • ikona-zabrana-krug
  • ikona-strelica-levo
  • ikona-strelica-desno
  • ikona-strelica-gore
  • ikona-strelica-dole
  • ikona-dijeli-alt
  • icon-resize-full
  • ikona-promena veličine-mala
  • ikona-plus
  • ikona-minus
  • ikona-zvjezdica
  • ikona-znak uzvika
  • ikona-poklon
  • ikona-list
  • ikona-vatra
  • ikona-oko-otvoreno
  • ikona-oko-zatvori
  • ikona-znak-upozorenje
  • ikona-plan
  • ikona-kalendar
  • ikona-slučajna
  • ikona-komentar
  • ikona-magnet
  • ikona-ševron-gore
  • ikona-ševron-dole
  • ikona-retweet
  • ikona-kolica
  • ikona-folder-close
  • ikona-fascikla-otvorena
  • icon-resize-vertical
  • icon-resize-horizontal
  • ikona-hdd
  • ikona-bulhorn
  • ikona-zvono
  • ikona-sertifikat
  • ikona-palac gore
  • ikona-palac-dolje
  • ikona-ruka-desno
  • ikona-ruka-lijevo
  • ikona-ruka gore
  • ikona-dolje
  • ikona-krug-strelica-desno
  • ikona-krug-strelica-levo
  • ikona-krug-strelica-gore
  • ikona-krug-strelica-dole
  • ikona-globus
  • icon-wrench
  • ikona-zadaci
  • ikona-filter
  • ikona aktovka
  • ikona preko celog ekrana

Atribucija glifikona

Glyphicons Halflings obično nisu dostupni besplatno, ali dogovor između Bootstrapa i kreatora Glyphiconsa omogućio je ovo bez ikakvih troškova za vas kao programere. Kao zahvalnost, molimo vas da uključite opcionalnu vezu natrag na Glyphicons kad god je to praktično.

Kako koristiti

Sve ikone zahtevaju <i>oznaku sa jedinstvenom klasom, sa 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 sa jednom dodatnom klasom. Posebno ćemo primijeniti ovu klasu na lebdeći i aktivnim stanjima za navigacijske i padajuće veze.

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

Glavu gore!Kada koristite pored nizova teksta, kao u dugmadima ili navigacijskim vezama, ostavite razmak iza <i>oznake za pravilan razmak.

Primjeri ikona

Koristite ih u dugmadima, grupama dugmadi za traku sa alatkama, navigaciju ili unose u prethodnom obrascu.

Dugmad

Grupa dugmadi na alatnoj traci dugmadi
  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 meni u grupi dugmadi
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 meni" > 
  5.     <li><a href = "#" ><i class = "icon-olovka" ></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> Ban </a></li>  
  8.     <li class = "razdjelnik" ></li> 
  9.     <li><a href = "#" ><i class = "i" ></i> Postavi administratorom </a></li>  
  10.   </ul>
  11. </div>
Veličine dugmadi
Star Star Star 
  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> Biblioteka </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 obrasca

  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>