Tuladha

Menu kontekstual sing bisa diganti kanggo nampilake dhaptar pranala. Digawe interaktif karo plugin JavaScript gulung mudhun .

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Tindakan </a></li>  
  <li><a tabindex = "-1" href = "#" > Tindakan liyane </a></li>  
  <li><a tabindex = "-1" href = "#" > Ana liyane ing kene </a></li>  
  <li class = "pembagi" ></li> 
  <li><a tabindex = "-1" href = "#" > Tautan kapisah </a></li>  
</ul>

Markup

Nggoleki mung menu gulung mudhun, kene HTML sing dibutuhake. Sampeyan kudu mbungkus pemicu gulung mudhun lan menu gulung mudhun ing .dropdown, utawa unsur liyane sing nyatakake position: relative;. Banjur mung nggawe menu.

<div class = "dropdown" > 
  <!-- Link utawa tombol kanggo ngalih gulung mudhun -->
  <ul class = "menu dropdown" peran = "menu" aria-labelledby = "dLabel" >   
    <li><a tabindex = "-1" href = "#" > Tindakan </a></li>  
    <li><a tabindex = "-1" href = "#" > Tindakan liyane </a></li>  
    <li><a tabindex = "-1" href = "#" > Ana liyane ing kene </a></li>  
    <li class = "pembagi" ></li> 
    <li><a tabindex = "-1" href = "#" > Tautan kapisah </a></li>  
  </ul>
</div>

Pilihan

Nyelarasake menu ing sisih tengen lan nambah kalebu tingkat tambahan dropdowns.

Nyelarasake menu

Tambah .pull-rightmenyang .dropdown-menusisih tengen menu gulung mudhun.

<ul class = "menu tarik-turun-tengen" peran = "menu" aria-labelledby = "dLabel" >   
  ...
</ul>

Submenu ing dropdowns

Nambah tingkat ekstra menu gulung mudhun, katon ing hover kaya OS X, karo sawetara tambahan markup prasaja. Tambah .dropdown-submenumenyang sembarang liing menu molor ana kanggo noto otomatis.

<ul class = "menu dropdown" peran = "menu" aria-labelledby = "dLabel" >   
  ...
  <li class = "dropdown-submenu" > 
    <a tabindex = "-1" href = "#" > Pilihan liyane </a>  
    <ul class = "menu dropdown" > 
      ...
    </ul>
  </li>
</ul>

Tuladha

Rong opsi dhasar, bebarengan karo rong variasi sing luwih spesifik.

Klompok tombol tunggal

Bungkus serangkaian tombol nganggo .btning .btn-group.

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

Multiple klompok tombol

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>

Kelompok tombol vertikal

Nggawe sakumpulan tombol katon vertikal ditumpuk tinimbang horisontal.

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

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.

<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: .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 keselarasan kanthi manual utawa nganggo JavaScript khusus.

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.

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

Ukuran

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

<div class = "btn-group" > 
  <button class = "btn btn-mini" > Tindakan </tombol> 
  <button class = "btn btn-mini 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>

Default entheng Markup padha, kelas beda

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

Tab dhasar

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

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

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

negara dipatèni

Kanggo komponen nav apa wae (tab, pil, utawa dhaptar), tambahake link abu .disabled- abu lan ora ana efek hover . Nanging, pranala bakal tetep bisa diklik, kajaba sampeyan mbusak hrefatribut kasebut. Utawa, sampeyan bisa ngetrapake JavaScript khusus kanggo nyegah klik kasebut.

<ul class = "nav nav-pil" > 
  ...
  <li class = "disabled" ><a href = "#" > Home </a></li>  
  ...
</ul>

Alignment komponen

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

Bisa ditumpuk

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

Tab sing ditumpuk

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

Pil sing ditumpuk

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

Dropdowns

Tambah menu gulung mudhun kanthi HTML ekstra lan plugin JavaScript gulung mudhun .

Tab karo dropdowns

<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

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

dhaptar Nav

Cara prasaja lan gampang kanggo mbangun klompok pranala nav karo header opsional. Paling apik digunakake ing sidebars kaya Finder ing OS X.

Conto dhaftar nav

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

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

CathetanKanggo nesting ing dhaftar nav, kalebu class="nav nav-list"ing sembarang nested <ul>.

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>

Tabable nav

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.

Tuladha tabable

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

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

Fade ing tab

Kanggo nggawe tab ilang, tambahake .fademenyang saben .tab-pane.

Mbutuhake plugin jQuery

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

Tabbable ing sembarang arah

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 dhasar

Kanggo miwiti, navbar statis (ora tetep ing ndhuwur) lan kalebu dhukungan kanggo jeneng proyek lan pandhu arah dhasar. Selehake siji ing ngendi wae ing .container, sing nyetel jembar situs lan isi sampeyan.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <a class = "brand" href = "#" > Judhul </a>  
    <ul class = "nav" > 
      <li class = "aktif" ><a href = "#" > Ngarep </a></li>  
      <li><a href = "#" > Link </a></li> 
      <li><a href = "#" > Link </a></li> 
    </ul>
  </div>
