Grupe dugmadi

Koristite grupe dugmadi da spojite više dugmadi zajedno kao jednu kompozitnu komponentu. Izgradite ih sa nizom <a>ili <button>elemenata.

Također možete kombinirati setove <div class="btn-group">u <div class="btn-toolbar">za složenije projekte.

Primjer označavanja

Evo kako HTML izgleda za standardnu ​​grupu dugmadi izgrađenu sa dugmadima za oznake sidra:

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

I sa alatnom trakom za više grupa:

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

Potvrdni okvir i radio okusi

Grupe dugmadi takođe mogu funkcionisati kao radio uređaji, gde samo jedno dugme može biti aktivno, ili potvrdni okviri, gde može biti aktivan bilo koji broj dugmadi. Pogledajte Javascript dokumente za to.

Preuzmite javascript »

Glavu gore

CSS za grupe dugmadi je u zasebnoj datoteci, button-groups.less.

Padajući meni sa dugmetom

Koristite bilo koje dugme da pokrenete padajući meni tako što ćete ga postaviti unutar a .btn-groupi obezbediti odgovarajuću oznaku menija.

Primjer označavanja

Slično grupi dugmadi, naše označavanje koristi uobičajeno označavanje dugmadi, ali sa pregršt dodataka za preciziranje stila i podršku Bootstrap-ovom padajućem jQuery dodatku.

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    Akcija
    <span class = "caret" ></span> 
  </a>
  <ul class = "padajući meni" > 
    <!-- veze padajućeg menija -->
  </ul>
</div>

Padajući meni dugmeta za razdvajanje

Nadovezujući se na stilove grupe dugmadi i oznake, lako možemo kreirati podijeljeno dugme. Dugmad za razdvajanje karakteriše standardna radnja sa leve strane i padajući prekidač na desnoj strani sa kontekstualnim vezama.

Primjer označavanja

Proširujemo obične padajuće menije za dugme kako bismo obezbedili drugu radnju dugmeta koja radi kao poseban okidač padajućeg menija.

<div class = "btn-group" > 
  <a class = "btn" href = "#" > Akcija </a>  
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    <span class = "caret" ></span> 
  </a>
  <ul class = "padajući meni" > 
    <!-- veze padajućeg menija -->
  </ul>
</div>

Snažna bazna klasa

Sve navigacijske komponente ovdje – kartice, tablete i liste – dijele istu osnovnu oznaku i stilove kroz .navklasu.

Zašto tablete i tablete

Kartice i pilule u Bootstrapu su izgrađene na <ul>istom jezgru HTML-a, na listi veza. Prebacivanje između tableta ili tableta samo sa jednom klasom.

Obje opcije su odlične za pododjeljke sadržaja ili navigaciju između stranica povezanog sadržaja.

Osnovne kartice

Uzmite redovne <ul>linkove i dodajte .nav-tabs:

• Dom
• Profil
• Poruke

<ul class = "nav nav-tabs" > 
  <li class = "aktivan" > 
    <a href = "#" > Početna </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Osnovne tablete

Uzmite isti HTML, ali .nav-pillsumjesto toga koristite:

• Dom
• Profil
• Poruke

<ul class = "nav nav-pills" > 
  <li class = "aktivan" > 
    <a href = "#" > Početna </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Kako ih složiti

Kako su tabovi i pilule prema zadanim postavkama horizontalni, samo dodajte drugu klasu, .nav-stacked, kako bi izgledali okomito naslagani.

Naslagane kartice

• Dom
• Profil
• Poruke

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

Naslagane tablete

• Dom
• Profil
• Poruke

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

Bogati meniji su olakšani

Padajući meniji u Bootstrap karticama i tabletama su super laki i zahtijevaju samo malo dodatnog HTML-a i lagani jQuery dodatak.

Pređite na stranicu Javascript da pročitate dokumente o inicijalizaciji padajućih menija u Bootstrapu.

Kartice sa padajućim menijima

• Dom
• Profil
• Ispustiti
  • Akcija
  • Još jedna akcija
  • Nešto drugo ovdje
  • Odvojena veza

<ul class = "nav nav-tabs" > 
  <li class = "padajući" > 
    <a class = "dropdown-toggle" 
       data-toggle = "padajući meni"
       href = "#" >
        Ispustiti
        <b class = "caret" ></b> 
      </a>
    <ul class = "padajući meni" > 
      <!-- linkovi -->
    </ul>
  </li>
