Skupine gumbov

Uporabite skupine gumbov, da združite več gumbov v eno sestavljeno komponento. Zgradite jih s serijo <a>ali <button>elementi.

Komplete lahko tudi združite <div class="btn-group">v <div class="btn-toolbar">za bolj zapletene projekte.

Primer oznake

Takole je videti HTML za standardno skupino gumbov, zgrajeno z gumbi sidrnih oznak:

<div class = "btn-group" > 
  <a class = "btn" href = "#" > 1 </a>  
  <a class = "btn" href = "#" > 2 </a>  
  <a class = "btn" href = "#" > 3 </a>  
</div>

In z orodno vrstico za več skupin:

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

Potrditveno polje in radijski okusi

Skupine gumbov lahko delujejo tudi kot radijski sprejemniki, kjer je lahko aktiven samo en gumb, ali potrditvena polja, kjer je lahko aktivnih poljubno število gumbov. Za to si oglejte dokumente Javascript .

Pridobite javascript »

Glavo pokonci

CSS za skupine gumbov je v ločeni datoteki, button-groups.less.

Spustni meniji gumbov

Uporabite kateri koli gumb, da sprožite spustni meni, tako da ga postavite znotraj .btn-groupin zagotovite ustrezno oznako menija.

Primer oznake

Podobno kot skupina gumbov, naša oznaka uporablja običajne oznake gumbov, vendar s peščico dodatkov za izboljšanje sloga in podporo Bootstrapovega spustnega vtičnika jQuery.

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    Akcija
    <span class = "caret" ></span> 
  </a>
  <ul class = "dropdown-menu" > 
    <!-- povezave do spustnega menija -->
  </ul>
</div>

Spustni meni razdeljenih gumbov

Na podlagi slogov in oznak skupine gumbov lahko preprosto ustvarimo razdeljen gumb. Razdeljeni gumbi imajo standardno dejanje na levi in ​​spustni preklop na desni s kontekstualnimi povezavami.

Primer oznake

Razširimo običajne spustne menije gumbov, da zagotovimo dejanje drugega gumba, ki deluje kot ločen sprožilec spustnega menija.

<div class = "btn-group" > 
  <a class = "btn" href = "#" > Dejanje </a>  
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    <span class = "caret" ></span> 
  </a>
  <ul class = "dropdown-menu" > 
    <!-- povezave do spustnega menija -->
  </ul>
</div>

Zmogljiv osnovni razred

Vse navigacijske komponente tukaj – zavihki, pilule in seznami – imajo enake osnovne oznake in sloge skozi .navrazred.

Zakaj tablete in tablete

Zavihki in tabletke v programu Bootstrap so zgrajeni na podlagi <ul>istega jedra HTML, seznama povezav. Menjajte med zavihki ali tabletami samo z razredom.

Obe možnosti sta odlični za pododdelke vsebine ali krmarjenje med stranmi s sorodno vsebino.

Osnovni zavihki

Vzemite navadne <ul>povezave in dodajte .nav-tabs:

• domov
• Profil
• Sporočila

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

Osnovne tablete

Vzemite isti HTML, vendar .nav-pillsnamesto tega uporabite:

• domov
• Profil
• Sporočila

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

Kako jih zložiti

Ker so zavihki in tabletke privzeto vodoravni, preprosto dodajte drugi razred, .nav-stackedda bodo videti navpično zloženi.

Zloženi zavihki

• domov
• Profil
• Sporočila

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

Zložene tablete

• domov
• Profil
• Sporočila

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

Bogati meniji so preprosti

Spustni meniji v zavihkih in tabletah Bootstrap so zelo enostavni in zahtevajo le malo dodatnega HTML-ja in lahek vtičnik jQuery.

Pojdite na stran Javascript in preberite dokumente o inicializaciji spustnih menijev v Bootstrapu.

Zavihki s spustnimi meniji

• domov
• Profil
• Spustni meni
  • Akcija
  • Še ena akcija
  • Tukaj je nekaj drugega
  • Ločena povezava

<ul class = "nav nav-tabs" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "spustni meni"
       href = "#" >
        Spustni meni
        <b class = "caret" ></b> 
      </a>
    <ul class = "dropdown-menu" > 
      <!-- povezave -->
    </ul>
  </li>
</ul>

Tablete s spustnimi listi

• domov
• Profil
• Spustni meni
  • Akcija
  • Še ena akcija
  • Tukaj je nekaj drugega
  • Ločena povezava

