Primjer

Kontekstualni izbornik koji se može mijenjati za prikaz popisa veza. Interaktivan s padajućim JavaScript dodatkom .

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Akcija </a></li>  
  <li><a tabindex = "-1" href = "#" > Još jedna radnja </a></li>  
  <li><a tabindex = "-1" href = "#" > Još nešto ovdje </a></li>  
  <li class = "divider" ></li> 
  <li><a tabindex = "-1" href = "#" > Odvojena veza </a></li>  
</ul>

Markup

Gledajući samo padajući izbornik, ovdje je potreban HTML. Morate omotati okidač padajućeg izbornika i padajući izbornik unutar .dropdownili neki drugi element koji izjavljuje position: relative;. Zatim samo izradite jelovnik.

<div class = "dropdown" > 
  <!-- Veza ili gumb za prebacivanje padajućeg izbornika -->
  <ul class = "dropdown-menu" role = "menu" aria- labelledby = "dLabel" >   
    <li><a tabindex = "-1" href = "#" > Akcija </a></li>  
    <li><a tabindex = "-1" href = "#" > Još jedna radnja </a></li>  
    <li><a tabindex = "-1" href = "#" > Još nešto ovdje </a></li>  
    <li class = "divider" ></li> 
    <li><a tabindex = "-1" href = "#" > Odvojena veza </a></li>  
  </ul>
</div>

Mogućnosti

Poravnajte izbornike s desne strane i dodajte dodatne razine padajućih izbornika.

Usklađivanje izbornika

Dodajte .pull-rightna a .dropdown-menuza desno poravnanje padajućeg izbornika.

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

Onemogućene opcije izbornika

Dodajte .disabledna <li>padajući izbornik da biste onemogućili vezu.

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Redovna veza </a></li>  
  <li class = "disabled" ><a tabindex = "-1" href = "#" > Onemogućena veza </a></li>   
  <li><a tabindex = "-1" href = "#" > Još jedna veza </a></li>  
</ul>

Podizbornici na padajućim izbornicima

Dodajte dodatnu razinu padajućih izbornika, koji se pojavljuju pri lebdenju mišem poput onih u OS X-u, s nekim jednostavnim dodacima označavanja. Dodajte .dropdown-submenubilo kojem liu postojećem padajućem izborniku za automatsko oblikovanje.

<ul class = "dropdown-menu" role = "menu" aria- labelledby = "dLabel" >   
  ...
  <li class = "padajući-podizbornik" > 
    <a tabindex = "-1" href = "#" > Više opcija </a>  
    <ul class = "padajući izbornik" > 
      ...
    </ul>
  </li>
</ul>

Primjeri

Dvije osnovne opcije, zajedno s dvije specifične varijacije.

Grupa s jednom tipkom

Omotajte niz gumba .btns .btn-group.

<div class = "btn-group" > 
  <button class = "btn" > Lijevo </button> 
  <button class = "btn" > Srednji </button> 
  <button class = "btn" > Desno </button> 
</div>

Više grupa gumba

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

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

Okomite grupe gumba

Neka skup gumba izgleda okomito naslagani umjesto vodoravno.

<div class = "btn-group btn-group-vertical" > 
  ...
</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. Za to pogledajte JavaScript dokumente .

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.

Pregled i primjeri

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

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

Radi sa svim veličinama gumba

Padajući izbornici gumba rade u bilo kojoj veličini: .btn-large, .btn-smallili .btn-mini.

Zahtijeva JavaScript

Za rad padajućih gumba potreban je Bootstrap dodatak za padajući izbornik.

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

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.

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

Veličine

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

<div class = "btn-group" > 
  <button class = "btn btn-mini" > Akcija </button> 
  <button class = "btn btn-mini dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "padajući izbornik" > 
    <!-- veze padajućeg izbornika -->
  </ul>
</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.

<div class = "btn-group dropup" > 
  <button class = "btn" > Ispadanje </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "padajući izbornik" > 
    <!-- veze padajućeg izbornika -->
  </ul>
</div>

Lagane zadane postavke Ista oznaka, različite klase

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

Osnovne kartice

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

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

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

Onesposobljeno stanje

