Contona

Toggleable, menu kontekstual pikeun mintonkeun daptar tumbu. Dijieun interaktif sareng plugin javascript dropdown .

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Aksi </a></li>  
  <li><a tabindex = "-1" href = "#" > Peta sejen </a></li>  
  <li><a tabindex = "-1" href = "#" > Lain di dieu </a></li>  
  <li class = "divider" ></li> 
  <li><a tabindex = "-1" href = "#" > Tautan dipisahkeun </a></li>  
</ul>

Markup

Ningali ngan ukur menu dropdown, ieu mangrupikeun HTML anu diperyogikeun. Anjeun kedah mungkus pemicu dropdown sareng menu dropdown dina .dropdown, atanapi unsur sanésna anu nyatakeun position: relative;. Lajeng ngan nyieun menu nu.

<div class = "dropdown" > 
  <!-- Link atawa tombol pikeun ngalihkeun dropdown -->
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    <li><a tabindex = "-1" href = "#" > Aksi </a></li>  
    <li><a tabindex = "-1" href = "#" > Peta sejen </a></li>  
    <li><a tabindex = "-1" href = "#" > Lain di dieu </a></li>  
    <li class = "divider" ></li> 
    <li><a tabindex = "-1" href = "#" > Tautan dipisahkeun </a></li>  
  </ul>
</div>

Pilihan

Sejajarkeun ménu ka katuhu sareng tambahkeun kalebet tingkat turunan tambahan.

Ngajajar ménu

Tambahkeun .pull-rightka .dropdown-menukatuhu align menu dropdown.

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

Submenu dina dropdowns

Tambahkeun tingkat tambahan tina ménu dropdown, muncul dina hover kawas OS X, kalawan sababaraha tambahan markup basajan. Tambahkeun .dropdown-submenuka nu mana wae linu dina menu dropdown aya pikeun styling otomatis.

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
  ...
  <li class = "dropdown-submenu" > 
    <a tabindex = "-1" href = "#" > Pilihan séjén </a>  
    <ul class = "menu dropdown" > 
      ...
    </ul>
  </li>
</ul>

Contona

Dua pilihan dasar, sareng dua variasi anu langkung spésifik.

Grup tombol tunggal

Bungkus runtuyan tombol kalawan .btndi .btn-group.

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

Sababaraha grup tombol

Ngagabungkeun susunan <div class="btn-group">jadi a <div class="btn-toolbar">pikeun komponén leuwih kompleks.

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

Grup tombol nangtung

Jieun set tombol nembongan vertikal tumpuk tinimbang horizontal.

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

Kotak centang sareng rasa radio

Grup tombol ogé tiasa fungsina salaku radio, dimana ngan hiji tombol tiasa aktip, atanapi kotak centang, dimana sajumlah tombol tiasa aktip. Tingali docs Javascript pikeun éta.

Dropdowns dina grup tombol

Mastaka tegak! Tombol kalawan dropdowns kudu individual dibungkus dina sorangan .btn-groupdina hiji .btn-toolbarpikeun Rendering ditangtoskeun.

Tinjauan jeung conto

Paké tombol naon mun pemicu mangrupa menu dropdown ku nempatkeun eta dina hiji .btn-groupjeung nyadiakeun ménu markup ditangtoskeun.

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    Aksi
    <span class = "caret" ></span> 
  </a>
  <ul class = "menu dropdown" > 
    <!-- link menu dropdown -->
  </ul>
</div>

Gawéna sareng sadaya ukuran tombol

Tombol dropdown tiasa dianggo dina ukuran naon waé: .btn-large, .btn-small, atanapi .btn-mini.

Merlukeun javascript

Tombol dropdowns merlukeun plugin dropdown Bootstrap pikeun fungsina.

Dina sababaraha kasus-kawas mobile-menu dropdown bakal manjangkeun luar viewport nu. Anjeun kedah ngabéréskeun alignment sacara manual atanapi nganggo javascript khusus.

Dropdowns tombol pamisah

Ngawangun dina gaya grup tombol jeung markup, urang bisa kalayan gampang nyieun hiji tombol pamisah. Tombol pamisah nampilkeun tindakan standar di kénca sareng togél turun di beulah katuhu kalayan tautan kontekstual.

