Povrh skele, osnovni HTML elementi su stilizovani i poboljšani proširivim klasama kako bi se obezbedio svež, dosledan izgled i osećaj.
Cijela tipografska mreža je zasnovana na dvije varijable Less u našoj datoteci varijabli.less: @baseFontSizei @baseLineHeight. Prva je osnovna veličina fonta koja se koristi u cijelom, a druga je visina osnovne linije.
Koristimo te varijable, i malo matematike, da kreiramo margine, dopune i visine linija svih naših tipova i još mnogo toga.
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.
Istaknite pasus dodavanjem .lead.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
| Element | Upotreba | Opciono |
|---|---|---|
<strong> |
Za isticanje isječka teksta sa važnim | Nema |
<em> |
Za isticanje isječka teksta sa naglaskom | Nema |
<abbr> |
Omotava kratice i akronime da prikaže proširenu verziju pri lebdenju | Uključite opcijski .initialismklasu za velike skraćenice. |
<address> |
Za kontakt informacije za najbližeg pretka ili cjelokupni rad | Sačuvajte formatiranje završavajući sve redove sa<br> |
Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.
Napomena: Slobodno koristite <b>i <i>u HTML5, ali njihova upotreba se malo promijenila. <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.
Evo dva primjera kako se <address>oznaka može koristiti:
Skraćenice sa titleatributom imaju donji rub sa svijetlim točkama i kursor pomoći pri lebdenju. Ovo korisnicima daje dodatnu indikaciju da će se nešto prikazati kada lebde.
Dodajte initialismklasu skraćenici da povećate tipografski sklad dajući joj nešto manju veličinu teksta.
HTML je najbolja stvar od narezanog kruha.
Skraćenica riječi atribut je attr .
| Element | Upotreba | Opciono |
|---|---|---|
<blockquote> |
Element na nivou bloka za citiranje sadržaja iz drugog izvora | Dodajte .pull-lefti .pull-rightklase za plutajuće opcije |
<small> |
Opcioni element za dodavanje citata okrenutog korisniku, obično autora s naslovom rada | Stavite <cite>oko naslova ili imena izvora |
Da biste uključili blok citat, omotajte <blockquote>bilo koji HTML kao citat. Za direktne citate preporučujemo <p>.
Uključite neobavezni <small>element za citiranje izvora i prije njega ćete dobiti em crticu —u svrhu stiliziranja.
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis. </p>
- <small> Neko poznat </small>
- </blockquote>
Zadani blok citati su stilizirani ovako:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.
Neko poznat u Body of Work
Da pomaknete svoj blok citat udesno, dodajte class="pull-right":
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.
Neko poznat u Body of Work
<ul>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
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.
Zamotajte umetnute isječke koda sa <code>.
- Na primjer , <code> odjeljak </ code > treba biti umotan kao inline .
Koristi <pre>se za više redova koda. Obavezno izbacite sve ugaone zagrade u kodu radi pravilnog prikazivanja.
<p>Primjer teksta ovdje...</p>
- <pre>
- <p>Primjer teksta ovdje...</p>
- </pre>
Napomena: Obavezno držite kod unutar <pre>oznaka što je moguće 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.
Uzmite isti <pre>element i dodajte dvije opcione klase za poboljšano prikazivanje.
- <p> Primjer teksta ovdje... </p>
- <pre class = "prettyprint
- linenums" >
- <p>Primjer teksta ovdje...</p>
- </pre>
Preuzmite google-code-prettify i pogledajte readme za korištenje.
| 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) Mora se koristiti unutar a <thead> |
<caption> |
Opis ili sažetak onoga što tabela sadrži, posebno korisno za čitače ekrana |
- <tablica>
- <glava>
- <tr>
- <th> … </th>
- <th> … </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td> … </td>
- <td> … </td>
- </tr>
- </tbody>
- </table>
| Ime | Klasa | Opis |
|---|---|---|
| Default | Nema | Nema stilova, samo kolone i redovi |
| Basic | .table |
Samo horizontalne linije između redova |
| Bordered | .table-bordered |
Zaokružuje uglove i dodaje vanjsku ivicu |
| Zebra-pruga | .table-striped |
Dodaje svijetlo sivu boju pozadine neparnim redovima (1, 3, 5, itd.) |
| Kondenzirano | .table-condensed |
Presječe vertikalni padding na pola, od 8px do 4px, unutar svih tdi thelemenata |
Tabele se automatski stiliziraju sa samo nekoliko ivica kako bi se osigurala čitljivost i zadržala struktura. Sa 2.0, .tableklasa je obavezna.
- <table class = "table" >
- …
- </table>
| # | Ime | Prezime | Korisničko ime |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @debeo |
| 3 | Larry | ptica |
Zamislite se malo sa svojim stolovima dodavanjem zebrastih pruga—samo dodajte .table-stripedklasu.
Napomena: prugaste tabele koriste :nth-childCSS selektor i nisu dostupne u IE7-IE8.
- <table class = "table table-striped" >
- …
- </table>
| # | Ime | Prezime | Korisničko ime |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @debeo |
| 3 | Larry | ptica |
Dodajte obrube oko cijelog stola i zaobljene uglove u estetske svrhe.
- <table class = "table table-bordered" >
- …
- </table>
| # | Ime | Prezime | Korisničko ime |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| Mark | Otto | @getbootstrap | |
| 2 | Jacob | Thornton | @debeo |
| 3 | Larry the Bird | ||
Učinite svoje tabele kompaktnijim dodavanjem .table-condensedklase da biste prepolovili dopunu ćelija tabele (sa 8px na 4px).
- <tablica class = "tabela tablica-kondenzirana" >
- …
- </table>
| # | Ime | Prezime | Korisničko ime |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @debeo |
| 3 | Larry the Bird | ||
Slobodno kombinirajte bilo koju od klasa tablica kako biste postigli drugačiji izgled korištenjem bilo koje od dostupnih klasa.
- <table class = "tabela sa prugastim tablicama sa obrubljenom tablicom sa kondenziranom tablicom" >
- ...
- </table>
| Puno ime | |||
|---|---|---|---|
| # | Ime | Prezime | Korisničko ime |
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @debeo |
| 3 | Larry the Bird | ||
Najbolji dio obrazaca u Bootstrapu je to što svi vaši ulazi i kontrole izgledaju sjajno bez obzira na to kako ih gradite u svojoj oznaci. Nije potreban nikakav suvišan HTML, ali pružamo obrasce za one kojima je potreban.
Komplikovaniji izgledi dolaze sa sažetim i skalabilnim klasama za jednostavno oblikovanje i povezivanje događaja, tako da ste pokriveni na svakom koraku.
Bootstrap dolazi s podrškom za četiri vrste izgleda obrazaca:
Različiti tipovi izgleda obrazaca zahtijevaju neke promjene u označavanju, ali same kontrole ostaju i ponašaju se isto.
Obrasci Bootstrapa uključuju stilove za sve osnovne kontrole obrasca kao što su unos, tekstualno područje i odabir koji očekujete. Ali takođe dolazi sa brojnim prilagođenim komponentama kao što su dodani i predodati ulazi i podrška za liste polja za potvrdu.
Stanja poput greške, upozorenja i uspjeha uključena su za svaki tip kontrole obrasca. Takođe su uključeni stilovi za onemogućene kontrole.
Bootstrap pruža jednostavne oznake i stilove za četiri stila uobičajenih web obrazaca.
| Ime | Klasa | Opis |
|---|---|---|
| Vertikalno (zadano) | .form-vertical (nije potrebno) |
Naslagane, lijevo poravnate oznake preko kontrola |
| U redu | .form-inline |
Lijevo poravnate oznake i kontrole u obliku bloka za kompaktan stil |
| Traži | .form-search |
Ekstra zaokružen unos teksta za tipičnu estetiku pretraživanja |
| Horizontalno | .form-horizontal |
Plutajući lijevo, desno poravnate oznake na istoj liniji kao i kontrole |
Pametne i lagane zadane postavke bez dodatnih oznaka.
- <form class = "well" >
- <label> Ime oznake </label>
- <input type = "text" class = "span3" placeholder = "Unesite nešto..." >
- <span class = "help-block" > Primjer teksta pomoći na nivou bloka ovdje. </span>
- <label class = "checkbox" >
- <input type = "checkbox" > Provjerite me
- </label>
- <button type = "submit" class = "btn" > Pošalji </button>
- </form>
Dodajte .form-searchu obrazac i .search-queryu input.
- <form class = "well form-search" >
- <input type = "text" class = "input-medium search-query" >
- <button type = "submit" class = "btn" > Pretraži </button>
- </form>
Dodajte .form-inlineza finoću vertikalno poravnanje i razmak kontrola obrasca.
- <form class = "well form-inline" >
- <input type = "text" class = "input-small" placeholder = "Email" >
- <input type = "password" class = "input-small" placeholder = "Lozinka" >
- <label class = "checkbox" >
- <input type = "checkbox" > Zapamti me
- </label>
- <button type = "submit" class = "btn" > Prijavite se </button>
- </form>
Na desnoj strani su prikazane sve zadane kontrole obrasca koje podržavamo. Evo liste sa nabrajanjem:
S obzirom na gornji primjer izgleda obrasca, ovdje je oznaka povezana s prvom ulaznom i kontrolnom grupom. Klase .control-group, .control-labeli .controlssve su potrebne za stiliziranje.
- <form class = "form-horizontal" >
- <fieldset>
- <legend> Tekst legende </legend>
- <div class = "control-group" >
- <label class = "control-label" for = "input01" > Unos teksta </label>
- <div class = "controls" >
- <input type = "text" class = "input-xlarge" id = "input01" >
- <p class = "help-block" > Podržani tekst pomoći </p>
- </div>
- </div>
- </fieldset>
- </form>
Bootstrap sadrži stilove za fokusirane i disabledstanja podržane pretraživačem. Uklanjamo podrazumevani Webkit outlinei primenjujemo a box-shadowna njegovo mesto za :focus.
Takođe uključuje stilove validacije za greške, upozorenja i uspeh. Da biste koristili, dodajte klasu greške okolnom .control-group.
- <fieldset
- class = "greška kontrolne grupe" >
- …
- </fieldset>
Grupe unosa—sa dodatkom ili dodatkom teksta—pružaju jednostavan način da date više konteksta za svoje unose. Sjajni primjeri uključuju znak @ za Twitter korisnička imena ili $ za finansije.
Do v1.4, Bootstrap je zahtijevao dodatne oznake oko okvira za potvrdu i radija da bi ih slagao. Sada je jednostavno ponoviti ono <label class="checkbox">što obmotava <input type="checkbox">.
Podržani su i inline okviri za potvrdu i radio. Samo dodajte .inlineu bilo koji .checkboxili .radioi gotovi ste.
Da biste koristili unose za predočenje ili dodavanje u inline formu, obavezno postavite .add-oni inputna isti red, bez razmaka.
Da biste dodali tekst pomoći za unose obrasca, uključite tekst pomoći sa <span class="help-inline">ili blok teksta pomoći <p class="help-block">nakon elementa unosa.
Umjesto da svaku ikonu učinimo dodatnim zahtjevom, mi smo ih sastavili u sprite – gomilu slika u jednoj datoteci koja koristi CSS za pozicioniranje slika sa background-position. Ovo je isti metod koji koristimo na Twitter.com i dobro nam je funkcionisao.
Sve klase ikona imaju prefiks .icon-za pravilan razmak imena i opseg, slično kao i naše druge komponente. Ovo će pomoći u izbjegavanju sukoba s drugim alatima.
Glyphicons nam je omogućio korištenje Halflings skupa u našem kompletu alata otvorenog koda sve dok pružamo vezu i kredit ovdje u dokumentima. Razmislite o tome da učinite isto u svojim projektima.
Bootstrap koristi <i>oznaku za sve ikone, ali one nemaju klasu velikih i malih slova – samo zajednički prefiks. Za korištenje, postavite sljedeći kod bilo gdje:
- <i class = "icon-search" ></i>
Dostupni su i stilovi za obrnute (bijele) ikone, pripremljene s jednom dodatnom klasom:
- <i class = "icon-search icon-white" ></i>
Postoji 140 klasa koje možete izabrati za svoje ikone. Samo dodajte <i>oznaku sa pravim klasama i spremni ste. Kompletnu listu možete pronaći u sprites.less ili ovdje u ovom dokumentu.
Glavu gore! Kada koristite pored nizova teksta, kao u dugmadima ili navigacijskim vezama, ostavite razmak iza <i>oznake za pravilan razmak.
Ikone su odlične, ali gdje bi ih koristili? Evo nekoliko ideja:
U suštini, gdje god možete staviti <i>oznaku, možete staviti ikonu.
Koristite ih u dugmadima, grupama dugmadi za traku sa alatkama, navigaciju ili unose u prethodnom obrascu.