výše

vlevo, odjet

že jo

níže

Hotlink CSS

Pro nejrychlejší a nejjednodušší začátek stačí zkopírovat tento úryvek na svou webovou stránku.

Použijte jej s méně

Jste fanouškem používání Less? Žádný problém, stačí naklonovat repo a přidat tyto řádky:

Fork na GitHubu

Stahujte, rozdvojujte, vytahujte, problémy se soubory a další pomocí oficiálního úložiště Bootstrap na Github.

Bootstrap na GitHubu »

Aktuálně v1.3.0

Dějiny

Inženýři z Twitteru historicky používali téměř jakoukoli knihovnu, kterou znali, aby splnili požadavky na front-end. Bootstrap začal jako odpověď na výzvy, které se objevily. S pomocí mnoha úžasných lidí se Bootstrap výrazně rozrostl.

Přečtěte si více na dev.twitter.com ›

Podpora prohlížeče

Bootstrap je testován a podporován v hlavních moderních prohlížečích, jako je Chrome, Safari, Internet Explorer a Firefox.

Testováno a podporováno v prohlížečích Chrome, Safari, Internet Explorer a Firefox

Nejnovější Safari
Nejnovější Google Chrome
Firefox 4+
Internet Explorer 7+
Opera 11

Co je zahrnuto

Bootstrap je dodáván s kompilovanými CSS, nekompilovanými a ukázkovými šablonami.

Javascriptové pluginy
Všechny původní soubory .less
Plně zkompilované a minifikované CSS
Kompletní dokumentace průvodce stylem
Tři ukázkové stránky s různým rozvržením

Příklady rychlého startu

Potřebujete nějaké rychlé šablony? Podívejte se na tyto základní příklady, které jsme dali dohromady:

Výchozí mřížka

Výchozí mřížkový systém poskytovaný jako součást Bootstrapu je 940px široká 16sloupcová mřížka. Je to příchuť oblíbeného mřížkového systému 960, ale bez dalšího okraje/vycpávky na levé a pravé straně.

Příklad mřížkového značení

Jak je zde znázorněno, základní rozvržení lze vytvořit se dvěma „sloupci“, z nichž každý zahrnuje řadu ze 16 základních sloupů, které jsme definovali jako součást našeho mřížkového systému. Další varianty naleznete v příkladech níže.

<div class = "row" > 
  <div class = "span6" > 
    ...
  </div>
  <div class = "span10" > 
    ...
  </div>
</div>

1/3

2/3

Odsazení sloupků

8 offset 4

1/3 offset 2/3s

4 posunutí 4

5 offset 3

10 offset 6

Vnoření sloupů

Pokud musíte, vnořte svůj obsah vytvořením .rowdo existujícího sloupce.

Příklad vnořených sloupců

Úroveň 1 sloupce

Úroveň 2

<div class = "row" > 
  <div class = "span12" > 
    Úroveň 1 sloupce
    <div class = "row" > 
      <div class = "span6" > 
        Úroveň 2
      </div>
      <div class = "span6" > 
        Úroveň 2
      </div>
    </div>
  </div>
</div>

Natočte si vlastní mřížku

Bootstrap obsahuje několik proměnných pro přizpůsobení výchozího systému mřížky 940 pixelů. S trochou přizpůsobení můžete upravit velikost sloupců, jejich okapů a kontejneru, ve kterém jsou umístěny.

Uvnitř mřížky

Všechny proměnné potřebné k úpravě systému mřížky jsou v současné době umístěny v variables.less.

Variabilní	Výchozí hodnota	Popis
`@gridColumns`	16	Počet sloupců v mřížce
`@gridColumnWidth`	40 pixelů	Šířka každého sloupce v mřížce
`@gridGutterWidth`	20 pixelů	Záporná mezera mezi jednotlivými sloupci
`@siteWidth`	Vypočtený součet všech sloupů a okapů	K výpočtu počtu sloupků a okapů a nastavení šířky `.fixed-container()`mixinu používáme nějakou základní shodu.