<div class = "btn-group" > 
  <button class = "btn" > Aksi </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </tombol>
  <ul class = "menu dropdown" > 
    <!-- link menu dropdown -->
  </ul>
</div>

Ukuran

Ngamangpaatkeun kelas tombol tambahan .btn-mini, .btn-small, atawa .btn-largepikeun ukuran.

<div class = "btn-group" > 
  <button class = "btn btn-mini" > Aksi </button> 
  <button class = "btn btn-mini dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </tombol>
  <ul class = "menu dropdown" > 
    <!-- link menu dropdown -->
  </ul>
</div>

Menu drop-up

ménu dropdown ogé bisa toggled ti handap ka luhur ku nambahkeun hiji kelas tunggal ka indungna saharita tina .dropdown-menu. Bakal flip arah .caretjeung reposition menu sorangan pikeun pindah ti handap ka luhur tinimbang luhur ka handap.

<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" > 
    <!-- link menu dropdown -->
  </ul>
</div>

standar lightweight markup sarua, kelas béda

Sadaya komponén nav dieu-tab, pil, jeung daptar- ngabagikeun markup basa sarua jeung gaya ngaliwatan .navkelas.

Tab dasar

Candak <ul>tautan biasa sareng tambahkeun .nav-tabs:

<ul class = "nav nav-tabs" > 
  <li class = "aktip" > 
    <a href = "#" > Imah </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Pél dasar

Candak HTML anu sami, tapi nganggo .nav-pills:

<ul class = "nav nav-pils" > 
  <li class = "aktip" > 
    <a href = "#" > Imah </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

kaayaan ditumpurkeun

Pikeun komponén nav (tab, pil, atawa daptar), tambahkeun .disabledpikeun tumbu abu tur euweuh épék hover . Tumbu bakal tetep clickable, kumaha oge, iwal JavaScript custom dilaksanakeun pikeun nyegah clicks maranéhanana.

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

alignment komponén

Pikeun align link nav, ngagunakeun .pull-leftatawa .pull-rightkelas utiliti. Kadua kelas bakal nambihan ngambang CSS dina arah anu ditangtukeun.

Bisa ditumpuk

Salaku tab jeung Pél anu horizontal sacara standar, ngan nambahan kelas kadua, .nav-stacked, Pikeun nyieun eta némbongan vertikal tumpuk.

Tab tumpuk

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

Pél tumpuk

<ul class = "nav nav-pils nav-tumpuk" > 
  ...
</ul>

Dropdowns

Tambahkeun ménu dropdown kalawan HTML tambahan saeutik jeung dropdowns javascript plugin .

Tab kalawan dropdowns

<ul class = "nav nav-tabs" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "dropdown"
       href = "#" >
        Puragkeun
        <b class = "caret" ></b> 
      </a>
    <ul class = "menu dropdown" > 
      <!-- Tumbu -->
    </ul>
  </li>
</ul>

Pél kalawan dropdowns

<ul class = "nav nav-pils" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "dropdown"
       href = "#" >
        Puragkeun
        <b class = "caret" ></b> 
      </a>
    <ul class = "menu dropdown" > 
      <!-- Tumbu -->
    </ul>
  </li>
</ul>

Daptar Nav

Hiji cara basajan tur gampang pikeun ngawangun grup nav Tumbu kalawan lulugu pilihan. Éta paling saé dianggo dina sidebar sapertos Finder dina OS X.

Daptar conto nav

Candak daptar tautan sareng tambahkeun class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > Daptar lulugu </li> 
  <li class = "aktif" ><a href = "#" > Imah </a></li>  
  <li><a href = "#" > Perpustakaan </a></li> 
  ...
</ul>

Catetan Pikeun nyarang dina daptar nav, kaasup class="nav nav-list"dina sagala nested <ul>.

Pembagi horizontal

Nambahkeun hiji divider horizontal ku nyieun hiji daptar item kosong jeung class .divider, kawas kitu:

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

Tabable nav

Hirupkeun tab anjeun sareng plugin anu saderhana pikeun ngalihkeun antara eusi liwat tab. Bootstrap ngahijikeun tab tab dina opat gaya: luhur (standar), katuhu, handap, sareng kénca.

Conto tabable

Pikeun ngajantenkeun tab tiasa ditabél, jieun hiji .tab-paneID unik pikeun unggal tab sareng bungkus kana .tab-content.