Za bilo koju navigacijsku komponentu (kartice, pilule ili popis), dodajte sive veze i .disabledbez efekata lebdenja . Veze će i dalje biti moguće kliknuti osim ako ne uklonite hrefatribut. Alternativno, možete implementirati prilagođeni JavaScript kako biste spriječili te klikove.

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

Poravnanje komponenti

Za poravnavanje navigacijskih veza upotrijebite klase pomoćnih programa .pull-leftili . .pull-rightObje klase će dodati CSS float u navedenom smjeru.

Može se složiti

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

Naslagani jezičci

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

Naslagane tablete

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

padajuće liste

Dodajte padajuće izbornike s malo dodatnog HTML-a i padajućeg JavaScript dodatka .

Kartice s padajućim izbornikom

<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

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

Navigacijske liste

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.

Primjer navigacijske liste

Uzmite popis poveznica 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>

BilješkaZa ugniježđivanje unutar navigacijskog popisa uključite class="nav nav-list"na bilo koji ugniježđeni <ul>.

Horizontalne pregrade

Dodajte vodoravni razdjelnik stvaranjem prazne stavke popisa s klasom .divider, ovako:

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

Navigacija s karticama

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.

Tabbable primjer

Da bi se kartice mogle tabirati, stvorite .tab-panes jedinstvenim ID-om za svaku karticu i zamotajte ih u .tab-content.

<div class = "tabbable" > <!-- Potrebno samo za lijeve/desne kartice -->  
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab" > Odjeljak 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > Odjeljak 2 </a></li>  
  </ul>
  <div class = "tab-content" > 
    <div class = "aktivno okno kartice" id = "tab1" >  
      <p> Ja sam u odjeljku 1. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Bok, ja sam u Odjeljku 2. </p>
    </div>
  </div>
</div>

Blijeđenje u karticama

Da bi kartice blijedjele, dodajte .fadesvakoj .tab-pane.

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

Tablicati u bilo kojem smjeru

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

Osnovna navigacijska traka

Za početak, navigacijske trake su statične (nisu pričvršćene na vrh) i uključuju podršku za naziv projekta i osnovnu navigaciju. Postavite ga bilo gdje unutar .container, koji postavlja širinu vaše stranice i sadržaja.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <a class = "brand" href = "#" > Naslov </a>  
    <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>
  </div>
</div>

Komponente navigacijske trake

Marka

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

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

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>

Svojim navigacijskim vezama možete jednostavno dodati razdjelnike s praznom stavkom popisa i jednostavnom klasom. Samo dodajte ovo između veza:

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

Obrasci

Za pravilan stil i položaj obrasca unutar navigacijske trake dodajte odgovarajuće klase kao što je prikazano u nastavku. Za zadani obrazac uključite .navbar-formili .pull-leftili .pull-rightkako biste ga ispravno poravnali.

<form class = "navbar-form pull-left" > 
  <input type = "text" class = "span2" >  
  <button type = "submit" class = "btn" > Pošalji </button>  
</form>

Obrazac za pretraživanje

Za prilagođeniji obrazac za pretraživanje, dodajte .navbar-searchi formu .search-queryunos za specijalizirane stilove na navigacijskoj traci.

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

Poravnanje komponenti

Poravnajte navigacijske veze, obrazac za pretraživanje ili tekst, upotrijebite .pull-leftili.pull-right uslužne klase. Obje klase će dodati CSS float u navedenom smjeru.

Korištenje padajućih izbornika

Dodajte padajuće izbornike i padajuće izbornike u navigaciju s malo označavanja i JavaScript dodatkom za padajuće izbornike .

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

Posjetite dokumentaciju JavaScript padajućih izbornika za više oznaka i informacija o pozivanju padajućih izbornika.

Tekst

Zamotajte nizove teksta u element s .navbar-text, obično na <p>oznaci za pravilan početak i boju.

Izborne varijacije prikaza

Fiksirajte navigacijsku traku na vrh ili dno prozora s dodatnom klasom na krajnjem vanjskom divu, .navbar.

Fiksiran na vrh