</div>

Komponen Navbar

Merk

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

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

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>

Formulir

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" >  
  <tombol type = "submit" class = "btn" > Kirim </button>  
</form>

Formulir telusuran

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>

Alignment komponen

Selarasake pranala nav, formulir telusuran, utawa teks, gunakake kelas .pull-leftutawa .pull-rightsarana. Loro-lorone kelas bakal nambah float CSS ing arah sing ditemtokake.

Nggunakake dropdowns

Tambah dropdowns lan dropups menyang nav karo dicokot saka markup lan plugin JavaScript dropdowns .

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

Dolan maring dokumentasi dropdown JavaScript kanggo markup lan informasi liyane babagan nelpon dropdown.

Teks

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

Variasi tampilan opsional

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

Tetep ing ndhuwur

Tambah .navbar-fixed-toplan elinga akun kanggo area sing didhelikake ing ngisor kanthi nambahake paling ora 40px paddingmenyang <body>. Dadi manawa kanggo nambah iki sawise inti Bootstrap CSS lan sadurunge CSS responsif opsional.

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

Ndandani menyang ngisor

Tambah .navbar-fixed-bottomwae.

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

Navbar ndhuwur statis

Nggawe navbar jembar lengkap sing nggulung adoh karo kaca kanthi nambahake .navbar-static-top. Ora .navbar-fixed-topkaya kelas, sampeyan ora perlu ngganti padding ing body.

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

Navbar responsif

Kanggo ngleksanakake navbar responsif ambruk, Lebokake isi navbar ing div ngemot, .nav-collapse.collapse, lan nambah tombol pilihan 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 collapse" > 
        <!-- .nav, .navbar-search, .navbar-form, lsp -->
      </div>
 
    </div>
  </div>
</div>

Variasi terbalik

Owahi tampilan navbar kanthi nambahake .navbar-inverse.

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

Tuladha

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

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

pagination standar

pagination prasaja sing diilhami dening Rdio, apik kanggo aplikasi lan asil panelusuran. Blok gedhe angel dilewati, gampang diukur, lan nyedhiyakake area klik gedhe.

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

Pilihan

Negara sing dipateni lan aktif

Link bisa disesuaikan kanggo macem-macem kahanan. Gunakake .disabledkanggo pranala sing ora bisa diklik lan .activekanggo nuduhake kaca sing saiki.

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

Sampeyan bisa ngganti jangkar sing aktif utawa ora aktif kanthi jarak kanggo mbusak fungsi klik nalika nahan gaya sing dituju.

<div class = "pagination" > 
  <ul>
    <li class = "disabled" ><span> Prev </span></li> 
    <li class = "aktif" ><span> 1 </span></li> 
    ...
  </ul>
</div>

Ukuran

Pengin pagination luwih gedhe utawa luwih cilik? Tambah .pagination-large, .pagination-small, utawa .pagination-minikanggo ukuran tambahan.

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

Alignment

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

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

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

pager

Tautan cepet sadurunge lan sabanjure kanggo implementasi pagination sing prasaja kanthi markup lan gaya sing entheng. Iku apik kanggo situs prasaja kaya blog utawa majalah.

Conto standar

Kanthi gawan, pager pusat pranala.

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

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

Status dipatèni opsional

Link pager uga nggunakake .disabledkelas sarana umum saka pagination.

<ul class = "pager" > 
  <li class = "sadurunge dipatèni" > 
    <a href = "#" > ← Luwih tuwa </a> 
  </li>
  ...
</ul>

Label

Lencana

Unit pahlawan

Komponen sing entheng lan fleksibel kanggo nampilake konten utama ing situs sampeyan. Kerjane apik ing situs marketing lan konten sing abot.

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

Header kaca

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> Conto header kaca <small> Subteks kanggo header </small></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.

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 = "span4" > 
    <a href = "#" class = "gambar cilik" >  
      <img src = "https://placehold.it/300x200" 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 = "span4" > 
    <div class = "gambar cilik" > 
      <img src = "https://placehold.it/300x200" alt = "" >  
      <h3> Label gambar cilik </h3>
      <p> Katrangan gambar cilik... </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.

Tandha standar

Bungkus teks apa wae lan tombol ngilangi opsional .alertkanggo pesen tandha bebaya dhasar.

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

Mbusak tombol

Browser Safari Seluler lan Opera Seluler, saliyane data-dismiss="alert"atribut kasebut, mbutuhake href="#"tandha tandha nalika nggunakake <a>tag.

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

