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.

História

V predchádzajúcich dňoch Twitteru inžinieri používali takmer akúkoľvek knižnicu, ktorú poznali, aby splnili požiadavky na front-end. Bootstrap začal ako odpoveď na výzvy, ktoré sa objavili, a vývoj sa rýchlo zrýchlil počas prvého Hackweeku na Twitteri.

S pomocou a spätnou väzbou mnohých inžinierov na Twitteri sa Bootstrap výrazne rozrástol, aby zahŕňal nielen základné štýly, ale aj elegantnejšie a odolnejšie predné dizajnové vzory.

Prečítajte si viac na dev.twitter.com ›

Podpora prehliadača

Bootstrap je testovaný a podporovaný v hlavných moderných prehliadačoch ako Chrome, Safari, Internet Explorer a Firefox.

Najnovšie Safari
Najnovší Google Chrome
Firefox 4+
Internet Explorer 7+
Opera 11

Čo je zahrnuté

Bootstrap je dodávaný s kompilovanými CSS, nekompilovanými a vzorovými šablónami.

Všetky pôvodné súbory .less
Plne skompilované a minifikované CSS
Kompletná dokumentácia sprievodcu štýlmi
Vzorová šablóna stránky (viac čoskoro)

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.

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

1/3

2/3

Odsadenie stĺpcov

8 posunutie 4

1/3 posun 2/3 s

4 posunutie 4

5 posunutie 3

10 posun 6

Pevné rozloženie

Predvolené a jednoduché rozloženie so šírkou 940 pixelov na stred pre takmer akúkoľvek webovú lokalitu alebo stránku poskytovanú jedným súborom <div.container>.

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

Fluidné rozloženie

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

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

Nadpisy a kopírovanie

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

Celá typografická mriežka je založená na dvoch premenných Less v našom súbore preboot.less: @basefonta @baseline. Prvým je základná veľkosť písma používaná v celom texte a druhým je výška základného riadku.

Tieto premenné a trochu matematiky používame na vytváranie okrajov, výplní a výšok riadkov všetkých našich typov a ďalších.

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…

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 označenie dodatočnej dôležitosti alebo zvýraznenia slova alebo frázy v porovnaní s okolitým textom. Používajte <strong>pre dôležitosť a <em>pre zdôraznenie stresu .

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.

Poznámka: V HTML5 je stále v poriadku používať značky <b>a <i>a nemusia byť štylizované tučným písmom a kurzívou (hoci ak existuje sémantický prvok, použite ho). <b>je určený na zvýraznenie slov alebo fráz bez vyjadrenia ďalšej dôležitosti, zatiaľ čo <i>väčšinou ide o hlas, technické výrazy atď.

Adresy

Prvok <address>sa používa na kontaktné informácie jeho najbližšieho predka alebo celého súboru práce. 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 <address>musí končiť zalomením riadka ( <br />) alebo musí byť zabalený do značky na úrovni bloku (napr. <p>), aby sa obsah správne štruktúroval.

Skratky

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

Blokové úvodzovky

<blockquote> <p> <small>

Ako citovať

Ak chcete zahrnúť blokovú citáciu, zabaľte <blockquote>sa <p>a <small>značky. Použite <small>prvok na citovanie svojho zdroja a dostanete —pred ním pomlčku.

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

zoznamy

Neusporiadané`<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 veľ
Aenean sit amet erat nunc
Eget porttitor lorem

Neštylizované`<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 veľ
Aenean sit amet erat nunc
Eget porttitor lorem

