Typografické měřítko

Celá typografická mřížka je založena na dvou proměnných Less v našem souboru variables.less: @baseFontSizea @baseLineHeight. První je základní velikost písma použitá v celém textu a druhá je výška základního řádku.

Tyto proměnné a trochu matematiky používáme k vytváření okrajů, odsazení a výšek řádků všech našich typů a dalších.

Pří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žití 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 elitní libero, pharetra augue.

Poznámka: Klidně používejte <b>a <i>v HTML5, ale jejich použití se trochu změnilo. <b>je určen ke zvýraznění slov nebo frází, aniž by zdůrazňoval další důležitost, zatímco <i>je většinou pro hlas, technické výrazy atd.

Příklady adres

Zde jsou dva příklady použití <address>značky:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

Celé jméno
[email protected]

Příklady zkratek

Zkratky s titleatributem mají světlý tečkovaný spodní okraj a pomocný kurzor při najetí myší. To dává uživatelům další indikaci, že se při umístění kurzoru něco zobrazí.

Přidejte initialismtřídu ke zkratce, abyste zvýšili typografickou harmonii tím, že jí dáte o něco menší velikost textu.

HTML je nejlepší věc od krájeného chleba.

Zkratka slova atribut je attr .

Chcete-li zahrnout blokovou uvozovku, obtočte jako citaci <blockquote>libovolný kód HTML . Pro přímé uvozovky doporučujeme <p>.

Zahrňte volitelný <small>prvek pro citaci zdroje a dostanete —před ním em pomlčku pro účely stylingu.

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elita. Celé číslo posuere erat a ante venenatis. </p>
  <small> Někdo slavný </small>
</blockquote>

Výchozí blokové uvozovky jsou stylizovány takto:

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

Někdo slavný v Body of work

Chcete-li svou blokovou nabídku přesunout doprava, přidejte class="pull-right":

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

Někdo slavný v Body of work

Neuspořádané

<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 vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

Bez stylu

<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 vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

Objednáno

<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 vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem

Popis

<dl>

Popisné seznamy

Popisný seznam je ideální pro definování termínů.

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.

Horizontální popis

<dl class="dl-horizontal">

Popisné seznamy

Popisný seznam je ideální pro definování termínů.

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 souladu

Zabalte vložené úryvky kódu pomocí <code>.

Například < code > sekce </ code > by měla být zabalena jako vložená .  

Základní blok

Použijte <pre>pro více řádků kódu. Pro správné vykreslení nezapomeňte v kódu vynechat všechny lomené závorky.

<p>Ukázkový text zde...</p>

<před>
  <p>Ukázka textu zde...</p>
</pre>

Poznámka: Ujistěte se, že kód ve <pre>značkách držíte co nejblíže vlevo; vykreslí všechny karty.

Volitelně můžete přidat .pre-scrollabletřídu, která nastaví maximální výšku 350 pixelů a poskytne posuvník na ose y.

Google Prettify

Vezměte stejný <pre>prvek a přidejte dvě volitelné třídy pro vylepšené vykreslování.

<p> Ukázkový text zde... </p>

<pre class = "prettyprint 
     prádlo" >
  <p>Ukázka textu zde...</p>
</pre>

Stáhněte si google-code-prettify a prohlédněte si readme, jak používat.

Štítek	Popis
<table>	Obalový prvek pro zobrazení dat v tabulkovém formátu
<thead>	Prvek kontejneru pro řádky záhlaví tabulky ( <tr>) pro označení sloupců tabulky
<tbody>	Prvek kontejneru pro řádky tabulky ( <tr>) v těle tabulky
<tr>	Prvek kontejneru pro sadu buněk tabulky ( <td>nebo <th>), který se zobrazí na jednom řádku
<td>	Výchozí buňka tabulky
<th>	Speciální buňka tabulky pro popisky sloupců (nebo řádků, v závislosti na rozsahu a umístění) Musí být použita v a<thead>
<caption>	Popis nebo shrnutí toho, co tabulka obsahuje, zvláště užitečné pro čtečky obrazovky

<tabulka>
  <hlava>
    <tr>
      <th> … </th>
      <th> … </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> … </td>
      <td> … </td>
    </tr>
  </tbody>
</table>

Tabulky jsou automaticky upraveny pouze s několika okraji, aby byla zajištěna čitelnost a zachována struktura. S 2.0 je .tabletřída povinná.

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

