Typografická mierka

Celá typografická mriežka je založená na dvoch premenných Less v našom súbore variables.less: @baseFontSizea @baseLineHeight. Prvým je základná veľkosť písma používaná v celom texte a druhým je výška základného riadku.

Tieto premenné a trochu matematiky používame na vytváranie okrajov, výplní a výšok riadkov všetkých našich typov a ďalších.

Príklad hlavného textu

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.

Použitie dôrazu

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, pharetra augue.

Poznámka: Pokojne použite <b>a <i>v HTML5, ale ich použitie sa trochu zmenilo. <b>je určený na zvýraznenie slov alebo fráz bez vyjadrenia ďalšej dôležitosti, zatiaľ čo <i>väčšinou ide o hlas, technické výrazy atď.

Príklady adries

Tu sú dva príklady použitia <address>značky:

Príklady skratiek

Skratky sú štylizované veľkými písmenami a svetlým bodkovaným spodným okrajom. Majú tiež pomocný kurzor pri umiestnení kurzora myši, takže používatelia majú dodatočnú indikáciu, že sa pri umiestnení kurzora myši niečo zobrazí.

HTML je najlepšia vec od krájaného chleba.

Skratka slova atribút je attr .

Ak chcete zahrnúť blokovú citáciu, zabaľte ju <blockquote>do ľubovoľného kódu HTML . Pre priame cenové ponuky odporúčame <p>.

Zahrňte voliteľný <small>prvok na citovanie svojho zdroja a dostanete —pred ním pomlčku na účely úpravy.

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Celé číslo posuere erat a ante venenatis. </p>
  <small> Niekto slávny </small>
</blockquote>

Predvolené blokové úvodzovky majú takýto štýl:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Celé číslo posuere erat a ante venenatis.

Niekto slávny v Body of work

Ak chcete presunúť svoju blokovú ponuku doprava, pridajte class="pull-right":

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Celé číslo posuere erat a ante venenatis.

Niekto slávny v Body of work

Neusporiadané

<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elita
• Integer molestie lorem at massa
• Facilisis v 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 veľ
• Aenean sit amet erat nunc
• Eget porttitor lorem

Neštýlové

<ul class="unstyled">

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elita
• Integer molestie lorem at massa
• Facilisis v 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 veľ
• Aenean sit amet erat nunc
• Eget porttitor lorem

Objednané

<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elita
3. Integer molestie lorem at massa
4. Facilisis v pretium nisl aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla veľ
7. Aenean sit amet erat nunc
8. Eget porttitor lorem

Popis

<dl>

Popisné zoznamy

Zoznam popisov je ideálny na definovanie výrazov.

Euismod

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

Donec id elit non mi porta gravida at eget metus.

Porta Malesuada

Etiam porta sem malesuada magna mollis euismod.

V rade

Zabaľte vložené útržky kódu pomocou <code>.

Napríklad <code> sekcia </ code > by mala byť zabalená ako inline .  

Základný blok

Použite <pre>pre viacero riadkov kódu. Pre správne vykreslenie nezabudnite zmeniť všetky vsuvky na znaky Unicode.

<p>Ukážkový text tu...</p>

<pred>
  <p>Ukážkový text tu...</p>
</pre>

Poznámka: Kód v <pre>značkách umiestnite čo najbližšie k ľavej strane. vykreslí všetky karty.

Google Prettify

Vezmite rovnaký <pre>prvok a pridajte dve voliteľné triedy pre vylepšené vykresľovanie.

<p> Vzorový text tu... </p>

<pre class = "prettyprint 
     obliečky" >
  <p>Ukážkový text tu...</p>
</pre>

Stiahnite si google-code-prettify a pozrite si súbor readme, ako ho používať.

<tabuľka>
  <thead>
    <tr>
      <th> … </th>
      <th> … </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> … </td>
      <td> … </td>
    </tr>
  </tbody>
</table>

Tabuľky sú automaticky štylizované len s niekoľkými okrajmi, aby sa zabezpečila čitateľnosť a zachovala štruktúra. Pri verzii 2.0 je .tabletrieda povinná.

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

Urobte si trochu fantázie so svojimi tabuľkami pridaním pruhov zebry – stačí pridať .table-stripedtriedu.