<ul class = "nav nav-pills" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "spustni meni"
       href = "#" >
        Spustni meni
        <b class = "caret" ></b> 
      </a>
    <ul class = "dropdown-menu" > 
      <!-- povezave -->
    </ul>
  </li>
</ul>

Navigacija v slogu aplikacije

Navigacijski seznami zagotavljajo preprost in enostaven način za ustvarjanje skupin navigacijskih povezav z neobveznimi glavami. Najbolje jih je uporabiti v stranskih vrsticah, kot je Finder v OS X.

Strukturno so zgrajeni na istih osnovnih navigacijskih slogih kot zavihki in tablete, zato sta uporaba in prilagajanje enostavni.

Z ikonami

Navigacijske sezname je enostavno opremiti tudi z ikonami. Dodajte ustrezno <i>oznako z razredom in pripravljeni ste.

Primer navigacijskega seznama

Vzemite seznam povezav in dodajte class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > 
    Glava seznama
  </li>
  <li class = "aktiven" > 
    <a href = "#" > Domov </a> 
  </li>
  <li>
    <a href = "#" > Knjižnica </a> 
  </li>
  ...
</ul>

Primer z ikonami

Isti primer, vendar z <i>oznakami za ikone.

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href = "#" > 
      <i class = "icon-book" ></i> 
      Knjižnica
    </a>
  </li>
  ...
</ul>

Kaj je vključeno

Oživite svoje zavihke s preprostim vtičnikom za preklapljanje med vsebino prek zavihkov. Bootstrap integrira zavihke s tabulatorji v štirih slogih: zgoraj (privzeto), desno, spodaj in levo.

Preklapljanje med njimi je enostavno in zahteva le zelo malo spreminjanja oznak.

Primer z zavihki

Če želite zavihke narediti zavihke, ovijte .nav-tabsv drug div z razredom .tabbable.

Vtičnik jQuery po meri

Vse zavihke z možnostjo zavihkov poganja naš lahki vtičnik jQuery. Preberite več o tem, kako oživiti zavihke z možnostjo zavihkov na strani z dokumenti javascript.

Pridobite javascript →

Zavihki na dnu

Obrnite vrstni red HTML in dodajte razred, da postavite zavihke na dno.

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

Zavihki na levi

Zamenjajte razred, da postavite zavihke na levo.

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

Zavihki na desni

Zamenjajte razred, da postavite zavihke na desno.

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

Navbar oder

Vrstica za krmarjenje potrebuje le nekaj elementov div, da jo dobro strukturirate za statični ali fiksni prikaz.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "container" > 
      ...
    </div>
  </div>
</div>

Če želite, da je vrstica za krmarjenje pritrjena na vrh vidnega polja, dodajte .navbar-fixed-topskrajnemu elementu div, .navbar. V vašem CSS-ju boste morali upoštevati tudi prekrivanje, ki ga povzroči dodajanje padding-top: 40px;v vaš <body>.

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

Blagovna znamka

Preprosta povezava za prikaz imena vaše blagovne znamke ali projekta zahteva samo sidrno oznako.

<a class = "brand" href = "#" >  
  Ime Projekta
</a>

Iskalni obrazec

Iskalni obrazci prejmejo sloge po meri v vrstici za krmarjenje z .navbar-searchrazredom. Vključite .pull-leftali .pull-rightna , formda ga poravnate.

<form class = "navbar-search pull-left" > 
  <input type = "text" class = "search-query" placeholder = "Search" >   
</form>

Izbirna odzivna različica

Odvisno od količine vsebine v zgornji vrstici boste morda želeli implementirati odzivne možnosti. Če želite to narediti, zavijte svojo navigacijsko vsebino v vsebujoči div, .nav-collapse.collapsein dodajte preklopni gumb na navbaru, .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "container" > 
 
      <!-- .btn-navbar se uporablja kot preklop za strnjeno vsebino navbara -->
      <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>
 
      <!-- Ne pozabite pustiti blagovne znamke zunaj, če želite, da je prikazana -->
      <a class = "brand" href = "#" > Ime projekta </a>  
 
      <!-- Vse, kar želite skriti v velikosti 940 slikovnih pik ali manj, postavite tukaj -->
      <div class = "nav-collapse" > 
        <!-- .nav, .navbar-search, .navbar-form itd -->
      </div>
 
    </div>
  </div>
</div>

Nav povezave

Navigacijske elemente je preprosto dodati prek neurejenih seznamov.

