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: @baseFontSize
i @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 ut id elit.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.
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 opcionalno title za prošireni tekst |
<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 su stilizirane velikim slovima i svijetlim tačkastim donjim rubom. Oni također imaju kursor pomoći pri lebdenju tako da korisnici imaju dodatnu indikaciju da će se nešto prikazati kada lebde.
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-left i .pull-right klase 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>
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 pretvorite sve znakove u znak unicode za pravilno prikazivanje.
<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.
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 vodoravne 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 td i th elemenata |
Tabele se automatski stiliziraju sa samo nekoliko ivica kako bi se osigurala čitljivost i zadržala struktura. Sa 2.0, .table
klasa je obavezna.
- <table class = "table" >
- …
- </table>
# | Ime | Prezime | Jezik |
---|---|---|---|
1 | Mark | Otto | CSS |
2 | Jacob | Thornton | Javascript |
3 | Stu | Dent | HTML |
Zamislite se malo sa svojim stolovima dodavanjem zebrastih pruga—samo dodajte .table-striped
klasu.
Napomena: Sprited tabele koriste :nth-child
CSS selektor i nisu dostupne u IE7-IE8.
- <table class = "table table-striped" >
- …
- </table>
# | Ime | Prezime | Jezik |
---|---|---|---|
1 | Mark | Otto | CSS |
2 | Jacob | Thornton | Javascript |
3 | Stu | Dent | HTML |
Dodajte obrube oko cijelog stola i zaobljene uglove u estetske svrhe.
- <table class = "table table-bordered" >
- …
- </table>
# | Ime | Prezime | Jezik |
---|---|---|---|
1 | Mark Otto | CSS | |
2 | Jacob | Thornton | Javascript |
3 | Stu | Dent | |
3 | Brosef | Staljin | HTML |
Učinite svoje tabele kompaktnijim dodavanjem .table-condensed
klase da biste prepolovili dopunu ćelija tabele (sa 8px na 4px).
- <table class = "table table-condensed" >
- …
- </table>
# | Ime | Prezime | Jezik |
---|---|---|---|
1 | Mark | Otto | CSS |
2 | Jacob | Thornton | Javascript |
3 | Stu | Dent | HTML |
Slobodno kombinirajte bilo koju od klasa tablica kako biste postigli drugačiji izgled korištenjem bilo koje od dostupnih klasa.
- <table class = "tabela tablica-prugasta tablica-obrubljena tablica-kondenzirana" >
- ...
- </table>
# | Ime | Prezime | Jezik |
---|---|---|---|
1 | Mark | Otto | CSS |
2 | Jacob | Thornton | Javascript |
3 | Stu | Dent | HTML |
4 | Brosef | Staljin | HTML |
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 |
Sa v2.0, imamo lakše i pametnije zadane postavke za stilove obrasca. Nema dodatnih oznaka, samo kontrole obrasca.
Odražavajući podrazumevane WebKit stilove, samo dodajte .form-search
za dodatna zaokružena polja za pretragu.
Ulazi su na nivou bloka za početak. Za .form-inline
i .form-horizontal
, koristimo inline-block.
Na lijevoj strani su prikazane sve zadane kontrole obrasca koje podržavamo. Evo liste sa nabrajanjem:
Do v1.4, Bootstrap-ovi zadani stilovi obrasca koristili su horizontalni raspored. Uz Bootstrap 2, uklonili smo to ograničenje kako bismo imali pametnije, skalabilnije zadane postavke za bilo koji oblik.
Bootstrap sadrži stilove za fokusirane i disabled
stanja podržane pretraživačem. Uklanjamo podrazumevani Webkit outline
i box-shadow
na njegovo mesto primenjujemo a 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 omotava<input type="checkbox">
.
Podržani su i inline okviri za potvrdu i radio. Samo dodajte .inline
u bilo koji .checkbox
ili .radio
i gotovi ste.
Da biste koristili unose za predočenje ili dodavanje u inline formu, obavezno postavite .add-on
i input
na 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.
:after
. U dokumentima prikazujemo svijetlocrvenu boju pozadine pri lebdenju kako bismo istakli veličinu ikone.
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.
Sa v2.0.0, odlučili smo da koristimo <i>
oznaku za sve naše 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 120 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.
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.