Komponenty

Desiatky opakovane použiteľných komponentov vytvorených tak, aby poskytovali navigáciu, upozornenia, kontextové okná a ďalšie.

Príklady

Dve základné možnosti spolu s dvoma špecifickejšími variáciami.

Skupina s jedným tlačidlom

Zabaľte sériu tlačidiel .btns .btn-group.

  1. <div class = "btn-group" >
  2. <button class = "btn" > Left </button>
  3. <button class = "btn" > Middle </button>
  4. <button class = "btn" > Vpravo </button>
  5. </div>

Viacero skupín tlačidiel

Kombinujte sady <div class="btn-group">do <div class="btn-toolbar">pre zložitejšie komponenty.

  1. <div class = "btn-toolbar" >
  2. <div class = "btn-group" >
  3. ...
  4. </div>
  5. </div>

Vertikálne skupiny tlačidiel

Zabezpečte, aby sa sada tlačidiel zobrazovala vertikálne, nie horizontálne.

  1. <div class = "btn-group btn-group-vertical" >
  2. ...
  3. </div>

Príchute začiarkavacieho políčka a rádia

Skupiny tlačidiel môžu fungovať aj ako rádiá, kde môže byť aktívne iba jedno tlačidlo, alebo zaškrtávacie políčka, kde môže byť aktívny ľubovoľný počet tlačidiel. Pozrite si na to dokumenty JavaScript .

Rozbaľovacie zoznamy v skupinách tlačidiel

Hlavy hore!Tlačidlá s rozbaľovacími ponukami musia byť v .btn-grouprámci .btn-toolbarsprávneho vykreslenia jednotlivo zabalené.

Prehľad a príklady

Použite ľubovoľné tlačidlo na spustenie rozbaľovacej ponuky umiestnením do .btn-groupa poskytnutím správnej značky ponuky.

  1. <div class = "btn-group" >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >
  3. Akcia
  4. <span class = "caret" ></span>
  5. </a>
  6. <ul class = "rozbaľovacia ponuka" >
  7. <!-- odkazy na rozbaľovaciu ponuku -->
  8. </ul>
  9. </div>

Funguje so všetkými veľkosťami tlačidiel

Rozbaľovacie ponuky tlačidiel fungujú pri akejkoľvek veľkosti: .btn-large, .btn-small, alebo .btn-mini.

Vyžaduje JavaScript

Rozbaľovacie zoznamy tlačidiel vyžadujú, aby fungoval rozbaľovací doplnok Bootstrap .

V niektorých prípadoch – napríklad v mobilných zariadeniach – sa rozbaľovacie ponuky rozšíria mimo zobrazovanú oblasť. Zarovnanie musíte vyriešiť manuálne alebo pomocou vlastného JavaScriptu.


Rozbaľovacie ponuky tlačidla Rozdeliť

Na základe štýlov a značiek skupiny tlačidiel môžeme ľahko vytvoriť rozdelené tlačidlo. Rozdeliť tlačidlá obsahujú štandardnú akciu na ľavej strane a rozbaľovací prepínač na pravej strane s kontextovými odkazmi.

  1. <div class = "btn-group" >
  2. <button class = "btn" > Akcia </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "rozbaľovacia ponuka" >
  7. <!-- odkazy na rozbaľovaciu ponuku -->
  8. </ul>
  9. </div>

Veľkosti

Na nastavenie veľkosti použite ďalšie triedy tlačidiel .btn-mini, .btn-small, alebo ..btn-large

  1. <div class = "btn-group" >
  2. <button class = "btn btn-mini" > Akcia </button>
  3. <button class = "btn btn-mini dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "rozbaľovacia ponuka" >
  7. <!-- odkazy na rozbaľovaciu ponuku -->
  8. </ul>
  9. </div>

Rozbaľovacie ponuky

Rozbaľovacie ponuky možno tiež prepínať zdola nahor pridaním jednej triedy k priamemu rodičovi .dropdown-menu. Obráti smer .careta zmení polohu samotnej ponuky tak, aby sa pohybovala zdola nahor namiesto zhora nadol.

  1. <div class = "btn-group dropup" >
  2. <button class = "btn" > Dropup </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "rozbaľovacia ponuka" >
  7. <!-- odkazy na rozbaľovaciu ponuku -->
  8. </ul>
  9. </div>

Štandardné stránkovanie

