Komponente

Deseci komponenti za višekratnu upotrebu ugrađeni su u Bootstrap za pružanje navigacije, upozorenja, skočnih prozora i još mnogo toga.

Grupe gumba

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

Najbolje prakse

Preporučujemo sljedeće smjernice za korištenje grupa gumba i alatnih traka:

  • Uvijek koristite isti element u jednoj grupi gumba <a>ili <button>.
  • Ne miješajte gumbe različitih boja u istoj grupi gumba.
  • Koristite ikone uz ili umjesto teksta, ali svakako uključite alt i naslovni tekst gdje je to prikladno.

Povezane grupe gumba s padajućim izbornikom (pogledajte dolje) treba pozivati ​​zasebno i uvijek uključivati ​​padajući kursor za označavanje željenog ponašanja.

Zadani primjer

Evo kako HTML izgleda za standardnu ​​grupu gumba izgrađenu s gumbima oznake sidra:

  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>

Primjer alatne trake

Kombinirajte skupove <div class="btn-group">u <div class="btn-toolbar">za složenije komponente.

  1. <div class = "btn-toolbar" >
  2. <div class = "btn-group" >
  3. ...
  4. </div>
  5. </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 »

Padajući izbornici u grupama gumba

Glavu gore! Gumbi s padajućim izbornikom moraju biti zasebno umotani u svoje .btn-groupunutar .btn-toolbarza ispravno prikazivanje.

Padajući izbornik gumba

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.

  1. <div class = "btn-group" >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >
  3. Akcijski
  4. <span class = "caret" ></span>
  5. </a>
  6. <ul class = "padajući izbornik" >
  7. <!-- veze padajućeg izbornika -->
  8. </ul>
  9. </div>

Radi sa svim veličinama gumba

Padajući izbornik gumba radi u bilo kojoj veličini. veličina vašeg gumba je .btn-large, .btn-smallili .btn-mini.

Zahtijeva javascript

Za funkcioniranje padajućih gumba potreban je Bootstrap padajući dodatak .

U nekim slučajevima, poput mobilnih uređaja, padajući izbornici proširit će se izvan okvira za prikaz. Morate riješiti poravnanje ručno ili prilagođenim javascriptom.


Padajući izbornici gumba Split

Pregled i primjeri

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.

Veličine

Iskoristite dodatne klase gumba .btn-mini, .btn-smallili .btn-largeza dimenzioniranje.

  1. <div class = "btn-group" >
  2. ...
  3. <ul class = "dropdown-menu pull-desno" >
  4. <!-- veze padajućeg izbornika -->
  5. </ul>
  6. </div>

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.

  1. <div class = "btn-group" >
  2. <button class = "btn" > Akcija </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "padajući izbornik" >
  7. <!-- veze padajućeg izbornika -->
  8. </ul>
  9. </div>

Padajući izbornici

Padajući izbornici također se mogu prebacivati ​​odozdo prema gore dodavanjem jedne klase neposrednom roditelju .dropdown-menu. Okrenut će smjer .careti promijeniti položaj samog izbornika da se kreće odozdo prema gore umjesto odozgo prema dolje.

  1. <div class = "btn-group dropup" >
  2. <button class = "btn" > Ispadanje </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "padajući izbornik" >
  7. <!-- veze padajućeg izbornika -->
  8. </ul>
  9. </div>

Paginacija s više stranica

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

  1. <div class = "pagination" >
  2. <ul>
  3. <li><a href = "#" > Prethodna </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 = "#" > Dalje </a></li>
  11. </ul>
  12. </div>

Pager Za brze prethodne i sljedeće poveznice

O dojavljivaču

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

Izborno onemogućeno stanje

Pager veze također koriste opću .disabledklasu iz paginacije.

Zadani primjer

Prema zadanim postavkama, dojavljivač centrira veze.

  1. <ul class = "pager" >
  2. <li>
  3. <a href = "#" > Prethodno </a>
  4. </li>
  5. <li>
  6. <a href = "#" > Dalje </a>
  7. </li>
  8. </ul>

Usklađene veze

Alternativno, svaku vezu možete poravnati sa strane:

  1. <ul class = "pager" >
  2. <li klasa = "prethodna" >
  3. <a href = "#" > Starije </a>
  4. </li>
  5. <li class = "sljedeća" >
  6. <a href = "#" > Novije → </a>
  7. </li>
  8. </ul>
Etikete Markup
Zadano <span class="label">Default</span>
Uspjeh <span class="label label-success">Success</span>
Upozorenje <span class="label label-warning">Warning</span>
Važno <span class="label label-important">Important</span>
Info <span class="label label-info">Info</span>
Inverzan <span class="label label-inverse">Inverse</span>

Oko