Dodajte .navbar-fixed-topi ne zaboravite uzeti u obzir skriveno područje ispod njega dodavanjem najmanje 40 px paddingu <body>. Obavezno dodajte ovo nakon temeljnog Bootstrap CSS-a i prije neobaveznog responzivnog CSS-a.

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

Fiksirano na dno

Dodajte .navbar-fixed-bottomumjesto toga.

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

Statička gornja navigacijska traka

Napravite navigacijsku traku pune širine koja se pomiče zajedno sa stranicom dodavanjem .navbar-static-top. Za razliku od .navbar-fixed-topklase, ne morate mijenjati ispune na body.

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

Responzivna navigacijska traka

Da biste implementirali skupljajuću responzivnu navigacijsku traku, zamotajte svoj sadržaj navigacijske trake 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 collapse" > 
        <!-- .nav, .navbar-search, .navbar-form itd. -->
      </div>
 
    </div>
  </div>
</div>

Obrnuta varijacija

Izmijenite izgled navigacijske trake dodavanjem .navbar-inverse.

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

Primjeri

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

<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" > Podaci </li> 
</ul>

Standardna paginacija

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

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

Mogućnosti

Onesposobljena i aktivna stanja

Veze se mogu prilagoditi različitim okolnostima. Koristite .disabledza poveznice na koje se ne može kliknuti i .activeza označavanje trenutne stranice.

<div class = "pagination" > 
  <ul>
    <li class = "disabled" ><a href = "#" > « </a></li>  
    <li class = "active" ><a href = "#" > 1 </a></li>  
    ...
  </ul>
</div>

Po izboru možete zamijeniti aktivna ili onemogućena sidra za raspone kako biste uklonili funkcionalnost klika uz zadržavanje željenih stilova.

<div class = "pagination" > 
  <ul>
    <li class = "disabled" ><span> « </span></li> 
    <li class = "active" ><span> 1 </span></li> 
    ...
  </ul>
</div>

Veličine

Želite li veću ili manju paginaciju? Dodajte .pagination-large, .pagination-smallili .pagination-miniza dodatne veličine.

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

Poravnanje

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

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

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

Pager

Brze prethodne i sljedeće veze za jednostavne implementacije paginacije s laganim označavanjem i stilovima. Izvrstan je za jednostavne stranice poput blogova ili časopisa.

Zadani primjer

Prema zadanim postavkama, dojavljivač centrira veze.

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

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

Izborno onemogućeno stanje

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

<ul class = "pager" > 
  <li class = "previous disabled" > 
    <a href = "#" > ← Starije </a> 
  </li>
  ...
</ul>

Etikete

Značke

Lako sklopiv

Za jednostavnu implementaciju, oznake i značke jednostavno će se skupiti (putem CSS-ovog :emptyselektora) kada unutar njih ne postoji nikakav sadržaj.

Jedinica heroja

Lagana, fleksibilna komponenta za prikazivanje ključnog sadržaja na vašoj web stranici. Dobro radi na marketinškim i sadržajnim stranicama.

<div class = "hero-unit" > 
  <h1> Naslov </h1>
  <p> Slogan </p>
  <p>
    <a class = "btn btn-primary btn-large" > 
      Saznajte više
    </a>
  </p>
</div>

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

<div class = "page-header" > 
  <h1> Primjer zaglavlja stranice <small> Podtekst za zaglavlje </small></h1>
</div>

Zadane sličice

Prema zadanim postavkama, Bootstrapove sličice dizajnirane su za prikaz 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.

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—kao što je .span2ili.span3 — za kontrolu dimenzija sličica.

Markup

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 = "span4" > 
    <a href = "#" class = "thumbnail" >  
      <img data-src = "holder.js/300x200" 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 = "span4" > 
    <div class = "thumbnail" > 
      <img data-src = "holder.js/300x200" alt = "" >  
      <h3> Oznaka sličice </h3>
      <p> Natpis sličice... </p>
    </div>
  </li>
  ...
</ul>

Više primjera

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

Zadano upozorenje

Zamotajte bilo koji tekst i dodatni gumb za odbacivanje .alertza osnovnu poruku upozorenja.

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

Gumbi za odbacivanje

