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 webů.
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.
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 ›
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 columns" >
- ...
- </div>
- <div class = "span10 columns" >
- ...
- </div>
- </div>
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. Vypadá to takto:
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 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
<ul>
<ul.unstyled>
<ol>
dl
<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 |
---|---|---|---|
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>
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.
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.
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 .primary
třídu, světle modrou .info
třídu, zelenou .success
třídu a červenou .danger
třídu. Kromě toho je vytváření vlastních stylů snadné.
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 deaktivována, použijte deaktivovaný stav. To je .disabled
pro odkazy a :disabled
pro <button>
prvky.
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.
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.
Modály – dialogy 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.
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.
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;
- @š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 ;
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č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-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 ;
- }
- . 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 ;
- }
- }
- #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
- background - image : - 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+
- background - 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 ;
- 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í
- }
- . směrový ( @startColor : #555, @endColor: #333, @deg: 45deg) {
- ...
- }
- . vertikální - tři - barvy ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 50 %, @endColor: #c3325f) {
- ...
- }
- }
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 ) {
- margin - left : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) + @extraSpace ;
- }