Objednané`<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 veľ
Aenean sit amet erat nunc
Eget porttitor lorem

Popis`dl`

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.

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 <thead>tak, 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 , <tbody>takž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

<tabuľka>
  ...
</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

Poznámka: Zebra-striping je progresívne vylepšenie, ktoré nie je dostupné pre staršie prehliadače ako IE8 a nižšie.

<table class = "zebra-striped" > 
...
</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

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<script > 
  $ ( funkcia () { 
    $ ( "table#sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
<table class = "zebra-striped" > 
  ...
</table>

Pevná horná lišta

Čo je to

Naša horná lišta je pevná lišta, ktorá obsahuje logo alebo názov webovej stránky, primárnu navigáciu a vyhľadávací formulár.

Prispôsobiteľné

Všetky prvky, ako aj celý horný panel, sú voliteľné. Môžete si vybrať, či chcete zahrnúť logo/názov, navigáciu, vyhľadávanie a sekundárnu navigáciu – alebo akúkoľvek ich kombináciu.

Vrátane rozbaľovacích zoznamov

Ako súčasť hlavnej navigácie sme zahrnuli možnosť pridať do navigácie rozbaľovacie zoznamy. Pozrite sa na sekundárnu navigáciu vyššie (zarovnaná vpravo), aby ste videli, ako sa to robí.

Poznámka: Keď používate horný panel na ľubovoľnej stránke, nezabudnite zohľadniť prekrytie, ktoré spôsobuje, pridaním padding-top: 40px;do súboru body.

Tablety a pilulky

Vytvorte jednoduchú sekundárnu navigáciu pomocou <ul>. Prepínajte medzi kartami alebo tabletkami pridaním príslušnej triedy.

Skvelé pre podsekcie obsahu, ako sú naše stránky s nastaveniami účtu a časové osy používateľov na prepínanie medzi stránkami s podobným obsahom. Dostupné v záložkách alebo tabletkových štýloch.

<ul class = "tabs" > 
  <li class = "active" ><a href = "#" > Domov </a></li>  
  <li><a href = "#" > Profil </a></li> 
  <li><a href = "#" > Správy </a></li> 
  <li><a href = "#" > Nastavenia </a></li> 
  <li><a href = "#" > Kontaktovať </a></li> 
</ul>

<ul class = "pilulky" > 
  <li class = "active" ><a href = "#" > Domov </a></li>  
  <li><a href = "#" > Profil </a></li> 
  <li><a href = "#" > Správy </a></li> 
  <li><a href = "#" > Nastavenia </a></li> 
  <li><a href = "#" > Kontaktovať </a></li> 
</ul>

Stránkovanie

Mimoriadne zjednodušené stránkovanie v minimalistickom štýle inšpirované Rdio. Veľký blok je ťažké prehliadnuť, je ľahko škálovateľný a poskytuje veľké klikacie plochy.

<div class = "stránkovanie" > 
  <ul>
    <li class = "predchádzajúca zakázaná" ><a href = "#" > ← Predchádzajúce </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 = "next" ><a href = "#" > Next → </a></li>  
  </ul>
</div>

Základné upozornenia

div.alert-message

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

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

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

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

div.alert-message.block-message

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.

Sväté guacamole! 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

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

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

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

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.

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.

<link rel = "stylesheet/less" href = "less/bootstrap.less" media = "all" />    
<script src = "js/less-1.1.3.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.

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.

// Odkazy
@linkColor : #8b59c2;         
@linkColorHover :     stmaviť ( @linkColor , 10 ); 
 
// Šedé
@black : #000;             
@greyDark :           zosvetliť ( @black , 25 %); 
@šedá :               zosvetliť ( @čierna , 50 %); 
@greyLight :          zosvetliť ( @black , 70 %); 
@greyLighter :        zosvetliť ( @black , 90 %); 
@biela : #fff;             
 
// Zvýrazňujúce farby
@blue : #08b5fb;              
@zelená : #46a546 ;             
@red : #9d261d;               
@yellow : #ffc40d;            
@oranžová : #f89406 ;            
@pink : #c3325f;              
@fialová : #7a43b6 ;            
 
// Mriežka základnej čiary
@basefont : 13px ;          
@baseline : 18px ;

Komentovanie

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

// Toto je komentár
/* 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

#font {
  . skratka ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    font - size : @size ; 
    font - weight : @weight ; 
    line - height : @lineHeight ; 
  }
  . bezpätkové ( @váha : normálna , @veľkosť : 14px , @ Výška riadku : 20px ) {     
    font - rodina : " Helvetica Neue " , Helvetica , Arial , bezpätkové ;   
    font - size : @size ; 
    font - weight : @weight ; 
    line - height : @lineHeight ; 
  }
  . serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    font - family : " Georgia " , Times New Roman , Times , bezpätkové ;     
    font - size : @size ; 
    font - weight : @weight ; 
    line - height : @lineHeight ; 
  }
  . monospace ( @weight : normal , @size : 12px , @lineHeight : 20px ) {     
    font - rodina : "Monaco" , Courier New , monospace ;   
    font - size : @size ; 
    font - weight : @weight ; 
    line - height : @lineHeight ; 
  }
}

Prechody

#gradient {
  . horizontálne ( @startColor : #555, @endColor: #333) { 
farba     pozadia : @endColor ; _ 
    pozadie - repeat : repeat - x ;
    background - image : - khtml - gradient ( lineárny , vľavo hore , vpravo hore , od ( @startColor ), po ( @endColor )); // Konqueror   
    background - image : - moz - linear - gradient ( left , @startColor , @endColor ); // FF 3.6+    
    background - image : - ms - linear - gradient ( left , @startColor , @endColor ); // IE10    
    background - image : - webkit - gradient ( lineárny , vľavo hore , vpravo hore , farba - stop ( 0 %, @startColor ), farba - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    background - image : - webkit - linear - gradient ( left , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    background - image : - o - linear - gradient ( left , @startColor , @endColor ); // Opera 11.10    
    background - image : linear - gradient ( left , @startColor , @endColor ); // Le štandard   
  }
  . vertikálne ( @startColor : #555, @endColor: #333) { 
farba     pozadia : @endColor ; _ 
    pozadie - repeat : repeat - x ;
    background - image : - khtml - gradient ( lineárny , vľavo hore , vľavo dole , od ( @startColor ), do ( @endColor )); // Konqueror   
    background - image : - moz - linear - gradient ( @startColor , @endColor ); // FF 3.6+   
    pozadie - obrázok : - ms - lineárny - gradient ( @startColor , @endColor ); // IE10   
    background - image : - webkit - gradient ( lineárny , vľavo hore , vľavo dole , farba - stop ( 0 %, @startColor ), farba - 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 ); // Štandart  
  }
  . smerové ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . vertikálne - tri - farby ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 50 %, @endColor: #c3325f) { 
    ...
  }
}

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.

// Griditude
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
@siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));                 
 
// Grid System
. kontajner {
  šírka : @siteWidth ; 
  okraj : 0 auto ;  
  . clearfix ();
}
. stĺpce ( @columnSpan : 1 ) {  
  šírka : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
}
. posun ( @columnOffset : 1 ) {  
  margin - left : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) + @extraSpace ;           
}

Bootstrap

Bootstrap z Twitteru

Hotlink na CSS

Použite ho s menej

Fork na GitHub

O Bootstrape Stručná história, podpora prehliadača a ďalšie

História

Podpora prehliadača

Čo je zahrnuté

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

Predvolená mriežka

Príklad označenia mriežky

Odsadenie stĺpcov

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

Pevné rozloženie

Fluidné rozloženie

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

Nadpisy a kopírovanie

h1. Nadpis 1

h2. Nadpis 2

h3. Nadpis 3

h4. Nadpis 4

h5. Nadpis 5

h6. Nadpis 6

Príklad odseku

Príklad nadpisu Má podnadpis…

Misc. prvkov

Kedy použiť

Dôraz v odseku

Adresy

Skratky

Blokové úvodzovky

Ako citovať

zoznamy

Neusporiadané<ul>

Neštylizované<ul.unstyled>

Objednané<ol>

Popisdl

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

Stavebné stoly

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

Príklad: Zebra pruhovaná

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

Formuláre

Predvolené štýly

Skladané formuláre

Tlačidlá

Príklady tlačidiel

Alternatívne veľkosti

Deaktivovaný stav

Odkazy

Tlačidlá

Navigácia

Pevná horná lišta

Názov projektu

Čo je to

Prispôsobiteľné

Vrátane rozbaľovacích zoznamov

Tablety a pilulky

Stránkovanie

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

Základné upozornenia

Blokovať správy

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

Modály

Modálny nadpis

Tipy na náradie

Popovers

Popover Title

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

Ako sa to používa

Čo je zahrnuté

Premenné

Komentovanie

Mieša wazoo

Hromady písiem

Prechody

Operácie a gridový systém

Neusporiadané`<ul>`

Neštylizované`<ul.unstyled>`

Objednané`<ol>`

Popis`dl`