Príklad

Prepínateľné kontextové menu na zobrazenie zoznamov odkazov. Vytvorený interaktívnym pomocou rozbaľovacieho doplnku JavaScript .

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Akcia </a></li>  
  <li><a tabindex = "-1" href = "#" > Ďalšia akcia </a></li>  
  <li><a tabindex = "-1" href = "#" > Tu je niečo iné </a></li>  
  <li class = "delider" ></li> 
  <li><a tabindex = "-1" href = "#" > Samostatný odkaz </a></li>  
</ul>

Označenie

Ak sa pozriete len na rozbaľovaciu ponuku, tu je požadovaný kód HTML. Musíte zabaliť spúšťač rozbaľovacej ponuky a rozbaľovaciu ponuku do .dropdown, alebo iného prvku, ktorý deklaruje position: relative;. Potom už len vytvorte menu.

<div class = "dropdown" > 
  <!-- Odkaz alebo tlačidlo na prepnutie rozbaľovacej ponuky -->
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    <li><a tabindex = "-1" href = "#" > Akcia </a></li>  
    <li><a tabindex = "-1" href = "#" > Ďalšia akcia </a></li>  
    <li><a tabindex = "-1" href = "#" > Tu je niečo iné </a></li>  
    <li class = "delider" ></li> 
    <li><a tabindex = "-1" href = "#" > Samostatný odkaz </a></li>  
  </ul>
</div>

možnosti

Zarovnajte ponuky doprava a pridajte ďalšie úrovne rozbaľovacích ponúk.

Zarovnanie ponúk

Pridať .pull-rightdo a .dropdown-menuzarovnať rozbaľovaciu ponuku doprava.

<ul class = "dropdown-menu pull-right" role = "menu" aria-labelledby = "dLabel" >   
  ...
</ul>

Zakázané možnosti ponuky

Ak chcete prepojenie deaktivovať, pridajte .disableddo rozbaľovacej ponuky.<li>

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Bežný odkaz </a></li>  
  <li class = "disabled" ><a tabindex = "-1" href = "#" > Deaktivovaný odkaz </a></li>   
  <li><a tabindex = "-1" href = "#" > Ďalší odkaz </a></li>  
</ul>

Podponuky v rozbaľovacích zoznamoch

Pridajte ďalšiu úroveň rozbaľovacích ponúk, ktoré sa zobrazujú pri umiestnení kurzora myši ako tie v OS X, s niekoľkými jednoduchými doplnkami značiek. Pridať .dropdown-submenudo ľubovoľnej liv existujúcej rozbaľovacej ponuke pre automatický štýl.

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
  ...
  <li class = "rozbaľovacia-podponuka" > 
    <a tabindex = "-1" href = "#" > Ďalšie možnosti </a>  
    <ul class = "rozbaľovacia ponuka" > 
      ...
    </ul>
  </li>
</ul>

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.

<div class = "btn-group" > 
  <button class = "btn" > Left </button> 
  <button class = "btn" > Middle </button> 
  <button class = "btn" > Vpravo </button> 
</div>

Viaceré skupiny tlačidiel

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

<div class = "btn-toolbar" > 
  <div class = "btn-group" > 
    ...
  </div>
</div>

Vertikálne skupiny tlačidiel

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

<div class = "btn-group btn-group-vertical" > 
  ...
</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.

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    Akcia
    <span class = "caret" ></span> 
  </a>
  <ul class = "rozbaľovacia ponuka" > 
    <!-- odkazy na rozbaľovaciu ponuku -->
  </ul>
</div>

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

Rozbaľovacie zoznamy 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.

<div class = "btn-group" > 
  <button class = "btn" > Akcia </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "rozbaľovacia ponuka" > 
    <!-- odkazy na rozbaľovaciu ponuku -->
  </ul>
</div>

Veľkosti

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

<div class = "btn-group" > 
  <button class = "btn btn-mini" > Akcia </button> 
  <button class = "btn btn-mini dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "rozbaľovacia ponuka" > 
    <!-- odkazy na rozbaľovaciu ponuku -->
  </ul>
</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.

<div class = "btn-group dropup" > 
  <button class = "btn" > Dropup </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "rozbaľovacia ponuka" > 
    <!-- odkazy na rozbaľovaciu ponuku -->
  </ul>
</div>

Ľahké predvolené Rovnaké označenie, rôzne triedy

