Primjer

Preklopni, kontekstualni meni za prikaz lista 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 = "#" > Nešto drugo ovdje </a></li>  
  <li class = "razdjelnik" ></li> 
  <li><a tabindex = "-1" href = "#" > Odvojeni link </a></li>  
</ul>

Markup

Gledajući samo padajući meni, evo potrebnog HTML-a. Morate umotati okidač padajućeg menija i padajući meni unutar .dropdownili u drugi element koji deklariše position: relative;. Zatim samo kreirajte meni.

<div class = "padajući" > 
  <!-- Veza ili dugme za prebacivanje padajućeg menija -->
  <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 = "#" > Nešto drugo ovdje </a></li>  
    <li class = "razdjelnik" ></li> 
    <li><a tabindex = "-1" href = "#" > Odvojeni link </a></li>  
  </ul>
</div>

Opcije

Poravnajte menije udesno i dodajte dodatne nivoe padajućih menija.

Poravnavanje menija

Dodajte .pull-rightna .dropdown-menudesno poravnajte padajući meni.

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

Podmeniji na padajućim menijima

Dodajte dodatni nivo padajućih menija, koji se pojavljuju pri lebdenju poput onih u OS X-u, uz neke jednostavne dodatke za označavanje. Dodajte .dropdown-submenuu bilo koji liu postojećem padajućem izborniku za automatsko oblikovanje.

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

Primjeri

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

Grupa sa jednim dugmetom

Zamotajte niz dugmadi .btnu .btn-group.

<div class = "btn-group" > 
  <button class = "btn" > 1 </button> 
  <button class = "btn" > 2 </button> 
  <button class = "btn" > 3 </button> 
</div>

Više grupa dugmadi

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

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

Vertikalne grupe dugmadi

Neka skup dugmadi izgleda vertikalno naslagano, a ne horizontalno.

<div class = "btn-group btn-group-vertical" > 
  ...
</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.

Padajući meni u grupama dugmadi

Glavu gore!Dugmad s padajućim izbornikom moraju biti pojedinačno umotana u svoje .btn-groupunutar a .btn-toolbarradi pravilnog prikazivanja.

Pregled i primjeri

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

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

Radi sa svim veličinama dugmadi

Padajući meni gumba funkcionira u bilo kojoj veličini: .btn-large, .btn-small, ili .btn-mini.

Zahtijeva JavaScript

Padajući meni s gumbima zahtijeva da funkcionišu dodaci za padajući meni Bootstrap .

U nekim slučajevima – poput mobilnih – padajući meniji će se proširiti izvan okvira za prikaz. Poravnanje morate riješiti ručno ili pomoću prilagođenog JavaScripta.

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.

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

Veličine

Koristite dodatne klase dugmadi .btn-mini, .btn-smallili .btn-largeza određivanje veličine.

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

Dropup meniji

Padajući meniji se takođe mogu prebacivati odozdo prema gore dodavanjem jedne klase neposrednom roditelju .dropdown-menu. Preokrenut će smjer .careti pozicionirati sam meni tako da se kreće odozdo prema gore umjesto odozgo prema dolje.

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

Lagane zadane postavke Ista oznaka, različite klase

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

Osnovne kartice

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

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

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

Disabled state

Za bilo koju komponentu za navigaciju (kartice, tablete ili listu), dodajte .disabledza sive veze i bez efekata lebdenja . Međutim, veze će ostati na koje se mož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

Da biste poravnali navigacijske veze, koristite .pull-leftili .pull-rightuslužne klase. Obje klase će dodati CSS float u navedenom smjeru.

Stackable

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

Naslagane kartice

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

Naslagane tablete

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

Padajući meni

Dodajte padajuće menije sa malo dodatnog HTML-a i padajućim JavaScript dodacima .

Kartice sa padajućim menijima

<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

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

Nav liste

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.

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 = "active" ><a href = "#" > Početna </a></li>  
  <li><a href = "#" > Biblioteka </a></li> 
  ...
</ul>

BilješkaZa ugniježđenje unutar navigacijske liste, uključite class="nav nav-list"u bilo koji ugniježđeni <ul>.

Horizontalni razdjelnici

Dodajte horizontalni razdjelnik kreiranjem prazne stavke liste s klasom .divider, na sljedeći način:

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

Tabbable nav

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.

Tabable primjer

Da biste tabulatore učinili karticama, kreirajte .tab-panes jedinstvenim ID-om za svaku karticu i umotajte ih u .tab-content.

