Grupe gumba

Koristite grupe gumba za spajanje više gumba u jednu složenu komponentu. Izgradite ih pomoću niza <a>ili <button>elemenata.

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

Primjer označavanja

Evo kako HTML izgleda za standardnu ​​grupu gumba izgrađenu s gumbima 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 s alatnom trakom za više grupa:

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

Potvrdni okvir i radijski okusi

Grupe gumba također mogu funkcionirati kao radio, gdje može biti aktivan samo jedan gumb, ili okviri za potvrdu, gdje može biti aktivan bilo koji broj gumba. Pogledajte Javascript dokumente za to.

Preuzmite javascript »

Glavu gore

CSS za grupe gumba nalazi se u zasebnoj datoteci, button-groups.less.

Padajući izbornik gumba

Upotrijebite bilo koji gumb za pokretanje padajućeg izbornika tako da ga postavite unutar .btn-groupi date odgovarajuću oznaku izbornika.

Primjer označavanja

Slično grupi gumba, naše označavanje koristi uobičajeno označavanje gumba, ali s pregršt dodataka za pročišćavanje stila i podržavanje Bootstrapovog padajućeg jQuery dodatka.

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

Padajući izbornici gumba Split

Nadovezujući se na stilove i označavanje grupe gumba, možemo jednostavno stvoriti podijeljeni gumb. Podijeljeni gumbi imaju standardnu ​​radnju s lijeve strane i padajući izbornik s desne strane s kontekstualnim vezama.

Primjer označavanja

Proširujemo normalne padajuće izbornike gumba kako bismo pružili radnju drugog gumba koji funkcionira kao zasebni okidač padajućeg izbornika.

<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 izbornik" > 
    <!-- veze padajućeg izbornika -->
  </ul>
</div>

Snažna osnovna klasa

Sve navigacijske komponente ovdje—kartice, pilule i popisi —dijele istu osnovnu oznaku i stilove kroz .navrazred.

Zašto tablete i tablete

Kartice i pilule u Bootstrapu izgrađene su na <ul>istom osnovnom HTML-u, popisu poveznica. Mijenjajte tablete ili tablete samo s klasom.

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

Osnovne kartice

Uzmite obične <ul>veze i dodajte .nav-tabs:

• Dom
• Profil
• Poruke

<ul class = "nav nav-tabs" > 
  <li class = "active" > 
    <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 njega upotrijebite:

• Dom
• Profil
• Poruke

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

Kako ih složiti

Kako su kartice i pilule prema zadanim postavkama vodoravne, samo dodajte drugu klasu, .nav-stackedkako bi izgledale okomito naslagane.

Naslagani jezičci

• Dom
• Profil
• Poruke

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

Naslagane tablete

• Dom
• Profil
• Poruke

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

Bogati jelovnici na jednostavan način

Padajući izbornici u Bootstrap karticama i pilulama su super jednostavni i zahtijevaju samo malo više HTML-a i lagani jQuery dodatak.

Idite na stranicu Javascripta kako biste pročitali dokumente o pokretanju padajućih izbornika u Bootstrapu.

Kartice s padajućim izbornikom

• Dom
• Profil
• Padajući izbornik
  • Akcijski
  • Još jedna akcija
  • Nešto drugo ovdje
  • Odvojena veza

<ul class = "nav nav-tabs" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "padajući"
       href = "#" >
        Padajući izbornik
        <b class = "caret" ></b> 
      </a>
    <ul class = "padajući izbornik" > 
      <!-- veze -->
    </ul>
  </li>
</ul>

Tablete s padajućim izbornikom

• Dom
• Profil
• Padajući izbornik
  • Akcijski
  • Još jedna akcija
  • Nešto drugo ovdje
  • Odvojena veza

<ul class = "nav nav-pills" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "padajući"
       href = "#" >
        Padajući izbornik
        <b class = "caret" ></b> 
      </a>
    <ul class = "padajući izbornik" > 
      <!-- veze -->
    </ul>
  </li>
</ul>

Navigacija u stilu aplikacije

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

Strukturno, izgrađeni su na istim osnovnim navigacijskim stilovima kao kartice i tablete, tako da su upotreba i prilagodba jednostavni.

Sa ikonama

Navigacijske liste također je lako opremiti ikonama. Dodajte odgovarajuću <i>oznaku s klasom i gotovi ste.

Primjer navigacijske liste

Uzmite popis veza i dodajte class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > 
    Zaglavlje popisa
  </li>
  <li class = "active" > 
    <a href = "#" > Početna </a> 
  </li>
  <li>
    <a href = "#" > Knjižnica </a> 
  </li>
  ...