Nyní k přizpůsobení

Úprava mřížky znamená změnu tří @grid-*proměnných a překompilování souborů Less.

Bootstrap je vybaven tak, aby zvládl mřížkový systém s až 24 sloupky; výchozí hodnota je pouze 16. Zde je návod, jak by vaše proměnné mřížky vypadaly přizpůsobené mřížce s 24 sloupci.

@gridColumns : 24 ;       
@gridColumnWidth : 20px ;   
@gridGutterWidth : 20px ;

Po rekompilaci budete připraveni!

Pevné rozložení

Výchozí a jednoduché rozvržení na střed o šířce 940 pixelů pro téměř všechny webové stránky nebo stránky poskytované jedním <div.container>.

<body>
  <div class = "container" > 
    ...
  </div>
</body>

Fluidní rozložení

Alternativní flexibilní struktura stránky s minimální a maximální šířkou a postranním panelem na levé straně. Skvělé pro aplikace a dokumenty.

<body>
  <div class = "container-fluid" > 
    <div class = "sidebar" > 
      ...
    </div>
    <div class = "content" > 
      ...
    </div>
  </div>
</body>

Nadpisy a kopie

Standardní typografická hierarchie pro strukturování vašich webových stránek.

Celá typografická mřížka je založena na dvou proměnných Less v našem souboru variables.less: @basefonta @baseline. 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.

h1. Nadpis 1

h2. Nadpis 2

h3. Nadpis 3

h4. Nadpis 4

h5. Nadpis 5

h6. Nadpis 6

Příklad odstavce

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.

Příklad nadpisu Má podnadpis…

Různé Prvky

Použití důrazu, adres a zkratek

<strong> <em> <address> <abbr>

Kdy použít

Zvýrazňující značky ( <strong>a <em>) by měly být použity k označení dodatečné důležitosti nebo zdůraznění slova nebo fráze vzhledem k okolní kopii. Použijte <strong>pro důležitost a <em>pro zdůraznění stresu .

Důraz v odstavci

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: V HTML5 je stále v pořádku používat značky <b>a <i>a nemusí být stylizovány tučně a kurzívou (ačkoli pokud existuje sémantický prvek, použijte jej). <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.

Adresy

Prvek <address>se používá pro kontaktní informace jeho nejbližšího předka nebo celého souboru práce. Zde jsou dva příklady, jak by se to dalo použít:

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

Celé jméno
[email protected]

Poznámka: Každý řádek v a <address>musí končit zalomením řádku ( <br />) nebo být zabalen do značky na úrovni bloku (např. <p>), aby byl obsah správně strukturován.

Zkratky

Pro zkratky a akronymy použijte <abbr>značku ( v HTML5<acronym> není podporována ). Vložte zkrácený formulář do značky a nastavte název pro celé jméno.

Blokové uvozovky

<blockquote> <p> <small>

Jak citovat

Chcete - li zahrnout blokovou citaci, obtékání <blockquote>a tagy. Použijte prvek k citaci zdroje a dostanete před ním pomlčku.<p><small><small>—

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Celé číslo posuere erat a ante venenatis dapibus posuere velit aliquet.
Dr. Julius Hibbert

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elita. Celé číslo posuere erat a ante venenatis dapibus posuere velit aliquet. </p>
  <small> Dr. Julius Hibbert </small>
</blockquote>