<div class = "tabable" > <!-- Ngan diperlukeun pikeun tab kénca/katuhu -->  
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab" > Bagian 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > Bagian 2 </a></li>  
  </ul>
  <div class = "eusi tab" > 
    <div class = "tab-pane active" id = "tab1" >  
      <p> Abdi dina Bagéan 1. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Assalamu'alaikum, abdi nuju di Bagian 2. </p>
    </div>
  </div>
</div>

Diudar dina tab

Pikeun nyieun tab luntur, tambahkeun .fadeka unggal .tab-pane.

Merlukeun plugin jQuery

Sadaya tab tabable didamel ku plugin jQuery kami anu ringan. Maca langkung seueur ngeunaan kumaha carana ngahirupkeun tab anu tiasa ditabuh dina halaman docs JavaScript .

Tabbable dina sagala arah

Tab dina handap

Balikkeun tatanan HTML sareng tambahkeun kelas pikeun nempatkeun tab di handap.

<div class = "tabbable tabs-handap" > 
  <div class = "eusi tab" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

Tab di kénca

Ganti kelas pikeun nempatkeun tab di kénca.

<div class = "tabbable tabs-left" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "eusi tab" > 
    ...
  </div>
</div>

Tab di katuhu

Ganti kelas pikeun nempatkeun tab di katuhu.

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

Navbar dasar

Pikeun ngamimitian, navbars statik (henteu tetep ka luhur) sareng kalebet dukungan pikeun nami proyék sareng navigasi dasar. Teundeun hiji mana dina hiji .container, nu susunan rubak situs anjeun sarta eusi.

<div class = "navbar" > 
  <div class = "navbar-batin" > 
    <a class = "brand" href = "#" > Judul </a>  
    <ul class = "nav" > 
      <li class = "aktif" ><a href = "#" > Imah </a></li>  
      <li><a href = "#" > Tautan </a></li> 
      <li><a href = "#" > Tautan </a></li> 
    </ul>
  </div>
</div>

komponén Navbar

merek

Tautan saderhana pikeun nunjukkeun merek atanapi nami proyék anjeun ngan ukur peryogi tag jangkar.

<a class = "brand" href = "#" > Ngaran proyék </a>  

Tumbu Nav

item Nav basajan pikeun nambahkeun via daptar unordered.

<ul class = "nav" > 
  <li class = "aktip" > 
    <a href = "#" > Imah </a> 
  </li>
  <li><a href = "#" > Tautan </a></li> 
  <li><a href = "#" > Tautan </a></li> 
</ul>

Anjeun tiasa sacara gampil nambahkeun dividers kana nav Tumbu anjeun kalawan daptar item kosong sarta kelas basajan. Ngan tambahkeun ieu antara tautan:

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

Bentuk

Pikeun leres gaya sareng posisi formulir dina navbar nu, tambahkeun kelas luyu sakumaha ditémbongkeun di handap ieu. Pikeun formulir standar, lebetkeun .navbar-formsareng boh .pull-leftatanapi .pull-rightleres-leres align éta.

<form class = "navbar-form pull-left" > 
  <input type = "text" class = "span2" >  
  <button type = "kintunkeun" class = "btn" > Kirim </tombol>  
</form>

Formulir pilarian

Pikeun formulir pilarian leuwih ngaropéa, tambahkeun .navbar-searchka formjeung .search-queryka input pikeun gaya husus dina navbar nu.

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

alignment komponén

Align nav Tumbu, formulir pilarian, atawa téks, ngagunakeun .pull-leftatawa .pull-rightkelas utiliti. Kadua kelas bakal nambihan ngambang CSS dina arah anu ditangtukeun.

Ngagunakeun dropdowns

Tambahkeun dropdowns na dropups kana nav kalawan saeutik markup jeung dropdowns javascript plugin .

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

Didatangan dokuméntasi dropdown javascript pikeun markup langkung seueur sareng inpormasi ngeunaan nelepon dropdown.

Téks

Bungkus string téks dina unsur kalawan .navbar-text, biasana dina <p>tag pikeun kalungguhan ditangtoskeun jeung warna.

Variasi tampilan pilihan

Ngalereskeun navbar ka luhur atawa handap viewport kalawan kelas tambahan dina div pangluarna .navbar,.

Dibereskeun ka luhur

