Twitter Bootstrap

Bootstrap je súprava nástrojov od Twitteru určená na naštartovanie vývoja webových aplikácií a stránok.
Zahŕňa základné CSS a HTML pre typografiu, formuláre, tlačidlá, tabuľky, mriežky, navigáciu a ďalšie.

Nerd alert: Bootstrap je vytvorený s Less a bol navrhnutý tak, aby fungoval mimo brány len s ohľadom na moderné prehliadače.

Hotlink na CSS

Pre najrýchlejší a najjednoduchší začiatok stačí skopírovať tento úryvok na svoju webovú stránku.

Použite ho s menej

Ste fanúšikom používania služby Less? Žiadny problém, stačí naklonovať repo a pridať tieto riadky:

Fork na GitHub

Sťahovanie, rozdeľovanie, ťahanie, problémy so súbormi a ďalšie pomocou oficiálneho úložiska Bootstrap na Github.

Bootstrap na GitHub »

Grid systém Rock štandardných 940px alebo roll svoj vlastný

Predvolená mriežka

Predvolený mriežkový systém poskytovaný ako súčasť Bootstrapu je 940px široká 16-stĺpcová mriežka. Ide o príchuť obľúbeného mriežkového systému 960, ale bez dodatočného okraja/vystuženia na ľavej a pravej strane.

Príklad označenia mriežky

Ako je tu znázornené, základné rozloženie je možné vytvoriť s dvoma „stĺpcami“, pričom každý zahŕňa niekoľko zo 16 základných stĺpcov, ktoré sme definovali ako súčasť nášho mriežkového systému. Ďalšie variácie nájdete v príkladoch nižšie.

  1. <div class="row">
  2.   <div class = "span6 columns" > 
  3.     ...
  4.   </div>
  5.   <div class = "span10 columns" > 
  6.     ...
  7.   </div>
  8. </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

Odsadenie stĺpcov

4
8 posunutie 4
4 posunutie 4
4 posunutie 4
5 posunutie 3
5 posunutie 3
10 posun 6

Rozloženia Základné šablóny na vytváranie webových stránok

Pevné rozloženie

Základné rozloženie kontajnera so šírkou 940 pixelov v strede pre takmer akúkoľvek lokalitu alebo stránku.

  1. <body>
  2.   <div class = "container" > 
  3.     ...
  4.   </div>
  5. </body>

Fluidné rozloženie

Flexibilná tekutá alebo tekutá štruktúra stránky s minimálnou a maximálnou šírkou a ľavým bočným panelom. Skvelé pre aplikácie.

  1. <body>
  2.   <div class = "container-fluid" > 
  3.     <div class = "sidebar" > 
  4.       ...
  5.     </div>
  6.     <div class = "content" > 
  7.       ...
  8.     </div>
  9.   </div>
  10. </body>

Typografia Nadpisy, odseky, zoznamy a ďalšie prvky vnoreného typu

Nadpisy a kópie

Štandardná typografická hierarchia na štruktúrovanie vašich webových stránok.

h1. Nadpis 1

h2. Nadpis 2

h3. Nadpis 3

h4. Nadpis 4

h5. Nadpis 5
h6. Nadpis 6

Príklad odseku

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.

Príklad nadpisu Má podnadpis...

Môžete tiež pridať podnadpisy pomocou <strong>a<em>

Misc. prvkov

Používanie dôrazu, adries a skratiek

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

Kedy použiť

Zvýrazňujúce značky ( <strong>a <em>) by sa mali používať na pridanie vizuálneho rozlíšenia medzi slovom alebo frázou a jeho okolitou kópiou. Použite <strong>na obyčajnú starú pozornosť a <em>na uhladenú pozornosť a titulky.

Dôraz v odseku

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.

Adresy

Prvok addresssa používa pre – uhádli ste! – adresy. Vyzerá to takto:

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

Poznámka: Každý riadok v a addressmusí končiť zalomením riadku ( <br />), aby sa obsah správne štrukturoval pri čítaní v reálnom živote bez použitia akýchkoľvek štýlov.

Skratky

Pre skratky a akronymy použite abbrznačku ( v HTML5acronym je zastaraná ). Vložte skrátený formulár do značky a nastavte názov pre celé meno.

