Klompok tombol

Gunakake grup tombol kanggo nggabungake pirang-pirang tombol dadi siji komponen gabungan. Mbangun karo seri <a>utawa <button>unsur.

laku paling apik

Disaranake pedoman ing ngisor iki kanggo nggunakake grup tombol lan toolbar:

• Tansah nggunakake unsur padha ing grup tombol siji, <a>utawa <button>.
• Aja nyampur tombol warna sing beda ing klompok tombol sing padha.
• Gunakake lambang saliyane utawa tinimbang teks, nanging manawa kalebu teks alt lan judhul yen cocog.

Kelompok Tombol sing gegandhengan karo dropdown (ndeleng ngisor) kudu diarani kanthi kapisah lan tansah kalebu caret gulung mudhun kanggo nuduhake prilaku sing dituju.

Conto standar

Mangkene carane HTML nggoleki grup tombol standar sing dibangun nganggo tombol tag jangkar:

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

Tuladha toolbar

Gabungke set <div class="btn-group">dadi a <div class="btn-toolbar">kanggo komponen sing luwih kompleks.

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

kothak centhang lan roso radio

Klompok tombol uga bisa dadi radio, ing ngendi mung siji tombol aktif, utawa kothak centhang, ing ngendi wae tombol bisa aktif. Deleng docs Javascript kanggo iku.

Entuk javascript »

Dropdowns ing kelompok tombol

Kepala munggah! Tombol karo dropdowns kudu individu kebungkus ing dhewe .btn-grouping .btn-toolbarkanggo Rendering tepat.

Ringkesan lan conto

Gunakake tombol apa wae kanggo micu menu gulung mudhun kanthi nyelehake ing a .btn-grouplan menehi markup menu sing tepat.

Tuladha markup

Kaya klompok tombol, markup kita nggunakake markup tombol biasa, nanging kanthi sawetara tambahan kanggo nyaring gaya lan ndhukung plugin jQuery gulung mudhun Bootstrap.

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    Tumindak
    <span class = "caret" ></span> 
  </a>
  <ul class = "menu dropdown" > 
    <!-- pranala menu gulung mudhun -->
  </ul>
</div>

Dianggo karo kabeh ukuran tombol

Tombol dropdown bisa digunakake ing ukuran apa wae. ukuran tombol sampeyan nganti .btn-large, .btn-small, utawa .btn-mini.

Mbutuhake javascript

Tombol dropdown mbutuhake plugin gulung mudhun Bootstrap supaya bisa digunakake.

Ing sawetara kasus-kaya seluler-menu gulung mudhun bakal ngluwihi viewport. Sampeyan kudu ngrampungake alignment kanthi manual utawa nganggo javascript khusus.

Ringkesan lan conto

Mbangun gaya klompok tombol lan markup, kita bisa kanthi gampang nggawe tombol pamisah. Tombol pamisah nampilake tumindak standar ing sisih kiwa lan pilihan gulung mudhun ing sisih tengen kanthi pranala kontekstual.

Ukuran

Gunakake kelas tombol ekstra .btn-mini, .btn-small, utawa .btn-largekanggo ukuran.

<div class = "btn-group" > 
  ...
  <ul class = "menu tarik-turun-tengen" > 
    <!-- pranala menu gulung mudhun -->
  </ul>
</div>

Tuladha markup

We nggedhekake ing dropdowns tombol normal kanggo nyedhiyani tumindak tombol kapindho sing makaryakke minangka pemicu gulung mudhun kapisah.

<div class = "btn-group" > 
  <button class = "btn" > Action </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </tombol>
  <ul class = "menu dropdown" > 
    <!-- pranala menu gulung mudhun -->
  </ul>
</div>

Menu drop-up

Menu gulung mudhun uga bisa diowahi saka ngisor munggah kanthi nambahake kelas siji menyang wong tuwa langsung .dropdown-menu. Iku bakal loncat karo muter awak arah .caretlan reposition menu dhewe kanggo pindhah saka ngisor munggah tinimbang ndhuwur mudhun.