Tambihkeun .navbar-fixed-topsareng émut kana akun pikeun daérah anu disumputkeun handapeunana ku nambihan sahenteuna 40px paddingkana <body>. Pastikeun pikeun nambahkeun ieu sanggeus inti Bootstrap CSS jeung saméméh pilihan CSS responsif.

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

Dibereskeun ka handap

Tambah .navbar-fixed-bottomgantina.

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

Navbar luhur statik

Jieun navbar pinuh-lebar nu ngagulung jauh jeung kaca ku nambahkeun .navbar-static-top. Beda sareng .navbar-fixed-topkelas, anjeun henteu kedah ngarobih padding dina body.

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

Navbar responsif

Pikeun nerapkeun navbar responsif runtuh, mungkus eusi navbar anjeun dina div ngandung, .nav-collapse.collapse, sarta tambahkeun tombol toggle navbar .btn-navbar,.

<div class = "navbar" > 
  <div class = "navbar-batin" > 
    <div class = "wadah" > 
 
      <!-- .btn-navbar dipaké salaku toggle pikeun eusi navbar rubuh -->
      <a class = "btn btn-navbar" data-toggle = "runtuh" ​​data-target = ".nav-collapse" >   
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
      </a>
 
      <!-- Pastikeun ninggalkeun merek di dinya upami anjeun hoyong eta ditémbongkeun -->
      <a class = "brand" href = "#" > Ngaran proyék </a>  
 
      <!-- Sadayana anu anjeun hoyong disumputkeun dina 940px atanapi kirang, nempatkeun di dieu -->
      <div class = "nav-runtuh" > 
        <!-- .nav, .navbar-search, .navbar-form, jsb -->
      </div>
 
    </div>
  </div>
</div>

Variasi tibalik

Robah tampilan navbar ku nambahkeun .navbar-inverse.

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

Contona

Hiji conto tunggal ditémbongkeun saperti eta bisa jadi dipintonkeun sakuliah sababaraha kaca.

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

Pagination standar

Pagination basajan anu diideuan ku Rdio, saé pikeun aplikasi sareng hasil pamilarian. Blok badag hésé sono, gampang scalable, sarta nyadiakeun wewengkon klik badag.

<div class = "pagination" > 
  <ul>
    <li><a href = "#" > Saméméhna </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 = "#" > Salajengna </a></li> 
  </ul>
</div>

Pilihan

Kaayaan ditumpurkeun sareng aktip

Tumbu nu customizable pikeun kaayaan béda. Anggo .disabledpikeun tautan anu teu .activetiasa diklik sareng nunjukkeun halaman anu ayeuna.

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

Ngajajar

Tambahkeun salah sahiji dua kelas pilihan pikeun ngarobah alignment of link pagination: .pagination-centeredjeung .pagination-right.

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

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

Pager

Tumbu saméméhna jeung saterusna gancang pikeun palaksanaan pagination basajan kalawan markup lampu sarta gaya. Éta saé pikeun situs saderhana sapertos blog atanapi majalah.

Conto standar

Sacara standar, pager puseur link.

<ul class = "pager" > 
  <li><a href = "#" > Saméméhna </a></li> 
  <li><a href = "#" > Salajengna </a></li> 
</ul>

Tumbu dijajarkeun

Alternatipna, anjeun tiasa nyaluyukeun unggal tautan ka sisi:

<ul class = "pager" > 
  <li class = "saméméhna" > 
    <a href = "#"> & larr ; Leuwih kolot </a> 
  </li>
  <li class = "salajengna" > 
    <a href = "#" > Anyar & rarr; </a> 
  </li>
</ul>

kaayaan ditumpurkeun pilihan

Tumbu Pager ogé ngagunakeun .disabledkelas utiliti umum ti pagination nu.

<ul class = "pager" > 
  <li class = "saméméhna ditumpurkeun" > 
    <a href = "#"> & larr ; Leuwih kolot </a> 
  </li>
  ...
</ul>

Labels

Lencana

Unit pahlawan

A lightweight, komponén fléksibel pikeun showcase eusi konci dina situs anjeun. Gawéna ogé dina pamasaran jeung situs eusi-beurat.

<div class = "pahlawan-unit" > 
  <h1> Judul </h1>
  <p> Tagline </p>
  <p>
    <a class = "btn btn-primer btn-gede" > 
      Diajar deui
    </a>
  </p>
</div>