#	Jméno	Příjmení	Uživatelské jméno
1	Označit	Otto	@mdo
2	Jacobe	Thornton	@Tlustý
3	Larry	pták	@cvrlikání

Získejte trochu fantazie se svými tabulkami přidáním pruhů zebry – stačí přidat .table-stripedtřídu.

Poznámka: Pruhované tabulky používají :nth-childselektor CSS a nejsou dostupné v IE7-IE8.

< třída tabulky = "tabulka s pruhy tabulky" > 
  …
</table>

#	Jméno	Příjmení	Uživatelské jméno
1	Označit	Otto	@mdo
2	Jacobe	Thornton	@Tlustý
3	Larry	pták	@cvrlikání

Přidejte okraje kolem celého stolu a zaoblené rohy pro estetické účely.

< třída tabulky = "tabulka ohraničená tabulkou" > 
  …
</table>

#	Jméno	Příjmení	Uživatelské jméno
1	Označit	Otto	@mdo
	Označit	Otto	@getbootstrap
2	Jacobe	Thornton	@Tlustý
3	Pták Larry		@cvrlikání

Udělejte své tabulky kompaktnější přidáním .table-condensedtřídy, která zkrátí výplň buněk tabulky na polovinu (z 8 pixelů na 4 pixely).

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

#	Jméno	Příjmení	Uživatelské jméno
1	Označit	Otto	@mdo
2	Jacobe	Thornton	@Tlustý
3	Pták Larry		@cvrlikání

Neváhejte zkombinovat kteroukoli z tříd tabulek, abyste dosáhli různého vzhledu pomocí kterékoli z dostupných tříd.

<table class = "tabulka s proužkovanou tabulkou ohraničená tabulkou-zhuštěná" > 
  ...
</table>

	Celé jméno
#	Jméno	Příjmení	Uživatelské jméno
1	Označit	Otto	@mdo
2	Jacobe	Thornton	@Tlustý
3	Pták Larry		@cvrlikání

Flexibilní HTML a CSS

Nejlepší na formulářích v Bootstrapu je to, že všechny vaše vstupy a ovládací prvky vypadají skvěle bez ohledu na to, jak je vytvoříte ve svém označení. Není vyžadován žádný nadbytečný HTML, ale poskytujeme vzory pro ty, kteří to vyžadují.

Složitější rozvržení přicházejí se stručnými a škálovatelnými třídami pro snadný styl a vazbu událostí, takže jste pokryti na každém kroku.

Čtyři rozložení v ceně

Bootstrap přichází s podporou čtyř typů rozvržení formulářů:

• Vertikální (výchozí)
• Vyhledávání
• V souladu
• Horizontální

Různé typy rozvržení formulářů vyžadují určité změny v označení, ale samotné ovládací prvky zůstávají a chovají se stejně.

Kontrolní stavy a další

Formuláře Bootstrapu obsahují styly pro všechny ovládací prvky základního formuláře, jako je vstup, textová oblast a výběr, které byste očekávali. Ale také přichází s řadou vlastních komponent, jako jsou připojené a předpřipojené vstupy a podpora seznamů zaškrtávacích políček.

Stavy jako chyba, varování a úspěch jsou zahrnuty pro každý typ ovládacího prvku formuláře. Zahrnuty jsou také styly pro zakázané ovládací prvky.

Základní forma

S v2.0 máme jednodušší a chytřejší výchozí nastavení pro styly formulářů. Žádné další značkování, pouze ovládací prvky formuláře.

Název štítku Přidružený text nápovědy!

Příklad textu nápovědy na úrovni bloku zde.

Podívej se na mě Předložit

< třída formuláře = "dobře" > 
  <label> Název štítku </label>
  <input type = "text" class = "span3" zástupný symbol = "Zadejte něco…" >   
  <span class = "help-inline" > Přidružený text nápovědy! </span> 
  <label class = "checkbox" > 
    <input type = "checkbox" > Check me out 
  </label>
  <button type = "submit" class = "btn" > Submit </button>  
</form>

Vyhledávací formulář

Odrážející výchozí styly WebKit, stačí přidat .form-searchpro extra zaoblená vyhledávací pole.

Vyhledávání

<form class = "well form-search" > 
  <input type = "text" class = "input-medium search-query" >  
  <button type = "submit" class = "btn" > Hledat </button>  