Utawa, sampeyan bisa nggunakake <button>unsur kanthi atribut data, sing wis dipilih kanggo dokumen kita. Nalika nggunakake <button>, sampeyan kudu kalebu type="button"utawa formulir sampeyan bisa uga ora ngirim.

<tombol type = "tombol" class = "close" data-dismiss = "waspada" > × </tombol>   

Mbusak tandha liwat JavaScript

Gunakake plugin tandha jQuery kanggo ngilangi tandha kanthi cepet lan gampang.

Pilihan

Kanggo pesen sing luwih dawa, tambahake bantalan ing sisih ndhuwur lan ngisor bungkus tandha kanthi nambahake .alert-block.

<div class = "block alert alert" > 
  <tombol type = "tombol" class = "close" data-dismiss = "waspada" > × </tombol>   
  <h4> Awas! </h4>
  Priksa dhewe, sampeyan ora ...
</div>

Alternatif kontekstual

Tambah kelas opsional kanggo ngganti konotasi tandha.

Kesalahan utawa bebaya

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

Sukses

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

Informasi

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

Conto lan markup

dhasar

Bar kemajuan standar kanthi gradien vertikal.

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

belang

Migunakake gradien kanggo nggawe efek belang. Ora kasedhiya ing IE7-8.

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

Animasi

Tambah .activekanggo .progress-stripedkanggo animate loreng tengen ngiwa. Ora kasedhiya ing kabeh versi IE.

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

Ditumpuk

Selehake sawetara bar menyang padha .progresskanggo tumpukan mau.

<div class = "kemajuan" > 
  <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>

Pilihan

werna tambahan

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

<div class = "progress progress-info" > 
  <div class = "bar" style = " width : 20 % " ></div>   
</div>
<div class = "progres kemajuan-sukses" > 
  <div class = "bar" style = " width : 40 % " ></div>   
</div>
<div class = "peringatan kemajuan kemajuan" > 
  <div class = "bar" style = " width : 60 % " ></div>   
</div>
<div class = "progress progress-bebaya" > 
  <div class = "bar" style = " width : 80 % " ></div>   
</div>

Bar belang

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

<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 = "kemajuan kemajuan-bebaya kemajuan-belang" > 
  <div class = "bar" style = " width : 80 % " ></div>   
</div>

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.

Versi sadurungé saka Internet Explorer 10 lan Opera 12 ora ndhukung animasi.

Gaya obyek abstrak kanggo mbangun macem-macem jinis komponen (kayata komentar blog, Tweets, lan sapiturute) sing nampilake gambar sing didadekake kiwa utawa tengen bebarengan karo isi teks.

Conto standar

Media standar ngidini kanggo ngambang obyek media (gambar, video, audio) ing sisih kiwa utawa tengen blok konten.

Judhul media

Cras sit amet nibh libero, ing 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.

Judhul media

Cras sit amet nibh libero, ing 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.

Judhul media

Cras sit amet nibh libero, ing 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 = "tarik-kiri" href = "#" >  
    <img class = "media-object" src = "https://placehold.it/64x64" >  
  </a>
  <div class = "media-body" > 
    <h4 class = "media-heading" > Media heading </h4> 
    ...
 
    <!-- Objek media bersarang -->
    <div class = "media" > 
      ...
    </div>
  </div>
</div>

Dhaptar media

Kanthi markup ekstra, sampeyan bisa nggunakake media ing dhaptar (migunani kanggo thread komentar utawa dhaptar artikel).

<ul class = "media-list" > 
  <li class = "media" > 
    <a class = "tarik-kiri" href = "#" >  
      <img class = "media-object" src = "https://placehold.it/64x64" >  
    </a>
    <div class = "media-body" > 
      <h4 class = "media-heading" > Media heading </h4> 
      ...
 
      <!-- Objek media bersarang -->
      <div class = "media" > 
        ...
     </div>
    </div>
  </li>
</ul>

sumur

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

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

Kelas opsional

Kontrol bantalan lan sudhut bunder kanthi rong kelas modifier opsional.

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

<div class = "apik-apik" > 
  ...
</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>  

Kelas pembantu

Prasaja, kelas fokus kanggo tampilan cilik utawa njiwet prilaku.

.narik-ngiwa

Ngambang unsur kiwa

kelas = "tarik-kiri"

. tarik - kiri {
  ngambang : ngiwa ;
}

.tarik-tengen

Ngambang unsur tengen

kelas = "tarik-kanan"

. tarik kanan { _
  ngambang : tengen ;
}

.ditemokake

Ngganti werna unsur dadi#999

kelas = "bisu"

. bisu {
  werna : #999; 
}

.clearfix

Mbusak floatunsur apa wae

kelas = "clearfix"

. clearfix {
  * zoom : 1 ; 
  &: sadurunge ,
  &: sawise {
    tampilan : meja ;
    isi : "" ; 
  }
  &: sawise {
    cetha : loro ;
  }
}