Jednoduché stránkovanie inšpirované Rdio, skvelé pre aplikácie a výsledky vyhľadávania. Veľký blok je ťažké prehliadnuť, je ľahko škálovateľný a poskytuje veľké klikacie plochy.

  1. <div class = "stránkovanie" >
  2. <ul>
  3. <li><a href = "#" > Predchádzajúca </a></li>
  4. <li><a href = "#" > 1 </a></li>
  5. <li><a href = "#" > 2 </a></li>
  6. <li><a href = "#" > 3 </a></li>
  7. <li><a href = "#" > 4 ​​</a></li>
  8. <li><a href = "#" > 5 </a></li>
  9. <li><a href = "#" > Ďalej </a></li>
  10. </ul>
  11. </div>

možnosti

Zakázané a aktívne stavy

Odkazy sú prispôsobiteľné rôznym okolnostiam. Používa .disabledsa na odkazy, na ktoré sa nedá kliknúť, a .activena označenie aktuálnej stránky.

  1. <div class = "stránkovanie" >
  2. <ul>
  3. <li class = "disabled" ><a href = "#" > « </a></li>
  4. <li class = "active" ><a href = "#" > 1 </a></li>
  5. ...
  6. </ul>
  7. </div>

Aktívne alebo deaktivované kotvy môžete voliteľne vymeniť za rozpätia, aby ste odstránili funkčnosť kliknutia a zároveň zachovali zamýšľané štýly.

  1. <div class = "stránkovanie" >
  2. <ul>
  3. <li class = "zakázané" ><span> « </span></li>
  4. <li class = "active" ><span> 1 </span></li>
  5. ...
  6. </ul>
  7. </div>

Veľkosti

Máte chuť na väčšie alebo menšie stránkovanie? Pridajte .pagination-large, .pagination-small, alebo .pagination-minipre ďalšie veľkosti.

  1. <div class = "pagination pagination-large" >
  2. <ul>
  3. ...
  4. </ul>
  5. </div>
  6. <div class = "stránkovanie" >
  7. <ul>
  8. ...
  9. </ul>
  10. </div>
  11. <div class = "pagination pagination-small" >
  12. <ul>
  13. ...
  14. </ul>
  15. </div>
  16. <div class = "pagination pagination-mini" >
  17. <ul>
  18. ...
  19. </ul>
  20. </div>

Zarovnanie

Pridajte jednu z dvoch voliteľných tried na zmenu zarovnania odkazov stránkovania: .pagination-centereda .pagination-right.

  1. <div class = "pagination-pagination-center" >
  2. ...
  3. </div>
  1. <div class = "pagination pagination-right" >
  2. ...
  3. </div>

Pager

Rýchle predchádzajúce a nasledujúce odkazy pre jednoduché implementácie stránkovania s ľahkým značením a štýlmi. Je to skvelé pre jednoduché stránky, ako sú blogy alebo časopisy.

Predvolený príklad

V predvolenom nastavení pager vycentruje odkazy.

  1. <ul class = "pager" >
  2. <li><a href = "#" > Predchádzajúce </a></li>
  3. <li><a href = "#" > Ďalej </a></li>
  4. </ul>

Zarovnané odkazy

Prípadne môžete zarovnať každý odkaz na strany:

  1. <ul class = "pager" >
  2. <li class = "previous" >
  3. <a href = "#" > Staršie </a>
  4. </li>
  5. <li class = "next" >
  6. <a href = "#" > Novšie → </a>
  7. </li>
  8. </ul>

Voliteľný vypnutý stav

Odkazy na pager tiež používajú .disabledtriedu všeobecných nástrojov zo stránkovania.

  1. <ul class = "pager" >
  2. <li class = "predchádzajúce zablokované" >
  3. <a href = "#" > Staršie </a>
  4. </li>
  5. ...
  6. </ul>

Štítky

Štítky Označenie
Predvolené <span class="label">Default</span>
Úspech <span class="label label-success">Success</span>
POZOR <span class="label label-warning">Warning</span>
Dôležité <span class="label label-important">Important</span>
Info <span class="label label-info">Info</span>
Inverzne <span class="label label-inverse">Inverse</span>

Odznaky

názov Príklad Označenie
Predvolené 1 <span class="badge">1</span>
Úspech 2 <span class="badge badge-success">2</span>
POZOR 4 <span class="badge badge-warning">4</span>
Dôležité 6 <span class="badge badge-important">6</span>
Info 8 <span class="badge badge-info">8</span>
Inverzne 10 <span class="badge badge-inverse">10</span>

Ľahko skladateľné

Pre jednoduchú implementáciu sa štítky a odznaky jednoducho zbalia (prostredníctvom :emptyselektora CSS), keď v nich neexistuje žiadny obsah.