Všetky komponenty navigácie – karty, pilulky a zoznamy – zdieľajú v triede rovnaké základné označenie a štýly.nav .

Základné karty

Vezmite pravidelné <ul>odkazy a pridajte .nav-tabs:

<ul class = "nav nav-tabs" > 
  <li class = "active" > 
    <a href = "#" > Domov </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Základné pilulky

Vezmite rovnaký kód HTML, ale .nav-pillsnamiesto toho použite:

<ul class = "nav nav-pills" > 
  <li class = "active" > 
    <a href = "#" > Domov </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Deaktivovaný stav

Pre ľubovoľný komponent navigácie (karty, pilulky alebo zoznam) pridajte sivé odkazy a žiadne efekty.disabled po prejdení myšou . Na odkazy však bude možné kliknúť, pokiaľ atribút neodstránite. Prípadne môžete implementovať vlastný JavaScript, aby ste zabránili týmto kliknutiam.href

<ul class = "nav nav-pills" > 
  ...
  <li class = "disabled" ><a href = "#" > Domov </a></li>  
  ...
</ul>

Zarovnanie komponentov

Na zarovnanie navigačných odkazov použite pomocné triedy .pull-leftalebo . .pull-rightObe triedy pridajú CSS float v zadanom smere.

Stohovateľné

Keďže karty a pilulky sú v predvolenom nastavení vodorovné, stačí pridať druhú triedu , .nav-stackedaby sa javili ako zvislé.

Skladané karty

<ul class = "nav nav-tabs nav-stacked" > 
  ...
</ul>

Naskladané pilulky

<ul class = "nav nav-pills nav-stacked" > 
  ...
</ul>

Rozbaľovacie ponuky

Pridajte rozbaľovacie ponuky s trochou kódu HTML navyše a rozbaľovacím doplnkom JavaScript .

Karty s rozbaľovacími ponukami

<ul class = "nav nav-tabs" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "rozbaľovacia ponuka"
       href = "#" >
        Rozbaľovacia ponuka
        <b class = "caret" </b> 
      </a>
    <ul class = "rozbaľovacia ponuka" > 
      <!-- odkazy -->
    </ul>
  </li>
</ul>

Pilulky s rozbaľovacími zoznamami

<ul class = "nav nav-pills" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "rozbaľovacia ponuka"
       href = "#" >
        Rozbaľovacia ponuka
        <b class = "caret" </b> 
      </a>
    <ul class = "rozbaľovacia ponuka" > 
      <!-- odkazy -->
    </ul>
  </li>
</ul>

Navigačné zoznamy

Jednoduchý a jednoduchý spôsob vytvárania skupín navigačných odkazov s voliteľnými hlavičkami. Najlepšie sa používajú v bočných paneloch, ako je Finder v OS X.

Príklad navigačného zoznamu

Vezmite si zoznam odkazov a pridajte class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > Hlavička zoznamu </li> 
  <li class = "active" ><a href = "#" > Domov </a></li>  
  <li><a href = "#" > Knižnica </a></li> 
  ...
</ul>

PoznámkaPre vnorenie do navigačného zoznamu zahrňte class="nav nav-list"do akéhokoľvek vnoreného <ul>.

Horizontálne prepážky

Pridajte vodorovný oddeľovač vytvorením prázdnej položky zoznamu s triedou .divider, napríklad:

<ul class = "nav nav-list" > 
  ...
  <li class = "delider" ></li> 
  ...
</ul>

Tabbable nav

Oživte svoje karty pomocou jednoduchého doplnku na prepínanie medzi obsahom prostredníctvom kariet. Bootstrap integruje záložky v štyroch štýloch: horný (predvolený), pravý, dolný a ľavý.

Tabuľkový príklad

Ak chcete, aby sa karty zobrazovali ako tabuľkové, vytvorte .tab-panepre každú kartu jedinečné ID a zabaľte ju do .tab-content.

<div class = "tabbable" > <!-- Vyžaduje sa len pre ľavé/pravé karty -->  
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab" > Časť 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > Časť 2 </a></li>  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane active" id = "tab1" >  
      <p> Som v sekcii 1. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Dobrý deň, som v sekcii 2. </p>
    </div>
  </div>
</div>

Miznúť v kartách

Ak chcete, aby karty vybledli, pridajte .fadeku každému .tab-pane.