</form>

Inline formulář

Vstupy jsou na úrovni bloku pro spuštění. Pro .form-inlinea .form-horizontalpoužíváme inline-block.

Zapamatuj si mě Přihlásit se

<form class = "well form-inline" > 
  <input type = "text" class = "input-small" zástupný symbol = "E-mail" >   
  <input type = "password" class = "input-small" zástupný symbol = "Password" >   
  <label class = "checkbox" > 
    <input type = "checkbox" > Zapamatovat si mě 
  </label>
  <button type = "submit" class = "btn" > Přihlásit se </button>  
</form>

Ovládací prvky Podporuje Bootstrap

Zadávání textu

Kromě volného textu se takto zobrazí jakýkoli textový vstup HTML5.

Zaškrtávací políčko

Možnost jedna je to a to – nezapomeňte uvést, proč je to skvělé

Vyberte seznam

něco 2 3 4 5

Multicon-select

1 2 3 4 5

Vstup souboru

Textarea

Uložit změny zrušení

Příklad označení

Vzhledem k výše uvedenému příkladu rozložení formuláře je zde označení spojené s první vstupní a ovládací skupinou. Všechny třídy .control-group, .control-label, a .controlsjsou vyžadovány pro styling.

< třída formuláře = "forma-horizontální" > 
  <fieldset>
    <legend> Text legendy </legend>
    <div class = "control-group" > 
      <label class = "control-label" for = "input01" > Zadávání textu </label>  
      <div class = "controls" > 
        <input type = "text" class = "input-xlarge" id = "input01" >   
        <p class = "help-block" > Podpůrný text nápovědy </p> 
      </div>
    </div>
  </fieldset>
</form>

Co je zahrnuto

Vlevo jsou zobrazeny všechny výchozí ovládací prvky formuláře, které podporujeme. Zde je seznam s odrážkami:

• textové vstupy (text, heslo, e-mail atd.)
• zaškrtávací políčko
• rádio
• vybrat
• vícenásobný výběr
• vstup souboru
• textarea

---

Nové výchozí hodnoty s v2.0

Až do verze 1.4 používaly výchozí styly formulářů Bootstrapu horizontální rozložení. S Bootstrap 2 jsme toto omezení odstranili, abychom měli chytřejší a škálovatelnější výchozí hodnoty pro jakýkoli formulář.

Stavy řízení formuláře

Zaměřený vstup

Neupravitelný vstup

Nějaká hodnota tady

Vypnutý vstup

Zaškrtávací políčko zakázáno

Toto je deaktivované zaškrtávací políčko

Vstup s upozorněním

Něco se mohlo pokazit

Vstup s chybou

Opravte prosím chybu

Vstup s úspěchem

Woohoo!

Vybírejte s úspěchem

1 2 3 4 5 Woohoo!

Uložit změny zrušení

Přepracované stavy prohlížeče

disabledBootstrap obsahuje styly pro zaměření a stavy podporované prohlížečem . Odebereme výchozí Webkit outlinea box-shadowna jeho místo použijeme a pro :focus.

---

Ověření formuláře

Zahrnuje také styly ověřování chyb, varování a úspěchu. Chcete-li použít, přidejte třídu chyb do okolního .control-group.

<fieldset
  class = "chyba kontrolní skupiny" >
  …
</fieldset>

Rozšíření ovládacích prvků formuláře

Velikosti mřížky formuláře

1 2 3 4 5 1 2 3 4 5 1 2 3 4 5

Pro vstupní velikosti použijte stejné .span*třídy ze systému mřížky.

Alternativní velikosti

Můžete také použít statické třídy, které se nemapují do mřížky, přizpůsobují se responzivním stylům CSS nebo zohledňují různé typy ovládacích prvků (např. inputvs. select).

Předřazený text

@

Zde je text nápovědy

Přiložený text

0,00

Zde je další text nápovědy

Připojit a přidat před

$ 0,00

Připojit tlačítkem

Jít!

Vložená zaškrtávací políčka

1 2 3

Zaškrtávací políčka

Možnost jedna je to a to – nezapomeňte uvést, proč je to skvělé Možnost dvě lze také zkontrolovat a zahrnout do výsledků formuláře Možnost tři lze – ano, uhodli jste – také zkontrolovat a zahrnout do výsledků formuláře