Jednotka hrdinu

Ľahký, flexibilný komponent na prezentáciu kľúčového obsahu na vašom webe. Funguje dobre na marketingových a obsahovo náročných stránkach.

Ahoj svet!

Toto je jednoduchá hrdinská jednotka, jednoduchý komponent v štýle jumbotronu, ktorý upúta pozornosť na odporúčaný obsah alebo informácie.

Uč sa viac

  1. <div class = "hrdinská jednotka" >
  2. <h1> Nadpis </h1>
  3. <p> Slogan </p>
  4. <p>
  5. <a class = "btn btn-primary btn-large" >
  6. Uč sa viac
  7. </a>
  8. </p>
  9. </div>

Hlavička stránky

Jednoduchý shell na h1vhodné rozloženie a segmentovanie častí obsahu na stránke. Môže využívať h1predvolený smallprvok , ako aj väčšinu ostatných komponentov (s ďalšími štýlmi).

  1. <div class = "page-header" >
  2. <h1> Príklad hlavičky stránky <small> Podtext pre hlavičku </small></h1>
  3. </div>

Predvolené miniatúry

V predvolenom nastavení sú miniatúry Bootstrapu navrhnuté tak, aby zobrazovali prepojené obrázky s minimálnym požadovaným označením.

Vysoko prispôsobiteľné

S trochou extra značenia je možné pridať akýkoľvek druh obsahu HTML, ako sú nadpisy, odseky alebo tlačidlá, do miniatúr.

  • 300 x 200

    Menovka s miniatúrou

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Akcia Akcia

  • 300 x 200

    Menovka s miniatúrou

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Akcia Akcia

  • 300 x 200

    Menovka s miniatúrou

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Akcia Akcia

Prečo používať miniatúry

Miniatúry (predtým .media-gridaž do verzie 1.4) sú skvelé pre mriežky fotografií alebo videí, výsledky vyhľadávania obrázkov, maloobchodné produkty, portfóliá a oveľa viac. Môžu to byť odkazy alebo statický obsah.

Jednoduché, flexibilné značenie

Označenie miniatúr je jednoduché – stačí ak má ulľubovoľný počet liprvkov. Je tiež super flexibilný a umožňuje ľubovoľný typ obsahu s trochu väčším označením na zabalenie obsahu.

Používa veľkosti stĺpcov mriežky

Nakoniec, komponent miniatúr používa existujúce triedy mriežkového systému – ako .span2alebo .span3– na kontrolu rozmerov miniatúr.

Označenie

Ako už bolo spomenuté, požadované označenie pre miniatúry je ľahké a jednoduché. Tu je pohľad na predvolené nastavenie pre prepojené obrázky :

  1. <ul class = "thumbnails" >
  2. <li class = "span4" >
  3. <a href = "#" class = "thumbnail" >
  4. <img data-src = "holder.js/300x200" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

V prípade vlastného obsahu HTML v miniatúrach sa označenie mierne zmení. Ak chcete kdekoľvek povoliť obsah na úrovni blokovania, vymeníme ho <a>za <div>podobné:

  1. <ul class = "thumbnails" >
  2. <li class = "span4" >
  3. <div class = "thumbnail" >
  4. <img data-src = "holder.js/300x200" alt = "" >
  5. <h3> Menovka miniatúry </h3>
  6. <p> Popis miniatúry... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

Viac príkladov

Preskúmajte všetky svoje možnosti s rôznymi triedami mriežky, ktoré máte k dispozícii. Môžete tiež kombinovať rôzne veľkosti.

Predvolené upozornenie

Zabalením ľubovoľného textu a voliteľného tlačidla na zrušenie získate .alertzákladné varovné hlásenie.

POZOR! Najlepšie sa presvedčte, že nevyzeráte príliš dobre.
  1. <div class = "upozornenie" >
  2. < typ tlačidla = "button" class = "zavrieť" data-dismiss = "upozornenie" > × </button>
  3. <strong> Upozornenie! </strong> Najlepšie sa presvedčte, že nevyzeráte príliš dobre.
  4. </div>

Tlačidlá na zatvorenie

Prehliadače Mobile Safari a Mobile Opera okrem data-dismiss="alert"atribútu vyžadujú href="#"pri použití značky aj na odmietnutie upozornení <a>.

  1. <a href = "#" class = "zavrieť" data-dismiss = "upozornenie" > × </a>