Poznámka: Spritované tabuľky používajú :nth-childselektor CSS a nie sú dostupné v IE7-IE8.

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

Pridajte okraje okolo celého stola a zaoblené rohy pre estetické účely.

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

Urobte svoje tabuľky kompaktnejšími pridaním .table-condensedtriedy na zníženie výplne buniek tabuľky na polovicu (z 8 pixelov na 4 pixely).

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

Neváhajte skombinovať ktorúkoľvek z tried stolov, aby ste dosiahli odlišný vzhľad využitím ktorejkoľvek z dostupných tried.

<table class = "table-stripped table-bordered table-condensed" > 
  ...
</table>

Flexibilné HTML a CSS

Najlepšie na formulároch v Bootstrape je to, že všetky vaše vstupy a ovládacie prvky vyzerajú skvele bez ohľadu na to, ako ich v značke vytvoríte. Nevyžaduje sa žiadny nadbytočný kód HTML, ale poskytujeme vzory pre tých, ktorí to vyžadujú.

Zložitejšie rozloženia sa dodávajú so stručnými a škálovateľnými triedami pre jednoduchý štýl a viazanie udalostí, takže ste pokrytí na každom kroku.

Zahrnuté štyri rozloženia

Bootstrap prichádza s podporou štyroch typov rozložení formulárov:

• Vertikálne (predvolené)
• Vyhľadávanie
• V rade
• Horizontálne

Rôzne typy rozložení formulárov vyžadujú určité zmeny v označovaní, ale samotné ovládacie prvky zostávajú a správajú sa rovnako.

Kontrolné stavy a ďalšie

Formuláre Bootstrapu obsahujú štýly pre všetky ovládacie prvky základného formulára, ako je vstup, textová oblasť a výber, ktoré by ste očakávali. Dodáva sa však aj s množstvom vlastných komponentov, ako sú pridané a predpridané vstupy a podpora zoznamov začiarkavacích políčok.

Stavy ako chyba, varovanie a úspech sú zahrnuté pre každý typ ovládacieho prvku formulára. Zahrnuté sú aj štýly pre vypnuté ovládacie prvky.

Vo verzii 2.0 máme jednoduchšie a inteligentnejšie predvolené nastavenia pre štýly formulárov. Žiadne ďalšie značenie, iba ovládacie prvky formulára.

Odrážajú predvolené štýly WebKit, stačí pridať .form-searchďalšie zaoblené vyhľadávacie polia.

Vstupy sú na úrovni bloku na spustenie. Pre .form-inlinea .form-horizontalpoužívame inline-block.

Čo je zahrnuté

Vľavo sú zobrazené všetky predvolené ovládacie prvky formulára, ktoré podporujeme. Tu je zoznam s odrážkami:

• textové vstupy (text, heslo, e-mail atď.)
• začiarkavacie políčko
• rádio
• vyberte
• viacnásobný výber
• vstup do súboru
• textarea

Nové predvolené nastavenia s v2.0

Až do verzie 1.4 používali predvolené štýly formulárov Bootstrapu horizontálne rozloženie. S Bootstrap 2 sme toto obmedzenie odstránili, aby sme mali inteligentnejšie a škálovateľnejšie predvolené hodnoty pre akýkoľvek formulár.

Prepracované stavy prehliadača

disabledBootstrap obsahuje štýly pre zameranie a stavy podporované prehliadačom . Odstránime predvolený Webkit outlinea použijeme na box-shadowjeho miesto pre :focus.

Overenie formulára

Zahŕňa aj štýly overenia chýb, upozornení a úspechu. Ak chcete použiť, pridajte triedu chýb do okolitého súboru .control-group.

<fieldset
  class = "chyba kontrolnej skupiny" >
  …
</fieldset>

Pridať a pridať vstupy

Skupiny vstupov – s pripojeným alebo predpridaným textom – poskytujú jednoduchý spôsob, ako poskytnúť vašim vstupom viac kontextu. Medzi skvelé príklady patrí znak @ pre používateľské mená na Twitteri alebo $ pre financie.

Zaškrtávacie políčka a rádiá

Až do verzie 1.4 vyžadoval Bootstrap dodatočné označenie okolo začiarkavacích políčok a rádií, aby ich naskladal. Teraz je to jednoduchá záležitosť zopakovať to <label class="checkbox">, čo obaluje <input type="checkbox">.