Ja sam u sekciji 1.

Zdravo, ja sam u sekciji 2.

Šta ima djevojko, ovo je dio 3.

<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 = "tab-pane active" id = "tab1" >  
      <p> Ja sam u Odjeljku 1. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Zdravo, ja sam u Odjeljku 2. </p>
    </div>
  </div>
</div>

Fade in tabs

Da biste učinili da kartice nestaju, dodajte .fadesvakom .tab-pane.

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

Tabulator u bilo kojem smjeru

Kartice na dnu

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

Ja sam u sekciji A.

Zdravo, ja sam u sekciji B.

Šta ima djevojko, ovo je odjeljak C.

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

Ja sam u sekciji A.

Zdravo, ja sam u sekciji B.

Šta ima djevojko, ovo je odjeljak C.

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

Ja sam u sekciji A.

Zdravo, ja sam u sekciji B.

Šta ima djevojko, ovo je odjeljak C.

<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 fiksirane na vrhu) i uključuju podršku za naziv projekta i osnovnu navigaciju. Postavite ga bilo gdje unutar .container, koji postavlja širinu vaše web 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>

Navbar komponente

Brand

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

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

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>

Možete jednostavno dodati razdjelnike vašim navigacijskim vezama s praznom stavkom liste i jednostavnom klasom. Samo dodajte ovo između linkova:

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

Forms

Da biste pravilno stilizirali i pozicionirali obrazac unutar navigacijske trake, dodajte odgovarajuće klase kao što je prikazano ispod. Za zadani obrazac, uključite .navbar-formi ili .pull-leftili .pull-rightda ga pravilno poravnate.

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

Obrazac za pretragu

Za prilagođeniji obrazac za pretragu, dodajte .navbar-searchi formna .search-queryulaz 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 pretragu ili tekst, koristite .pull-leftili .pull-rightuslužne klase. Obje klase će dodati CSS float u navedenom smjeru.

Korištenje padajućih menija

Dodajte padajuće i padajuće menije u navigaciju uz malo markupa i padajućeg JavaScript dodatka .

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

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

Tekst

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

Opcione varijacije prikaza

Popravite navigacijsku traku na vrh ili dno okvira za prikaz s dodatnom klasom na krajnjem div, .navbar.

Fiksirano na vrh

Dodajte .navbar-fixed-topi ne zaboravite da uzmete u obzir skriveno područje ispod njega dodavanjem najmanje 40px paddingu <body>. Obavezno dodajte ovo iza osnovnog Bootstrap CSS-a i prije opcionog 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

Kreirajte navigacijsku traku pune širine koja se pomiče sa stranice dodavanjem .navbar-static-top. Za razliku od .navbar-fixed-topklase, ne morate mijenjati bilo kakav padding na body.

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

Responsive Navbar

Da implementirate navigacijsku traku koja se sažima, umotajte sadržaj navigacijske trake u div koji sadrži .nav-collapse.collapsei dodajte dugme za prebacivanje navigacijske trake .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 collapse" > 
        <!-- .nav, .navbar-search, .navbar-form, itd -->
      </div>
 
    </div>
  </div>
</div>

Glavu gore! Za responzivnu navigacijsku traku potreban je dodatak za kolaps i responzivni Bootstrap CSS fajl .

Obrnuta varijacija

Izmijenite izgled navigacijske trake dodavanjem .navbar-inverse.

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

Primjeri

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

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

Standardna paginacija

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

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

Opcije

Onemogućeno i aktivno stanje

Linkovi su prilagodljivi različitim okolnostima. Koristi .disabledse za veze na koje se ne može kliknuti i .activeza označavanje trenutne stranice.

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

Opciono možete zamijeniti aktivna ili onemogućena sidra za raspone kako biste uklonili funkcionalnost klika uz zadržavanje predviđenih stilova.

<div class = "paginacija" > 
  <ul>
    <li class = "disabled" ><span> Prethodno </span></li> 
    <li class = "aktivan" ><span> 1 </span></li> 
    ...
  </ul>
</div>

Veličine

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

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

Poravnanje

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

<div class = "paginacija centrirana na paginaciju" > 
  ...
</div>

<div class = "paginacija paginacija-desno" > 
  ...
</div>

Pejdžer

Brze prethodne i sljedeće veze za jednostavne implementacije paginacije s laganim oznakama i stilovima. Odličan je za jednostavne stranice poput blogova ili časopisa.

Zadani primjer

Podrazumevano, pejdžer centrira veze.

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

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