Poznámka: Štítky obklopují všechny možnosti pro mnohem větší oblasti kliknutí a použitelnější formu.

Přepínací tlačítka

Možnost jedna je to a to – nezapomeňte uvést, proč je to skvělé Možnost dvě plechovky je něco jiného a její výběr zruší výběr možnosti jedna

Uložit změny zrušení

Připojit a přidat vstupy

Skupiny vstupů – s připojeným nebo předřazeným textem – poskytují snadný způsob, jak poskytnout více kontextu pro vaše vstupy. Mezi skvělé příklady patří znak @ pro uživatelská jména na Twitteru nebo $ pro finance.

---

Zaškrtávací políčka a rádia

Až do verze 1.4 vyžadoval Bootstrap další označení kolem zaškrtávacích políček a rádií, aby je bylo možné naskládat. Nyní je to jednoduchá záležitost zopakovat to <label class="checkbox">, co obaluje <input type="checkbox">.

Podporována jsou také zaškrtávací políčka a rádia. Stačí přidat .inlinedo libovolného .checkboxnebo .radioa máte hotovo.

---

Vložené formuláře a připojení/předřazení

Chcete-li použít vstupy prepend nebo append ve vloženém formuláři, nezapomeňte umístit .add-ona inputna stejný řádek bez mezer.

---

Text nápovědy formuláře

Chcete-li přidat text nápovědy pro vstupy z formuláře, zařaďte za vstupní prvek <span class="help-inline">text nápovědy nebo blok textu nápovědy .<p class="help-block">

Tlačítka pro akce

Podle konvence by se tlačítka měla používat pouze pro akce, zatímco pro objekty se mají používat hypertextové odkazy. Například „Stáhnout“ by mělo být tlačítko, zatímco „nedávná aktivita“ by měl být odkaz.

Styly tlačítek lze použít na cokoli s .btnaplikovanou třídou. Obvykle je však budete chtít použít pouze na prvky <a>a <button>.

Kompatibilita mezi prohlížeči

IE9 neořízne přechody pozadí na zaoblených rozích, takže jej odstraníme. Související, IE9 zneškodňuje zakázané buttonprvky, vykresluje text šedě s ošklivým stínem textu, který nemůžeme opravit.

Více velikostí

Máte rádi větší nebo menší tlačítka? Přidejte .btn-large, .btn-small, nebo .btn-minipro dvě další velikosti.

Primární akce Akce

Primární akce Akce

Primární akce Akce

Deaktivovaný stav

U zakázaných tlačítek přidejte .disabledtřídu k odkazům a disabledatribut k <button>prvkům.

Primární odkaz Odkaz

Primární tlačítko Knoflík

Hlavy vzhůru! Používáme .disabledzde třídu utility, podobnou běžné .activetřídě, takže není vyžadována žádná předpona.

Jedna třída, více značek

Použijte .btntřídu pro prvek <a>, <button>, nebo <input>.

Odkaz Knoflík

<a class = "btn" href = "" > Odkaz </a>  
<button class = "btn" type = "submit" >  
  Knoflík
</button>
<input class = "btn" type = "button"  
         hodnota = "Vstup" >
<input class = "btn" type = "submit"  
         hodnota = "Odeslat" >

Nejlepším postupem je pokusit se přiřadit prvek pro váš kontext, abyste zajistili odpovídající vykreslování napříč prohlížeči. Pokud máte input, použijte <input type="submit">pro své tlačítko an.

• ikona-sklo
• ikona-hudba
• vyhledávání ikon
• ikona-obálka
• ikona srdce
• ikona-hvězda
• ikona-hvězda-prázdná
• ikona-uživatel
• ikona-film
• ikona-th-velká
• ikona-th
• ikona-th-list
• ikona - ok
• ikonu odstranit
• ikona-přiblížení
• ikona-oddálení
• ikona vypnutá
• ikona-signál
• ikona ozubeného kola
• ikona koše
• ikona-domov
• soubor ikon
• ikona-čas
• ikona silnice
• ikona-stáhnout-alt
• ikona ke stažení
• nahrání ikon
• ikona-doručená pošta
• ikona-play-circle
• opakování ikony

