Contona

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

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

Pilihan ménu ditumpurkeun

Tambahkeun .disabledka a <li>dina dropdown pikeun nganonaktipkeun link.

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Tautan biasa </a></li>  
  <li class = "ditumpurkeun" ><a tabindex = "-1" href = "#" > Tumbu ditumpurkeun </a></li>   
  <li><a tabindex = "-1" href = "#" > Tumbu sejen </a></li>  
</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" > Kénca </button> 
  <button class = "btn" > Tengah </button> 
  <button class = "btn" > Katuhu </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. Ningali dokumén 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 mun dipiceun hrefatribut. Alternatipna, Anjeun bisa nerapkeun custom JavaScript 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

Tambihkeun ménu lungsur sareng HTML tambahan sakedik sareng plugin JavaScript dropdowns .

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>

CatetanPikeun 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 dokumén 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 = "tab tabs-katuhu" > 
  <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 plugin JavaScript .

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

Nganjang ka dokuméntasi dropdowns JavaScript pikeun leuwih markup na informasi dina nelepon dropdowns.

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 ambruk, bungkus eusi navbar 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-runtuhna runtuhna" > 
        <!-- .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 = "#" > 5 </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 = "ditumpurkeun" ><a href = "#"> & laquo ; </a></li>  
    <li class = "aktif" ><a href = "#" > 1 </a></li>  
    ...
  </ul>
</div>

Anjeun optionally bisa swap kaluar anchors aktip atawa ditumpurkeun pikeun bentang jang ngaleupaskeun fungsionalitas klik bari nahan gaya dimaksudkeun.

<div class = "pagination" > 
  <ul>
    <li class = "ditumpurkeun" ><span> & laquo; </span></li> 
    <li class = "aktif" ><span> 1 </span></li> 
    ...
  </ul>
</div>

Ukuran

Fancy pagination gedé atawa leutik? Tambahkeun .pagination-large, .pagination-small, atawa .pagination-minipikeun ukuran tambahan.

<div class = "pagination pagination-ageung" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-leutik" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-mini" > 
  <ul>
    ...
  </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

Gampang collapsible

Pikeun palaksanaan gampang, labél jeung badges ngan saukur bakal ambruk (via :emptypamilih CSS urang) lamun euweuh eusi aya dina.

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 halaman <small> Subtext pikeun lulugu </small></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 data-src = "holder.js/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 data-src = "holder.js/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" > 
  < tipe tombol = "tombol" kelas = "nutup" data-ngaleungitkeun = "siaga" > & kali; </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 = "#" kelas = "tutup" data-ngaleungitkeun = "siaga"> & kali; </a>   

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.

< tipe tombol = "tombol" kelas = "nutup" data-ngaleungitkeun = "siaga" > & kali; </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" > 
  < tipe tombol = "tombol" kelas = "nutup" data-ngaleungitkeun = "siaga" > & kali; </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.

Gaya obyék abstrak pikeun ngawangun rupa-rupa komponén (sapertos koméntar blog, Tweets, jsb) anu ngagaduhan gambar kénca- atanapi katuhu-blok sareng eusi tékstual.

Conto standar

Média standar ngamungkinkeun pikeun ngambang objék média (gambar, video, audio) ka kénca atawa katuhu blok eusi.

Judul média

Cras diuk amet nibh libero, dina 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 dina faucibus.

Judul média

Cras diuk amet nibh libero, dina 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 dina faucibus.

Judul média

Cras diuk amet nibh libero, dina 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 dina faucibus.

<div class = "média" > 
  <a class = "tarik-kénca" href = "#" >  
    <img class = "média-obyek" data-src = "holder.js/64x64" >  
  </a>
  <div class = "media-body" > 
    <h4 class = "media-heading" > Media heading </h4> 
    ...
 
    <!-- Obyék média bersarang -->
    <div class = "média" > 
      ...
    </div>
  </div>
</div>

Daptar média

Kalayan sakedik markup tambahan, anjeun tiasa nganggo média di jero daptar (mangpaat pikeun utas koméntar atanapi daptar tulisan).

<ul class = "media-list" > 
  <li class = "média" > 
    <a class = "tarik-kénca" href = "#" >  
      <img class = "média-obyek" data-src = "holder.js/64x64" >  
    </a>
    <div class = "media-body" > 
      <h4 class = "media-heading" > Media heading </h4> 
      ...
 
      <!-- Obyék média bersarang -->
      <div class = "média" > 
        ...
     </div>
    </div>
  </li>
</ul>

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 acara href="#"pikeun 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 ;
  }
}