Bedževi su male, jednostavne komponente za prikaz pokazatelja ili brojanja neke vrste. Obično se nalaze u klijentima e-pošte kao što je Mail.app ili u mobilnim aplikacijama za push obavijesti.

Dostupni razredi

Ime Primjer Markup
Zadano 1 <span class="badge">1</span>
Uspjeh 2 <span class="badge badge-success">2</span>
Upozorenje 4 <span class="badge badge-warning">4</span>
Važno 6 <span class="badge badge-important">6</span>
Info 8 <span class="badge badge-info">8</span>
Inverzan 10 <span class="badge badge-inverse">10</span>

Jedinica heroja

Bootstrap pruža laganu, fleksibilnu komponentu koja se naziva jedinica heroja za prikazivanje sadržaja na vašoj web stranici. Dobro radi na marketinškim i sadržajnim stranicama.

Markup

Omotajte svoj sadržaj na sljedeći divnačin:

  1. <div class = "hero-unit" >
  2. <h1> Naslov </h1>
  3. <p> Slogan </p>
  4. <p>
  5. <a klasa = "btn btn-primarni btn-large" >
  6. Saznajte više
  7. </a>
  8. </p>
  9. </div>

Pozdrav svijete!

Ovo je jednostavna herojska jedinica, jednostavna komponenta u stilu jumbotrona za privlačenje dodatne pozornosti na istaknuti sadržaj ili informacije.

Saznajte više

Zaglavlje stranice

Jednostavna ljuska za h1prikladno raspoređivanje i segmentiranje dijelova sadržaja na stranici. Može koristiti h1zadani small, element kao i većinu drugih komponenti (s dodatnim stilovima).

  1. <div class = "page-header" >
  2. <h1> Primjer zaglavlja stranice </h1>
  3. </div>

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 :

  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>

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:

  1. <ul class = "thumbnails" >
  2. <li class = "span3" >
  3. <div class = "thumbnail" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> Oznaka sličice </h5>
  6. <p> Opis sličice upravo ovdje... </p>
  7. </div>
  8. </li>
  9. ...
  10. </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.

Lagane zadane postavke

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.

Upozorenje! Najbolje provjeri, ne izgledaš baš dobro.
  1. <div class = "alert" >
  2. <button class = "close" data-dismiss = "alert" > × </button>
  3. <strong> Upozorenje! </strong> Najbolje da provjerite sami, ne izgledate baš dobro.
  4. </div>

Glavu gore! iOS uređaji zahtijevaju href="#"za odbacivanje upozorenja. Obavezno uključite to i atribut podataka za ikone zatvaranja sidra. Alternativno, možete koristiti <button>element s atributom podataka, što smo odlučili učiniti za naše dokumente. Kada koristite <button>, morate uključiti type="button"ili se vaši obrasci možda neće poslati.

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

Upozorenje!

Najbolje provjeri, ne izgledaš baš dobro. Nulla vitae elit libero, a 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" > Upozorenje! </h4>
  4. Najbolje provjerite sami, niste...
  5. </div>

Kontekstualne alternative Dodajte izborne klase za promjenu konotacije upozorenja

Pogreška ili opasnost

O jebote! Promijenite nekoliko stvari i pokušajte ponovo poslati.
  1. <div class = "alert alert-error" >
  2. ...
  3. </div>

Uspjeh

Dobro napravljeno! Uspješno ste pročitali ovu važnu poruku upozorenja.
  1. <div klasa = "alert alert-success" >
  2. ...
  3. </div>

Informacija

Glavu gore! Ovo upozorenje zahtijeva vašu pozornost, ali nije posebno važno.
  1. <div class = "alert alert-info" >
  2. ...
  3. </div>

Primjeri i oznake

Osnovni, temeljni

Zadana traka napretka s okomitim gradijentom.

  1. <div class = "progress" >
  2. <div class = "bar"
  3. stil = " širina : 60 %; " ></div>
  4. </div>

Prugasta

Koristi gradijent za stvaranje prugastog efekta (bez IE).

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

Animirani

Uzima prugasti primjer i animira ga (bez IE).

  1. <div class = "progress progress-striped
  2. aktivan" >
  3. <div class = "bar"
  4. stil = " širina : 40 %; " ></div>
  5. </div>

Mogućnosti i podrška preglednika

Dodatne boje

Trake napretka koriste neke od istih tipki i klasa upozorenja za dosljedne stilove.

Prugaste šipke

Slično jednobojnim bojama, imamo različite prugaste trake napretka.

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-9 ili starijim verzijama Firefoxa.

Opera i IE trenutno ne podržavaju animacije.

Wells

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

Gle, ja sam u bunaru!
  1. <div class = "well" >
  2. ...
  3. </div>

Ikona za zatvaranje

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

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

iOS uređaji zahtijevaju href="#" za klikove ako radije koristite sidro.

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