Grup tombol

Paké grup tombol pikeun gabung sababaraha tombol babarengan salaku hiji komponén komposit. Ngawangun aranjeunna ku runtuyan <a>atawa <button>elemen.

prakték pangalusna

Kami nyarankeun tungtunan di handap ieu pikeun ngagunakeun grup tombol sareng tulbar:

• Salawasna nganggo unsur sarua dina grup tombol tunggal, <a>atawa <button>.
• Ulah campur tombol tina kelir béda dina grup tombol sarua.
• Paké ikon salian atawa gaganti téks, tapi pastikeun kaasup alt jeung judul téks mana luyu.

Grup Button patali jeung dropdowns (tempo di handap) kudu disebut kaluar misah tur salawasna ngawengku hiji caret dropdown pikeun nunjukkeun kabiasaan dimaksudkeun.

Conto standar

Kieu kumaha HTML milarian grup tombol standar anu diwangun ku tombol tag jangkar:

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

Contona toolbar

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>

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.

Kéngingkeun javascript »

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.

Conto markup

Sarupa sareng grup tombol, markup kami nganggo markup tombol biasa, tapi kalayan sababaraha tambahan pikeun nyaring gaya sareng ngadukung plugin jQuery dropdown Bootstrap.

<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 dropdowns tiasa dianggo dina ukuran naon waé. ukuran tombol anjeun ka .btn-large, .btn-small, atawa .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.

Tinjauan jeung conto

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 katuhu sareng tautan kontekstual.

Ukuran

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

<div class = "btn-group" > 
  ...
  <ul class = "turun-menu tarik-katuhu" > 
    <!-- link menu dropdown -->
  </ul>
</div>

Conto markup

Urang dilegakeun dina dropdowns tombol normal nyadiakeun aksi tombol kadua nu ngoperasikeun salaku pemicu dropdown misah.

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

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

Kelas dasar anu kuat

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

Nalika ngagunakeun

Tab sareng pil anu saé pikeun bagian eusi atanapi nganapigasi antara halaman eusi anu aya hubunganana.

alignment komponén

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

Tab dasar

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

• Imah
• Propil
• Talatah

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

• Imah
• Propil
• Talatah

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

Kumaha tumpukan éta

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

Tab tumpuk

• Imah
• Propil
• Talatah

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

Pél tumpuk

• Imah
• Propil
• Talatah

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

menu euyeub dijieun gampang

Menu dropdown dina tab Bootstrap sareng pil super gampang sareng ngan ukur peryogi HTML tambahan sakedik sareng plugin jQuery anu hampang.

Lebetkeun ka halaman Javascript pikeun maca dokumén ngeunaan ngamimitian turunna di Bootstrap.

Tab kalawan dropdowns

• Imah
• Tulung
• Puragkeun
  • Aksi
  • Peta sejen
  • Lain di dieu
  • Tumbu dipisahkeun

<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

• Imah
• Tulung
• Puragkeun
  • Aksi
  • Peta sejen
  • Lain di dieu
  • Tumbu dipisahkeun

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

Napigasi gaya aplikasi

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

Sacara stuktur, aranjeunna diwangun dina gaya nav inti anu sami sareng tab sareng pil, janten pamakean sareng kustomisasi langsung.

Kalayan ikon

Daptar nav ogé gampang dilengkepan ku ikon. Tambihkeun <i>tag anu leres sareng kelas sareng anjeun parantos siap.

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>

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 = "aktip" > 
    <a href = "#" > Imah </a> 
  </li>
  <li>
    <a href = "#" > Perpustakaan </a> 
  </li>
  ...
</ul>

Contona jeung ikon

Conto anu sami, tapi nganggo <i>tag pikeun ikon.

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

Naon kaasup

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

Ngarobih antara aranjeunna gampang sareng ngan ukur peryogi ngarobih markup sakedik.

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 cara ngahirupkeun tab anu tiasa ditabuh dina halaman docs JavaScript .

Kéngingkeun javascript →

Conto tabable

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

Pikeun tab anu dijejeran ka katuhu atawa ka kenca, bungkus .nav-tabsna .tab-contentdi .tabbable.

markup lempeng

Ngagunakeun tab tabable merlukeun div wrapping, sakumpulan tab, sarta sakumpulan panel tabable eusi.

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

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 = "tab tabs-katuhu" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "eusi tab" > 
    ...
  </div>
</div>

Parancah Navbar

Navbar ngan merlukeun sababaraha divs pikeun struktur eta ogé pikeun tampilan statik atawa tetep.

<div class = "navbar" > 
  <div class = "navbar-batin" > 
    <div class = "wadah" > 
      ...
    </div>
  </div>
</div>

Navbar maneuh

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

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

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

Sawaktos Anjeun masang navbar, inget kana akun pikeun wewengkon disumputkeun handapeun. Tambahkeun 40px atanapi langkung padding kana <body>. Pastikeun pikeun nambahkeun ieu sanggeus inti Bootstrap CSS jeung saméméh pilihan CSS responsif.

Ngaran brand

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

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

Bentuk dina navbar

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" >  
</form>

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>

Variasi responsif pilihan

Gumantung kana jumlah eusi dina topbar Anjeun, Anjeun meureun hoyong nerapkeun pilihan responsif. Jang ngalampahkeun kitu, bungkus eusi nav anjeun dina div ngandung, .nav-collapse.collapse, tur 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>

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>

alignment komponén

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

Nambahkeun ménu dropdown