Vyžaduje doplnok jQuery

Všetky tablovateľné karty sú poháňané naším ľahkým doplnkom jQuery. Prečítajte si viac o tom, ako oživiť karty s tabuľkami na stránke dokumentov JavaScript .

Tabulovateľné v akomkoľvek smere

Záložky v spodnej časti

Otočte poradie HTML a pridajte triedu, aby ste umiestnili karty na spodok.

<div class = "tabbable tabs-below" > 
  <div class = "tab-content" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

Karty vľavo

Vymeňte triedu a umiestnite karty vľavo.

<div class = "tabbable tabs-left" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Karty na pravej strane

Vymeňte triedu a umiestnite karty napravo.

<div class = "tabbable tabs-right" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Základná navigačná lišta

Na začiatok sú navigačné panely statické (nie sú pripevnené k hornej časti) a obsahujú podporu pre názov projektu a základnú navigáciu. Umiestnite ho kdekoľvek v rámci .container, čím sa nastaví šírka vášho webu a obsahu.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <a class = "brand" href = "#" > Názov </a>  
    <ul class = "nav" > 
      <li class = "active" ><a href = "#" > Domov </a></li>  
      <li><a href = "#" > Odkaz </a></li> 
      <li><a href = "#" > Odkaz </a></li> 
    </ul>
  </div>
</div>

Komponenty navigačnej lišty

Značka

Jednoduchý odkaz na zobrazenie názvu vašej značky alebo projektu vyžaduje iba kotviaci štítok.

<a class = "brand" href = "#" > Názov projektu </a>  

Navigačné odkazy

Položky navigácie sa pridávajú jednoducho prostredníctvom neusporiadaných zoznamov.

<ul class = "nav" > 
  <li class = "active" > 
    <a href = "#" > Domov </a> 
  </li>
  <li><a href = "#" > Odkaz </a></li> 
  <li><a href = "#" > Odkaz </a></li> 
</ul>

Pomocou prázdnej položky zoznamu a jednoduchej triedy môžete do navigačných odkazov jednoducho pridať oddeľovače. Stačí pridať toto medzi odkazy:

<ul class = "nav" > 
  ...
  <li class = "divider-vertical" ></li> 
  ...
</ul>

Formuláre

Pre správny štýl a umiestnenie formulára v navigačnom paneli pridajte príslušné triedy, ako je uvedené nižšie. Pre predvolený formulár zahrňte .navbar-forma buď .pull-leftalebo .pull-right, aby ste ho správne zarovnali.

<form class = "navbar-form pull-left" > 
  < typ vstupu = "text" class = "span2" >  
  < typ tlačidla = "submit" class = "btn" >   Submit </button>
</form>

Vyhľadávací formulár

Pre prispôsobenejší vyhľadávací formulár pridajte .navbar-searchdo forma .search-querydo vstupu pre špecializované štýly na navigačnom paneli.

<form class = "navbar-search pull-left" > 
  <input type = "text" class = "search-query" zástupný symbol = "Search" >   
</form>

Zarovnanie komponentov

Zarovnajte navigačné odkazy, vyhľadávací formulár alebo text, použite pomocné triedy .pull-leftalebo . .pull-rightObe triedy pridajú CSS float v zadanom smere.

Pomocou rozbaľovacích ponúk

Pridajte rozbaľovacie zoznamy a rozbaľovacie zoznamy do navigácie pomocou trochy značiek a rozbaľovacieho doplnku JavaScript .

<ul class = "nav" > 
  <li class = "dropdown" > 
    <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown" >   
      účtu
      <b class = "caret" </b> 
    </a>
    <ul class = "rozbaľovacia ponuka" > 
      ...
    </ul>
  </li>
</ul>

Ďalšie označenia a informácie o rozbaľovacích zoznamoch volaní nájdete v dokumentácii k rozbaľovacím zoznamom JavaScript .

Text

Reťazce textu zabaľte do prvku s .navbar-text, zvyčajne na <p>značku, aby ste získali správny úvod a farbu.

Voliteľné varianty zobrazenia

Upevnite navigačnú lištu na hornú alebo dolnú časť výrezu pomocou ďalšej triedy na najvzdialenejšom div, .navbar.

Upevnené navrchu

Pridajte .navbar-fixed-topa nezabudnite zohľadniť skrytú oblasť pod ňou pridaním aspoň 40 pixelov paddingdo súboru <body>. Nezabudnite to pridať za základný CSS Bootstrap a pred voliteľný responzívny CSS.