• ikona-obnovení
• icon-list-alt
• ikona zámku
• ikona-vlajka
• ikona sluchátka
• ikona-vypnutí hlasitosti
• ikona-snížení hlasitosti
• ikona-zvýšit hlasitost
• ikona-qrcode
• ikona-čárový kód
• ikona-tag
• značky ikon
• kniha ikon
• ikona-záložka
• ikonový tisk
• ikona-kamera
• ikona-font
• ikona tučně
• ikona kurzíva
• ikona-výška textu
• ikona-šířka textu
• icon-align-left
• icon-align-center
• icon-align-right
• icon-align-justify
• seznam ikon
• ikona-odsazení-vlevo
• ikona-odsazení-vpravo
• ikona-facetime-video
• ikona-obrázek

• ikona tužka
• ikona-mapa-značka
• upravit ikonu
• odstín ikony
• ikona-upravit
• sdílení ikon
• ikona-kontrola
• ikona-pohyb
• ikona-krok vzad
• ikona-rychle-vzad
• ikona-zpět
• přehrávání ikon
• ikona-pauza
• ikona-stop
• ikona vpřed
• ikona-rychle vpřed
• ikona-krok vpřed
• ikona-vysunutí
• ikona-chevron-levá
• ikona-chevron-vpravo
• ikona plus znaménko
• ikona-znaménko mínus
• ikona-odstranit-podepsat
• ikona-ok-sign
• ikona-otazník-znak
• ikona-informační-znamení
• ikona-snímek obrazovky
• ikona-odstranit-kruh
• ikona-ok-kruh
• ikona-zákaz-kruh

• ikona-šipka-doleva
• ikona-šipka-vpravo
• ikona-šipka nahoru
• ikona-šipka-dolů
• ikona-sdílet-alt
• ikona-změna velikosti-plná
• ikona-změna velikosti-malá
• ikona plus
• ikona mínus
• ikona hvězdička
• ikona-vykřičník-znamení
• ikona-dárek
• ikona-list
• ikona-oheň
• ikona-oko-otevřené
• ikona-oko-zavřít
• ikona-varovné-znamení
• ikona-rovina
• ikona kalendáře
• ikona náhodná
• ikona-komentář
• ikona-magnet
• ikona se šipkou nahoru
• ikona-šipka dolů
• ikona-retweet
• ikona-nákupní-košík
• ikona-složka-zavřít
• ikona-složka-otevřená
• ikona-změna velikosti-vertikálně
• ikona-size-horizontální

Postaven jako sprite

Místo toho, abychom z každé ikony udělali zvláštní požadavek, zkompilovali jsme je do sprite – hromady obrázků v jednom souboru, který používá CSS k umístění obrázků pomocí background-position. Toto je stejná metoda, jakou používáme na Twitter.com, a osvědčila se nám.

Všechny třídy ikon jsou opatřeny předponou .icon-pro správný jmenný prostor a rozsah, podobně jako naše ostatní komponenty. To pomůže vyhnout se konfliktům s jinými nástroji.

Společnost Glyphicons nám umožnila používat sadu Halflings v naší sadě nástrojů s otevřeným zdrojovým kódem, pokud zde v dokumentaci poskytneme odkaz a poděkování. Zvažte totéž ve svých projektech.

Jak používat

Bootstrap používá <i>značku pro všechny ikony, ale nemají třídu velkých písmen – pouze sdílenou předponu. Chcete-li použít, umístěte následující kód téměř kamkoli:

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

K dispozici jsou také styly pro obrácené (bílé) ikony, připravené s jednou extra třídou:

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

Pro své ikony si můžete vybrat ze 120 tříd. Stačí přidat <i>štítek se správnými třídami a máte hotovo. Úplný seznam najdete na sprites.less nebo přímo zde v tomto dokumentu.

Hlavy vzhůru! Při použití vedle textových řetězců, jako jsou tlačítka nebo navigační odkazy, ponechejte za <i>tagem mezeru pro správné rozestupy.

Případy užití

Ikony jsou skvělé, ale kde by se daly použít? Zde je několik nápadů:

• Jako vizuály pro navigaci na postranním panelu
• Pro navigaci řízenou čistě ikonami
• Pro tlačítka, která vám pomohou vyjádřit význam akce
• S odkazy pro sdílení kontextu na cílovém místě uživatele

V podstatě kamkoli můžete umístit <i>značku, můžete umístit ikonu.

Obnovit Překontrolovat Vymazat

Komentář Nastavení Více informací

Emailová adresa