Prípadne môžete použiť <button>prvok s atribútom data, ktorý sme sa rozhodli použiť pre naše dokumenty. Pri použití <button>musíte zahrnúť, type="button"inak sa vaše formuláre nemusia odoslať.

  1. < typ tlačidla = "button" class = "zavrieť" data-dismiss = "upozornenie" > × </button>

Zrušte upozornenia prostredníctvom JavaScriptu

Použite doplnok jQuery pre upozornenia na rýchle a jednoduché zrušenie upozornení.


možnosti

V prípade dlhších správ zväčšite výplň v hornej a dolnej časti obalu výstrahy pridaním .alert-block.

POZOR!

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.

  1. <div class = "alert alert-block" >
  2. < typ tlačidla = "button" class = "zavrieť" data-dismiss = "upozornenie" > × </button>
  3. <h4> Upozornenie! </h4>
  4. Najlepšie sa presvedčte sami, nie ste...
  5. </div>

Kontextové alternatívy

Ak chcete zmeniť konotáciu výstrahy, pridajte voliteľné triedy.

Chyba alebo nebezpečenstvo

Och, rýchlo! Zmeňte pár vecí a skúste odoslať znova.
  1. <div class = "alert alert-error" >
  2. ...
  3. </div>

Úspech

Výborne! Úspešne ste si prečítali túto dôležitú výstražnú správu.
  1. <div class = "alert alert-success" >
  2. ...
  3. </div>

Informácie

Hlavy hore! Toto upozornenie si vyžaduje vašu pozornosť, ale nie je mimoriadne dôležité.
  1. <div class = "alert alert-info" >
  2. ...
  3. </div>

Príklady a značky

Základné

Predvolený indikátor priebehu so zvislým prechodom.

  1. <div class = "progress" >
  2. <div class = "bar" style = " šírka : 60 %; " ></div>
  3. </div>

Pruhované

Používa prechod na vytvorenie pruhovaného efektu. Nie je k dispozícii v IE7-8.

  1. <div class = "progress progress-striped" >
  2. <div class = "bar" style = " šírka : 20 %; " ></div>
  3. </div>

Animované

Pridať .activek .progress-stripedanimácii pruhov sprava doľava. Nie je k dispozícii vo všetkých verziách IE.

  1. <div class = "progress progress-stripped active" >
  2. <div class = "bar" style = " šírka : 40 %; " ></div>
  3. </div>

Skladaný

Umiestnite viacero tyčí do toho istého .progressa stohujte ich.

  1. <div class = "progress" >
  2. <div class = "bar bar-success" style = " width : 35 %; " ></div>
  3. <div class = "bar bar-warning" style = " width : 20 %; " ></div>
  4. <div class = "bar bar-danger" style = " width : 10 %; " ></div>
  5. </div>

možnosti

Ďalšie farby

Panely priebehu používajú niektoré z rovnakých tried tlačidiel a upozornení pre konzistentné štýly.

  1. <div class = "progress progress-info" >
  2. <div class = "bar" style = " width : 20 % " ></div>
  3. </div>
  4. <div class = "progress progress-success" >
  5. <div class = "bar" style = " width : 40 % " ></div>
  6. </div>
  7. <div class = "progress progress-warning" >
  8. <div class = "bar" style = " width : 60 % " ></div>
  9. </div>
  10. <div class = "progress progress-danger" >
  11. <div class = "bar" style = " width : 80 % " ></div>
  12. </div>

Pruhované pruhy

Podobne ako pri plných farbách máme rôzne pruhované indikátory priebehu.

  1. <div class = "progress progress-info progress-striped" >
  2. <div class = "bar" style = " width : 20 % " ></div>
  3. </div>
  4. <div class = "progress progress-success progress-striped" >
  5. <div class = "bar" style = " width : 40 % " ></div>
  6. </div>
  7. <div class = "progress progress-warning progress-stripped" >
  8. <div class = "bar" style = " width : 60 % " ></div>
  9. </div>
  10. <div class = "progress progress-danger progress-striped" >
  11. <div class = "bar" style = " width : 80 % " ></div>
  12. </div>

Podpora prehliadača

Panely priebehu používajú prechody, prechody a animácie CSS3 na dosiahnutie všetkých svojich efektov. Tieto funkcie nie sú podporované v IE7-9 alebo starších verziách Firefoxu.

Verzie staršie ako Internet Explorer 10 a Opera 12 nepodporujú animácie.

Štýly abstraktných objektov na vytváranie rôznych typov komponentov (ako sú komentáre blogu, Tweety atď.), ktoré obsahujú obrázok zarovnaný doľava alebo doprava popri textovom obsahu.