</ul>

Tablete sa padajućim menijima

• Dom
• Profil
• Ispustiti
  • Akcija
  • Još jedna akcija
  • Nešto drugo ovdje
  • Odvojena veza

<ul class = "nav nav-pills" > 
  <li class = "padajući" > 
    <a class = "dropdown-toggle" 
       data-toggle = "padajući meni"
       href = "#" >
        Ispustiti
        <b class = "caret" ></b> 
      </a>
    <ul class = "padajući meni" > 
      <!-- linkovi -->
    </ul>
  </li>
</ul>

Navigacija u stilu aplikacije

Nav liste pružaju jednostavan i lak način za izgradnju grupa navigacijskih veza s opcijskim zaglavljima. Najbolje ih je koristiti u bočnim trakama kao što je Finder u OS X.

Strukturno, oni su izgrađeni na istim osnovnim navigacijskim stilovima kao tabulatori i tablete, tako da su upotreba i prilagođavanje jednostavni.

Sa ikonama

Nav liste je takođe lako opremiti ikonama. Dodajte odgovarajuću <i>oznaku sa klasom i spremni ste.

Primjer navigacijske liste

Uzmite listu linkova i dodajte class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > 
    Zaglavlje liste
  </li>
  <li class = "aktivan" > 
    <a href = "#" > Početna </a> 
  </li>
  <li>
    <a href = "#" > Biblioteka </a> 
  </li>
  ...
</ul>

Primjer sa ikonama

Isti primjer, ali sa <i>oznakama za ikone.

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href = "#" > 
      <i class = "knjiga ikona" ></i> 
      Biblioteka
    </a>
  </li>
  ...
</ul>

Šta je uključeno

Oživite svoje kartice pomoću jednostavnog dodatka za prebacivanje između sadržaja putem kartica. Bootstrap integriše kartice sa karticama u četiri stila: gornji (podrazumevani), desni, donji i levi.

Promjena između njih je jednostavna i zahtijeva samo promjenu vrlo malo oznaka.

Tabable primjer

Da biste tabove učinili tabulatorima, umotajte ih .nav-tabsu drugi div sa klasom .tabbable.

Prilagođeni jQuery dodatak

Sve kartice sa tabulatorima pokreću naš lagani jQuery dodatak. Pročitajte više o tome kako oživjeti kartice s tabulatorima na stranici javascript dokumenata.

Preuzmite javascript →

Kartice na dnu

Okrenite redoslijed HTML-a i dodajte klasu da stavite kartice na dno.

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

Kartice na lijevoj strani

Zamijenite klasu da stavite tabove s lijeve strane.

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

Kartice sa desne strane

Zamijenite klasu da stavite tabove s desne strane.

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

Navbar skele

Navbaru je potrebno samo nekoliko divova da bi bila dobro strukturirana za statički ili fiksni prikaz.

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

Da biste navigacijsku traku fiksirali na vrh prozora za prikaz, dodajte .navbar-fixed-topnajudaljeniji div, .navbar. U vašem CSS-u, također ćete morati uzeti u obzir preklapanje koje uzrokuje dodavanjem padding-top: 40px;vašem <body>.

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

Brand name

Jednostavna veza za prikaz imena vašeg brenda ili projekta zahtijeva samo oznaku sidra.

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

Obrazac za pretragu

Obrasci za pretragu primaju prilagođene stilove u navigacionoj traci sa .navbar-searchklasom. Uključite .pull-leftili .pull-rightna da formbiste ga poravnali.

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

Opciona prilagodljiva varijacija

Ovisno o količini sadržaja na gornjoj traci, možda ćete htjeti implementirati responsive opcije. Da biste to učinili, umotajte svoj navigacijski sadržaj u div koji sadrži .nav-collapse.collapse, i dodajte dugme za prebacivanje na navigacijskoj traci, .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "kontejner" > 
 
      <!-- .btn-navbar se koristi kao prekidač za skupljeni sadržaj navigacijske trake -->
      <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>
 
      <!-- Obavezno ostavite marku ako želite da se prikaže -->
      <a class = "brand" href = "#" > Naziv projekta </a>  
 
      <!-- Sve što želite da bude skriveno na 940px ili manje, postavite ovde -->
      <div class = "nav-collapse" > 
        <!-- .nav, .navbar-search, .navbar-form, itd -->
      </div>
 
    </div>
  </div>