Blokové úvodzovky

<blockquote> <p> <cite>

Nezabudnite zabaliť svoje blockquoteštítky paragrapha citeštítky. Pri citovaní zdroja použite citeprvok. CSS automaticky uvedie pred názvom pomlčku (—).

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...

Dr. Julius Hibbert

zoznamy

Neusporiadané<ul>

  • Jeremy Bixby
  • Robert Dezure
  • Josh Washington
  • Anton Capresi
  • Moji kolegovia z tímu
    • George Castanza
    • Jerry Seinfeld
    • Kozmo Kramer
    • Elaine Bennisová
    • Nový človek
  • John Jacob
  • Paul Pierce
  • Kevin Garnett

Neštylizované<ul.unstyled>

  • Jeremy Bixby
  • Robert Dezure
  • Josh Washington
  • Anton Capresi
  • Moji kolegovia z tímu
    • George Castanza
    • Jerry Seinfeld
    • Kozmo Kramer
    • Elaine Bennisová
    • Nový človek
  • John Jacob
  • Paul Pierce
  • Kevin Garnett

Objednané<ol>

  1. Jeremy Bixby
  2. Robert Dezure
  3. Josh Washington
  4. Anton Capresi
  5. Moji kolegovia z tímu
    1. George Castanza
    2. Jerry Seinfeld
    3. Kozmo Kramer
    4. Elaine Bennisová
    5. Nový človek
  6. John Jacob
  7. Paul Pierce
  8. Kevin Garnett

Popisdl

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.

Tabuľky Pre, uhádli ste, tabuľkové údaje

Stavebné stoly

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

Stoly sú skvelé – na veľa vecí. Skvelé tabuľky však potrebujú trochu lásky k značkovaniu, aby boli užitočné, škálovateľné a čitateľné (na úrovni kódu). Tu je niekoľko tipov, ktoré vám pomôžu.

Hlavičky stĺpcov vždy zabaľte theadtak, aby hierarchia bola thead> tr> th.

Podobne ako v hlavičkách stĺpcov by mal byť všetok obsah vašej tabuľky zabalený do , tbodytakže vaša hierarchia je tbody> tr> td.

Príklad: Predvolené štýly tabuľky

Všetky tabuľky budú automaticky upravené len so základnými okrajmi, aby sa zabezpečila čitateľnosť a zachovala sa štruktúra. Nie je potrebné pridávať ďalšie triedy alebo atribúty.

# Krstné meno Priezvisko Jazyk
1 Niektorí Jeden Angličtina
2 Joe Tehličky Angličtina
3 Stu Dent kód 
  1. <table class="common-table"> class = "spoločná tabuľka" >
  2.   ...
  3. </table>

Príklad: Zebra pruhovaná

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

# Krstné meno Priezvisko Jazyk
1 Niektorí Jeden Angličtina
2 Joe Tehličky Angličtina
3 Stu Dent kód 
  1. <table class="common-table zebra-striped"> class = "spoločná tabuľka zebry pruhovaná" >
  2. ...
  3. </table>

Príklad: Zebra-striped w/ TableSorter.js

V predchádzajúcom príklade zlepšujeme užitočnosť našich tabuliek poskytovaním funkcie triedenia prostredníctvom jQuery a pluginu Tablesorter . Kliknutím na hlavičku ľubovoľného stĺpca zmeníte zoradenie.

# Krstné meno Priezvisko Jazyk
1 Váš Jeden Angličtina
2 Joe Tehličky Angličtina
3 Stu Dent kód 
  1. <script type="text/javascript" src="js/jquery/jquery.tablesorter.min.js"></script> type = "text/javascript" src = "js/jquery/jquery.tablesorter.min.js" ></script> 
  2. < typ skriptu = "text/javascript" > 
  3.   $ ( dokument ). pripravený ( function () { 
  4.     $ ( "table#sortTableExample" ). tablesorter ( { sortList : [[ 1 , 0 ]]} );   
  5.   });
  6. </script>
  7. <table class = "common-table zebra-striped" > 
  8.   ...
  9. </table>

Formuláre