Podporované sú aj začiarkavacie políčka a rádiá. Stačí pridať .inlinedo ľubovoľného .checkboxalebo .radioa máte hotovo.

Vložené formuláre a pripojiť/predpísať

Ak chcete použiť vstupy na začiatok alebo na pripojenie v riadkovom formulári, nezabudnite umiestniť .add-ona inputna rovnaký riadok bez medzier.

Text pomocníka formulára

Ak chcete pridať pomocný text pre vstupy z formulára, začleňte vložený pomocný text s <span class="help-inline">alebo blok pomocného textu <p class="help-block">za prvok vstupu.

Tlačidlá pre akcie

Podľa konvencie by sa tlačidlá mali používať iba na akcie, zatiaľ čo hypertextové odkazy sa majú používať na objekty. Napríklad „Stiahnuť“ by malo byť tlačidlo, zatiaľ čo „nedávna aktivita“ by mal byť odkaz.

Pre kotvy a formy

Štýly tlačidiel možno použiť na čokoľvek s .btnaplikovaným. Zvyčajne ich však budete chcieť použiť iba na prvky <a>a <button>.

Poznámka: Všetky tlačidlá musia obsahovať .btntriedu. <button>Štýly tlačidiel a prvky by sa mali použiť <a>kvôli konzistencii.

Viaceré veľkosti

Máte chuť na väčšie alebo menšie tlačidlá? Pustite sa do toho!

Primárna akcia Akcia

Primárna akcia Akcia

Deaktivovaný stav

Pre deaktivované tlačidlá použite .btn-disabledpre odkazy a :disabledpre <button>prvky.

Primárna akcia Akcia

Primárna akcia Akcia

Kompatibilita medzi prehliadačmi

V IE9 vynecháme prechod na všetkých tlačidlách v prospech zaoblených rohov, pretože IE9 neorezáva prechody pozadia do rohov.

Súvisiace, IE9 zneškodňuje deaktivované buttonprvky, vykresľuje text sivou farbou s nepríjemným tieňom textu – žiaľ, nemôžeme to opraviť.

Postavený ako sprite

Namiesto toho, aby sme z každej ikony urobili dodatočnú požiadavku, skompilovali sme ich do sprite – hromady obrázkov v jednom súbore, ktorý používa CSS na umiestnenie obrázkov pomocou background-position. Ide o rovnakú metódu, akú používame na Twitter.com, a osvedčila sa nám.

Všetky triedy ikon majú predponu .icon-pre správne rozmiestnenie názvov a rozsah, podobne ako naše ostatné komponenty. To pomôže vyhnúť sa konfliktom s inými nástrojmi.

Spoločnosť Glyphicons nám umožnila používať sadu Halflings v našej súprave nástrojov s otvoreným zdrojovým kódom, pokiaľ tu v dokumentoch poskytneme odkaz a kredit. Zvážte to isté vo svojich projektoch.

Ako použiť

Vo verzii 2.0.0 sme sa rozhodli používať <i>značku pre všetky naše ikony, ale nemajú triedu veľkých a malých písmen – iba zdieľanú predponu. Ak chcete použiť, umiestnite nasledujúci kód takmer kdekoľvek:

<i class = "icon-search" ></i> 

K dispozícii sú aj štýly pre obrátené (biele) ikony, pripravené s jednou extra triedou:

<i class = "ikona-vyhľadávanie ikon-biela" ></i> 

Pre svoje ikony si môžete vybrať zo 120 tried. Stačí pridať <i>štítok so správnymi triedami a je to. Úplný zoznam nájdete na sprites.less alebo priamo tu v tomto dokumente.

Prípady použitia

Ikony sú skvelé, ale kde by sa dali použiť? Tu je niekoľko nápadov:

• Ako vizuály pre navigáciu na bočnom paneli
• Pre čisto ikonovú navigáciu
• Pre tlačidlá, ktoré vám pomôžu vyjadriť význam akcie
• S odkazmi na zdieľanie kontextu na cieľovom mieste používateľa

V podstate kamkoľvek môžete umiestniť <i>značku, môžete umiestniť ikonu.

Obnoviť Odhlásiť sa Odstrániť

Komentujte nastavenie Viac informácií