lulugu kaca

A cangkang basajan pikeun h1spasi kaluar luyu jeung bagean bagean eusi dina kaca. Éta tiasa ngagunakeun h1standar small, unsur ogé seueur komponén anu sanés (kalayan gaya tambahan).

<div class = "halaman-header" > 
  <h1> Conto lulugu kaca </h1>
</div>

Gambar leutik standar

Sacara standar, gambar leutik Bootstrap dirancang pikeun nunjukkeun gambar anu aya hubunganana sareng markup anu diperyogikeun minimal.

Kacida customizable

Kalayan sakedik markup tambahan, anjeun tiasa nambihan naon waé eusi HTML sapertos judul, paragraf, atanapi tombol kana gambar leutik.

Naha make gambar leutik

Gambar leutik (saméméhna .media-gridnepi ka v1.4) hadé pikeun grids poto atawa video, hasil teangan gambar, produk ritel, portopolio, jeung leuwih. Éta tiasa janten tautan atanapi eusi statik.

Basajan, markup fléksibel

Markup gambar leutik saderhana — ulkalayan sajumlah lielemen anu diperyogikeun. Éta ogé super fleksibel, ngamungkinkeun pikeun jinis eusi naon waé kalayan markup sakedik deui pikeun ngabungkus eusi anjeun.

Ngagunakeun ukuran kolom grid

Anu pamungkas, komponén gambar leutik ngagunakeun kelas sistem grid nu aya - kawas .span2atawa .span3- pikeun kadali dimensi gambar leutik.

Markup

Sakumaha anu disebatkeun sateuacana, markup anu diperyogikeun pikeun gambar leutik nyaéta hampang sareng lugas. Ieu katingal dina setelan standar pikeun gambar numbu :

<ul class = "gambar leutik" > 
  <li class = "span4" > 
    <a href = "#" class = "gambar leutik" >  
      <img src = "https://placehold.it/300x200" alt = "" >  
    </a>
  </li>
  ...
</ul>

Pikeun eusi HTML khusus dina gambar leutik, markupna rada robih. Pikeun ngawenangkeun eusi tingkat blok di mana waé, urang gentoskeun <a>sapertos <div>kieu:

<ul class = "gambar leutik" > 
  <li class = "span4" > 
    <div class = "gambar leutik" > 
      <img src = "https://placehold.it/300x200" alt = "" >  
      <h3> Label gambar leutik </h3>
      <p> Katerangan gambar leutik... </p>
    </div>
  </li>
  ...
</ul>

Leuwih conto

Jelajahi sadaya pilihan anjeun sareng rupa-rupa kelas grid anu sayogi pikeun anjeun. Anjeun oge bisa nyampur jeung cocog ukuran béda.

Waspada standar

Bungkus téks naon waé sareng tombol leupaskeun pilihan .alertpikeun pesen peringatan peringatan dasar.

<div class = "waspada" > 
  <tombol type = "tombol" class = "tutup" data-dismiss = "waspada" > × </tombol>   
  <strong> Awas! </strong> Pangsaéna cék sorangan, anjeun henteu katingali saé.
</div>

Leupaskeun tombol

Mobile Safari jeung Mobile Opera browser, sajaba data-dismiss="alert"atribut, merlukeun hiji href="#"pikeun PHK tina ngabejaan lamun maké <a>tag.

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

Alternatipna, anjeun tiasa nganggo <button>unsur sareng atribut data, anu kami pilih pikeun ngalakukeun pikeun dokumén kami. Nalika nganggo <button>, anjeun kedah ngalebetkeun type="button"atanapi bentuk anjeun moal tiasa ngalebetkeun.

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

Ngaleungitkeun panggeuing via javascript

Paké panggeuing jQuery plugin pikeun PHK gancang jeung gampang tina ngabejaan.

Pilihan

Pikeun pesen anu langkung panjang, tambahkeun padding di luhur sareng handap bungkus waspada ku nambihan .alert-block.

<div class = "block waspada" > 
  <tombol type = "tombol" class = "tutup" data-dismiss = "waspada" > × </tombol>   
  <h4> Awas! </h4>
  Pangsaéna pariksa diri anjeun, anjeun henteu ...
</div>

Alternatif kontekstual

Tambahkeun kelas pilihan pikeun ngarobah konotasi waspada.

Kasalahan atawa bahaya

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

