Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Bootstrap je sada nástrojů od Twitteru určená k nastartování vývoje webových aplikací a stránek.
Zahrnuje základní CSS a HTML pro typografii, formuláře, tlačítka, tabulky, mřížky, navigaci a další.
Nerd alert: Bootstrap je vytvořen s Less a byl navržen tak, aby fungoval mimo bránu s ohledem na moderní prohlížeče.
Pro nejrychlejší a nejjednodušší začátek stačí zkopírovat tento úryvek na svou webovou stránku.
Jste fanouškem používání Less? Žádný problém, stačí naklonovat repo a přidat tyto řádky:
Stahujte, rozdvojujte, vytahujte, problémy se soubory a další pomocí oficiálního úložiště Bootstrap na Github.
Aktuálně v1.3.0
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 ›
Bootstrap je testován a podporován v hlavních moderních prohlížečích, jako je Chrome, Safari, Internet Explorer a Firefox.
Bootstrap je dodáván s kompilovanými CSS, nekompilovanými a ukázkovými šablonami.
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ě.
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>
Pokud musíte, vnořte svůj obsah vytvořením .row
do existujícího sloupce.
- <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>
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.
Všechny proměnné potřebné k úpravě systému mřížky jsou v současné době umístěny v preboot.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. |
Ú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!
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>
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>
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 preboot.less: @basefont
a @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.
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.
Použití důrazu, adres a zkratek
<strong>
<em>
<address>
<abbr>
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 .
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.
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:
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.
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.
<blockquote>
<p>
<small>
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>
<ul>
<ul.unstyled>
<ol>
dl
<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.
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. |
<pre> |
<div> <h1>Nadpis</h1> <p>Něco tady...</p> </div> Poznámka: Ujistěte se, že kód ve |
<pre class="prettyprint"> |
Pomocí knihovny google-code-prettify získáte 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. |
<span class="label">
Upozorněte nebo označte jakoukoli frázi ve svém textu.
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í |
Zobrazte miniatury různých velikostí na stránkách s malým rozměrem HTML a minimálními styly.
Miniatury .media-grid
mohou 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 .span6
sloupců.
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>
<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>
.
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>
Získejte trochu fantazie se svými tabulkami přidáním pruhů zebry – stačí přidat .zebra-striped
třídu.
# | Jméno | Příjmení | Jazyk |
---|---|---|---|
1 | Nějaký | Jeden | Angličtina |
2 | Joe | Sixpack | Angličtina |
3 | Stu | Důlek | Kód |
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>
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>
Všechny formuláře mají výchozí styly, aby byly čitelné a škálovatelné. K dispozici jsou styly pro textové vstupy, výběrové seznamy, textové oblasti, přepínací tlačítka a zaškrtávací políčka a tlačítka.
Přidejte .form-stacked
do kódu HTML formuláře a budete mít štítky nad jejich poli, nikoli nalevo od nich. To funguje skvěle, pokud jsou vaše formuláře krátké nebo máte dva sloupce vstupů pro těžší formuláře.
Přizpůsobte libovolný formulář input
, select
, nebotextarea
šířku přidáním několika tříd do svého označení.
Od verze 1.3.0 jsme přidali třídy velikosti založené na mřížce pro prvky formuláře. Použijte je prosím nad stávajícími třídami .mini
, .small
atd.
Obvykle se tlačítka používají pro akce, zatímco odkazy se používají pro objekty. Například „Stáhnout“ může být tlačítko a „nedávná aktivita“ může být odkaz.
Všechna tlačítka mají ve výchozím nastavení světle šedý styl, ale pro různé styly barev lze použít řadu funkčních tříd. Tyto třídy zahrnují modrou .primary
třídu, světle modrou .info
třídu, zelenou .success
třídu a červenou .danger
třídu.
Styly tlačítek lze použít na cokoli s .btn
aplikovaným. Obvykle je budete chtít použít pouze na prvky <a>
, <button>
, a select <input>
. Vypadá to takto:
Máte rádi větší nebo menší tlačítka? Pusťte se do toho!
Pro tlačítka, která nejsou aktivní nebo jsou aplikací z toho či onoho důvodu zakázána, použijte deaktivovaný stav. To je .disabled
pro odkazy a :disabled
pro <button>
prvky.
.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.
- <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>
.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.
- <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 – dialogová okna nebo lightboxy – jsou skvělé pro kontextové akce v situacích, kdy je důležité zachovat kontext na pozadí.
Jedno krásné tělo…
Twipsies jsou velmi užitečné pro pomoc zmatenému uživateli a jeho nasměrování správným směrem.
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 .
Použijte vyskakovací okna k poskytnutí podtextových informací stránce bez ovlivnění rozvržení.
Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
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!
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-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é! |
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 s Preboot , open-source balíkem 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.
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.
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é 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;
- @grayDark : zesvětlit ( @black , 25 %);
- @šedá : zesvětlení ( @černá , 50 %);
- @grayLight : zesvětlení ( @black , 70 %);
- @greyLighter : zesvětlení ( @black , 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 ;
Less také poskytuje další styl komentování kromě běžné /* ... */
syntaxe CSS.
- // Toto je komentář
- /* Toto je také komentář */
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 jebox-shadow
jsou přechody napříč prohlížeči, zásobníky písem a další. Níže je ukázka mixinů, které jsou součástí Bootstrapu.
- #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 ;
- }
- ...
- }
- #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(linear, left top, left bottom, color-stop(0%, @startColor), color-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); // The standard
- }
- ...
- }
Get fancy and perform some math to generate flexible and powerful mixins like the one below.
- // Griditude
- @gridColumns: 16;
- @gridColumnWidth: 40px;
- @gridGutterWidth: 20px;
- @siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
- // Make some columns
- .columns(@columnSpan: 1) {
- width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
- }
After modifying the .less
files in /lib/, you'll need to recompile them in order to regenerate the bootstrap-*.*.*.css and bootstrap-*.*.*.min.css files. If you're submitting a pull request to GitHub, you must always recompile.
Method | Steps |
---|---|
Node with makefile | Install the less command line compiler with npm by running the following command: $ npm install lessc Once installed just run Additionally, if you have watchr installed, you may run |
Javascript | Download the latest Less.js and include the path to it (and Bootstrap) in the
To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage. |
Command line | If you already have the less command line tool installed, simply run the following command: $ lessc ./lib/bootstrap.less > bootstrap.css Be sure to include |
Less Mac app | 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čí. |