Seznamy

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.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>`

Lorem ipsum dolor sit amet
Consectetur adipiscing elita
Integer molestie lorem at massa
Facilisis v pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
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.

Kód

<code> <pre>

Vylepšete svůj kód stylově pomocí dvou jednoduchých značek. Pro ještě větší úžasnost prostřednictvím javascriptu vhoďte knihovnu Google code prettify a máte hotovo.

Prezentace kódu

Kód, bloky nebo jen vložené úryvky lze zobrazit stylově pouhým zabalením do správné značky. Pro bloky kódu zahrnující více řádků použijte <pre>prvek. Pro vložený kód použijte <code>prvek.

Živel Výsledek

<code> V řádku textu, jako je tento, bude váš zabalený kód vypadat jako tento <html>prvek.

Živel	Výsledek
`<code>`	V řádku textu, jako je tento, bude váš zabalený kód vypadat jako tento `<html>`prvek.
`<pre>`	<div> <h1>Nadpis</h1> <p>Něco tady...</p> </div> Poznámka: Ujistěte se, že kód ve `<pre>`značkách držíte co nejblíže vlevo; vykreslí všechny karty.
`<pre class="prettyprint">`	Pomocí knihovny google-code-prettify získají vaše bloky kódu mírně odlišný vizuální styl a automatické zvýraznění syntaxe. <div> <h1> Nadpis </h1> <p> Něco je v pořádku... </p> </div> Stáhněte si google-code-prettify a prohlédněte si readme, jak používat.

<pre>

<div>
  <h1>Nadpis</h1>
  <p>Něco tady...</p>
</div>

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

<pre class="prettyprint">

Pomocí knihovny google-code-prettify získají vaše bloky kódu mírně odlišný vizuální styl a automatické zvýraznění syntaxe.

<div> <h1> Nadpis </h1> <p> Něco je v pořádku... </p> </div>

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

Inline štítky

<span class="label">

Upozorněte nebo označte jakoukoli frázi ve svém textu.

Označte cokoli

Potřebovali jste někdy jeden z těch fantastických novinek! nebo Důležité příznaky při psaní kódu? Tak a teď je máte. Ve výchozím nastavení je zahrnuto následující:

Označení	Výsledek
`<span class="label">Default</span>`	Výchozí
`<span class="label success">New</span>`	Nový
`<span class="label warning">Warning</span>`	Varování
`<span class="label important">Important</span>`	Důležité
`<span class="label notice">Notice</span>`	Oznámení

Mediální mřížka

Zobrazte miniatury různých velikostí na stránkách s malým rozměrem HTML a minimálními styly.

Příklad miniatur

Miniatury .media-gridmohou mít libovolnou velikost, ale nejlépe fungují, když jsou namapovány přímo na vestavěný mřížkový systém Bootstrap. Šířky obrázků jako 90, 210 a 330 se kombinují s několika pixely odsazení, aby se srovnaly velikosti .span2, .span4, a .span6sloupců.

Velký

Střední

Malý

Jejich kódování

Mřížky médií jsou snadno použitelné a poměrně jednoduché na straně označení. Jejich rozměry jsou čistě založeny na velikosti zahrnutých obrázků.

<ul class = "media-grid" > 
  <li>
    <a href = "#" > 
      <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
  <li>
    <a href = "#" > 
      <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
</ul>

Stavební stoly

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

Stoly jsou skvělé – na spoustu věcí. Skvělé tabulky však potřebují trochu lásky ke značkování, aby byly užitečné, škálovatelné a čitelné (na úrovni kódu). Zde je několik tipů, jak pomoci.

Záhlaví sloupců vždy zalamujte <thead>tak, aby hierarchie byla <thead>> <tr>> <th>.

Podobně jako u záhlaví sloupců by měl být veškerý obsah vaší tabulky zabalen do , <tbody>takže vaše hierarchie je <tbody>> <tr>> <td>.

Příklad: Výchozí styly tabulek

Všechny tabulky budou automaticky upraveny pouze se základními okraji, aby byla zajištěna čitelnost a zachována struktura. Není třeba přidávat další třídy nebo atributy.

#	Jméno	Příjmení	Jazyk
1	Nějaký	Jeden	Angličtina
2	Joe	Sixpack	Angličtina
3	Stu	Důlek	Kód

<tabulka>
  ...
</table>

Příklad: Zhuštěná tabulka

U tabulek, které vyžadují více dat v užších prostorech, použijte zhuštěnou variantu, která zkrátí výplň na polovinu. Lze jej také použít ve spojení s okraji a pruhy zebry, stejně jako výchozí styly tabulek.

#	Jméno	Příjmení	Jazyk
1	Nějaký	Jeden	Angličtina
2	Joe	Sixpack	Angličtina
3	Stu	Důlek	Kód

Příklad: Ohraničený stůl

Zaoblete jejich rohy a přidejte okraje na všech stranách, aby vaše stoly vypadaly o něco elegantněji.

#	Jméno	Příjmení	Jazyk
1	Nějaký	Jeden	Angličtina
2	Joe	Sixpack	Angličtina
3	Stu	Důlek	Kód

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

Příklad: Zebra pruhovaná

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

#	Jméno	Příjmení	Jazyk
1	Nějaký	Jeden	Angličtina
2	Joe	Sixpack	Angličtina
3	Stu	Důlek	Kód
rozpětí 4 sloupců
rozpětí 2 sloupců		rozpětí 2 sloupců

Poznámka: Zebra-striping je progresivní vylepšení, které není dostupné pro starší prohlížeče, jako je IE8 a nižší.

< třída tabulky = "zebra-striped" > 
  ...
</table>

Příklad: Zebra-striped w/ TableSorter.js

Vezmeme-li v úvahu předchozí příklad, vylepšujeme užitečnost našich tabulek tím, že poskytujeme funkce řazení prostřednictvím jQuery a pluginu Tablesorter . Kliknutím na záhlaví libovolného sloupce změníte řazení.

#	Jméno	Příjmení	Jazyk
2	Joe	Sixpack	Angličtina
3	Stu	Důlek	Kód
1	Vaše	Jeden	Angličtina

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<script > 
  $ ( function () { 
    $ ( "table#sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
< třída tabulky = "zebra-striped" > 
  ...
</table>

Pevná horní lišta

Co je to

Naše horní lišta je pevná lišta, která obsahuje logo nebo název webové stránky, primární navigaci a vyhledávací formulář.

Přizpůsobitelné

Všechny prvky uvnitř a také celá horní lišta jsou volitelné. Můžete si vybrat, zda zahrnete logo/název, navigaci, vyhledávání a sekundární navigaci – nebo jakoukoli jejich kombinaci.

Včetně rozbalovacích nabídek

Jako součást hlavní navigace jsme zahrnuli možnost přidávat do navigace rozbalovací nabídky. Podívejte se na sekundární navigaci výše (zarovnáno vpravo), abyste viděli, jak se to dělá. Rozbalovací liznačky také podporují .activezobrazení aktuálního výběru stránky.

Poznámka: Při použití horní lišty na jakékoli stránce nezapomeňte zohlednit její překrývání přidáním padding-top: 40px;do souboru body.

Tabulky a pilulky

Vytvořte jednoduchou sekundární navigaci pomocí <ul>. Přepínejte mezi kartami nebo pilulkami přidáním příslušné třídy.

Skvělé pro podsekce obsahu, jako jsou naše stránky nastavení účtu a časové osy uživatelů pro přepínání mezi stránkami s podobným obsahem. K dispozici v tabbed nebo pilulkové styly.

Příklad základních karet

Karty lze použít jako běžnou navigaci (načítání externích stránek na stejné kartě) nebo jako oblasti obsahu s kartami pro výměnu panelů obsahu. Máme plugin tabs , který lze použít k integraci druhého.

<ul class = "tabs" > 
  <li class = "active" ><a href = "#" > Domovská stránka </a></li>  
  <li><a href = "#" > Profil </a></li> 
  <li><a href = "#" > Zprávy </a></li> 
  <li><a href = "#" > Nastavení </a></li> 
  <li><a href = "#" > Kontaktovat </a></li> 
</ul>

Příklad základních pilulek

<ul class = "pilulky" > 
  <li class = "active" ><a href = "#" > Domovská stránka </a></li>  
  <li><a href = "#" > Profil </a></li> 
  <li><a href = "#" > Zprávy </a></li> 
  <li><a href = "#" > Nastavení </a></li> 
  <li><a href = "#" > Kontaktovat </a></li> 
</ul>

Strouhanka

Drobečková navigace se používá jako způsob, jak uživatelům ukázat, kde se v aplikaci nebo na webu nacházejí, ale ne pro primární navigaci.

<ul class = "breadcrumb" > 
  <li><a href = "#" > Domovská stránka </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Střední stránka </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Další </a> <span class = "divider" > / </span></li>   
  <li class = "active" > Jste zde </li> 
</ul>

Stránkování

Ultra zjednodušené a minimalisticky stylizované stránkování inspirované Rdio. Velký blok je těžké přehlédnout, je snadno škálovatelný a poskytuje velké klikací plochy.

<div class = "stránkování" > 
  <ul>
    <li class = "předchozí vypnuto" ><a href = "#" > ← Předchozí </a></li>  
    <li class = "active" ><a href = "#" > 1 </a></li>  
    <li><a href = "#" > 2 </a></li> 
    <li><a href = "#" > 3 </a></li> 
    <li><a href = "#" > 4 </a></li> 
    <li><a href = "#" > 5 </a></li> 
    <li class = "další" ><a href = "#" > Další → </a></li>  
  </ul>
</div>

Základní upozornění

.alert-message

Jednořádkové zprávy pro zvýraznění selhání, možného selhání nebo úspěchu akce. Zvláště užitečné pro formuláře.

Získejte javascript »

Svaté guacamole! Raději se přesvědčte, že nevypadáte příliš dobře .

Kruci! Změňte to a to a zkuste to znovu .

Výborně! Úspěšně jste přečetli tuto výstražnou zprávu.

Hlavy vzhůru! Toto je upozornění, které vyžaduje vaši pozornost, ale zatím to není velká priorita .

Příklad kódu

<div class = "alert-message warning" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Svaté guacamole! </strong> Nejlépe se přesvědčte, že nevypadáte příliš dobře. </p>
</div>

Blokovat zprávy

.alert-message.block-message

Pro zprávy, které vyžadují trochu vysvětlení, máme upozornění ve stylu odstavce. Jsou ideální pro probublávání delších chybových zpráv, upozornění uživatele na čekající akci nebo jen pro prezentaci informací pro větší důraz na stránku.

Získejte javascript »

Svaté guacamole! Toto je varování! Raději se přesvědčte, že nevypadáte příliš dobře. Nulla vitae elitní libero, pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Proveďte tuto akci Nebo udělejte toto

Kruci! Máte chybu! Změňte to a to a zkuste to znovu .

Duis mollis est non commodo luctus
Nisi erat porttitor ligula
Eget lacinia odio sem nec elit

Proveďte tuto akci Nebo udělejte toto

Výborně! Úspěšně jste přečetli tuto výstražnou zprávu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum.

Proveďte tuto akci Nebo udělejte toto

Hlavy vzhůru! Toto je upozornění, které vyžaduje vaši pozornost, ale zatím to není velká priorita.

Proveďte tuto akci Nebo udělejte toto

Příklad kódu

<div class = "alert-message block-message warning" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Svaté guacamole! Toto je varování! </strong> Nejlépe se přesvědčte, že nevypadáte příliš dobře. Nulla vitae elitní libero, pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p>
  <div class = "alert-actions" > 
    <a class = "btn small" href = "#" > Proveďte tuto akci </a> <a class = "btn small" href = "#" > Nebo proveďte toto </a>     
  </div>
</div>

Modály

Modály – dialogová okna nebo lightboxy – jsou skvělé pro kontextové akce v situacích, kdy je důležité zachovat kontext na pozadí.

Získejte javascript »

Popisky

Twipsies jsou velmi užitečné pro pomoc zmatenému uživateli a jeho nasměrování správným směrem.

Získejte javascript »

Lorem ipsum dolar sit amet illo error ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt sedtis dicantium voluptas quae volupe .

Popovers

Použijte vyskakovací okna k poskytnutí podtextových informací stránce bez ovlivnění rozvržení.

Získejte javascript »

Začínáme

Integrace javascriptu s knihovnou Bootstrap je velmi snadná. Níže projdeme základy a poskytneme vám několik úžasných pluginů, které vám pomohou začít!

Zobrazit dokumenty javascript »

Co je zahrnuto

Oživte některé primární komponenty Bootstrapu pomocí nových vlastních pluginů, které spolupracují s jQuery a Ender . Doporučujeme vám je rozšířit a upravit tak, aby vyhovovaly vašim specifickým vývojovým potřebám.

Soubor	Popis
bootstrap-modal.js	Náš modální plugin je super tenký pohled na tradiční modální plugin js! Zvláštní péči jsme věnovali tomu, abychom zahrnuli pouze holou funkcionalitu, kterou na Twitteru požadujeme.
bootstrap-alerts.js	Výstražný plugin je super malá třída pro přidávání blízkých funkcí k výstrahám.
bootstrap-dropdown.js	Tento plugin slouží k přidání rozevíracího seznamu na horní lištu bootstrap nebo navigaci v záložkách.
bootstrap-scrollspy.js	Zásuvný modul ScrollSpy slouží k přidání automatické aktualizace navigace na základě polohy posouvání do horní lišty zaváděcího systému.
bootstrap-buttons.js	Zásuvný modul ScrollSpy slouží k přidání automatické aktualizace navigace na základě polohy posouvání do horní lišty zaváděcího systému.
bootstrap-tabs.js	Tento plugin přidává rychlou, dynamickou funkci karet a pilulek pro procházení místního obsahu.
bootstrap-twipsy.js	Založeno na vynikajícím pluginu jQuery.tipsy, který napsal Jason Frame; twipsy je aktualizovaná verze, která se nespoléhá na obrázky, používá css3 pro animace a datové atributy pro místní úložiště titulů!
bootstrap-popover.js	Popover plugin poskytuje jednoduché rozhraní pro přidávání popoverů do vaší aplikace. Rozšiřuje plugin boostrap-twipsy.js , takže při začleňování vyskakovacích oken do svého projektu nezapomeňte vzít tento soubor také!

Je nutný javascript?

Ani náhodou! Bootstrap je navržen především jako CSS knihovna. Tento javascript poskytuje základní interaktivní vrstvu nad rámec zahrnutých stylů.

Nicméně pro ty, kteří potřebují javascript, jsme poskytli výše uvedené pluginy, které vám pomohou pochopit, jak integrovat Bootstrap s javascriptem, a poskytnout vám rychlou a snadnou možnost pro základní funkce.

Pro více informací a pro zobrazení některých živých ukázek se prosím podívejte na naši stránku s dokumentací pluginu .

Bootstrap byl vytvořen z Preboot , open-source balíčku mixinů a proměnných, které se mají používat ve spojení s Less , preprocesorem CSS pro rychlejší a snadnější vývoj webu.

Podívejte se, jak jsme použili Preboot v Bootstrapu a jak jej můžete využít, pokud se rozhodnete spustit Less na svém dalším projektu.

Jak to použít

Tuto možnost použijte k plnému využití proměnných Bootstrap Less, mixinů a vnoření do CSS prostřednictvím javascriptu ve vašem prohlížeči.

<link rel = "stylesheet/less" href = "less/bootstrap.less" media = "all" />    
<script src = "js/less-1.1.3.min.js" ></script>

Necítíte se na řešení .js? Vyzkoušejte aplikaci Less Mac nebo použijte Node.js ke kompilaci při nasazení kódu.

Co je zahrnuto

Zde jsou některé z nejdůležitějších věcí, které jsou součástí služby Twitter Bootstrap jako součásti Bootstrapu. Přejděte na web Bootstrap nebo na stránku projektu Github, kde si stáhnete a dozvíte se více.

Proměnné

Proměnné v Less jsou perfektní pro údržbu a aktualizaci CSS bez bolesti hlavy. Když chcete změnit hodnotu barvy nebo často používanou hodnotu, aktualizujte ji na jednom místě a máte hotovo.

// Odkazy
@linkColor : #8b59c2;         
@linkColorHover :     ztmavit ( @linkColor , 10 ); 
 
// Šedé
@černá : #000;             
@šedáDark :           zesvětlení ( @černá , 25 %); 
@šedá :               zesvětlení ( @černá , 50 %); 
@greyLight :          zesvětlení ( @black , 70 %); 
@greyLighter :        zesvětlení ( @černá , 90 %); 
@bílá : #fff ;             
 
// Barvy zvýraznění
@blue : #08b5fb;              
@zelená : #46a546 ;             
@red : #9d261d;               
@yellow : #ffc40d;            
@oranžová : #f89406 ;            
@růžová : #c3325f ;              
@fialová : #7a43b6 ;            
 
// Mřížka základní linie
@basefont : 13px ;          
@baseline : 18px ;

komentování

Less také poskytuje další styl komentování kromě běžné /* ... */syntaxe CSS.

// Toto je komentář
/* Toto je také komentář */

Míchá to wazoo

Mixiny jsou v zásadě zahrnuty nebo částečky pro CSS, což vám umožňuje zkombinovat blok kódu do jednoho. Jsou skvělé pro vlastnosti s předponou dodavatele, jako box-shadowjsou přechody napříč prohlížeči, zásobníky písem a další. Níže je ukázka mixinů, které jsou součástí Bootstrapu.

Hromady písem

#font {
  . zkratka ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    font - size : @size ; 
    font - váha : @weight ; 
    line - height : @lineHeight ; 
  }
  . bezpatkové ( @weight : normal , @size : 14px , @lineHeight : 20px ) { _ _     
    font - family : " Helvetica Neue " , Helvetica , Arial , bezpatkové ;   
    font - size : @size ; 
    font - váha : @weight ; 
    line - height : @lineHeight ; 
  }
  ...
}

Přechody

#spád {
  ...
  . vertikální ( @startColor : #555, @endColor: #333) { 
barva     pozadí : @endColor ; _ 
    pozadí - opakovat : opakovat - x ;
    background - image : - khtml - gradient ( lineární , vlevo nahoře , vlevo dole , od ( @startColor ), do ( @endColor )); // Konqueror   
    background - image : - moz - linear - gradient ( @startColor , @endColor ); // FF 3.6+   
    background - image : - ms - linear - gradient ( @startColor , @endColor ); // IE10   
    background - image : - webkit - gradient ( lineární , vlevo nahoře , vlevo dole , barva - stop ( 0 %, @startColor ), barva - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    background - image : - webkit - linear - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    background - image : - o - linear - gradient ( @startColor , @endColor ); // Opera 11.10   
    background - image : linear - gradient ( @startColor , @endColor ); // Standardní  
  }
  ...
}

Operace

Získejte fantazii a proveďte trochu matematiky, abyste vytvořili flexibilní a výkonné mixy, jako je ten níže.

// Griditude
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
@siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));                 
 
// Vytvořte nějaké sloupce
. sloupce ( @columnSpan : 1 ) {  
  šířka : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
}

Kompilace Méně

Po úpravě .lesssouborů v /lib/ je budete muset znovu zkompilovat, abyste znovu vytvořili soubory bootstrap-*.*.*.css a bootstrap-*.*.*.min.css. Pokud odesíláte požadavek na stažení na GitHub, musíte vždy znovu zkompilovat.

Způsoby kompilace

Metoda	Kroky
Uzel s makefile	Nainstalujte kompilátor příkazového řádku less s npm spuštěním následujícího příkazu: $ npm instalace lessc Po instalaci stačí spustit `make`z kořenového adresáře vašeho bootstrap adresáře a je vše připraveno. Navíc, pokud máte nainstalovaný watchr , můžete spustit `make watch`, aby se bootstrap automaticky přestavěl pokaždé, když upravíte soubor v bootstrap lib (toto není vyžadováno, pouze pohodlný způsob).
Javascript	Stáhněte si nejnovější Less.js a zahrňte cestu k němu (a Bootstrap) do souboru `head`. <link rel = "stylesheet/less" href = "/cesta/k/bootstrap.less" > <script src = "/cesta/k/méně.js" ></script> Chcete-li znovu zkompilovat soubory .less, stačí je uložit a znovu načíst stránku. Less.js je zkompiluje a uloží do místního úložiště.
Příkazový řádek	Pokud již máte nainstalovaný nástroj příkazového řádku less, jednoduše spusťte následující příkaz: $ lessc ./lib/bootstrap.less > bootstrap.css `--compress`Pokud se pokoušíte ušetřit nějaké bajty , nezapomeňte tento příkaz zahrnout !
Méně aplikace pro Mac	Neoficiální aplikace pro Mac sleduje adresáře souborů .less a kompiluje kód do místních souborů po každém uložení sledovaného souboru .less. Pokud chcete, můžete v aplikaci přepínat předvolby pro automatickou minifikaci a ve kterém adresáři kompilované soubory skončí.

Hotlink CSS

Použijte jej s méně

Fork na GitHubu

O Bootstrapu Stručná historie, podpora prohlížeče a další

Dějiny

Podpora prohlížeče

Co je zahrnuto

Příklady rychlého startu

Mřížkový systém Rozhoupejte standardních 940 pixelů nebo si vytvořte vlastní

Výchozí mřížka

Příklad mřížkového značení

Odsazení sloupků

Vnoření sloupů

Příklad vnořených sloupců

Natočte si vlastní mřížku

Uvnitř mřížky

Nyní k přizpůsobení

Rozvržení Základní šablony pro vytváření webových stránek

Pevné rozložení

Fluidní rozložení

Typografie Nadpisy, odstavce, seznamy a další prvky inline typu

Nadpisy a kopie

h1. Nadpis 1

h2. Nadpis 2

h3. Nadpis 3

h4. Nadpis 4

h5. Nadpis 5

h6. Nadpis 6

Příklad odstavce

Příklad nadpisu Má podnadpis…

Různé Prvky

Kdy použít

Důraz v odstavci

Adresy

Zkratky

Blokové uvozovky

Jak citovat

Seznamy

Neuspořádané<ul>

Bez stylu<ul.unstyled>

Objednáno<ol>

Popisdl

Kód

Prezentace kódu

Inline štítky

Označte cokoli

Média Zobrazení obrázků a videí

Mediální mřížka

Příklad miniatur

Velký

Střední

Malý

Jejich kódování

Tabulky Pro, uhodli jste, tabulková data

Stavební stoly

Příklad: Výchozí styly tabulek

Příklad: Zhuštěná tabulka

Příklad: Ohraničený stůl

Příklad: Zebra pruhovaná

Příklad: Zebra-striped w/ TableSorter.js

formuláře

Výchozí styly

Skládané formuláře

Velikosti polí formuláře

Tlačítka

Příklad tlačítek

Alternativní velikosti

Deaktivovaný stav

Odkazy

Tlačítka

Navigace

Pevná horní lišta

název projektu

Co je to

Přizpůsobitelné

Včetně rozbalovacích nabídek

Tabulky a pilulky

Příklad základních karet

Příklad základních pilulek

Strouhanka

Neuspořádané`<ul>`

Bez stylu`<ul.unstyled>`

Objednáno`<ol>`

Popis`dl`