<div class = "btn-group dropup" > 
  <button class = "btn" > Dropup </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </tombol>
  <ul class = "menu dropdown" > 
    <!-- pranala menu gulung mudhun -->
  </ul>
</div>

Kelas dhasar sing kuat

Kabeh komponen nav kene-tab, pil, lan dhaptar- nuduhake markup basa padha lan gaya liwat .navkelas.

Nalika nggunakake

Tab lan pil apik kanggo bagean isi utawa navigasi antarane kaca isi sing gegandhengan.

Alignment komponen

Kanggo nyelarasake pranala nav, nggunakake .pull-leftutawa .pull-rightkelas sarana. Loro kelas bakal nambah float CSS ing arah sing ditemtokake.

Tab dhasar

Njupuk <ul>pranala biasa lan tambahake .nav-tabs:

• Ngarep
• Profile
• Pesen

<ul class = "nav-tabs" > 
  <li class = "aktif" > 
    <a href = "#" > Ngarep </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Pil dhasar

Njupuk HTML sing padha, nanging gunakake .nav-pills:

• Ngarep
• Profile
• Pesen

<ul class = "nav nav-pil" > 
  <li class = "aktif" > 
    <a href = "#" > Ngarep </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Carane tumpukan 'em

Minangka tab lan pil horisontal minangka standar, mung nambah kelas kapindho, .nav-stacked, Kanggo nggawe katon vertikal dibandhingke.

Tab sing ditumpuk

• Ngarep
• Profile
• Pesen

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

Pil sing ditumpuk

• Ngarep
• Profile
• Pesen

<ul class = "nav nav-pil nav-ditumpuk" > 
  ...
</ul>

menu sugih digawe gampang

Menu dropdown ing tab lan pil Bootstrap gampang banget lan mung mbutuhake HTML ekstra lan plugin jQuery sing entheng.

Pindhah menyang kaca Javascript kanggo maca dokumen babagan miwiti dropdown ing Bootstrap.

Tab karo dropdowns

• Ngarep
• Pitulung
• Dropdown
  • Action
  • Another action
  • Something else here
  • Separated link

<ul class = "nav-tabs" > 
  <li class = "dropdown" > 
    <a class = ""dropdown-toggle" 
       data-toggle = "gulung mudhun"
       href = "#" >
        Dropdown
        <b class = "caret" ></b> 
      </a>
    <ul class = "menu dropdown" > 
      <!-- pranala -->
    </ul>
  </li>
</ul>

Pil karo dropdowns

• Ngarep
• Pitulung
• Dropdown
  • Action
  • Another action
  • Something else here
  • Separated link

<ul class = "nav nav-pil" > 
  <li class = "dropdown" > 
    <a class = ""dropdown-toggle" 
       data-toggle = "gulung mudhun"
       href = "#" >
        Dropdown
        <b class = "caret" ></b> 
      </a>
    <ul class = "menu dropdown" > 
      <!-- pranala -->
    </ul>
  </li>
</ul>

Pandhu arah gaya aplikasi

Dhaptar Nav nyedhiyakake cara sing gampang lan gampang kanggo mbangun klompok pranala nav kanthi header opsional. Paling apik digunakake ing sidebars kaya Finder ing OS X.

Struktural, lagi dibangun ing gaya nav inti padha tab lan pil, supaya panggunaan lan pangaturan dhewe langsung.

Kanthi lambang

Dhaptar Nav uga gampang kanggo nglengkapi lambang. Tambah tag sing tepat <i>karo kelas lan sampeyan wis disetel.

Pembagi horisontal

Tambah pembagi horisontal kanthi nggawe item dhaptar kosong karo kelas .divider, kaya mangkene:

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

Conto dhaftar nav

Njupuk dhaptar pranala lan nambah class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > 
    Header dhaptar
  </li>
  <li class = "aktif" > 
    <a href = "#" > Ngarep </a> 
  </li>
  <li>
    <a href = "#" > Pustaka </a> 
  </li>
  ...
</ul>

Tuladha karo lambang

