Komponenty

Do Bootstrapu sú zabudované desiatky opakovane použiteľných komponentov, ktoré poskytujú navigáciu, upozornenia, kontextové okná a oveľa viac.

Skupiny tlačidiel

Použite skupiny tlačidiel na spojenie viacerých tlačidiel do jedného kompozitného komponentu. Zostavte ich pomocou série prvkov <a>alebo <button>prvkov.

Osvedčené postupy

Na používanie skupín tlačidiel a panelov s nástrojmi odporúčame nasledujúce pokyny:

  • Vždy používajte rovnaký prvok v jednej skupine tlačidiel <a>alebo <button>.
  • Nemiešajte tlačidlá rôznych farieb v rovnakej skupine tlačidiel.
  • Okrem textu alebo namiesto neho použite ikony, ale uistite sa, že tam, kde je to vhodné, uveďte aj alternatívny text a text nadpisu.

Súvisiace skupiny tlačidiel s rozbaľovacími ponukami (pozri nižšie) by sa mali vyvolať samostatne a vždy by mali obsahovať rozbaľovaciu vsuvku na označenie zamýšľaného správania.

Predvolený príklad

Tu je návod, ako HTML hľadá štandardnú skupinu tlačidiel vytvorenú pomocou tlačidiel kotviacich značiek:

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

Príklad panela s nástrojmi

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>

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 .

Získať 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é.

Rozbaľovacie zoznamy tlačidiel

Príklad značenia

Podobne ako skupina tlačidiel, naše značenie používa bežné značenie tlačidiel, ale s niekoľkými doplnkami na vylepšenie štýlu a podporu rozbaľovacieho doplnku jQuery Bootstrap.

  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 zoznamy tlačidiel fungujú pri akejkoľvek veľkosti. veľkosť vašich tlačidiel je .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ť

Prehľad a príklady

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.

Veľkosti

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

  1. <div class = "btn-group" >
  2. ...
  3. <ul class = "rozbaľovacia ponuka pull-right" >
  4. <!-- odkazy na rozbaľovaciu ponuku -->
  5. </ul>
  6. </div>

Príklad značenia

Rozbaľujeme bežné rozbaľovacie zoznamy tlačidiel, aby sme poskytli druhú akciu tlačidla, ktorá funguje ako samostatný spúšťač rozbaľovacej ponuky.

  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>

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>

Stránkovanie na viacerých stranách

Kedy použiť

Mimoriadne zjednodušené stránkovanie s minimálnym štýlom 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.

Stavové odkazy na stránky

Odkazy sú prispôsobiteľné a fungujú za rôznych okolností so správnou triedou. .disabledpre nekliknuteľné odkazy a .activepre aktuálnu stránku.

Flexibilné zarovnanie

Ak chcete zmeniť zarovnanie odkazov stránkovania, pridajte jednu z dvoch voliteľných tried: .pagination-centereda .pagination-right.

Príklady

Predvolený komponent stránkovania je flexibilný a funguje v mnohých variáciách.

Označenie

<div>Stránkovanie je zabalené v <ul>.

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

Pager Pre rýchle predchádzajúce a nasledujúce odkazy

O pageri

Komponent pager je súbor odkazov pre jednoduché implementácie stránkovania so svetlým označením a ešte ľahšími štýlmi. Je to skvelé pre jednoduché stránky, ako sú blogy alebo časopisy.

Voliteľný vypnutý stav

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

Predvolený príklad

V predvolenom nastavení pager vycentruje odkazy.

  1. <ul class = "pager" >
  2. <li>
  3. <a href = "#" > Predchádzajúce </a>
  4. </li>
  5. <li>
  6. <a href = "#" > Ďalej </a>
  7. </li>
  8. </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>
Š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>
Inverzný <span class="label label-inverse">Inverse</span>

O

Odznaky sú malé, jednoduché komponenty na zobrazenie nejakého ukazovateľa alebo počtu. Bežne sa nachádzajú v e-mailových klientoch, ako je Mail.app, alebo v mobilných aplikáciách pre upozornenia push.

Dostupné triedy

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>
Inverzný 10 <span class="badge badge-inverse">10</span>

Jednotka hrdinu

Bootstrap poskytuje ľahký a flexibilný komponent nazývaný jednotka hrdinu na prezentáciu obsahu na vašom webe. Funguje dobre na marketingových a obsahovo náročných stránkach.

Označenie

Zabaľte svoj obsah divtakto:

  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>

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

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

  • 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

  • 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 = "span3" >
  3. <a href = "#" class = "thumbnail" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

V prípade vlastného obsahu HTML v miniatúrach sa označenie mierne zmení. Aby sme kdekoľvek umožnili blokovať obsah na úrovni, vymeníme ho <a>za <div>podobné:

  1. <ul class = "thumbnails" >
  2. <li class = "span3" >
  3. <div class = "thumbnail" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> Menovka miniatúry </h5>
  6. <p> Titulok miniatúry tu... </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.

Ľahké predvolené hodnoty

Prepísaná základná trieda

S Bootstrap 2 sme zjednodušili základnú triedu: .alertnamiesto .alert-message. Znížili sme aj minimálnu požadovanú značku – <p>v predvolenom nastavení sa nevyžaduje žiadne, iba vonkajšie <div>.

Jedna výstražná správa

Pre odolnejší komponent s menším množstvom kódu sme odstránili rozlišujúci vzhľad upozornení na blokovanie, správy, ktoré prichádzajú s väčším odsadením a zvyčajne väčším množstvom textu. Trieda sa tiež zmenila na .alert-block.


Ide to skvele s javascriptom

Bootstrap prichádza so skvelým doplnkom jQuery, ktorý podporuje výstražné správy, vďaka čomu je rýchle a jednoduché ich zrušenie.

Získať doplnok »

Príklady upozornení

Zabaľte svoju správu a voliteľnú ikonu zatvorenia do div s jednoduchou triedou.

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

Hlavy hore! Zariadenia so systémom iOS vyžadujú href="#"na zrušenie upozornení. Nezabudnite ho zahrnúť a atribút údajov pre ikony zatvorenia kotvy. 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ť.

Jednoducho rozšírte štandardnú výstražnú správu o dve voliteľné triedy: .alert-blockpre viac výplňových a textových ovládacích prvkov a .alert-headingpre zodpovedajúci nadpis.

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. <a class = "close" data-dismiss = "alert" href = "#" > × </a>
  3. <h4 class = "alert-heading" > Upozornenie! </h4>
  4. Najlepšie sa presvedčte sami, nie ste...
  5. </div>

Kontextové alternatívy Pridajte voliteľné triedy na zmenu konotácie výstrahy

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"
  3. style = " šírka : 60 %; " ></div>
  4. </div>

Pruhované

Používa prechod na vytvorenie pruhovaného efektu (bez IE).

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

Animované

Zoberie pruhovaný príklad a oživí ho (bez IE).

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

Možnosti a podpora prehliadača

Ďalšie farby

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

Pruhované pruhy

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

Správanie

Progress bary používajú prechody CSS3, takže ak dynamicky upravíte šírku pomocou javascriptu, plynulo sa zmení veľkosť.

Ak použijete .activetriedu, vaše .progress-stripedlišty postupu budú animovať pruhy zľava doprava.

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.

Opera a IE v súčasnosti nepodporujú animácie.

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>

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ú pre udalosti kliknutia znak href="#", ak radšej používate kotvu.

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