Tipografsko mjerilo

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.

Primjer teksta u tijelu

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.

Korištenje naglaska

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.

Primjeri adresa

Evo dva primjera kako se <address>oznaka može koristiti:

Primjeri kratica

Kratice su oblikovane velikim slovima i svijetlim točkastim donjim rubom. Također imaju pokazivač pomoći pri lebdenju tako da korisnici imaju dodatnu naznaku da će nešto biti prikazano pri lebdenju.

HTML je najbolja stvar od rezanog kruha.

Skraćenica riječi atribut je attr .

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

Neuređeno

<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Cijeli broj molestie lorem at massa
• Facilisis in pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

Nestilizirano

<ul class="unstyled">

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Cijeli broj molestie lorem at massa
• Facilisis in pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

Naručeno

<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Cijeli broj molestie lorem at massa
4. Facilisis in pretium nisl aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem

Opis

<dl>

Liste opisa

Popis opisa savršen je za definiranje pojmova.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

U redu

Zamotajte ugrađene isječke koda s <code>.

Na primjer , <code> odjeljak </ code > trebao bi biti omotan kao inline .  

Osnovni blok

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: obavezno držite kod unutar <pre>oznaka š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.

Google Prettify

Uzmite isti <pre>element i dodajte dvije opcijske 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.

<stol>
  <head>
    <tr>
      <th> … </th>
      <th> … </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> … </td>
      <td> … </td>
    </tr>
  </tbody>
</table>

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>

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>

Dodajte obrube oko cijelog stola i zaobljene kutove u estetske svrhe.

<table class = "table table-bordered" > 
  …
</table>

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>

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>

Fleksibilni HTML i CSS

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.

Uključena su četiri izgleda

Bootstrap dolazi s podrškom za četiri vrste izgleda obrazaca:

• Okomito (zadano)
• traži
• U redu
• Horizontalno

Različite vrste izgleda obrazaca zahtijevaju neke promjene u označavanju, ali same kontrole ostaju i ponašaju se isto.

Kontrolna stanja i više

Bootstrapovi obrasci 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.

Osnovni oblik

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>

Obrazac za pretraživanje

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>

Inline obrazac

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" >   
  <button type = "submit" class = "btn" > Idi </button>  
</form>

Primjer označavanja

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" > 
  <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žavajući tekst pomoći </p> 
      </div>
    </div>
  </fieldset>
</form>

Što je uključeno

S lijeve strane prikazane su sve zadane kontrole obrazaca koje podržavamo. Evo popisa s grafičkim oznakama:

• unos teksta (tekst, lozinka, e-pošta itd.)
• potvrdni okvir
• radio
• Odaberi
• višestruki odabir
• unos datoteke
• tekstualno područje

Nove zadane postavke s v2.0

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.

Redizajnirana stanja preglednika

disabledBootstrap ima stilove za fokusirana i stanja podržana preglednikom . Uklanjamo zadani Webkit outlinei box-shadowna njegovo mjesto primjenjujemo za :focus.

Provjera valjanosti obrasca

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.

<fieldset
  klasa = "pogreška kontrolne grupe" >
  …
</fieldset>

Unosi ispred i dodavanja

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.

Polje za potvrdu i radio

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.

Umetnuti obrasci i dodavanje/priključivanje

Da biste koristili unose ispred ili dodavanja u inline obliku, obavezno stavite .add-oni inputu isti redak, bez razmaka.

Tekst pomoći obrasca

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.

Gumbi za akcije

Kao konvencija, gumbi se trebaju koristiti samo za radnje, dok se hiperveze trebaju koristiti za objekte. Na primjer, "Preuzimanje" bi trebao biti gumb dok bi "nedavna aktivnost" trebala biti poveznica.

Stilovi gumba mogu se primijeniti na bilo što s .btnprimijenjenom klasom. Međutim, obično ćete to željeti primijeniti samo na elemente <a>i .<button>

Kompatibilnost s više preglednika

IE9 ne izrezuje pozadinske gradijente na zaobljenim kutovima, pa ga uklanjamo. S tim u vezi, IE9 jankifies onemogućene buttonelemente, pretvarajući tekst u siv s gadnom sjenkom teksta koju ne možemo popraviti.

Više veličina

Želite li veće ili manje gumbe? Dodajte .btn-large, .btn-small, ili .btn-miniza dvije dodatne veličine.

Primarno djelovanje Akcijski

Primarno djelovanje Akcijski

Primarno djelovanje Akcijski

Onesposobljeno stanje

Za onemogućene gumbe dodajte .disabledklasu vezama i disabledatribut <button>elementima.

Primarna veza Veza

Primarni gumb Dugme