Conto sing padha, nanging kanthi <i>tag kanggo lambang.

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

Apa sing kalebu

Uripake tab kanthi plugin sing gampang kanggo ngalih ing antarane konten liwat tab. Bootstrap nggabungake tab sing bisa tab ing papat gaya: ndhuwur (standar), tengen, ngisor, lan kiwa.

Ngganti ing antarane iku gampang lan mung mbutuhake ganti markup sing sithik.

Fade ing tab

Kanggo nggawe tab luntur, tambahake .fadesaben .tab-pane.

Mbutuhake plugin jQuery

Kabeh tab tabable didhukung dening plugin jQuery sing entheng. Waca liyane babagan carane ngowahi tab tabable ing kaca docs javascript .

Entuk javascript →

Tuladha tabable

Kanggo nggawe tab bisa tab, nggawe .tab-paneID unik kanggo saben tab lan bungkus ing .tab-content.

Kanggo tab sing didadekake tengen utawa ngiwa, bungkus .nav-tabslan .tab-contenting .tabbable.

Markup langsung

Nggunakake tab tabable mbutuhake div bungkus, sakumpulan tab, lan sakumpulan panel isi tabable.

<div class = "tabable" > <!-- Mung dibutuhake kanggo tab kiwa/tengen -->  
  <ul class = "nav-tabs" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab" > Bagean 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > Bagean 2 </a></li>  
  </ul>
  <div class = "konten tab" > 
    <div class = "tab-pane active" id = "tab1" >  
      <p> Aku ing Bagian 1. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Sugeng rawuh, kula wonten ing Seksi 2. </p>
    </div>
  </div>
</div>

Tab ing sisih ngisor

Flip urutan HTML lan nambah kelas kanggo nyelehake tab ing ngisor.

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

Tab ing sisih kiwa

Ganti kelas kanggo nyelehake tab ing sisih kiwa.

<div class = "tabable tabs-left" > 
  <ul class = "nav-tabs" > 
    ...
  </ul>
  <div class = "konten tab" > 
    ...
  </div>
</div>

Tab ing sisih tengen

Ganti kelas kanggo nyelehake tab ing sisih tengen.

<div class = "tabable tabs-right" > 
  <ul class = "nav-tabs" >
    ...
  </ul>
  <div class = "konten tab" >
    ...
  </div>
</div>

Navbar scaffolding

Navbar mung mbutuhake sawetara div kanggo nggawe struktur kanthi apik kanggo tampilan statis utawa tetep.

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

Navbar tetep

Ndandani navbar ing ndhuwur utawa ngisor viewport karo kelas tambahan ing div paling njaba .navbar,.

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

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

Nalika masang navbar, elinga kanggo akun kanggo wilayah didhelikake ing ngisor. Tambah 40px utawa luwih saka padding menyang <body>. Dadi manawa kanggo nambah iki sawise inti Bootstrap CSS lan sadurunge CSS responsif opsional.

Jeneng merek

Link prasaja kanggo nuduhake jeneng merek utawa proyek sampeyan mung mbutuhake tag jangkar.

<a class = "merek" href = "#" >  
  Jeneng proyek
</a>

Formulir ing navbar

Kanggo gaya lan posisi formulir kanthi bener ing navbar, tambahake kelas sing cocog kaya ing ngisor iki. Kanggo wangun standar, kalebu .navbar-formlan salah siji .pull-leftutawa .pull-rightkanggo nyelarasake kanthi bener.

<form class = "navbar-form pull-left" > 
  < tipe input = "teks" class = "span2" >  
</form>

Kanggo formulir telusuran sing luwih disesuaikan, tambahake .navbar-searchmenyang formlan .search-querymenyang input kanggo gaya khusus ing navbar.

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

Variasi responsif opsional