<div class = "navbar navbar-fixed-top" > 
  ...
</div>

Upevnené na dne

Namiesto toho pridajte .navbar-fixed-bottom.

<div class = "navbar navbar-fixed-bottom" > 
  ...
</div>

Statická horná navigačná lišta

Vytvorte navigačný panel s plnou šírkou, ktorý sa posúva spolu so stránkou, pridaním .navbar-static-top. Na rozdiel od .navbar-fixed-toptriedy nemusíte meniť žiadnu výplň na body.

<div class = "navbar navbar-static-top" > 
  ...
</div>

Responzívny navigačný panel

Ak chcete implementovať zbalenú responzívnu navigačnú lištu, zabaľte obsah navigačnej lišty do obsahujúceho prvku div .nav-collapse.collapsea pridajte tlačidlo prepínania navigačnej lišty .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "container" > 
 
      <!-- .btn-navbar sa používa ako prepínač pre obsah zbalenej navigačnej lišty -->
      <a class = "btn btn-navbar" data-toggle = "collapse" data-target = ".nav-collapse" >   
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
      </a>
 
      <!-- Ak chcete, aby sa značka zobrazovala, nezabudnite ju tam nechať -->
      <a class = "brand" href = "#" > Názov projektu </a>  
 
      <!-- Všetko, čo chcete skryť v rozlíšení 940 pixelov alebo menej, umiestnite sem -->
      <div class = "nav-collapse kolaps" > 
        <!-- .nav, .navbar-search, .navbar-form atď -->
      </div>
 
    </div>
  </div>
</div>

Obrátená variácia

Upravte vzhľad navigačného panela pridaním .navbar-inverse.

<div class = "navbar navbar-inverse" > 
  ...
</div>

Príklady

Jeden príklad zobrazený tak, ako by sa mohol zobraziť na viacerých stránkach.

<ul class = "breadcrumb" > 
  <li><a href = "#" > Domov </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Knižnica </a> <span class = "divider" > / </span></li>   
  <li class = "active" > Údaje </li> 
</ul>

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

<div class = "stránkovanie" > 
  <ul>
    <li><a href = "#" > Predchádzajúca </a></li> 
    <li><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><a href = "#" > Ďalej </a></li> 
  </ul>
</div>

možnosti

Vypnuté 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.

<div class = "stránkovanie" > 
  <ul>
    <li class = "disabled" ><a href = "#" > « </a></li>  
    <li class = "active" ><a href = "#" > 1 </a></li>  
    ...
  </ul>
</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.

<div class = "stránkovanie" > 
  <ul>
    <li class = "zakázané" ><span> « </span></li> 
    <li class = "active" ><span> 1 </span></li> 
    ...
  </ul>
</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.

<div class = "pagination pagination-large" > 
  <ul>
    ...
  </ul>
</div>
<div class = "stránkovanie" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-small" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-mini" > 
  <ul>
    ...
  </ul>
</div>

Zarovnanie

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

<div class = "pagination-pagination-centered" > 
  ...
</div>

<div class = "pagination pagination-right" > 
  ...
</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.

<ul class = "pager" > 
  <li><a href = "#" > Predchádzajúce </a></li> 
  <li><a href = "#" > Ďalej </a></li> 
</ul>

Zarovnané odkazy

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

<ul class = "pager" > 
  <li class = "previous" > 
    <a href = "#" > ← Staršie </a> 
  </li>
  <li class = "next" > 
    <a href = "#" > Novšie → </a> 
  </li>
</ul>

Voliteľný vypnutý stav

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

<ul class = "pager" > 
  <li class = "predchádzajúce zablokované" > 
    <a href = "#" > ← Staršie </a> 
  </li>
  ...
</ul>

Štítky

Odznaky

Ľahko zložiteľ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ý a 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.

<div class = "hrdinská jednotka" > 
  <h1> Nadpis </h1>
  <p> Slogan </p>
  <p>
    <a class = "btn btn-primary btn-large" > 
      Uč sa viac
    </a>
  </p>
</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).

<div class = "page-header" > 
  <h1> Príklad hlavičky stránky <small> Podtext pre hlavičku </small></h1>
</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.

Prečo používať miniatúry