Preglednici Mobile Safari i Mobile Opera, osim data-dismiss="alert"atributa, zahtijevaju i href="#"za odbacivanje upozorenja prilikom korištenja <a>oznake.

<a href = "#" class = "close" data-dismiss = "alert" > × </a>   

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.

<button type = "button" class = "close" data-dismiss = "alert" > × </button>   

Odbacite upozorenja putem JavaScripta

Upotrijebite dodatak za upozorenja jQuery za brzo i jednostavno odbacivanje upozorenja.

Mogućnosti

Za duže poruke povećajte ispunu na vrhu i dnu omota upozorenja dodavanjem .alert-block.

<div class = "alert alert-block" > 
  <button type = "button" class = "close" data-dismiss = "alert" > × </button>   
  <h4> Upozorenje! </h4>
  Najbolje provjerite sami, niste...
</div>

Kontekstualne alternative

Dodajte izborne klase za promjenu konotacije upozorenja.

Pogreška ili opasnost

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

Uspjeh

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

Informacija

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

Primjeri i oznake

Osnovni, temeljni

Zadana traka napretka s okomitim gradijentom.

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

Prugasta

Koristi gradijent za stvaranje prugastog efekta. Nije dostupno u IE7-8.

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

Animirani

Dodajte .activeza .progress-stripedanimiranje pruga zdesna nalijevo. Nije dostupno u svim verzijama IE-a.

<div class = "progress progress-striped active" > 
  <div class = "bar" style = " width : 40 %; " ></div>   
</div>

Složeno

Stavite više šipki u istu .progresskako biste ih složili.

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

Mogućnosti

Dodatne boje

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

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

Prugaste šipke

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

<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-striped" > 
  <div class = "bar" style = " width : 60 % " ></div>   
</div>
<div class = "progress progress-danger progress-striped" > 
  <div class = "bar" style = " width : 80 % " ></div>   
</div>

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.

Inačice starije od Internet Explorera 10 i Opere 12 ne podržavaju animacije.

Stilovi apstraktnih objekata za izgradnju različitih vrsta komponenti (kao što su komentari na blogu, tweetovi itd.) koji imaju lijevo ili desno poravnanu sliku uz tekstualni sadržaj.

Zadani primjer

Zadani mediji dopuštaju plutanje medijskog objekta (slike, video, audio) lijevo ili desno od bloka sadržaja.

Medijski naslov

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque 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.

Medijski naslov

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque 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.

Medijski naslov

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque 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" > Medijski naslov </h4> 
    ...
 
    <!-- Ugniježđeni medijski objekt -->
    <div class = "media" > 
      ...
    </div>
  </div>
</div>

Popis medija

Uz malo dodatnog označavanja, možete koristiti unutarnju listu medija (korisno za niti komentara ili popise članaka).

<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" > Medijski naslov </h4> 
      ...
 
      <!-- Ugniježđeni medijski objekt -->
      <div class = "media" > 
        ...
     </div>
    </div>
  </li>
</ul>

Wells

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

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

Fakultativna nastava

Kontrolirajte ispunu i zaobljene kutove s dvije opcijske klase modifikatora.

<div class = "dobro dobro-veliko" > 
  ...
</div>

<div class = "dobro dobro-malo" > 
  ...
</div>

Ikona za zatvaranje

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

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

iOS uređaji zahtijevaju događaj href="#"klika ako biste radije koristili sidro.

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

Pomoćne klase

Jednostavne, fokusirane klase za mala podešavanja zaslona ili ponašanja.

.povuci-lijevo

Pomakni element ulijevo

klasa = "povuci-lijevo"

. povuci - lijevo {
  plovak : lijevo ;
}

.povuci-desno

Pomaknite element udesno

klasa = "povuci desno"

. povuci - desno {
  lebdjeti : desno ;
}

.prigušen

Promjena boje elementa u#999

klasa = "utišano"

. isključen {
  boja : #999; 
}

.clearfix

Očistite floatbilo koji element

klasa = "clearfix"

. clearfix {
  * zumiranje : 1 ; 
  &: prije ,
  &: nakon {
    prikaz : stol ;
    sadržaj : "" ; 
  }
  &: nakon {
    jasno : oboje ;
  }
}