</ul>

Primjer s ikonama

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

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

Što je uključeno

Oživite svoje kartice pomoću jednostavnog dodatka za prebacivanje između sadržaja putem kartica. Bootstrap integrira tabbable kartice u četiri stila: gore (zadano), desno, dolje i lijevo.

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

Primjer s karticama

Da biste kartice učinili tabbable, omotajte .nav-tabsu drugi div s class .tabbable.

Prilagođeni jQuery dodatak

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

Preuzmite javascript →

Jezici na dnu

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

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

Kartice s lijeve strane

Zamijenite klasu da biste stavili kartice s lijeve strane.

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

Kartice s desne strane

Zamijenite klasu da biste stavili kartice s desne strane.

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

Navbar skele

Navigacijska traka zahtijeva samo nekoliko divova da bi bila dobro strukturirana za statički ili fiksni prikaz.

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

Kako bi navigacijska traka bila fiksirana na vrh prozora, dodajte .navbar-fixed-topnajudaljeniji div, .navbar. U svom CSS-u također ćete morati uzeti u obzir preklapanje koje uzrokuje dodavanjem padding-top: 40px;u svoj <body>.

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

Naziv marke

Jednostavna poveznica za prikaz naziva vašeg brenda ili projekta zahtijeva samo oznaku sidra.

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

Obrazac za pretraživanje

Obrasci za pretraživanje dobivaju prilagođene stilove u navigacijskoj traci s .navbar-searchrazredom. 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>

Izborna responzivna varijacija

Ovisno o količini sadržaja na gornjoj traci, možda ćete htjeti implementirati responzivne opcije. Da biste to učinili, zamotajte svoj navigacijski sadržaj u div koji sadrži .nav-collapse.collapse, i dodajte gumb za uključivanje navigacijske trake, .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "container" > 
 
      <!-- .btn-navbar koristi se kao prekidač za sadržaj sažete 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>
 
      <!-- Svakako ostavite marku ako želite da se prikaže -->
      <a class = "brand" href = "#" > Naziv projekta </a>  
 
      <!-- Sve što želite sakriti na 940px ili manje, smjestite ovdje -->
      <div class = "nav-collapse" > 
        <!-- .nav, .navbar-search, .navbar-form, itd -->
      </div>
 
    </div>
  </div>
</div>

Navigacijske veze

Navigacijske stavke jednostavno je dodati putem neuređenih popisa.

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

Dodavanje padajućih izbornika

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

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

Preuzmite javascript →

Zašto ih koristiti

Navigacija putem puta koristi se kao način da se korisnicima pokaže gdje se nalaze unutar aplikacije ili web-mjesta, ali ne za primarnu navigaciju. Neka njihova upotreba bude rijetka i sažeta kako bi bile najučinkovitije.

Primjeri

Prikazan je jedan primjer jer se može prikazati na više stranica.

• Dom

• Početna /
• Knjižnica

• Početna /
• Knjižnica /
• Podaci

Markup

HTML je vaš standardni neuređeni popis s vezama.

<ul class = "breadcrumb" > 
  <li>
    <a href = "#" > Početna </a> <span class = "divider" > / </span>   
  </li>
  <li>
    <a href = "#" > Knjižnica </a> <span class = "divider" > / </span>   
  </li>
  <li class = "active" > 
    <a href = "#" > Podaci </a> 
  </li>
</ul>

Kada koristiti

Ultra jednostavno i minimalno stilizirano označavanje stranica inspirirano Rdioom, izvrsno za aplikacije i rezultate pretraživanja. Veliki blok teško je promašiti, lako ga je prilagoditi i pruža velika područja klika.

Veze na stranice s prikazom stanja

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

Fleksibilno poravnanje

Dodajte bilo koju od dvije opcijske klase za promjenu poravnanja veza na stranice: .pagination-centeredi .pagination-right.

Primjeri

Zadana komponenta paginacije je fleksibilna i radi u nizu varijacija.

Markup

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

<div class = "pagination" > 
  <ul>
    <li><a href = "#" > Prethodna </a></li> 
    <li class = "active" > 
      <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 = "#" > Dalje </a></li> 
  </ul>
</div>

O dojavljivaču

Komponenta straničnika je skup poveznica za jednostavne implementacije paginacije s laganim označavanjem i još lakšim stilovima. Izvrstan je za jednostavne stranice poput blogova ili časopisa.

