Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
O Bootstrapu Stručná historie, podpora prohlížeče a další
Dějiny
V dřívějších dobách Twitteru používali inženýři ke splnění požadavků na front-end téměř jakoukoli knihovnu, kterou znali. Bootstrap začal jako odpověď na výzvy, které se objevily, a vývoj se rychle zrychlil během prvního Hackweeku na Twitteru.
S pomocí a zpětnou vazbou mnoha inženýrů na Twitteru se Bootstrap výrazně rozrostl, aby zahrnoval nejen základní styly, ale i elegantnější a odolnější designové vzory přední části.
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.
- 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.
- Všechny původní soubory .less
- Plně zkompilované a minifikované CSS
- Kompletní dokumentace průvodce stylem
- Vzorová šablona stránky (další již brzy)
Mřížkový systém Rozhoupejte standardních 940 pixelů nebo si vytvořte vlastní
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 columns" >
- ...
- </div>
- <div class = "span10 columns" >
- ...
- </div>
- </div>
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
2
2
3
3
3
3
3
1
4
4
4
4
4
6
6
8
8
5
11
16
Odsazení sloupků
4
8 offset 4
4 posunutí 4
4 posunutí 4
5 offset 3
5 offset 3
10 offset 6
Rozvržení Základní šablony pro vytváření webových stránek
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>
Typografie Nadpisy, odstavce, seznamy a další prvky inline typu
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 preboot.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. Vypadá to takto:
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
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 em 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
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
Popisdl
- 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.
Tabulky Pro, uhodli jste, tabulková data
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: 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 |
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 |
|---|---|---|---|
| 1 | Vaše | Jeden | Angličtina |
| 2 | Joe | Sixpack | Angličtina |
| 3 | Stu | Důlek | Kód |
- <script src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <script >
- $ ( function () {
- $ ( "table#sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });
- });
- </script>
- < třída tabulky = "zebra-striped" >
- ...
- </table>
formuláře
Výchozí styly
Všechny formuláře mají výchozí styly, aby byly čitelné a škálovatelné. Styly jsou k dispozici pro textové vstupy, výběrové seznamy, textové oblasti, přepínací tlačítka a zaškrtávací políčka a tlačítka.
Skládané formuláře
Přidejte .form-stackeddo 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.
Tlačítka
Podle konvence 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 .primarytřídu, světle modrou .infotřídu, zelenou .successtřídu a červenou .dangertřídu. Kromě toho je vytváření vlastních stylů snadné.
Příklad tlačítek
Styly tlačítek lze použít na cokoli s .btnaplikovaným. Obvykle je budete chtít použít pouze na prvky <a>, <button>, a select <input>. Vypadá to takto:
Alternativní velikosti
Máte rádi větší nebo menší tlačítka? Pusťte se do toho!
Deaktivovaný stav
Pro tlačítka, která nejsou aktivní nebo jsou aplikací z toho či onoho důvodu deaktivována, použijte deaktivovaný stav. To je .disabledpro odkazy a :disabledpro <button>prvky.
Odkazy
Tlačítka
Alerts & Errors Styly pro úspěch, varování a chybové zprávy nebo výstrahy
Základní upozornění
div.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.
Blokovat zprávy
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.
Popovers Komponenty pro zobrazování obsahu v modálech, nápovědách a popovers
Modály
Modály – dialogy nebo lightboxy – jsou skvělé pro kontextové akce v situacích, kdy je důležité zachovat kontext na pozadí.
Modální nadpis
×Jedno krásné tělo…
Tipy na nástroje
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 .
níže!
že jo!
vlevo, odjet!
výše!
Popovers
Použijte vyskakovací okna k poskytnutí podtextových informací stránce bez ovlivnění rozvržení.
Popover Title
Použití Bootstrap s Less Super Nabijte svůj CSS proměnnými, mixy a funkcemi
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 Bootstrap 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čné součásti CSS, které vám umožňují 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 ;
- }
- . serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {
- font - family : " Georgia " , Times New Roman , Times , bezpatkové ;
- font - size : @size ;
- font - váha : @weight ;
- line - height : @lineHeight ;
- }
- . monospace ( @weight : normal , @size : 12px , @lineHeight : 20px ) {
- font - rodina : "Monaco" , Courier New , monospace ;
- font - size : @size ;
- font - váha : @weight ;
- line - height : @lineHeight ;
- }
- }
Přechody
- #spád {
- . horizontální ( @startColor : #555, @endColor: #333) {
- barva pozadí : @endColor ; _
- pozadí - opakovat : opakovat - x ;
- background - image : - khtml - gradient ( linear , left top , right top , from ( @startColor ), to ( @ endColor )); // Konqueror
- background - image : - moz - linear - gradient ( left , @startColor , @endColor ); // FF 3.6+
- background - image : - ms - linear - gradient ( left , @startColor , @endColor ); // IE10
- pozadí - obrázek : - webkit - gradient ( lineární , vlevo nahoře , vpravo nahoře , barva - stop ( 0 %, @startColor ), barva - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+
- background - image : - webkit - linear - gradient ( left , @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- Pozadí - image : - o - linear - gradient ( left , @startColor , @endColor ); // Opera 11.10
- background - image : linear - gradient ( left , @startColor , @endColor ); // Le standard
- }
- . vertikální ( @startColor : #555, @endColor: #333) {
- barva pozadí : @endColor ; _
- pozadí - opakovat : opakovat - x ;
- pozadí - obrázek : - khtml - přechod ( lineární , vlevo nahoře , vlevo dole , od ( @startColor ), do ( @endColor )); // Konqueror
- pozadí - image : - moz - linear - gradient ( @startColor , @endColor ); // FF 3.6+
- pozadí - 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+
- pozadí - obrázek : - webkit - linear - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- pozadí - obrázek : - o - linear - gradient ( @startColor , @endColor ); // Opera 11.10
- Pozadí - image : linear - gradient ( @startColor , @endColor ); // Standardní
- }
- . směrový ( @startColor : #555, @endColor: #333, @deg: 45deg) {
- ...
- }
- . vertikální - tři - barvy ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 50 %, @endColor: #c3325f) {
- ...
- }
- }
Operace a gridový systém
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 ));
- // Grid System
- . kontejner {
- šířka : @siteWidth ;
- okraj : 0 auto ;
- . clearfix ();
- }
- . sloupce ( @columnSpan : 1 ) {
- šířka : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- }
- . offset ( @columnOffset : 1 ) {
- okraj - vlevo : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) + @extraSpace ;
- }