<ul class = "nav" > 
  <li class = "aktiven" > 
    <a href = "#" > Domov </a> 
  </li>
  <li><a href = "#" > Povezava </a></li> 
  <li><a href = "#" > Povezava </a></li> 
</ul>

Dodajanje spustnih menijev

Dodajanje spustnih menijev v navigacijo je izjemno preprosto, vendar zahteva uporabo našega vtičnika javascript .

<ul class = "nav" > 
  <li class = "dropdown" > 
    <a href = "#" 
          class = "dropdown-toggle"
          data-toggle = "dropdown" >
          račun
          <b class = "caret" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

Pridobite javascript →

Zakaj jih uporabljati

Krmarjenje po poti se uporablja kot način za prikaz uporabnikom, kje so v aplikaciji ali na spletnem mestu, vendar ne za primarno krmarjenje. Naj bo njihova uporaba redka in jedrnata, da bodo najbolj učinkovite.

Primeri

Prikazan je en sam primer, saj je lahko prikazan na več straneh.

• domov

• Domov /
• Knjižnica

• Domov /
• Knjižnica /
• podatki

Markup

HTML je vaš standardni neurejen seznam s povezavami.

<ul class = "breadcrumb" > 
  <li>
    <a href = "#" > Domov </a> <span class = "divider" > / </span>   
  </li>
  <li>
    <a href = "#" > Knjižnica </a> <span class = "divider" > / </span>   
  </li>
  <li class = "aktiven" > 
    <a href = "#" > Podatki </a> 
  </li>
</ul>

Kdaj uporabiti

Izjemno poenostavljeno in minimalistično oblikovano označevanje strani po navdihu Rdio, odlično za aplikacije in rezultate iskanja. Velik blok je težko zgrešiti, zlahka ga je mogoče povečati in nudi velika območja klikanja.

Povezave do strani s stanjem

Povezave so prilagodljive in delujejo v številnih okoliščinah s pravim razredom. .disabledza povezave, na katere ni mogoče klikniti, in .activeza trenutno stran.

Prilagodljiva poravnava

Dodajte enega od dveh neobveznih razredov, da spremenite poravnavo povezav za označevanje strani: .pagination-centeredin .pagination-right.

Primeri

Privzeta komponenta paginacije je prilagodljiva in deluje v številnih različicah.

Markup

Zavito v <div>, paginacija je samo <ul>.

<div class = "pagination" > 
  <ul>
    <li><a href = "#" > Nazaj </a></li> 
    <li class = "aktiven" > 
      <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 = "#" > Naprej </a></li> 
  </ul>
</div>

O pozivniku

Komponenta pozivnika je nabor povezav za preproste izvedbe paginacije z lažjimi oznakami in še lažjimi slogi. Odličen je za preprosta spletna mesta, kot so blogi ali revije.

Privzeti primer

Pozivnik privzeto centrira povezave.

• Prejšnja
• Naslednji

<ul class = "pager" > 
  <li>
    <a href = "#" > Nazaj </a> 
  </li>
  <li>
    <a href = "#" > Naprej </a> 
  </li>
</ul>

Poravnane povezave

Druga možnost je, da vsako povezavo poravnate ob straneh:

• ← Starejše
• Novejše →

<ul class = "pager" > 
  <li class = "prejšnji" > 
    <a href = "#" > ← Starejši </a> 
  </li>
  <li class = "naslednji" > 
    <a href = "#" > Novejši → </a> 
  </li>
</ul>

Privzete sličice

Sličice Bootstrapa so privzeto oblikovane tako, da prikazujejo povezane slike z minimalno zahtevano oznako.

Zelo prilagodljiv

Z nekaj dodatnega označevanja je možno sličicam dodati kakršno koli vsebino HTML, kot so naslovi, odstavki ali gumbi.

• 

  Oznaka sličice

  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.

  Akcija Akcija

• 

  Oznaka sličice

  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.

  Akcija Akcija

Zakaj uporabljati sličice

Sličice (prej .media-griddo v1.4) so ​​odlične za mreže fotografij ali videoposnetkov, rezultate iskanja slik, maloprodajne izdelke, portfelje in še veliko več. Lahko so povezave ali statična vsebina.

Enostavno, prilagodljivo označevanje

Označevanje sličic je preprosto – vse, kar potrebujete, je a uls poljubnim številom lielementov. Prav tako je zelo prilagodljiv, saj omogoča vse vrste vsebine z le malo več oznak za zavijanje vaše vsebine.