Zadani primjer

Prema zadanim postavkama, dojavljivač centrira veze.

• Prethodno
• Sljedeći

<ul class = "pager" > 
  <li>
    <a href = "#" > Prethodno </a> 
  </li>
  <li>
    <a href = "#" > Dalje </a> 
  </li>
</ul>

Usklađene veze

Alternativno, svaku vezu možete poravnati sa strane:

• ← Starije
• Novije →

<ul class = "pager" > 
  <li klasa = "prethodna" > 
    <a href = "#" > ← Starije </a> 
  </li>
  <li class = "sljedeća" > 
    <a href = "#" > Novije → </a> 
  </li>
</ul>

Zadane sličice

Prema zadanim postavkama, Bootstrapove sličice dizajnirane su za prikazivanje povezanih slika s minimalnim potrebnim oznakama.

Vrlo prilagodljiv

Uz malo dodatnog označavanja, moguće je sličicama dodati bilo koju vrstu HTML sadržaja poput naslova, odlomaka ili gumba.

• 

  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.

  Akcijski Akcijski

• 

  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.

  Akcijski Akcijski

Zašto koristiti sličice

Sličice (prethodno .media-griddo v1.4) izvrsne su za mreže fotografija ili videozapisa, rezultate pretraživanja slika, maloprodajne proizvode, portfelje i još mnogo toga. Mogu biti poveznice ili statični sadržaj.

Jednostavno, fleksibilno označavanje

Označavanje minijatura je jednostavno - sve što je potrebno je a uls bilo kojim brojem elemenata. liTakođer je super fleksibilan, dopuštajući bilo koju vrstu sadržaja sa samo malo više oznaka za omotavanje vašeg sadržaja.

Koristi veličine stupaca mreže

Na kraju, komponenta sličica koristi postojeće klase sustava rešetki—poput .span2ili — .span3za kontrolu dimenzija sličica.

Oznaka

Kao što je ranije spomenuto, potrebno označavanje za minijature je lagano i jednostavno. Evo pogleda na zadanu postavku za povezane slike :

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

Za prilagođeni HTML sadržaj u minijaturama, oznaka se malo mijenja. Kako bismo dopustili sadržaj na razini bloka bilo gdje, mijenjamo <a>za lajk <div>tako:

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

Više primjera

Istražite sve svoje mogućnosti s različitim klasama mreže koje su vam dostupne. Također možete kombinirati različite veličine.

Ponovno napisana osnovna klasa

S Bootstrapom 2 pojednostavili smo osnovnu klasu: .alertumjesto .alert-message. Također smo smanjili minimalno potrebno označavanje—nije <p>potrebno prema zadanim postavkama, samo vanjski <div>.

Jedna poruka upozorenja

Za trajniju komponentu s manje koda, uklonili smo razlikovni izgled za blok upozorenja, poruke koje dolaze s više ispuna i obično više teksta. Klasa se također promijenila u .alert-block.

Odlično ide s javascriptom

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

Nabavite dodatak »

Primjer upozorenja

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

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

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

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

Pogreška ili opasnost

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

Uspjeh

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

Informacija

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

Osnovni, temeljni

Zadana traka napretka s okomitim gradijentom.

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

Prugasta

Koristi gradijent za stvaranje prugastog efekta.

<div class = "informacije o napretku 
     napredak-prugasti" >
  <div class = "bar" 
       stil = " širina : 20 %; " ></div> 
</div>

Animirani

Uzima prugasti primjer i animira ga.

<div class = "napredak napredak-opasnost 
     napredak-prugasti aktivni" >
  <div class = "bar" 
       stil = " širina : 40 %; " ></div> 
</div>

Dodatne boje

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

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

Alternativno, možete prilagoditi LESS datoteke i uvaljati vlastite boje i veličine.

Ponašanje

Trake napretka koriste CSS3 prijelaze, tako da ako dinamički prilagodite širinu putem javascripta, glatko će promijeniti veličinu.

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

Podrška za preglednik

Trake napretka koriste CSS3 gradijente, prijelaze i animacije za postizanje svih njihovih učinaka. Ove značajke nisu podržane u IE7-8 ili starijim verzijama Firefoxa.

Opera trenutno ne podržava animacije.

Wells

Upotrijebite bušotinu kao jednostavan učinak na element kako biste mu dali umetnuti učinak.

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

Značke

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

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

Ikona za zatvaranje

Upotrijebite generičku ikonu za zatvaranje za odbacivanje sadržaja poput modala i upozorenja.

×

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