Na vrhu skele, osnovni HTML elementi stilizirani su i poboljšani proširivim klasama kako bi pružili svjež, dosljedan izgled i dojam.
Cijela tipografska mreža temelji se na dvije Less varijable u našoj datoteci variables.less: @baseFontSizei @baseLineHeight. Prva je osnovna veličina fonta koja se koristi u cijelom tekstu, a druga je osnovna visina retka.
Koristimo te varijable i nešto matematike za stvaranje margina, ispuna i visina redaka svih naših tipova i više.
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 odlomak dodavanjem .lead.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
| Element | Korištenje | Neobavezno |
|---|---|---|
<strong> |
Za naglašavanje isječka teksta s važnim | Nijedan |
<em> |
Za naglašavanje isječka teksta s naglaskom | Nijedan |
<abbr> |
Prelama kratice i akronime za prikaz proširene verzije pri lebdenju | Uključi izborni .initialismclass za kratice velikim slovima. |
<address> |
Za kontakt informacije za svog najbližeg pretka ili cjelokupno djelo | Sačuvajte oblikovanje završavajući sve retke sa<br> |
Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Mecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.
Napomena: Slobodno koristite <b>i <i>u HTML5, ali njihova se upotreba malo promijenila. <b>namijenjen je isticanju riječi ili fraza bez prenošenja dodatne važnosti, dok <i>je uglavnom za glas, tehničke izraze itd.
Evo dva primjera kako se <address>oznaka može koristiti:
Kratice s titleatributom imaju svijetlu točkastu donju granicu i pokazivač pomoći pri lebdenju. To korisnicima daje dodatnu naznaku da će nešto biti prikazano dok lebdite.
Dodajte initialismklasu kratici kako biste povećali tipografski sklad dajući joj malo manju veličinu teksta.
HTML je najbolja stvar od rezanog kruha.
Skraćenica riječi atribut je attr .
| Element | Korištenje | Neobavezno |
|---|---|---|
<blockquote> |
Element na razini bloka za citiranje sadržaja iz drugog izvora | Dodajte .pull-lefti .pull-rightklase za plutajuće opcije |
<small> |
Neobavezni element za dodavanje navoda usmjerenog prema korisniku, obično autora s naslovom djela | Stavite <cite>oko naslova ili imena izvora |
Da biste uključili navodnik, omotajte <blockquote>bilo koji HTML kao navodnik. Za izravne citate preporučujemo <p>.
Uključite izborni <small>element za citiranje izvora i dobit ćete crticu em —ispred njega radi stiliziranja.
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis. </p>
- <small> Netko poznat </small>
- </blockquote>
Zadani blok citati stilizirani su ovako:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.
Netko poznat u radu
Za pomicanje blok citata na desnu stranu dodajte class="pull-right":
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.
Netko poznat u radu
<ul>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
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.
Zamotajte ugrađene isječke koda s <code>.
- Na primjer , <code> odjeljak </ code > trebao bi biti omotan kao inline .
Koristite <pre>za više redaka koda. Obavezno izbjegnite sve uglaste zagrade u kodu radi ispravnog prikazivanja.
<p>Uzorak teksta ovdje...</p>
- <pre>
- <p>Primjer teksta ovdje...</p>
- </pre>
Napomena: Vodite računa da kod unutar <pre>oznaka bude š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.
Uzmite isti <pre>element i dodajte dvije izborne klase za poboljšano iscrtavanje.
- <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.
| 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) Mora se koristiti unutar a <thead> |
<caption> |
Opis ili sažetak onoga što tablica sadrži, posebno korisno za čitače zaslona |
- <stol>
- <head>
- <tr>
- <th> … </th>
- <th> … </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td> … </td>
- <td> … </td>
- </tr>
- </tbody>
- </table>
| Ime | Klasa | Opis |
|---|---|---|
| Zadano | Nijedan | Nema stilova, samo stupci i redovi |
| Osnovni, temeljni | .table |
Samo vodoravne linije između redaka |
| Obrubljena | .table-bordered |
Zaokružuje kutove i dodaje vanjski rub |
| Zebra-pruga | .table-striped |
Dodaje svijetlo sivu boju pozadine neparnim redovima (1, 3, 5 itd.) |
| Kondenzovan | .table-condensed |
Reže okomito ispunjavanje na pola, od 8 px do 4 px, unutar svih elemenata tdith |
Tablice se automatski stiliziraju sa samo nekoliko rubova kako bi se osigurala čitljivost i zadržala struktura. Uz 2.0, .tableklasa je obavezna.
- <table class = "table" >
- …
- </table>
| # | Ime | Prezime | Korisničko ime |
|---|---|---|---|
| 1 | Ocjena | Otto | @mdo |
| 2 | Jakovu | Thornton | @mast |
| 3 | Larry | ptica | @cvrkut |
Budite malo fensi sa svojim stolovima dodavanjem zebrastih pruga—samo dodajte .table-stripedklasu.
Napomena: prugaste tablice koriste :nth-childCSS selektor i nisu dostupne u IE7-IE8.
- <table class = "table table-striped" >
- …
- </table>
| # | Ime | Prezime | Korisničko ime |
|---|---|---|---|
| 1 | Ocjena | Otto | @mdo |
| 2 | Jakovu | Thornton | @mast |
| 3 | Larry | ptica | @cvrkut |
Dodajte obrube oko cijelog stola i zaobljene kutove u estetske svrhe.
- <table class = "table table-bordered" >
- …
- </table>
| # | Ime | Prezime | Korisničko ime |
|---|---|---|---|
| 1 | Ocjena | Otto | @mdo |
| Ocjena | Otto | @getbootstrap | |
| 2 | Jakovu | Thornton | @mast |
| 3 | Ptica Larry | @cvrkut | |
Učinite svoje tablice kompaktnijima dodavanjem .table-condensedklase za rezanje razmaka ćelija tablice na pola (s 8px na 4px).
- <table class = "table table-condensed" >
- …
- </table>
| # | Ime | Prezime | Korisničko ime |
|---|---|---|---|
| 1 | Ocjena | Otto | @mdo |
| 2 | Jakovu | Thornton | @mast |
| 3 | Ptica Larry | @cvrkut | |
Slobodno kombinirajte bilo koju od klasa tablice kako biste postigli različite izglede koristeći bilo koju od dostupnih klasa.
- <table class = "table table-striped table-bordered table-condensed" >
- ...
- </table>
| Puno ime | |||
|---|---|---|---|
| # | Ime | Prezime | Korisničko ime |
| 1 | Ocjena | Otto | @mdo |
| 2 | Jakovu | Thornton | @mast |
| 3 | Ptica Larry | @cvrkut | |
Najbolji dio obrazaca u Bootstrapu je taj što svi vaši unosi i kontrole izgledaju sjajno bez obzira na to kako ih izgradite u svom označavanju. Nije potreban suvišan HTML, ali mi nudimo uzorke za one kojima je to potrebno.
Složeniji 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čite vrste 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 biste očekivali. Ali također dolazi s nizom prilagođenih komponenti kao što su pridodani i pridodani ulazi i podrška za popise potvrdnih okvira.
Stanja poput pogreške, upozorenja i uspjeha uključena su za svaku vrstu kontrole obrasca. Također su uključeni stilovi za onemogućene kontrole.
Bootstrap pruža jednostavno označavanje i stilove za četiri stila uobičajenih web obrazaca.
| Ime | Klasa | Opis |
|---|---|---|
| Okomito (zadano) | .form-vertical (nije obavezno) |
Naslagane, lijevo poravnate oznake preko kontrola |
| U redu | .form-inline |
Lijevo poravnata oznaka i kontrole umetnutih blokova za kompaktni stil |
| traži | .form-search |
Ekstra zaobljeni unos teksta za tipičnu estetiku pretraživanja |
| Horizontalno | .form-horizontal |
Plutajuće oznake ulijevo, desno poravnate u istom retku kao i kontrole |
Pametne i lagane zadane postavke bez dodatnih oznaka.
- <form class = "well" >
- <label> Naziv oznake </label>
- <input type = "text" class = "span3" placeholder = "Upišite nešto…" >
- <span class = "help-block" > Primjer teksta pomoći na razini bloka ovdje. </span>
- <label class = "checkbox" >
- <input type = "checkbox" > Pogledaj 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" > Traži </button>
- </form>
Dodajte .form-inlinefinoći okomito poravnanje i razmak kontrola obrazaca.
- <form class = "well form-inline" >
- <input type = "text" class = "input-small" placeholder = "Email" >
- <input type = "password" class = "input-small" placeholder = "Password" >
- <label class = "checkbox" >
- <input type = "checkbox" > Zapamti me
- </label>
- <button type = "submit" class = "btn" > Prijavite se </button>
- </form>
Desno su prikazane sve zadane kontrole obrazaca koje podržavamo. Evo popisa s grafičkim oznakama:
S obzirom na gornji primjer izgleda obrasca, ovdje je oznaka povezana s prvom ulaznom i kontrolnom grupom. Klase .control-group, .control-label, i .controlspotrebne su za stiliziranje.
- <form class = "form-horizontal" >
- <set polja>
- <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žavajući tekst pomoći </p>
- </div>
- </div>
- </fieldset>
- </form>
disabledBootstrap ima stilove za fokusirana i stanja podržana preglednikom . Uklanjamo zadani Webkit outlinei box-shadowna njegovo mjesto primjenjujemo za :focus.
Također uključuje stilove provjere valjanosti za pogreške, upozorenja i uspjeh. Za korištenje dodajte klasu pogreške u okruženje .control-group.
- <set polja
- klasa = "pogreška kontrolne grupe" >
- …
- </fieldset>
Grupe unosa—s pridodanim ili pridodanim tekstom—omogućuju jednostavan način za davanje više konteksta vašim unosima. Sjajni primjeri uključuju znak @ za korisnička imena na Twitteru ili $ za financije.
Sve do v1.4, Bootstrap je zahtijevao dodatno označavanje oko potvrdnih okvira i radija za njihovo slaganje. Sada, to je jednostavna stvar ponavljanja <label class="checkbox">koji prekriva <input type="checkbox">.
Podržani su i ugrađeni potvrdni okviri i radio stanice. Samo dodajte .inlinebilo kojem .checkboxili .radioi gotovi ste.
Da biste koristili unose ispred ili dodavanja u inline obliku, obavezno stavite .add-oni inputu isti redak, bez razmaka.
Da biste dodali tekst pomoći za svoje unose obrasca, uključite umetnuti tekst pomoći <span class="help-inline">ili blok teksta pomoći <p class="help-block">iza elementa unosa.
Umjesto da svaka ikona bude dodatni zahtjev, sastavili smo ih u sprite — hrpu slika u jednoj datoteci koja koristi CSS za pozicioniranje slika s background-position. Ovo je ista metoda koju koristimo na Twitter.com i dobro nam je uspjela.
Sve klase ikona imaju prefiks .icon-za pravilan prostor imena i opseg, slično kao i druge naše komponente. To će pomoći u izbjegavanju sukoba s drugim alatima.
Glyphicons nam je odobrio korištenje seta Halflings u našem alatu otvorenog koda sve dok ovdje u dokumentima pružimo vezu i kredit. Razmislite o tome da učinite isto u svojim projektima.
Bootstrap koristi <i>oznaku za sve ikone, ali 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>
Za svoje ikone možete birati između 140 klasa. Samo dodajte <i>oznaku s pravim klasama i gotovi ste. Potpuni popis možete pronaći u sprites.less ili upravo ovdje u ovom dokumentu.
Glavu gore! Kada koristite tekstualne nizove pored, kao u gumbima ili navigacijskim vezama, svakako ostavite razmak nakon <i>oznake radi pravilnog razmaka.
Ikone su sjajne, ali gdje bi ih netko koristio? Evo nekoliko ideja:
U biti, gdje god možete staviti <i>oznaku, možete staviti i ikonu.
Upotrijebite ih u gumbima, grupama gumba za alatnu traku, navigaciju ili unose obrazaca ispred.