Uporablja velikosti stolpcev mreže

Nazadnje, komponenta sličic uporablja obstoječe sistemske razrede mreže – kot je .span2ali .span3– za nadzor dimenzij sličic.

Oznaka

Kot smo že omenili, je zahtevana oznaka za sličice lahka in enostavna. Tukaj je pogled na privzeto nastavitev za povezane slike :

<ul class = "thumbnails" > 
  <li class = "span3" > 
    <a href = "#" class = "thumbnail" >  
      <img src = "https://placehold.it/260x180" alt = "" >  
    </a>
  </li>
  ...
</ul>

Za vsebino HTML po meri v sličicah se oznaka nekoliko spremeni. Da dovolimo vsebino na ravni bloka kjer koli, zamenjamo <a>za <div>všeček tako:

<ul class = "thumbnails" > 
  <li class = "span3" > 
    <div class = "thumbnail" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Oznaka sličice </h5>
      <p> Napis sličice tukaj ... </p>
    </div>
  </li>
  ...
</ul>

Več primerov

Raziščite vse svoje možnosti z različnimi razredi mreže, ki so vam na voljo. Lahko tudi mešate in kombinirate različne velikosti.

Prepisan osnovni razred

Z Bootstrap 2 smo poenostavili osnovni razred: .alertnamesto .alert-message. Prav tako smo zmanjšali minimalno zahtevano oznako – <p>privzeto ni zahtevana, samo zunanji <div>.

Eno opozorilno sporočilo

Za trajnejšo komponento z manj kode smo odstranili razlikovalni videz za blokovna opozorila, sporočila, ki imajo več oblazinjenja in običajno več besedila. Tudi razred se je spremenil v .alert-block.

Odlično se ujema z javascriptom

Bootstrap je opremljen z odličnim vtičnikom jQuery, ki podpira opozorilna sporočila, zaradi česar je njihovo opuščanje hitro in enostavno.

Prenesite vtičnik »

Primeri opozoril

Zavijte svoje sporočilo in izbirno ikono za zapiranje v div s preprostim razredom.

<div class = "alert" > 
  <a class = "close" > × </a> 
  <strong> Opozorilo! </strong> Najbolje, da preverite sami, niste videti preveč dobro.
</div>

Preprosto razširite standardno opozorilno sporočilo z dvema izbirnima razredoma: .alert-blockza več oblazinjenja in kontrolnikov besedila ter .alert-headingza ujemajoči se naslov.

<div class = "alert alert-block" > 
  <a class = "close" > × </a> 
  <h4 class = "alert-heading" > Opozorilo! </h4> 
  Najbolje, da preverite sami, niste ...
</div>

Napaka ali nevarnost

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

Uspeh

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

Informacije

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

Osnovno

Privzeta vrstica napredka z navpičnim gradientom.

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

Črtasto

Uporablja gradient za ustvarjanje črtastega učinka.

<div class = "informacije o napredku napredka 
     napredek-črtasto" >
  <div class = "bar" 
       style = " širina : 20 %; " ></div> 
</div>

Animirano

Vzame črtasti primer in ga animira.

<div class = "nevarnost napredka napredka 
     napredek-črtasto aktivno" >
  <div class = "bar" 
       style = " width : 40 %; " ></div> 
</div>

Dodatne barve

Vrstice napredka uporabljajo nekatera ista imena razredov kot gumbi in opozorila za podoben slog.

• .progress-info
• .progress-success
• .progress-danger

Druga možnost je, da prilagodite datoteke LESS in spremenite svoje barve in velikosti.

Vedenje

Vrstice napredka uporabljajo prehode CSS3, tako da če dinamično prilagodite širino prek javascripta, se bo gladko spremenila velikost.

Če uporabljate .activerazred, bodo vaše .progress-stripedvrstice napredka animirale črte od leve proti desni.

Podpora za brskalnik

Vrstice napredka uporabljajo prelive, prehode in animacije CSS3, da dosežejo vse svoje učinke. Te funkcije niso podprte v IE7-8 ali starejših različicah Firefoxa.

Opera trenutno ne podpira animacij.

Wells

Uporabite vodnjak kot preprost učinek na elementu, da mu zagotovite vstavljeni učinek.

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

Značke

Uporabite značko na elementu za število neprebranih ali kot preprost indikator.

<span class = "badge" > 3 </div> 

Zapri ikono

Uporabite splošno ikono za zapiranje za opustitev vsebine, kot so modali in opozorila.

×

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