Glavu gore! Ovdje koristimo .disabledkao uslužnu klasu, sličnu uobičajenoj .activeklasi, tako da nije potreban prefiks.

Jedna klasa, više oznaka

Koristite .btnklasu na elementu <a>, <button>, ili .<input>

<a class = "btn" href = "" > Veza </a>  
<button class = "btn" type = "submit" >  
  Dugme
</button>
<input class = "btn" type = "button"  
         vrijednost = "Ulaz" >
<input class = "btn" type = "submit"  
         vrijednost = "Pošalji" >

Kao najbolju praksu, pokušajte uskladiti element sa svojim kontekstom kako biste osigurali odgovarajuće prikazivanje u više preglednika. Ako imate input, upotrijebite <input type="submit">za gumb.

• ikona-čaša
• ikona-glazba
• pretraživanje ikona
• ikona-omotnica
• ikona-srce
• ikona-zvijezda
• ikona-zvijezda-prazna
• ikona-korisnik
• ikona-film
• ikona-th-velika
• ikona-th
• ikona-th-list
• ikona-ok
• ikona-ukloni
• ikona-zoom-in
• ikona-umanjivanje
• ikona isključena
• ikona-signal
• ikona-zupčanik
• ikona-smeće
• ikona-dom
• ikona-datoteka
• ikona-vrijeme
• ikona-put
• ikona-preuzimanje-alt
• ikona za preuzimanje
• slanje ikona
• ikona-inbox
• ikona-igranje-krug
• ikona-ponoviti

• ikona-osvježi
• ikona-popis-alt
• ikona-brava
• ikona-barjak
• ikona-slušalice
• ikona-isključena glasnoća
• ikona-smanjenje glasnoće
• ikona za povećanje glasnoće
• ikona-qrcode
• ikona-crtični kod
• ikona-oznaka
• oznake ikona
• knjiga ikona
• ikona-oznaka
• ispis ikona
• ikona-kamera
• ikona-font
• ikona-podebljano
• ikona-kurziv
• ikona-tekst-visina
• širina-teksta-ikone
• ikona-poravnaj-lijevo
• središte poravnanja ikona
• ikona-poravnaj-desno
• icon-align-justify
• popis ikona
• ikona-uvlaka-lijevo
• ikona-uvlaka-desno
• icon-facetime-video
• ikona-slika

• ikona-olovka
• ikona-karta-oznaka
• podešavanje ikone
• ikona-boja
• uređivanje ikona
• dijeljenje ikona
• ikona-provjera
• ikona-kretanje
• ikona-korak-natrag
• ikona-brzo-natrag
• ikona-natrag
• ikona-igra
• ikona-pauza
• ikona-stop
• ikona-naprijed
• ikona-brzo-unaprijed
• ikona-korak-naprijed
• ikona-izbacivanje
• ikona-ševron-lijevo
• ikona-ševron-desno
• ikona-plus-znak
• ikona-znak-minus
• ikona-ukloni-znak
• ikona-ok-znak
• ikona-upitnik-znak
• ikona-info-znak
• ikona-snimka zaslona
• ikona-ukloni-krug
• ikona-ok-krug
• ikona-zabrana-krug

• ikona-strelica-lijevo
• ikona-strelica-desno
• ikona-strelica-gore
• ikona-strelica-dolje
• icon-share-alt
• icon-resize-full
• icon-resize-small
• ikona-plus
• ikona-minus
• ikona-zvjezdica
• ikona-uzvičnik-znak
• ikona-dar
• ikona-list
• ikona-vatra
• ikona-oko-otvoreno
• ikona-zatvaranje očiju
• ikona-znak-upozorenje
• ikona-ravnina
• ikona-kalendar
• ikona-nasumična
• ikona-komentar
• ikona-magnet
• ikona-ševron-gore
• ikona-ševron-dolje
• ikona-retweet
• ikona-kolica-kolica
• ikona-mapa-zatvaranje
• ikona-mapa-otvorena
• icon-resize-vertical
• icon-resize-horizontal

Izgrađen kao sprite

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.

Kako koristiti

S v2.0.1, odlučili smo koristiti <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> 

Za svoje ikone možete birati između 120 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.

Slučajevi upotrebe

Ikone su sjajne, ali gdje bi ih netko koristio? Evo nekoliko ideja:

• Kao vizualni elementi za navigaciju na bočnoj traci
• Za navigaciju isključivo pomoću ikona
• Za gumbe koji pomažu prenijeti značenje radnje
• S vezama za dijeljenje konteksta na odredištu korisnika

U biti, gdje god možete staviti <i>oznaku, možete staviti i ikonu.

Osvježiti Provjeri Izbrisati

Komentar postavke Više informacija