Klompok tombol

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

Sampeyan uga bisa gabungke set <div class="btn-group">menyang proyek <div class="btn-toolbar">sing luwih rumit.

Tuladha markup

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

<div class = "btn-group" > 
  <a class = "btn" href = "#" > 1 </a>  
  <a class = "btn" href = "#" > 2 </a>  
  <a class = "btn" href = "#" > 3 </a>  
</div>

Lan karo toolbar kanggo macem-macem klompok:

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

Kepala munggah

CSS kanggo kelompok tombol ana ing file kapisah, button-groups.less.

Tombol dropdowns

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>

Tombol pamisah gulung mudhun

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.

Tuladha markup

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

<div class = "btn-group" > 
  <a class = "btn" href = "#" > Tindakan </a>  
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    <span class = "caret" ></span> 
  </a>
  <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.

Apa tab lan pil

Tab lan pil ing Bootstrap dibangun ing <ul>karo HTML inti padha, dhaptar pranala. Ganti antarane tab utawa pil kanthi mung kelas.

Loro-lorone opsi apik kanggo sub-bagean isi utawa navigasi antarane kaca isi sing gegandhengan.

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 wong 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
• Profile
• Dropdown
  • Tumindak
  • Tumindak liyane
  • Liyane ing kene
  • Link kapisah

<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
• Profile
• Dropdown
  • Tumindak
  • Tumindak liyane
  • Liyane ing kene
  • Link kapisah

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

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.

Tuladha tabable

Kanggo nggawe tab tab, bungkus ing .nav-tabsdiv liyane karo class .tabbable.

Plugin jQuery khusus

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

Entuk javascript →

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>

Kanggo nggawe navbar tetep ing ndhuwur viewport, nambah .navbar-fixed-topmenyang div paling njaba .navbar,. Ing CSS, sampeyan uga kudu nyathet tumpang tindih sing disebabake kanthi nambahake padding-top: 40px;menyang <body>.

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

Jeneng merek

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

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

Formulir telusuran

Formulir telusuran nampa gaya khusus ing navbar karo .navbar-searchkelas. Kalebu .pull-leftutawa .pull-righting formkanggo nyelarasake.

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

Nambahake dropdowns

Nambah dropdowns kanggo 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 →

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 /
• Perpustakaan /
• 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" > 
    <a href = "#" > Data </a> 
  </li>
</ul>

Nalika nggunakake

pagination ultra simplistic lan minimally 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 prasaja kanthi markup cahya lan gaya sing luwih entheng. Iku apik kanggo situs prasaja kaya blog utawa majalah.

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>

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 eceran, 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-beda.

Kelas dhasar sing ditulis maneh

Kanthi Bootstrap 2, kita wis nyederhanakake kelas dasar: .alerttinimbang .alert-message. Kita uga wis nyuda markup minimal sing dibutuhake-ora <p>dibutuhake minangka standar, mung outter <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" > 
  <a class = "close" > × </a> 
  <strong> Awas! </strong> Priksa dhewe, sampeyan ora katon apik banget.
</div>

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" > × </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" 
       gaya = " jembaré : 60 %; " ></div> 
</div>

belang

Migunakake gradien kanggo nggawe efek belang.

<div  class = "progress-info
     kemajuan" >
  <div kelas = "bar"
       gaya = " jembaré : 20  %; " ></div>
</div>

Animasi

Njupuk conto belang lan animasi.

<div kelas  = "progres kemajuan-bebaya
     progress-striped aktif" >
  <div kelas = "bar"
       gaya = " jembaré : 40 %;  " ></div>
</div>

werna tambahan

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

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

Utawa, sampeyan bisa ngatur file KURANG lan muter werna lan ukuran sampeyan dhewe.

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 kasebut ora didhukung ing IE7-8 utawa versi Firefox sing luwih lawas.

Opera ora ndhukung animasi ing wektu iki.

sumur

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

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

Lencana

Gunakake badge ing unsur kanggo count durung diwaca utawa minangka indikator prasaja.

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

Tutup lambang

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

×

<a class = "cedhak" > & kaping; </a>