Opciono onemogućeno stanje

Veze pejdžera takođe koriste opštu .disableduslužnu klasu iz paginacije.

<ul class = "pager" > 
  <li class = "prethodni onemogućen" > 
    <a href = "#" > ← Stariji </a> 
  </li>
  ...
</ul>

Etikete

Etikete	Markup
Default	`<span class="label">Default</span>`
Uspjeh	`<span class="label label-success">Success</span>`
Upozorenje	`<span class="label label-warning">Warning</span>`
Bitan	`<span class="label label-important">Important</span>`
Info	`<span class="label label-info">Info</span>`
Inverzno	`<span class="label label-inverse">Inverse</span>`

Značke

Ime	Primjer	Markup
Default	1	`<span class="badge">1</span>`
Uspjeh	2	`<span class="badge badge-success">2</span>`
Upozorenje	4	`<span class="badge badge-warning">4</span>`
Bitan	6	`<span class="badge badge-important">6</span>`
Info	8	`<span class="badge badge-info">8</span>`
Inverzno	10	`<span class="badge badge-inverse">10</span>`

Jedinica heroja

Lagana, fleksibilna komponenta za izlaganje ključnog sadržaja na vašoj web lokaciji. Dobro radi na marketingu i web lokacijama s velikim sadržajem.

Zdravo svijete!

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

Nauči više

<div class = "heroj-jedinica" > 
  <h1> Naslov </h1>
  <p> Tagline </p>
  <p>
    <a class = "btn btn-primary btn-large" > 
      Nauči više
    </a>
  </p>
</div>

Zaglavlje stranice

Jednostavna ljuska za h1odgovarajući prostor i segmentiranje dijelova sadržaja na stranici. Može koristiti h1zadani smallelement, kao i većinu drugih komponenti (sa dodatnim stilovima).

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

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
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 = "span4" > 
    <a href = "#" class = "thumbnail" >  
      <img src = "https://placehold.it/300x200" 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 = "span4" > 
    <div class = "sličica" > 
      <img src = "https://placehold.it/300x200" alt = "" >  
      <h3> Oznaka sličice </h3>
      <p> Sličica... </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 spajati različite veličine.

Podrazumevano upozorenje

Umotajte bilo koji tekst i opciono dugme za odbacivanje .alertza osnovnu poruku upozorenja.

Upozorenje! Najbolje da se proveri, ne izgledaš baš dobro.

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

Odbaci dugmad

Mobile Safari i Mobile Opera pretraživači, pored data-dismiss="alert"atributa, zahtijevaju i href="#"za odbacivanje upozorenja kada se koristi <a>oznaka.

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

Odbaci upozorenja putem JavaScripta

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

Opcije

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

Upozorenje!

Najbolje je da se sami provjerite, ne izgledate dobro. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

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

Kontekstualne alternative

Dodajte opcione klase da promijenite konotaciju upozorenja.

Greška ili opasnost

Oh snap! Promijenite nekoliko stvari i pokušajte ponovo poslati.

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

Uspjeh

Dobro urađeno! Uspješno ste pročitali ovu važnu poruku upozorenja.

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

Informacije

Glavu gore! Ovo upozorenje treba vašu pažnju, ali nije previše važno.

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

Primjeri i oznake

Basic

Zadana traka napretka s vertikalnim 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 .activeu .progress-stripedda animirate pruge s desna na lijevo. Nije dostupno u svim verzijama IE.

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

Stacked

Stavite više šipki u iste .progressda ih složite.

<div class = "progress" > 
  <div class = "bar bar-success" style = " širina : 35 %; " ></div>   
  <div class = "bar bar-warning" style = " širina : 20 %; " ></div>   
  <div class = "bar bar-danger" style = " širina : 10 %; " ></div>   
</div>

Opcije

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 = "napredak napredak-opasnost napredak-prugasti" > 
  <div class = "bar" style = " width : 80 % " ></div>   
</div>

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

Verzije starije od Internet Explorer 10 i Opera 12 ne podržavaju animacije.

Stilovi apstraktnih objekata za pravljenje različitih tipova komponenti (kao što su komentari na blogu, tvitovi, itd.) koje sadrže sliku poravnatu lijevo ili desno uz tekstualni sadržaj.

Zadani primjer

Podrazumevani mediji dozvoljavaju da se medijski objekat (slike, video, audio) lebdi levo ili desno od bloka sadržaja.

Naslov medija

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.

Naslov medija