Predvolené štýly

Všetky formuláre majú predvolené štýly, aby boli prezentované čitateľným a škálovateľným spôsobom. K dispozícii sú štýly pre textové vstupy, výberové zoznamy, textové oblasti, prepínače a začiarkavacie políčka a tlačidlá.

Príklad legendy formulára
Nejaká hodnota tu
Malý úryvok textu pomocníka
Príklad legendy formulára
@
Príklad legendy formulára
Poznámka: Štítky obklopujú všetky možnosti pre oveľa väčšie oblasti kliknutia a použiteľnejšiu formu.
do Všetky časy sú zobrazené ako štandardný tichomorský čas (GMT -08:00).
Blok textu pomocníka na popis vyššie uvedeného poľa, ak je to potrebné.

Skladané formuláre

Pridajte .form-stackeddo kódu HTML svojho formulára a budete mať štítky v hornej časti ich polí namiesto vľavo od nich. Funguje to skvele, ak sú vaše formuláre krátke alebo máte dva stĺpce vstupov pre ťažšie formuláre.

Príklad legendy formulára
Príklad legendy formulára
Poznámka: Štítky obklopujú všetky možnosti pre oveľa väčšie oblasti kliknutia a použiteľnejšiu formu.

Tlačidlá

Podľa konvencie sa tlačidlá používajú na akcie, zatiaľ čo odkazy sa používajú na objekty. Napríklad „Stiahnuť“ môže byť tlačidlo a „nedávna aktivita“ môže byť odkaz.

Všetky tlačidlá majú predvolene svetlošedý štýl, ale .primarydostupná je aj modrá trieda. Navyše, rolovanie vlastných štýlov je jednoduché.

Príklady tlačidiel

Štýly tlačidiel možno použiť na čokoľvek s .btnaplikovaným. Zvyčajne ich budete chcieť použiť iba na prvky a, button, a vybrané inputprvky. Vyzerá to takto:

Alternatívne veľkosti

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

Primárna akcia Akcia
Primárna akcia Akcia

Deaktivovaný stav

Pre tlačidlá, ktoré nie sú aktívne alebo sú z nejakého dôvodu deaktivované aplikáciou, použite deaktivovaný stav. To je .disabledpre odkazy a :disabledpre buttonprvky.

Odkazy

Primárna akcia Akcia

Tlačidlá

Štýly upozornení a chýb pre úspech, varovania a chybové správy alebo upozornenia

Základné upozornenia

Jednoriadkové správy na zvýraznenie zlyhania, možného zlyhania alebo úspechu akcie. Obzvlášť užitočné pre formuláre.

×

Och, rýchlo! Zmeňte to a to a skúste to znova.

×

Svätý gaucamole! Najlepšie sa presvedčte, že nevyzeráte príliš dobre.

×

Výborne! Úspešne ste si prečítali túto výstražnú správu.

×

Hlavy hore! Toto je upozornenie, ktoré si vyžaduje vašu pozornosť, ale zatiaľ to nie je veľká priorita.

Blokovať správy

Pre správy, ktoré vyžadujú trochu vysvetlenia, máme upozornenia v štýle odseku. Sú ideálne na prebublávanie dlhších chybových hlásení, varovanie používateľa pred čakajúcou akciou alebo len na prezentáciu informácií pre väčší dôraz na stránku.

×

Och, rýchlo! Máte chybu!Zmeňte to a to a skúste to znova. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Vykonajte túto akciu Alebo urobte toto

×

Svätý gaucamole! Toto je varovanie!Najlepšie sa presvedčte, že nevyzeráte príliš dobre. Nulla vitae elit libero, pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Vykonajte túto akciu Alebo urobte toto

×

Výborne!Úspešne ste si prečítali túto výstražnú správu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum.

Vykonajte túto akciu Alebo urobte toto

×

Hlavy hore!Toto je upozornenie, ktoré si vyžaduje vašu pozornosť, ale zatiaľ to nie je veľká priorita.

Vykonajte túto akciu Alebo urobte toto

Popovers Komponenty na zobrazovanie obsahu v modáloch, popisoch a kontextových oknách

Modály