Gumantung saka jumlah konten ing topbar sampeyan, sampeyan bisa uga pengin ngetrapake opsi responsif. Kanggo nindakake iki, bungkus isi nav ing div sing ngemot, .nav-collapse.collapse, lan tambahake tombol toggle navbar, .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "wadhah" > 
 
      <!-- .btn-navbar digunakake minangka pilihan kanggo isi navbar sing ambruk -->
      <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>
 
      <!-- Pesthekake ninggalake merek kasebut yen sampeyan pengin ditampilake -->
      <a class = "brand" href = "#" > Jeneng proyek </a>  
 
      <!-- Kabeh sing pengin didhelikake ing 940px utawa kurang, selehake ing kene -->
      <div class = "nav-collapse" > 
        <!-- .nav, .navbar-search, .navbar-form, lsp -->
      </div>
 
    </div>
  </div>
</div>

pranala Nav

item Nav prasaja kanggo nambah liwat dhaftar unordered.

<ul class = "nav" > 
  <li class = "aktif" > 
    <a href = "#" > Ngarep </a> 
  </li>
  <li><a href = "#" > Link </a></li> 
  <li><a href = "#" > Link </a></li> 
</ul>

Sampeyan bisa kanthi gampang nambah dividers kanggo nav pranala karo item dhaftar kosong lan kelas prasaja. Cukup tambahake iki ing antarane tautan:

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

Alignment komponen

Kanggo nyelarasake nav, formulir telusuran, utawa teks, gunakake kelas .pull-leftutawa .pull-rightutilitas. Loro-lorone kelas bakal nambah float CSS ing arah sing ditemtokake.

Nambahake menu gulung mudhun

Nambahake dropdowns lan dropups menyang nav super prasaja, nanging mbutuhake nggunakake plugin javascript kita .

<ul class = "nav" > 
  <li class = "dropdown" > 
    <a href = "#" 
          kelas = "dropdown-toggle"
          data-toggle = "gulung mudhun" >
          Akun
          <b class = "caret" ></b> 
    </a>
    <ul class = "menu dropdown" > 
      ...
    </ul>
  </li>
</ul>

Entuk javascript →

Teks ing navbar

Lebokake strings teks ing <.navbar-text>, biasane ing <p>tag kanggo anjog tepat lan werna.

Apa nggunakake wong

Navigasi Breadcrumb digunakake minangka cara kanggo nuduhake pangguna ing ngendi dheweke ana ing aplikasi utawa situs, nanging ora kanggo navigasi utama. Tansah panggunaan sing jarang lan ringkes supaya paling efektif.

Tuladha

Conto siji sing ditampilake minangka bisa ditampilake ing pirang-pirang kaca.

• Ngarep

• ngarep /
• Pustaka

• ngarep /
• Pustaka /
• data

Markup

HTML minangka dhaptar unordered standar sampeyan kanthi pranala.

<ul class = "breadcrumb" > 
  <li>
    <a href = "#" > Ngarep </a> <span class = "divider" > / </span>   
  </li>
  <li>
    <a href = "#" > Pustaka </a> <span class = "divider" > / </span>   
  </li>
  <li class = "aktif" > Data </li> 
</ul>

Nalika nggunakake

pagination ultra simplistic lan minimal gaya inspirasi dening Rdio, apik kanggo app lan asil panelusuran. Blok gedhe angel dilewati, gampang diukur, lan nyedhiyakake area klik gedhe.

Pranala kaca stateful

Tautan bisa disesuaikan lan bisa digunakake ing sawetara kahanan kanthi kelas sing tepat. .disabledkanggo pranala sing ora bisa diklik lan .activekanggo kaca saiki.

Alignment fleksibel

Tambah salah siji saka rong kelas opsional kanggo ngganti alignment link pagination: .pagination-centeredlan .pagination-right.

Tuladha

Komponen pagination standar fleksibel lan bisa digunakake ing sawetara variasi.

Markup

Dibungkus ing <div>, pagination mung a <ul>.

<div class = "pagination" > 
  <ul>
    <li><a href = "#" > Prev </a></li> 
    <li class = "aktif" > 
      <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 = "#" > Sabanjure </a></li> 
  </ul>
</div>

Babagan pager