Nambahkeun dropdowns na dropups kana nav super basajan, tapi merlukeun pamakéan plugin JavaScript kami .

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

Kéngingkeun javascript →

Téks dina navbar

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

Naha make aranjeunna

Napigasi Breadcrumb dianggo salaku cara pikeun nunjukkeun ka pangguna dimana aranjeunna aya dina aplikasi atanapi situs, tapi sanés pikeun navigasi primér. Tetep pamakéan maranéhanana sparse tur succinct janten paling éféktif.

Contona

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

• Imah

• imah /
• Perpustakaan

• imah /
• Perpustakaan /
• Data

Markup

HTML mangrupa daptar unordered baku anjeun kalawan tumbu.

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

Nalika ngagunakeun

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

Tumbu kaca stateful

Tautan tiasa disaluyukeun sareng tiasa dianggo dina sababaraha kaayaan sareng kelas anu leres. .disabledpikeun tumbu anu teu tiasa diklik sareng .activekanggo halaman ayeuna.

alignment fléksibel

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

Contona

Komponén pagination standar nyaéta fléksibel sareng tiasa dianggo dina sababaraha variasi.

Markup

Dibungkus a <div>, pagination ngan a <ul>.

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

Ngeunaan pager

Komponén pager mangrupikeun sakumpulan tautan pikeun palaksanaan pagination saderhana kalayan markup cahaya sareng gaya anu langkung hampang. Éta saé pikeun situs saderhana sapertos blog atanapi majalah.

kaayaan ditumpurkeun pilihan

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

Conto standar

Sacara standar, pager puseur tumbu.

• saméméhna
• Teras

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

• ← Leuwih kolot
• Anyar →

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

Ngeunaan

Badges mangrupakeun leutik, komponén basajan pikeun mintonkeun hiji indikator atawa count tina sababaraha jenis. Éta biasana dipendakan dina klien email sapertos Mail.app atanapi dina aplikasi sélulér pikeun béwara push.

kelas sadia

Bootstrap nyadiakeun lightweight, komponén fléksibel disebut unit pahlawan pikeun showcase eusi dina situs anjeun. Gawéna ogé dina pamasaran jeung situs eusi-beurat.

Markup

Bungkus eusi anjeun divsapertos kieu:

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

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.

• 

  Label gambar leutik

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

  Aksi Aksi

• 

  Label gambar leutik

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

  Aksi Aksi

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.

Markupna

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 = "span3" > 
    <a href = "#" class = "gambar leutik" >  
      <img src = "https://placehold.it/260x180" 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 = "span3" > 
    <div class = "gambar leutik" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Label gambar leutik </h5>
      <p> Caption gambar leutik di dieu... </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.

Ditulis ulang kelas dasar

Kalayan Bootstrap 2, kami parantos nyederhanakeun kelas dasar: .alerttibatan .alert-message. Kami ogé parantos ngirangan markup minimum anu diperyogikeun — henteu <p>diperyogikeun sacara standar, ngan ukur <div>.

Pesen waspada tunggal

Pikeun komponén anu langkung awét sareng kirang kode, kami parantos ngaleungitkeun tampilan anu ngabédakeun pikeun panggeuing blok, pesen anu langkung seueur padding sareng biasana langkung seueur téks. Kelas ogé geus robah jadi .alert-block.

Janten hébat sareng javascript

Bootstrap hadir kalawan plugin jQuery hébat nu ngarojong pesen waspada, sahingga dismissing aranjeunna gancang jeung gampang.

Kéngingkeun plugin »

Conto béwara

Bungkus pesen anjeun sareng ikon tutup pilihan dina div kalayan kelas anu sederhana.

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

Mastaka tegak! alat ios merlukeun hiji href="#"pikeun PHK tina ngabejaan. Pastikeun pikeun ngalebetkeun éta sareng atribut data pikeun ikon caket jangkar. 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.

Gampang manjangkeun pesen waspada standar sareng dua kelas opsional: .alert-blockkanggo langkung seueur padding sareng kadali téks sareng .alert-headingpikeun judul anu cocog.

<div class = "block waspada" > 
  <a class = "close" data-dismiss = "waspada" href = "#" > × </a>   
  <h4 class = "waspada-heading" > Awas! </h4> 
  Pangsaéna pariksa diri anjeun, anjeun henteu ...
</div>

Kasalahan atawa bahaya

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

Kasuksésan

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

Émbaran

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

Dasar

Bar kamajuan standar sareng gradién nangtung.

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

belang

Ngagunakeun gradién pikeun nyieun éfék belang (euweuh IE).

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

Animasi

Nyokot conto belang jeung animates eta (euweuh IE).

<div class = "kamajuan kamajuan-belang 
     aktip" >
  <div class = "bar" 
       style = " lebar : 40 %; " ></div> 
</div>

kelir tambahan

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

Bar belang

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

kalakuan

Bar kamajuan ngagunakeun transisi CSS3, jadi lamun dinamis nyaluyukeun lebar via JavaScript, eta bakal lancar ngarobah ukuran.

Upami anjeun nganggo .activekelas, .progress-stripedbar kamajuan anjeun bakal ngahirupkeun belang kénca ka katuhu.

Rojongan browser

Bar kamajuan ngagunakeun gradién CSS3, transisi, jeung animasi pikeun ngahontal sakabéh épék maranéhanana. Fitur ieu henteu dirojong dina IE7-9 atanapi versi Firefox anu langkung lami.

Opera sareng IE henteu ngadukung animasi ayeuna.

Sumur

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

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