Modály – dialógové okná alebo svetelné okná – sú skvelé pre kontextové akcie v situáciách, keď je dôležité zachovať kontext na pozadí.

Modálny nadpis

×

Jedno pekné telo...

Primárny Sekundárne

Tipy na náradie

Twipsies sú veľmi užitočné na to, aby pomohli zmätenému používateľovi a nasmerovali ho správnym smerom.

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 kvázi fugit fugit, totam doloremque unde sunt sedtis accustem quae auttaquagit .

nižšie!
správny!
vľavo!
vyššie!

Popovers

Použite kontextové okná na poskytnutie podtextových informácií na stránku bez ovplyvnenia rozloženia.

Popover Title

Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Používanie Bootstrap s Less Super Naplňte svoj CSS premennými, mixmi a funkciami

Bootstrap bol vytvorený s Preboot , open-source balíkom mixinov a premenných, ktoré sa majú používať v spojení s Less , CSS preprocesorom pre rýchlejší a jednoduchší vývoj webu.

Pozrite sa, ako sme použili Preboot v Bootstrap a ako ho môžete využiť, ak sa rozhodnete spustiť Less na svojom ďalšom projekte.

Ako sa to používa

Túto možnosť použite na plné využitie premenných Bootstrap Less, mixinov a vnorenia do CSS prostredníctvom javascriptu vo vašom prehliadači.

  1. <link rel="stylesheet/less" type="text/css" href="less/bootstrap.less" media="all" /> rel = "stylesheet/less" type = "text/css" href = "less/bootstrap.less" media = "all" />    
  2. < typ skriptu = "text/javascript" src = "js/menej-1.0.41.min.js" ></script>

Necítite riešenie .js? Vyskúšajte aplikáciu Less Mac alebo použite Node.js na kompiláciu pri nasadzovaní kódu.

Čo je zahrnuté

Tu sú niektoré z najdôležitejších prvkov toho, čo je súčasťou služby Twitter Bootstrap ako súčasť Bootstrapu. Prejdite na webovú stránku Bootstrap alebo na stránku projektu Github, kde si stiahnete a dozviete sa viac.

Farebné premenné

Premenné v Less sú ideálne na udržiavanie a aktualizáciu vašich CSS bez bolesti hlavy. Ak chcete zmeniť hodnotu farby alebo často používanú hodnotu, aktualizujte ju na jednom mieste a je to.

  1. // Odkazy
  2. @linkColor : #8b59c2;         
  3. @linkColorHover :     stmaviť ( @linkColor , 10 ); 
  5. // Šedé
  6. @black : #000;             
  7. @greyDark :           zosvetliť ( @black , 25 %); 
  8. @šedá :               zosvetliť ( @čierna , 50 %); 
  9. @greyLight :          zosvetliť ( @black , 70 %); 
  10. @greyLighter :        zosvetliť ( @black , 90 %); 
  11. @biela : #fff;             
  13. // Zvýrazňujúce farby
  14. @blue : #08b5fb;              
  15. @zelená : #46a546 ;             
  16. @red : #9d261d;               
  17. @yellow : #ffc40d;            
  18. @oranžová : #f89406 ;            
  19. @pink : #c3325f;              
  20. @fialová : #7a43b6 ;            
  22. // Základná línia
  23. @baseline : 20px ;

Komentovanie

/* ... */Less poskytuje okrem bežnej syntaxe CSS aj ďalší štýl komentovania .

  1. // Toto je komentár
  2. /* Toto je tiež komentár */

Mieša wazoo

Mixiny sú v podstate zahrnuté alebo čiastočné pre CSS, čo vám umožňuje skombinovať blok kódu do jedného. Sú skvelé pre vlastnosti s predponou dodávateľa, ako box-shadowsú prechody v rôznych prehliadačoch, zásobníky písiem a ďalšie. Nižšie je uvedená ukážka mixov, ktoré sú súčasťou Bootstrapu.

