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 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 | 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">
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 |
S v2.0, imamo lakše i pametnije zadane postavke za stilove obrazaca. Nema dodatnog označavanja, samo kontrole obrasca.
- <form class = "well" >
- <label> Naziv oznake </label>
- <input type = "text" class = "span3" placeholder = "Upišite nešto…" >
- <span class = "help-inline" > Povezani tekst pomoći! </span>
- <label class = "checkbox" >
- <input type = "checkbox" > Pogledaj me
- </label>
- <button type = "submit" class = "btn" > Pošalji </button>
- </form>
Odražavajući zadane WebKit stilove, samo dodajte .form-searchza dodatna zaobljena polja za pretraživanje.
- <form class = "well form-search" >
- <input type = "text" class = "input-medium search-query" >
- <button type = "submit" class = "btn" > Traži </button>
- </form>
Ulazi su na razini bloka za početak. Za .form-inlinei .form-horizontalkoristimo inline-block.
- <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>
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>
S lijeve strane prikazane su sve zadane kontrole obrazaca koje podržavamo. Evo popisa s grafičkim oznakama:
Sve do v1.4, Bootstrapovi zadani stilovi obrazaca koristili su horizontalni raspored. S Bootstrapom 2 uklonili smo to ograničenje kako bismo imali pametnije, skalabilnije zadane postavke za bilo koji oblik.
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 ugrađeni tekst pomoći <span class="help-inline">ili blok teksta pomoći <p class="help-block">iza elementa unosa.
Instead of making every icon an extra request, we've compiled them into a sprite—a bunch of images in one file that uses CSS to position the images with background-position. This is the same method we use on Twitter.com and it has worked well for us.
All icons classes are prefixed with .icon- for proper namespacing and scoping, much like our other components. This will help avoid conflicts with other tools.
Glyphicons has granted us use of the Halflings set in our open-source toolkit so long as we provide a link and credit here in the docs. Please consider doing the same in your projects.
Bootstrap uses an <i> tag for all icons, but they have no case class—only a shared prefix. To use, place the following code just about anywhere:
- <i class="icon-search"></i>
There are also styles available for inverted (white) icons, made ready with one extra class:
- <i class="icon-search icon-white"></i>
There are 120 classes to choose from for your icons. Just add an <i> tag with the right classes and you're set. You can find the full list in sprites.less or right here in this document.
Heads up! When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <i> tag for proper spacing.
Icons are great, but where would one use them? Here are a few ideas:
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.