Na vrhu odra so osnovni elementi HTML oblikovani in izboljšani z razširljivimi razredi, da zagotovijo svež, dosleden videz in občutek.
Celotna tipografska mreža temelji na dveh spremenljivkah Less v naši datoteki variables.less: @baseFontSizein @baseLineHeight. Prva je osnovna velikost pisave, ki se uporablja povsod, druga pa je osnovna višina vrstice.
Te spremenljivke in nekaj matematike uporabljamo za ustvarjanje robov, oblazinjenj in višin vrstic vseh naših vrst in še več.
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.
Naj odstavek izstopa z dodajanjem .lead.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
| Element | Uporaba | Neobvezno |
|---|---|---|
<strong> |
Za poudarjanje delčka besedila s pomembnim | Noben |
<em> |
Za poudarjanje delčka besedila s poudarkom | Noben |
<abbr> |
Prelomi okrajšave in akronime za prikaz razširjene različice ob lebdenju | Vključi izbirni .initialismZa okrajšave z velikimi črkami uporabite razred. |
<address> |
Za kontaktne podatke za najbližjega prednika ali celotno delo | Ohranite oblikovanje tako, da končate vse vrstice z<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.
Opomba: lahko uporabite <b>in <i>v HTML5, vendar se je njihova uporaba nekoliko spremenila. <b>je namenjeno poudarjanju besed ali besednih zvez brez izražanja dodatnega pomena, medtem ko <i>je večinoma za glas, tehnične izraze itd.
Tu sta dva primera uporabe <address>oznake:
Okrajšave z titleatributom imajo svetlo pikčasto spodnjo obrobo in kazalec pomoči ob lebdenju. To daje uporabnikom dodatno navedbo, da bo nekaj prikazano ob premikanju miške.
Okrajšavi dodajte initialismrazred, da povečate tipografsko harmonijo, tako da ji dodelite nekoliko manjšo velikost besedila.
HTML je najboljša stvar od narezanega kruha.
Okrajšava besede atribut je attr .
| Element | Uporaba | Neobvezno |
|---|---|---|
<blockquote> |
Element na ravni bloka za citiranje vsebine iz drugega vira | Dodajte .pull-leftin .pull-rightrazredi za plavajoče možnosti |
<small> |
Izbirni element za dodajanje citata, ki ga vidi uporabnik, običajno avtorja z naslovom dela | Postavite <cite>okrog naslova ali imena vira |
Če želite vključiti narekovaj bloka, zavijte <blockquote>kateri koli HTML kot narekovaj. Za neposredne ponudbe priporočamo <p>.
Vključite izbirni <small>element za navedbo vira in pred njim boste dobili pomišljaj em —za stilske namene.
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis. </p>
- <small> Nekdo znan </small>
- </blockquote>
Privzeti narekovaji so oblikovani tako:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.
Nekdo znan v svojem delu
Če želite svoj blok citat premakniti na desno, dodajte class="pull-right":
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.
Nekdo znan v svojem delu
<ul>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
Glavo pokonci! Horizontalni opisni seznami bodo skrajšali izraze, ki so predolgi, da bi se prilegali popravku v levem stolpcu text-overflow. V ožjih pogledih se bodo spremenili v privzeto naloženo postavitev.
Zavijte vstavljene delčke kode z <code>.
- Na primer , razdelek < code> </ code > bi moral biti zavit kot vstavljeni .
Uporabite <pre>za več vrstic kode. Prepričajte se, da ste izognili morebitnim oglatim oklepajem v kodi za pravilno upodabljanje.
<p>Tukaj je primer besedila ...</p>
- <pred>
- <p>Tukaj je primer besedila ...</p>
- </pre>
Opomba: poskrbite, da bo koda znotraj <pre>oznak čim bližje levi; upodobil bo vse zavihke.
Po želji lahko dodate .pre-scrollablerazred, ki bo nastavil največjo višino 350 slikovnih pik in zagotovil drsni trak na osi y.
Vzemite isti <pre>element in dodajte dva izbirna razreda za izboljšano upodabljanje.
- <p> Vzorčno besedilo tukaj... </p>
- <pre class = "prettyprint
- linenums" >
- <p>Tukaj je primer besedila ...</p>
- </pre>
Prenesite google-code-prettify in si oglejte readme za uporabo.
| Oznaka | Opis |
|---|---|
<table> |
Ovojni element za prikaz podatkov v obliki tabele |
<thead> |
Element vsebnika za vrstice glave tabele ( <tr>) za označevanje stolpcev tabele |
<tbody> |
Vsebniški element za vrstice tabele ( <tr>) v telesu tabele |
<tr> |
Vsebniški element za niz celic tabele ( <td>ali <th>), ki se pojavi v eni vrstici |
<td> |
Privzeta celica tabele |
<th> |
Posebna celica tabele za oznake stolpcev (ali vrstic, odvisno od obsega in umestitve) Mora biti uporabljena znotraj a <thead> |
<caption> |
Opis ali povzetek tega, kar tabela vsebuje, še posebej uporabno za bralnike zaslona |
- <tabela>
- <thead>
- <tr>
- <th> … </th>
- <th> … </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td> … </td>
- <td> … </td>
- </tr>
- </tbody>
- </table>
| Ime | Razred | Opis |
|---|---|---|
| Privzeto | Noben | Brez slogov, samo stolpci in vrstice |
| Osnovno | .table |
Samo vodoravne črte med vrsticami |
| Obrobljen | .table-bordered |
Zaokroži vogale in doda zunanji rob |
| Zebra-trak | .table-striped |
Lihim vrsticam (1, 3, 5 itd.) doda svetlo sivo barvo ozadja. |
| Zgoščeno | .table-condensed |
Razpolovi navpični odmik, z 8 slikovnih pik na 4 slikovne pike, znotraj vseh elementov tdinth |
Tabele so samodejno oblikovane z le nekaj robovi, da se zagotovi berljivost in ohrani struktura. Pri 2.0 je .tablerazred obvezen.
- <table class = "table" >
- …
- </table>
| # | Ime | Priimek | Uporabniško ime |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @debela |
| 3 | Larry | ptica |
Bodite malo navdušeni nad svojimi mizami, tako da dodate zebraste črte – samo dodajte .table-stripedrazred.
Opomba: črtaste tabele uporabljajo :nth-childizbirnik CSS in ni na voljo v IE7-IE8.
- <table class = "table table-striped" >
- …
- </table>
| # | Ime | Priimek | Uporabniško ime |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @debela |
| 3 | Larry | ptica |
Dodajte obrobe okoli celotne mize in zaobljene vogale za estetske namene.
- <table class = "table table-bordered" >
- …
- </table>
| # | Ime | Priimek | Uporabniško ime |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| Mark | Otto | @getbootstrap | |
| 2 | Jacob | Thornton | @debela |
| 3 | Ptica Larry | ||
Naredite svoje tabele bolj kompaktne tako, da dodate .table-condensedrazred za prepolovitev oblazinjenja celic tabele (z 8 slikovnih pik na 4 slikovne pike).
- <table class = "table table-condensed" >
- …
- </table>
| # | Ime | Priimek | Uporabniško ime |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @debela |
| 3 | Ptica Larry | ||
Prosto kombinirajte kateri koli razred tabel, da dosežete različne videze z uporabo katerega koli od razpoložljivih razredov.
- <table class = "table table-striped table-bordered table-condensed" >
- ...
- </table>
| Polno ime | |||
|---|---|---|---|
| # | Ime | Priimek | Uporabniško ime |
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @debela |
| 3 | Ptica Larry | ||
Najboljši del obrazcev v Bootstrapu je, da so vsi vaši vnosi in kontrolniki videti odlično, ne glede na to, kako jih zgradite v svojem označevanju. Odvečen HTML ni potreben, vendar nudimo vzorce za tiste, ki ga potrebujejo.
Bolj zapletene postavitve imajo jedrnate in razširljive razrede za preprosto oblikovanje in povezovanje dogodkov, tako da ste pokriti na vsakem koraku.
Bootstrap ima podporo za štiri vrste postavitev obrazcev:
Različne vrste postavitev obrazcev zahtevajo nekaj sprememb v označevanju, vendar sami kontrolniki ostajajo in se obnašajo enako.
Bootstrapovi obrazci vključujejo sloge za vse osnovne kontrolnike obrazcev, kot so vnos, besedilno polje in izbira, ki bi jo pričakovali. Prihaja pa tudi s številnimi komponentami po meri, kot so priloženi in predpridani vnosi ter podporo za sezname potrditvenih polj.
Stanja, kot so napaka, opozorilo in uspeh, so vključena za vsako vrsto nadzora obrazca. Vključeni so tudi slogi za onemogočene kontrole.
Bootstrap ponuja preproste oznake in sloge za štiri sloge običajnih spletnih obrazcev.
| Ime | Razred | Opis |
|---|---|---|
| Navpično (privzeto) | .form-vertical (ni zahtevano) |
Zložene, levo poravnane oznake nad kontrolniki |
| V vrsti | .form-inline |
Levo poravnana oznaka in kontrolniki blokov v vrstici za kompakten slog |
| Iskanje | .form-search |
Izredno zaobljen vnos besedila za tipično estetiko iskanja |
| Vodoravno | .form-horizontal |
Lebdeče levo, desno poravnane oznake v isti vrstici kot kontrolniki |
Pametne in lahke privzete nastavitve brez dodatnih oznak.
- <form class = "well" >
- <label> Ime oznake </label>
- <input type = "text" class = "span3" placeholder = "Vnesite nekaj ..." >
- <span class = "help-block" > Tukaj je primer besedila pomoči na ravni bloka. </span>
- <label class = "checkbox" >
- <input type = "checkbox" > Preverite me
- </label>
- <button type = "submit" class = "btn" > Pošlji </button>
- </form>
Dodaj .form-searchv obrazec in .search-queryv input.
- <form class = "well form-search" >
- <input type = "text" class = "input-medium search-query" >
- <button type = "submit" class = "btn" > Iskanje </button>
- </form>
Za prefinjenost dodajte .form-inlinenavpično poravnavo in razmik kontrolnikov obrazca.
- <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" > Zapomni si me
- </label>
- <button type = "submit" class = "btn" > Prijavite se </button>
- </form>
Na desni so prikazani vsi privzeti kontrolniki obrazcev, ki jih podpiramo. Tukaj je seznam z oznakami:
Glede na zgornji primer postavitve obrazca je tukaj oznaka, povezana s prvo vnosno in nadzorno skupino. Vsi razredi .control-group, .control-label, in .controlsso potrebni za oblikovanje.
- <form class = "form-horizontal" >
- <fieldset>
- <legend> Besedilo legende </legend>
- <div class = "control-group" >
- <label class = "control-label" for = "input01" > Vnos besedila </label>
- <div class = "controls" >
- <input type = "text" class = "input-xlarge" id = "input01" >
- <p class = "help-block" > Podporno besedilo pomoči </p>
- </div>
- </div>
- </fieldset>
- </form>
disabledBootstrap vsebuje sloge za osredotočena in stanja , ki jih podpira brskalnik . Odstranimo privzeti Webkit outlinein namesto njega uporabimo a box-shadowza :focus.
Vključuje tudi sloge preverjanja napak, opozoril in uspeha. Za uporabo dodajte razred napak v okolico .control-group.
- <fieldset
- class = "napaka kontrolne skupine" >
- …
- </fieldset>
Skupine vnosov – z dodanim ali predpridanim besedilom – nudijo preprost način za zagotavljanje več konteksta za vaše vnose. Odlični primeri vključujejo znak @ za uporabniška imena za Twitter ali $ za finance.
Do različice 1.4 je Bootstrap zahteval dodatno oznako okoli potrditvenih polj in radijskih postaj, da jih je zložil. Zdaj je preprosto ponavljanje, <label class="checkbox">ki ovije <input type="checkbox">.
Podprta so tudi vgrajena potrditvena polja in radijski sprejemniki. Samo dodajte .inlinekateremu koli .checkboxali .radioin končali ste.
Če želite uporabiti vnose za dodajanje ali dodajanje v obliki v vrstici, ne pozabite postaviti .add-onin inputv isto vrstico, brez presledkov.
Če želite dodati besedilo pomoči za vnose v obrazec, vključite besedilo pomoči v vrstici z <span class="help-inline">ali blok besedila pomoči z <p class="help-block">za elementom vnosa.
Namesto da bi bila vsaka ikona dodatna zahteva, smo jih sestavili v sprite – kup slik v eni datoteki, ki uporablja CSS za pozicioniranje slik z background-position. To je ista metoda, ki jo uporabljamo na Twitter.com in se nam je dobro obnesla.
Vsi razredi ikon imajo predpono .icon-za pravilen imenski prostor in obseg, podobno kot naše druge komponente. To bo pomagalo preprečiti konflikte z drugimi orodji.
Glyphicons nam je odobril uporabo nabora Halflings v našem odprtokodnem naboru orodij, če zagotovimo povezavo in kredit tukaj v dokumentih. Prosimo, razmislite o tem, da bi v svojih projektih storili enako.
Bootstrap uporablja <i>oznako za vse ikone, vendar nimajo razreda velikih in malih črk – samo skupno predpono. Za uporabo postavite naslednjo kodo skoraj kamor koli:
- <i class = "icon-search" ></i>
Na voljo so tudi slogi za obrnjene (bele) ikone, ki so pripravljeni z enim dodatnim razredom:
- <i class = "icon-search icon-white" ></i>
Za svoje ikone lahko izbirate med 140 razredi. Samo dodajte <i>oznako s pravimi razredi in pripravljeni ste. Celoten seznam najdete v sprites.less ali kar tukaj v tem dokumentu.
Glavo pokonci! Pri uporabi poleg nizov besedila, na primer pri gumbih ali navigacijskih povezavah, ne pozabite pustiti presledka za <i>oznako za pravilen razmik.
Ikone so super, ampak kje bi jih človek uporabil? Tukaj je nekaj idej:
V bistvu, kamor koli lahko postavite <i>oznako, lahko postavite ikono.
Uporabite jih v gumbih, skupinah gumbov za orodno vrstico, navigacijo ali predpriložene vnose obrazcev.