Hromady písiem

  1. #font {
  2.   . skratka ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
  3.     font - size : @size ; 
  4.     font - weight : @weight ; 
  5.     line - height : @lineHeight ; 
  6.   }
  7.   . bezpätkové ( @váha : normálna , @veľkosť : 14px , @ Výška riadku : 20px ) {     
  8.     font - rodina : " Helvetica Neue " , ​​Helvetica , Arial , bezpätkové ;   
  9.     font - size : @size ; 
  10.     font - weight : @weight ; 
  11.     line - height : @lineHeight ; 
  12.   }
  13.   . serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
  14.     font - family : " Georgia " , Times New Roman , Times , bezpätkové ;     
  15.     font - size : @size ; 
  16.     font - weight : @weight ; 
  17.     line - height : @lineHeight ; 
  18.   }
  19.   . monospace ( @weight : normal , @size : 12px , @lineHeight : 20px ) {     
  20.     font - rodina : "Monaco" , Courier New , monospace ;   
  21.     font - size : @size ; 
  22.     font - weight : @weight ; 
  23.     line - height : @lineHeight ; 
  24.   }
  25. }

Prechody

  1. #gradient {
  2.   . horizontálne ( @startColor : #555, @endColor: #333) { 
  3. farba     pozadia : @endColor ; _ 
  4.     pozadie - repeat : repeat - x ;
  5.     background - image : - khtml - gradient ( lineárny , vľavo hore , vpravo hore , od ( @startColor ), po ( @endColor )); // Konqueror   
  6.     background - image : - moz - linear - gradient ( left , @startColor , @endColor ); // FF 3.6+    
  7.     background - image : - ms - linear - gradient ( left , @startColor , @endColor ); // IE10    
  8.     background - image : - webkit - gradient ( lineárny , vľavo hore , vpravo hore , farba - stop ( 0 %, @startColor ), farba - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
  9.     background - image : - webkit - linear - gradient ( left , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
  10.     background - image : - o - linear - gradient ( left , @startColor , @endColor ); // Opera 11.10    
  11.     - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+  
  12.     filter : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor )); // IE6 a IE7 
  13.     background - image : linear - gradient ( left , @startColor , @endColor ); // Le štandard   
  14.   }
  15.   . vertikálne ( @startColor : #555, @endColor: #333) { 
  16. farba     pozadia : @endColor ; _ 
  17.     pozadie - repeat : repeat - x ;
  18.     background - image : - khtml - gradient ( lineárny , vľavo hore , vľavo dole , od ( @startColor ), do ( @endColor )); // Konqueror   
  19.     background - image : - moz - linear - gradient ( @startColor , @endColor ); // FF 3.6+   
  20.     pozadie - obrázok : - ms - lineárny - gradient ( @startColor , @endColor ); // IE10   
  21.     background - image : - webkit - gradient ( lineárny , vľavo hore , vľavo dole , farba - stop ( 0 %, @startColor ), farba - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
  22.     background - image : - webkit - linear - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
  23.     background - image : - o - linear - gradient ( @startColor , @endColor ); // Opera 11.10   
  24.     - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+  
  25.     filter : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor )); // IE6 a IE7 
  26.     background - image : linear - gradient ( @startColor , @endColor ); // Štandart  
  27.   }
  28.   . smerové ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
  29.     ...
  30.   }
  31.   . vertikálne - tri - farby ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 0,5, @endColor: #c3325f) { 
  32.     ...
  33.   }
  34. }

Operácie a gridový systém

Majte fantáziu a vykonajte trochu matematiky, aby ste vytvorili flexibilné a výkonné mixy, ako je ten nižšie.

  1. // Griditude
  2. @gridColumns : 16 ;       
  3. @gridColumnWidth : 40px ;   
  4. @gridGutterWidth : 20px ;   
  6. // Grid System
  7. . kontajner {
  8.   šírka : @siteWidth ; 
  9.   okraj : 0 auto ;  
  10.   . clearfix ();
  11. }
  12. . stĺpce ( @columnSpan : 1 ) {  
  13.   displej : inline ; 
  14.   plavák : vľavo ;
  15.   šírka : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  16. ľavý   okraj : @gridGutterWidth ; _ 
  17.   &: prvý - dieťa {
  18. ľavý     okraj : 0 ; _ 
  19.   }
  20. }
  21. . posun ( @columnOffset : 1 ) {  
  22.   margin - left : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! dôležitý ;          
  23. }