</div>

Nav linkovi

Nav stavke se jednostavno dodaju preko neuređenih lista.

<ul class = "nav" > 
  <li class = "aktivan" > 
    <a href = "#" > Početna </a> 
  </li>
  <li><a href = "#" > Veza </a></li> 
  <li><a href = "#" > Veza </a></li> 
</ul>

Dodavanje padajućih menija

Dodavanje padajućih menija u navigaciju je super jednostavno, ali zahtijeva korištenje našeg javascript dodatka .

<ul class = "nav" > 
  <li class = "padajući" > 
    <a href = "#" 
          class = "padajući preklopnik"
          data-toggle = "padajući meni" >
          Račun
          <b class = "caret" ></b> 
    </a>
    <ul class = "padajući meni" > 
      ...
    </ul>
  </li>
</ul>

Preuzmite javascript →

Zašto ih koristiti

Breadcrumb navigacija se koristi kao način da se korisnicima pokaže gdje se nalaze unutar aplikacije ili web lokacije, ali ne i za primarnu navigaciju. Neka njihova upotreba bude rijetka i sažeta kako bi bila najefikasnija.

Primjeri

Prikazan jedan primjer kako bi se mogao prikazati na više stranica.

• Dom

• Početna /
• Biblioteka

• Početna /
• biblioteka /
• Podaci

Markup

HTML je vaša standardna neuređena lista sa vezama.

<ul class = "breadcrumb" > 
  <li>
    <a href = "#" > Početna </a> <span class = "divider" > / </span>   
  </li>
  <li>
    <a href = "#" > Biblioteka </a> <span class = "divider" > / </span>   
  </li>
  <li class = "aktivan" > 
    <a href = "#" > Podaci </a> 
  </li>
</ul>

Kada koristiti

Ultra pojednostavljena i minimalno stilizirana paginacija inspirirana Rdio-om, odlična za aplikacije i rezultate pretraživanja. Veliki blok je teško promašiti, lako je skalabilan i pruža velike površine klikova.

Linkovi stranica sa statusom

Veze su prilagodljive i rade u brojnim okolnostima sa pravom klasom. .disabledza linkove na koje se ne može kliknuti i .activeza trenutnu stranicu.

Fleksibilno poravnanje

Dodajte bilo koju od dvije neobavezne klase da promijenite poravnanje veza za paginaciju: .pagination-centeredi .pagination-right.

Primjeri

Zadana komponenta paginacije je fleksibilna i radi u brojnim varijantama.

Markup

Umotano u <div>, paginacija je samo <ul>.

<div class = "pagination" > 
  <ul>
    <li><a href = "#" > Prethodno </a></li> 
    <li class = "aktivan" > 
      <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 = "#" > Sljedeće </a></li> 
  </ul>
</div>

O pejdžeru

Komponenta pagera je skup veza za jednostavne implementacije paginacije sa laganim oznakama i još lakšim stilovima. Odličan je za jednostavne stranice poput blogova ili časopisa.

Zadani primjer

Podrazumevano, pejdžer centrira veze.

• Prethodno
• Sljedeći

<ul class = "pager" > 
  <li>
    <a href = "#" > Prethodno </a> 
  </li>
  <li>
    <a href = "#" > Sljedeće </a> 
  </li>
</ul>

Poravnane veze

Alternativno, svaku vezu možete poravnati sa strane:

• ← Starije
• Novije →

<ul class = "pager" > 
  <li class = "prethodni" > 
    <a href = "#" > ← Stariji </a> 
  </li>
  <li class = "sljedeća" > 
    <a href = "#" > Noviji → </a> 
  </li>
</ul>

Zadane sličice

Prema zadanim postavkama, sličice Bootstrapa su dizajnirane da prikazuju povezane slike sa minimalnim potrebnim oznakama.

Vrlo prilagodljiv

Uz malo dodatne oznake, moguće je dodati bilo koju vrstu HTML sadržaja poput naslova, pasusa ili dugmadi u sličice.

• 

  Thumbnail label

  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

• 

  Thumbnail label

  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

Zašto koristiti sličice