Kasuksésan

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

Émbaran

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

Conto jeung markup

Dasar

Bar kamajuan standar sareng gradién nangtung.

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

belang

Ngagunakeun gradién pikeun nyieun éfék belang. Teu sadia dina IE7-8.

<div class = "kamajuan kamajuan-belang" > 
  <div class = "bar" style = " width : 20 %; " ></div>   
</div>

Animasi

Tambahkeun .activeka .progress-stripedpikeun ngahirupkeun belang katuhu ka kenca. Henteu sayogi dina sadaya vérsi IE.

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

Ditumpuk

Teundeun sababaraha bar kana sami .progresspikeun tumpukan aranjeunna.

<div class = "kamajuan" > 
  <div class = "bar bar-success" style = " lebar : 35 %; " ></div>   
  <div class = "bar bar-warning" style = " width : 20 %; " ></div>   
  <div class = "bar bar-bahaya" style = " lebar : 10 %; " ></div>   
</div>

Pilihan

kelir tambahan

Bar kamajuan ngagunakeun sababaraha tombol anu sami sareng kelas waspada pikeun gaya anu konsisten.

<div class = "kamajuan kamajuan-info" > 
  <div class = "bar" style = " width : 20 % " ></div>   
</div>
<div class = "kamajuan kamajuan-kasuksesan" > 
  <div class = "bar" style = " width : 40 % " ></div>   
</div>
<div class = "kamajuan kamajuan-warning" > 
  <div class = "bar" style = " width : 60 % " ></div>   
</div>
<div class = "kamajuan kamajuan-bahaya" > 
  <div class = "bar" style = " width : 80 % " ></div>   
</div>

Bar belang

Sarupa jeung warna padet, kami geus variatif bar kamajuan belang.

<div class = "kamajuan kamajuan-info kamajuan-belang" > 
  <div class = "bar" style = " width : 20 % " ></div>   
</div>
<div class = "kamajuan kamajuan-kamajuan-kamajuan-belang" > 
  <div class = "bar" style = " width : 40 % " ></div>   
</div>
<div class = "kamajuan kamajuan-warning kamajuan-belang" > 
  <div class = "bar" style = " width : 60 % " ></div>   
</div>
<div class = "kamajuan kamajuan-bahaya kamajuan-belang" > 
  <div class = "bar" style = " width : 80 % " ></div>   
</div>

Rojongan browser

Bar kamajuan nganggo gradién CSS3, transisi, sareng animasi pikeun ngahontal sagala épékna. Fitur ieu henteu dirojong dina IE7-9 atanapi versi Firefox anu langkung lami.

Versi samemehna ti Internet Explorer 10 jeung Opera 12 teu ngarojong animasi.

Sumur

Paké ogé salaku éfék basajan dina hiji unsur pikeun méré éfék inset.

<div class = "saé" > 
  ...
</div>

kelas pilihan

Kontrol padding sareng sudut buleud kalayan dua kelas modifier pilihan.

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

<div class = "alus-alit" > 
  ...
</div>

Tutup ikon

Anggo ikon tutup umum pikeun ngaleungitkeun eusi sapertos modal sareng panggeuing.

<tombol kelas = "tutup" > & kali; </tombol> 

Alat ios ngabutuhkeun href = "#" kanggo acara klik upami anjeun langkung resep nganggo jangkar.

<a class = "deukeut" href = "#"> & kali; </a>  

Kelas pembantu

Basajan, kelas fokus pikeun tampilan leutik atawa tweaks kabiasaan.

.tarik-kénca

Ngambang hiji unsur ditinggalkeun

kelas = "tarik-kénca"

. tarik - kénca {
  ngambang : ditinggalkeun ;
}

.tarik-katuhu

Ngambang hiji unsur katuhu

class = "tarik-katuhu"

. tarik - katuhu {
  ngambang : katuhu ;
}

.diteuteup

Ngarobah warna hiji unsur pikeun#999

kelas = "dipikanyaah"

. diredam {
  warna : #999; 
}

.clearfix

Hapus floatunsur naon waé

kelas = "clearfix"

. clearfix {
  * zum : 1 ; 
  &: sateuacanna ,
  &: sanggeus {
    tampilan : méja ;
    eusi : "" ; 
  }
  &: sanggeus {
    jelas : duanana ;
  }
}