Komponen pager minangka sakumpulan pranala kanggo implementasi pagination sing prasaja kanthi markup cahya lan gaya sing luwih entheng. Iku apik kanggo situs prasaja kaya blog utawa majalah.

Status dipatèni opsional

Link pager uga nggunakake .disabledkelas umum saka pagination.

Conto standar

Kanthi gawan, pager pusat pranala.

• Sadurunge
• Sabanjure

<ul class = "pager" > 
  <li>
    <a href = "#" > Sadurunge </a> 
  </li>
  <li>
    <a href = "#" > Sabanjure </a> 
  </li>
</ul>

pranala selaras

Utawa, sampeyan bisa nyelarasake saben pranala menyang sisih:

• ← lawas
• Anyar →

<ul class = "pager" > 
  <li class = "sadurunge" > 
    <a href = "#" > ← Luwih tuwa </a> 
  </li>
  <li class = "sabanjure" > 
    <a href = "#" > Anyar → </a> 
  </li>
</ul>

Babagan

Lencana minangka komponen cilik lan prasaja kanggo nampilake indikator utawa sawetara jinis. Biasane ditemokake ing klien email kaya Mail.app utawa ing aplikasi seluler kanggo kabar push.

Kelas kasedhiya

Bootstrap nyedhiyakake komponen sing entheng lan fleksibel sing disebut unit pahlawan kanggo nampilake konten ing situs sampeyan. Kerjane apik ing situs marketing lan konten sing abot.

Markup

Bungkus konten sampeyan divkaya mangkene:

<div class = "pahlawan-unit" > 
  <h1> Judul </h1>
  <p> Tagline </p>
  <p>
    <a class = "btn btn-utama btn-gedhe" > 
      Sinau luwih lengkap
    </a>
  </p>
</div>

Cangkang prasaja h1kanggo nyisihake lan ngethok bagean konten ing kaca kanthi tepat. Bisa nggunakake h1standar small, unsur uga komponen liyane (kanthi gaya tambahan).

<div class = "page-header" > 
  <h1> Tuladha header kaca </h1>
</div>

Gambar cilik standar

Kanthi gawan, gambar cilik Bootstrap dirancang kanggo nampilake gambar sing disambung kanthi markup sing dibutuhake minimal.

Highly customizable

Kanthi markup ekstra, sampeyan bisa nambah konten HTML kaya judhul, paragraf, utawa tombol menyang gambar cilik.

• 

  Label gambar cilik

  Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida lan eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

  Tumindak Tumindak

• 

  Label gambar cilik

  Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida lan eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

  Tumindak Tumindak

Apa nggunakake gambar cilik

Gambar cilik (sadurunge .media-gridnganti v1.4) apik kanggo kothak foto utawa video, asil panelusuran gambar, produk ritel, portofolio, lan liya-liyane. Bisa dadi pranala utawa isi statis.

Prasaja, markup fleksibel

Markup gambar cilik iku prasaja-a ulkaro sawetara liunsur iku kabeh sing dibutuhake. Iku uga super fleksibel, ngidini kanggo kabeh jinis isi karo mung dicokot liyane markup kanggo mbungkus isi.

Migunakake ukuran kolom kothak

Pungkasan, komponen gambar cilik nggunakake kelas sistem kothak sing ana - kaya .span2utawa .span3- kanggo ngontrol dimensi gambar cilik.

Markup

Kaya sing wis kasebut sadurunge, markup sing dibutuhake kanggo gambar cilik iku entheng lan langsung. Mangkene tampilan persiyapan standar kanggo gambar sing disambung :

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

Kanggo konten HTML khusus ing gambar cilik, markup rada owah. Kanggo ngidini konten level blok ing endi wae, kita ngganti <a>kaya mangkene <div>:

<ul class = "gambar cilik" > 
  <li class = "span3" > 
    <div class = "gambar cilik" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Label gambar cilik </h5>
      <p> Katrangan gambar cilik ing kene... </p>
    </div>
  </li>
  ...
</ul>

Conto liyane

Jelajahi kabeh pilihan sampeyan kanthi macem-macem kelas kothak sing kasedhiya kanggo sampeyan. Sampeyan uga bisa nyampur lan cocog ukuran sing beda.