Miniatúry (predtým.media-grid až 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é – uls ľubovoľným počtomli prvkov. 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 :

<ul class = "thumbnails" > 
  <li class = "span4" > 
    <a href = "#" class = "thumbnail" >  
      <img data-src = "holder.js/300x200" alt = "" >  
    </a>
  </li>
  ...
</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é:

<ul class = "thumbnails" > 
  <li class = "span4" > 
    <div class = "thumbnail" > 
      <img data-src = "holder.js/300x200" alt = "" >  
      <h3> Menovka miniatúry </h3>
      <p> Popis miniatúry... </p>
    </div>
  </li>
  ...
</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.

<div class = "upozornenie" > 
  < typ tlačidla = "button" class = "zavrieť" data-dismiss = "upozornenie" > × </button>   
  <strong> Upozornenie! </strong> Najlepšie sa presvedčte, že nevyzeráte príliš dobre.
</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>.

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

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

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

Kontextové alternatívy

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

Chyba alebo nebezpečenstvo

<div class = "alert alert-error" > 
  ...
</div>

Úspech

<div class = "alert alert-success" > 
  ...
</div>

Informácie

<div class = "alert alert-info" > 
  ...
</div>

Príklady a značky

Základné

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

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

Pruhované

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

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

Animované

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

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

Skladaný

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

<div class = "progress" > 
  <div class = "bar bar-success" style = " width : 35 %; " ></div>   
  <div class = "bar bar-warning" style = " width : 20 %; " ></div>   
  <div class = "bar bar-danger" style = " width : 10 %; " ></div>   
</div>

možnosti

Ďalšie farby

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

<div class = "progress progress-info" > 
  <div class = "bar" style = " width : 20 % " ></div>   
</div>
<div class = "progress progress-success" > 
  <div class = "bar" style = " width : 40 % " ></div>   
</div>
<div class = "progress progress-warning" > 
  <div class = "bar" style = " width : 60 % " ></div>   
</div>
<div class = "progress progress-danger" > 
  <div class = "bar" style = " width : 80 % " ></div>   
</div>

Pruhované pruhy

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

<div class = "progress progress-info progress-striped" > 
  <div class = "bar" style = " width : 20 % " ></div>   
</div>
<div class = "progress progress-success progress-striped" > 
  <div class = "bar" style = " width : 40 % " ></div>   
</div>
<div class = "progress progress-warning progress-stripped" > 
  <div class = "bar" style = " width : 60 % " ></div>   
</div>
<div class = "progress progress-danger progress-striped" > 
  <div class = "bar" style = " width : 80 % " ></div>   
</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.

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.

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.

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.

<div class = "media" > 
  <a class = "pull-left" href = "#" >  
    <img class = "media-object" data-src = "holder.js/64x64" >  
  </a>
  <div class = "media-body" > 
    <h4 class = "media-heading" > Media title </h4> 
    ...
 
    <!-- Vnorený mediálny objekt -->
    <div class = "media" > 
      ...
    </div>
  </div>
</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).

<ul class = "media-list" > 
  <li class = "media" > 
    <a class = "pull-left" href = "#" >  
      <img class = "media-object" data-src = "holder.js/64x64" >  
    </a>
    <div class = "media-body" > 
      <h4 class = "media-heading" > Media title </h4> 
      ...
 
      <!-- Vnorený mediálny objekt -->
      <div class = "media" > 
        ...
     </div>
    </div>
  </li>
</ul>

Wells

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

<div class = "well" > 
  ...
</div>

Voliteľné triedy

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

<div class = "well well-large" > 
  ...
</div>

<div class = "dobre dobre-male" > 
  ...
</div>

Ikona Zavrieť

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

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

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

<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

trieda = "vytiahnuť doľava"

. ťahať - doľava {
  plavák : vľavo ;
}

.ťahať-vpravo

Umiestnite prvok doprava

trieda = "ťahať-vpravo"

. ťahať - vpravo {
  plavák : pravý ;
}

.tlmené

Zmeňte farbu prvku na#999

trieda = "stlmené"

. stlmený {
  farba : #999; 
}

.clearfix

Zrušte floatna ľubovoľnom prvku

class = "clearfix"

. clearfix {
  * priblíženie : 1 ; 
  &: pred ,
  &: po {
    displej : tabuľka ;
    obsah : "" ; 
  }
  &: po {
    jasné : oboje ;
  }
}