Sličice (ranije .media-griddo v1.4) su odlične za mreže fotografija ili video zapisa, rezultate pretraživanja slika, maloprodajne proizvode, portfelje i još mnogo toga. To mogu biti linkovi ili statični sadržaj.

Jednostavna, fleksibilna oznaka

Označavanje sličica je jednostavno – sve što je potrebno je ulsa bilo kojim brojem elemenata. liTakođe je super fleksibilan, omogućavajući bilo koju vrstu sadržaja sa samo malo više oznaka za umotavanje vašeg sadržaja.

Koristi veličine stupaca mreže

Konačno, komponenta sličica koristi postojeće klase sistema mreže—kao .span2ili .span3—za kontrolu dimenzija sličica.

Markup

Kao što je ranije spomenuto, potrebne oznake za sličice su lagane i jednostavne. Evo pogleda na zadanu postavku za povezane slike :

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

Za prilagođeni HTML sadržaj u sličicama, oznake se neznatno mijenjaju. Da bismo dozvolili sadržaj na nivou bloka bilo gdje, mijenjamo <a>za nešto <div>slično:

<ul class = "sličice" > 
  <li class = "span3" > 
    <div class = "sličica" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Oznaka sličice </h5>
      <p> Natpis sličice upravo ovdje... </p>
    </div>
  </li>
  ...
</ul>

Više primjera

Istražite sve svoje mogućnosti s različitim mrežnim klasama koje su vam dostupne. Također možete miješati i slagati različite veličine.

Prepisana osnovna klasa

Uz Bootstrap 2, pojednostavili smo osnovnu klasu: .alertumjesto .alert-message. Također smo smanjili minimalno potrebnu oznaku—no <p>nije potrebno po defaultu, samo vanjski <div>.

Pojedinačna poruka upozorenja

Za trajniju komponentu sa manje koda, uklonili smo diferencirajući izgled za blokada upozorenja, poruke koje dolaze s više dopuna i obično više teksta. Klasa je također promijenjena u .alert-block.

Odlično ide uz javascript

Bootstrap dolazi sa odličnim jQuery dodatkom koji podržava poruke upozorenja, čineći njihovo odbacivanje brzim i lakim.

Nabavite dodatak »

Primjer upozorenja

Zamotajte svoju poruku i opcionalnu ikonu za zatvaranje u div s jednostavnom klasom.

<div class = "alert" > 
  <a class = "close" > × </a> 
  <strong> Upozorenje! </strong> Najbolje provjerite sami, ne izgledate previše dobro.
</div>

Lako proširite standardnu ​​poruku upozorenja s dvije opcione klase: .alert-blockza više kontrola i kontrola teksta i .alert-headingza odgovarajući naslov.

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

Greška ili opasnost

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

Uspjeh

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

Informacije

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

Basic

Zadana traka napretka s vertikalnim gradijentom.

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

Prugasta

Koristi gradijent za stvaranje prugastog efekta.

<div class = "progress progress-info 
     progresivni" >
  <div class = "bar" 
       style = " širina : 20 %; " ></div> 
</div>

Animirani

Uzima prugasti primjer i animira ga.

<div class = "napredak napredak-opasnost 
     napredno-prugasti aktivan" >
  <div class = "bar" 
       style = " širina : 40 %; " ></div> 
</div>

Dodatne boje

Trake napretka koriste neka od istih imena klasa kao dugmad i upozorenja za sličan stil.

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

Alternativno, možete prilagoditi LESS fajlove i namotati svoje boje i veličine.

Ponašanje

Trake napretka koriste CSS3 tranzicije, tako da ako dinamički podešavate širinu putem javascripta, ona će glatko mijenjati veličinu.

Ako koristite .activeklasu, vaše .progress-stripedtrake napretka će animirati pruge slijeva nadesno.

Podrška za pretraživač

Trake napretka koriste CSS3 gradijente, prijelaze i animacije kako bi postigli sve svoje efekte. Ove funkcije nisu podržane u IE7-8 ili starijim verzijama Firefoxa.

Opera trenutno ne podržava animacije.

Wells

Use the well as a simple effect on an element to give it an inset effect.

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

Značke

Koristite značku na elementu za broj nepročitanih ili kao jednostavan indikator.

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

Close icon

Use the generic close icon for dismissing content like modals and alerts.

×

<a class="close">&times;</a>