Kelas dhasar sing ditulis maneh

Kanthi Bootstrap 2, kita wis nyederhanakake kelas dhasar: .alerttinimbang .alert-message. Kita uga wis nyuda markup minimal sing dibutuhake-ora <p>dibutuhake minangka standar, mung ing njaba <div>.

Pesen tandha tunggal

Kanggo komponen sing luwih awet karo kode kurang, kita wis mbusak tampilan mbedakake kanggo tandha pemblokiran, pesen sing teka karo liyane padding lan biasane luwih teks. Kelas uga wis diganti dadi .alert-block.

Dadi apik karo javascript

Bootstrap dilengkapi plugin jQuery sing apik sing ndhukung pesen tandha, supaya cepet lan gampang ngilangi.

Entuk plugin »

Tuladha tandha

Bungkus pesen lan lambang cedhak opsional ing div kanthi kelas sing prasaja.

<div class = "waspada" > 
  <button class = "close" data-dismiss = "waspada" > × </button>  
  <strong> Awas! </strong> Priksa dhewe, sampeyan ora katon apik banget.
</div>

Kepala munggah! Piranti iOS mbutuhake href="#"kanggo ngilangi tandha. Pesthekake nyakup lan atribut data kanggo lambang cedhak jangkar. Utawa, sampeyan bisa nggunakake <button>unsur kanthi atribut data, sing wis dipilih kanggo dokumen kita. Nalika nggunakake <button>, sampeyan kudu kalebutype="button" utawa formulir sampeyan bisa uga ora ngirim.

Gampang ngluwihi pesen tandha standar kanthi rong kelas opsional: .alert-blockkanggo padding lan kontrol teks liyane lan .alert-headingkanggo judhul sing cocog.

<div class = "block alert alert" > 
  <a class = "close" data-dismiss = "waspada" href = "#" > × </a>   
  <h4 class = "alert-heading" > Warning! </h4> 
  Priksa dhewe, sampeyan ora ...
</div>

Kesalahan utawa bebaya

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

Sukses

<div class = "waspada-sukses" > 
  ...
</div>

Informasi

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

dhasar

Bar kemajuan standar kanthi gradien vertikal.

<div class = "kemajuan" > 
  <div class = "bar" 
       style = " jembaré : 60 %; " ></div> 
</div>

belang

Nggunakake gradien kanggo nggawe efek belang (ora IE).

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

Animasi

Njupuk conto belang lan animate (ora IE).

<div class = "progress progress-striped 
     aktif" >
  <div class = "bar" 
       style = " jembaré : 40 %; " ></div> 
</div>

werna tambahan

Bar kemajuan nggunakake sawetara tombol lan kelas tandha sing padha kanggo gaya sing konsisten.

Bar belang

Kaya warna sing padhet, kita duwe bar kemajuan belang sing beda-beda.

kelakuane

Bar kemajuan nggunakake transisi CSS3, dadi yen sampeyan nyetel jembar kanthi dinamis liwat javascript, ukurane bakal lancar.

Yen sampeyan nggunakake .activekelas, .progress-stripedgaris kemajuan sampeyan bakal nggawe garis-garis saka kiwa nengen.

Dhukungan browser

Bar kemajuan nggunakake gradien CSS3, transisi, lan animasi kanggo entuk kabeh efek. Fitur-fitur kasebut ora didhukung ing IE7-9 utawa versi Firefox sing luwih lawas.

Opera lan IE ora ndhukung animasi ing wektu iki.

sumur

Gunakake sumur minangka efek prasaja ing unsur kanggo menehi efek inset.

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

Tutup lambang

Gunakake lambang cedhak umum kanggo ngilangi konten kaya modal lan tandha.

×

<tombol kelas = "nutup" > & kaping; </tombol> 

Piranti iOS mbutuhake href="#" kanggo acara klik yen sampeyan luwih seneng nggunakake jangkar.

<a class = "close" href = "#" > & kaping; </a>