<div class = "mediji" > 
  <a class = "pull-left" href = "#" >  
    <img class = "media-object" src = "https://placehold.it/64x64" >  
  </a>
  <div class = "medijsko tijelo" > 
    <h4 class = "media-heading" > Naslov medija </h4> 
    ...
 
    <!-- Ugniježđeni medijski objekat -->
    <div class = "mediji" > 
      ...
    </div>
  </div>
</div>

Lista medija

Uz malo dodatne oznake, možete koristiti medije unutar liste (korisno za teme komentara ili liste članaka).

Naslov medija

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.

Ugniježđeni 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.

Ugniježđeni 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.

Ugniježđeni 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.
Naslov medija
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.

<ul class = "media-list" > 
  <li class = "mediji" > 
    <a class = "pull-left" href = "#" >  
      <img class = "media-object" src = "https://placehold.it/64x64" >  
    </a>
    <div class = "medijsko tijelo" > 
      <h4 class = "media-heading" > Naslov medija </h4> 
      ...
 
      <!-- Ugniježđeni medijski objekat -->
      <div class = "mediji" > 
        ...
     </div>
    </div>
  </li>
</ul>

Wells

Koristite bunar kao jednostavan efekat na elementu da mu date umetnuti efekat.

Vidi, ja sam u bunaru!

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

Izborna nastava

Kontrolirajte padding i zaobljene uglove s dvije opcione klase modifikatora.

Vidi, ja sam u bunaru!

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

Vidi, ja sam u bunaru!

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

Zatvori ikona

Koristite generičku ikonu za zatvaranje za odbacivanje sadržaja kao što su modali i upozorenja.

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

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

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

Časovi za pomoćnike

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

.povucite-lijevo

Pomaknite element lijevo

klasa = "povuci-lijevo"

. povuci - lijevo {
  float : lijevo ;
}

.povuci-desno

Pomaknite element udesno

class = "povuci-desno"

. povuci - desno {
  float : desno ;
}

.muted

Promijenite boju elementa u#999

class = "utišano"

. prigušen {
  boja : #999; 
}

.clearfix

Obrišite floatna bilo kojem elementu

class = "jasan popravak"

. ispraviti {
  * zum : 1 ; 
  &: prije ,
  &: nakon {
    displej : sto ;
    sadržaj : "" ; 
  }
  &: nakon {
    jasno : oba ;
  }
}

Padajući meniji

Primjer

Markup

Opcije

Poravnavanje menija

Podmeniji na padajućim menijima

Grupe dugmadi

Primjeri

Grupa sa jednim dugmetom

Više grupa dugmadi

Vertikalne grupe dugmadi

Potvrdni okvir i radio okusi

Padajući meni u grupama dugmadi

Dugmad padajući meniji

Pregled i primjeri

Radi sa svim veličinama dugmadi

Zahtijeva JavaScript

Padajući meni dugmeta za razdvajanje

Veličine

Dropup meniji

Nav: kartice, tablete i liste

Lagane zadane postavke Ista oznaka, različite klase

Osnovne kartice

Osnovne tablete

Disabled state

Poravnanje komponenti

Stackable

Naslagane kartice

Naslagane tablete

Padajući meni

Kartice sa padajućim menijima

Tablete sa padajućim menijima

Nav liste

Primjer navigacijske liste

Horizontalni razdjelnici

Tabbable nav

Tabable primjer

Fade in tabs

Zahtijeva jQuery dodatak

Tabulator u bilo kojem smjeru

Kartice na dnu

Kartice na lijevoj strani

Kartice sa desne strane

Navbar

Osnovna navigacijska traka

Navbar komponente

Brand

Nav linkovi

Forms

Obrazac za pretragu

Poravnanje komponenti

Korištenje padajućih menija

Tekst

Opcione varijacije prikaza

Fiksirano na vrh

Fiksirano na dno

Statička gornja navigacijska traka

Responsive Navbar

Obrnuta varijacija

Mrvice hljeba

Primjeri

Paginacija Dvije opcije za listanje sadržaja

Standardna paginacija

Opcije

Onemogućeno i aktivno stanje

Veličine

Poravnanje

Pejdžer

Zadani primjer

Poravnane veze

Opciono onemogućeno stanje

Oznake i značke

Etikete

Značke

Tipografske komponente

Jedinica heroja

Zdravo svijete!

Zaglavlje stranice

Primjer zaglavlja stranice Podtekst za zaglavlje

Sličice Mreže slika, video zapisa, teksta i još mnogo toga