Predvolený príklad

Predvolené médium umožňuje umiestniť mediálny objekt (obrázky, video, zvuk) naľavo alebo napravo od bloku obsahu.

64x64

Nadpis média

Cras sit amet nibh libero, in gravida nulla. Nulla alebo metus skelerisque ante Sollicitudin Commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
64x64

Nadpis média

Cras sit amet nibh libero, in gravida nulla. Nulla alebo metus skelerisque ante Sollicitudin Commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
64x64

Nadpis média

Cras sit amet nibh libero, in gravida nulla. Nulla alebo metus necelerisque ante Sollicitudin Commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  1. <div class = "media" >
  2. <a class = "pull-left" href = "#" >
  3. <img class = "media-object" data-src = "holder.js/64x64" >
  4. </a>
  5. <div class = "media-body" >
  6. <h4 class = "media-heading" > Media title </h4>
  7. ...
  8.  
  9. <!-- Vnorený mediálny objekt -->
  10. <div class = "media" >
  11. ...
  12. </div>
  13. </div>
  14. </div>

Zoznam médií

S trochou dodatočných značiek môžete použiť zoznam médií (užitočné pre vlákna komentárov alebo zoznamy článkov).

  • 64x64

    Nadpis média

    Cras sit amet nibh libero, in gravida nulla. Nulla alebo metus necelerisque ante Sollicitudin Commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    64x64

    Vnorený nadpis média

    Cras sit amet nibh libero, in gravida nulla. Nulla alebo metus necelerisque ante Sollicitudin Commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
    64x64

    Vnorený nadpis média

    Cras sit amet nibh libero, in gravida nulla. Nulla alebo metus necelerisque ante Sollicitudin Commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
    64x64

    Vnorený nadpis média

    Cras sit amet nibh libero, in gravida nulla. Nulla alebo metus necelerisque ante Sollicitudin Commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
  • 64x64

    Nadpis média

    Cras sit amet nibh libero, in gravida nulla. Nulla alebo metus necelerisque ante Sollicitudin Commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
  1. <ul class = "media-list" >
  2. <li class = "media" >
  3. <a class = "pull-left" href = "#" >
  4. <img class = "media-object" data-src = "holder.js/64x64" >
  5. </a>
  6. <div class = "media-body" >
  7. <h4 class = "media-heading" > Media title </h4>
  8. ...
  9.  
  10. <!-- Vnorený mediálny objekt -->
  11. <div class = "media" >
  12. ...
  13. </div>
  14. </div>
  15. </li>
  16. </ul>

Wells

Použite studňu ako jednoduchý efekt na prvok, aby ste získali vložený efekt.

Pozri, som v studni!
  1. <div class = "well" >
  2. ...
  3. </div>

Voliteľné triedy

Ovládajte výplň a zaoblené rohy pomocou dvoch voliteľných tried modifikátorov.

Pozri, som v studni!
  1. <div class = "well well-large" >
  2. ...
  3. </div>
Pozri, som v studni!
  1. <div class = "dobre dobre-male" >
  2. ...
  3. </div>

Ikona Zavrieť

Na odmietnutie obsahu, ako sú modály a upozornenia, použite všeobecnú ikonu zatvorenia.

  1. <button class = "close" > × </button>

Zariadenia so systémom iOS vyžadujú href="#"udalosti pre kliknutie, ak by ste radšej použili kotvu.

  1. <a class = "close" href = "#" > × </a>

Pomocné triedy

Jednoduché, zamerané triedy pre malé vylepšenia displeja alebo správania.

.vytiahnuť-vľavo

Posuňte prvok doľava

  1. trieda = "vytiahnuť doľava"
  1. . ťahať - doľava {
  2. plavák : vľavo ;
  3. }

.ťahať-vpravo

Umiestnite prvok doprava

  1. trieda = "ťahať-vpravo"
  1. . ťahať - vpravo {
  2. plavák : pravý ;
  3. }

.tlmené

Zmeňte farbu prvku na#999

  1. trieda = "stlmené"
  1. . stlmený {
  2. farba : #999;
  3. }

.clearfix

Zrušte floatna ľubovoľnom prvku

  1. class = "clearfix"
  1. . clearfix {
  2. * priblíženie : 1 ;
  3. &: pred ,
  4. &: po {
  5. displej : tabuľka ;
  6. obsah : "" ;
  7. }
  8. &: po {
  9. jasné : oboje ;
  10. }
  11. }