Düğme grupları

Birden çok düğmeyi tek bir bileşik bileşen olarak birleştirmek için düğme gruplarını kullanın. Bunları bir dizi <a>veya <button>öğeyle oluşturun.

En iyi uygulamalar

Düğme gruplarını ve araç çubuklarını kullanmak için aşağıdaki yönergeleri öneririz:

• Her zaman aynı öğeyi tek bir düğme grubunda kullanın <a>veya <button>.
• Aynı buton grubunda farklı renkteki butonları karıştırmayın.
• Metne ek olarak veya metin yerine simgeler kullanın, ancak uygun olduğunda alt ve başlık metnini eklediğinizden emin olun.

Açılır menülere sahip İlgili Düğme grupları (aşağıya bakın) ayrı olarak çağrılmalı ve her zaman amaçlanan davranışı belirtmek için bir açılır menü işareti içermelidir.

Varsayılan örnek

Bağlantı etiketi düğmeleriyle oluşturulmuş standart bir düğme grubunu HTML şu şekilde arar:

<div sınıfı = "btn grubu" > 
  <button class = "btn" > 1 </button> 
  <button class = "btn" > 2 </button> 
  <button class = "btn" > 3 </button> 
</div>

Araç çubuğu örneği

Daha karmaşık bileşenler için kümeleri <div class="btn-group">bir araya getirin.<div class="btn-toolbar">

<div sınıfı = "btn-araç çubuğu" > 
  <div sınıfı = "btn grubu" > 
    ...
  </div>
</div>

Onay kutusu ve radyo aromaları

Düğme grupları, yalnızca bir düğmenin etkin olabileceği radyolar veya herhangi bir sayıda düğmenin etkin olabileceği onay kutuları olarak da işlev görebilir. Bunun için Javascript belgelerini görüntüleyin .

Javascript'i edinin »

Düğme gruplarındaki açılır menüler

Önüne bak! Açılır menüleri olan düğmeler, düzgün işleme için .btn-groupkendi başlarına ayrı ayrı sarılmalıdır ..btn-toolbar

Genel bakış ve örnekler

Bir açılır menüyü a içine yerleştirerek .btn-groupve uygun menü işaretlemesini sağlayarak tetiklemek için herhangi bir düğmeyi kullanın.

Örnek işaretleme

Bir düğme grubuna benzer şekilde, işaretlememiz normal düğme işaretlemesini kullanır, ancak stili geliştirmek ve Bootstrap'in açılır jQuery eklentisini desteklemek için bir avuç ekleme ile.

<div sınıfı = "btn grubu" > 
  <a class = "btn açılır-geçiş" data-toggle = "açılır menü" href = "#" >   
    Eylem
    <span class = "şapka" ></span> 
  </a>
  <ul class = "açılır menü" > 
    <!-- açılır menü bağlantıları -->
  </ul>
</div>

Tüm düğme boyutlarıyla çalışır

Düğme açılır menüleri her boyutta çalışır. düğme boyutlarınızı .btn-large, .btn-smallveya olarak ayarlayın .btn-mini.

javascript gerektirir

Düğme açılır listelerinin çalışması için Bootstrap açılır eklentisi gerekir.

Mobil gibi bazı durumlarda açılır menüler görünümün dışına taşar. Hizalamayı manuel olarak veya özel javascript ile çözmeniz gerekir.

Genel bakış ve örnekler

Düğme grubu stillerine ve işaretlemesine dayanarak, kolayca bölünmüş bir düğme oluşturabiliriz. Bölme düğmeleri, solda standart bir eyleme ve sağda bağlamsal bağlantılarla birlikte bir açılır menüye sahiptir.

Boyutlar

Ekstra düğme sınıflarını .btn-mini, .btn-smallveya .btn-largeboyutlandırma için kullanın.

<div sınıfı = "btn grubu" > 
  ...
  <ul class = "açılır menü sağa çekme" > 
    <!-- açılır menü bağlantıları -->
  </ul>
</div>

Örnek işaretleme

Ayrı bir açılır liste tetikleyicisi olarak çalışan ikinci bir düğme eylemi sağlamak için normal düğme açılır listelerini genişletiriz.

<div sınıfı = "btn grubu" > 
  <button class = "btn" > Eylem </button> 
  <button class = "btn açılır-geçiş" data-toggle = "açılır menü" >  
    <span class = "şapka" ></span> 
  </button>
  <ul class = "açılır menü" > 
    <!-- açılır menü bağlantıları -->
  </ul>
</div>

Açılır menüler

Açılır menüler, öğesinin hemen üst öğesine tek bir sınıf eklenerek aşağıdan yukarıya doğru da değiştirilebilir .dropdown-menu. Yönünü çevirecek ve .caretyukarıdan aşağıya değil aşağıdan yukarıya hareket etmek için menünün kendisini yeniden konumlandıracaktır.

<div class = "btn-group drop-up" > 
  <button class = "btn" > Açılır Pencere </button> 
  <button class = "btn açılır-geçiş" data-toggle = "açılır menü" >  
    <span class = "şapka" ></span> 
  </button>
  <ul class = "açılır menü" > 
    <!-- açılır menü bağlantıları -->
  </ul>
</div>

Güçlü temel sınıf

Buradaki tüm gezinme bileşenleri (sekmeler, haplar ve listeler ) sınıf boyunca aynı temel işaretlemeyi ve stilleri paylaşır ..nav

Ne zaman kullanılır

Sekmeler ve haplar, içerik bölümleri veya ilgili içeriğin sayfaları arasında gezinmek için harikadır.

Bileşen hizalama

Gezinme bağlantılarını hizalamak için .pull-leftveya .pull-rightyardımcı program sınıflarını kullanın. Her iki sınıf da belirtilen yönde bir CSS şamandırası ekleyecektir.

Temel sekmeler

Düzenli <ul>bir bağlantı alın ve şunu ekleyin .nav-tabs:

• Ev
• Profil
• Mesajlar

<ul class = "nav gezinme sekmeleri" > 
  <li sınıf = "etkin" > 
    <a href = "#" > Ana Sayfa </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Temel haplar

Aynı HTML'yi alın, ancak .nav-pillsbunun yerine kullanın:

• Ev
• Profil
• Mesajlar

<ul class = "nav nav hapları" > 
  <li sınıf = "etkin" > 
    <a href = "#" > Ana Sayfa </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

nasıl istiflenir

Sekmeler ve haplar varsayılan olarak yatay olduğundan, .nav-stackeddikey olarak yığılmış görünmelerini sağlamak için ikinci bir sınıf eklemeniz yeterlidir.

Yığılmış sekmeler

• Ev
• Profil
• Mesajlar

<ul class = "nav gezinme sekmeleri gezinme yığınlı" > 
  ...
</ul>

yığılmış haplar

• Ev
• Profil
• Mesajlar

<ul class = "nav nav-pills nav-yığılmış" > 
  ...
</ul>

Zengin menüler kolaylaştı

Bootstrap sekmeleri ve haplarındaki açılır menüler son derece kolaydır ve yalnızca biraz fazladan HTML ve hafif bir jQuery eklentisi gerektirir.

Bootstrap'ta açılır menülerin başlatılmasıyla ilgili belgeleri okumak için Javascript sayfasına gidin.

Açılan sekmeler

• Ev
• Yardım
• Yıkılmak
  • Action
  • Another action
  • Something else here
  • Separated link

<ul class = "nav gezinme sekmeleri" > 
  <li class = "açılır menü" > 
    <a sınıfı = "açılır-açılır/kapalı" 
       data-toggle = "açılır menü"
       href = "#" >
        Yıkılmak
        <b sınıfı = "şapka" ></b> 
      </a>
    <ul class = "açılır menü" > 
      <!-- bağlantılar -->
    </ul>
  </li>
</ul>

Açılan haplar

• Ev
• Yardım
• Yıkılmak
  • Action
  • Another action
  • Something else here
  • Separated link

<ul class = "nav nav hapları" > 
  <li class = "açılır menü" > 
    <a sınıfı = "açılır-açılır/kapalı" 
       data-toggle = "açılır menü"
       href = "#" >
        Yıkılmak
        <b sınıfı = "şapka" ></b> 
      </a>
    <ul class = "açılır menü" > 
      <!-- bağlantılar -->
    </ul>
  </li>
</ul>

Uygulama tarzı gezinme

Gezinti listeleri, isteğe bağlı başlıklarla gezinme bağlantıları grupları oluşturmanın basit ve kolay bir yolunu sağlar. En iyi OS X'teki Finder gibi kenar çubuklarında kullanılırlar.

Yapısal olarak, sekmeler ve haplarla aynı temel gezinme stilleri üzerine inşa edilmişlerdir, bu nedenle kullanım ve özelleştirme basittir.

simgelerle

Gezinme listelerinin simgelerle donatılması da kolaydır. Uygun <i>etiketi sınıfla ekleyin ve hazırsınız.

Yatay bölücüler

class ile boş bir liste öğesi oluşturarak yatay bir ayırıcı ekleyin .divider, şöyle:

<ul class = "nav nav-list" > 
  ...
  <li sınıf = "bölücü" ></li> 
  ...
</ul>

Örnek gezinme listesi

Bağlantıların bir listesini alın ve ekleyin class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > 
    Liste başlığı
  </li>
  <li sınıf = "etkin" > 
    <a href = "#" > Ana Sayfa </a> 
  </li>
  <li>
    <a href = "#" > Kitaplık </a> 
  </li>
  ...
</ul>

Simgelerle örnek

Aynı örnek, ancak <i>simgeler için etiketler var.

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href = "#" > 
      <i class = "simge-kitap" ></i> 
      Kütüphane
    </a>
  </li>
  ...
</ul>

Neler dahil

Sekmeler aracılığıyla içerikler arasında geçiş yapmak için basit bir eklenti ile sekmelerinize hayat verin. Bootstrap, sekmeli sekmeleri dört stilde birleştirir: üst (varsayılan), sağ, alt ve sol.

Aralarında geçiş yapmak kolaydır ve yalnızca çok az işaretlemenin değiştirilmesini gerektirir.

Sekmelerde soldur

Sekmeleri soldurmak .fadeiçin her birine ekleyin .tab-pane.

jQuery eklentisi gerektirir

Tüm sekmeli sekmeler, hafif jQuery eklentimiz tarafından desteklenmektedir. Javascript dokümanlar sayfasında sekmeli sekmelerin nasıl hayata geçirileceği hakkında daha fazla bilgi edinin .

Javascript'i edinin →

Sekmeli örnek

Sekmeleri sekmeli hale getirmek .tab-paneiçin her sekme için benzersiz bir kimlik oluşturun ve bunları .tab-content.

Sağa veya sola hizalanmış sekmeler için ve'yi içeri .nav-tabssarın .tab-content..tabbable

Basit işaretleme

Sekmeli sekmeleri kullanmak, bir sarma div, bir dizi sekme ve bir dizi sekmeli içerik bölmesi gerektirir.

<div class = "tabbable" > <-- Yalnızca sol/sağ sekmeler için gereklidir --> 
  <ul class = "nav gezinme sekmeleri" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab" > Bölüm 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > 2. Bölüm </a></li>  
  </ul>
  <div class = "sekme içeriği" > 
    <div class = "sekme bölmesi etkin" id = "tab1" >  
      <p> 1. Bölümdeyim. </p>
    </div>
    <div class = "sekme bölmesi" id = "tab2" >  
      <p> Merhaba, 2. Bölümdeyim. </p>
    </div>
  </div>
</div>

Alttaki sekmeler

HTML'nin sırasını çevirin ve en alta sekmeler koymak için bir sınıf ekleyin.

<div class = "tabbable sekmeler-aşağıda" > 
  <div class = "sekme içeriği" > 
    ...
  </div>
  <ul class = "nav gezinme sekmeleri" > 
    ...
  </ul>
</div>

Soldaki sekmeler

Sekmeleri sola yerleştirmek için sınıfı değiştirin.

<div class = "sekmelenebilir sekmeler-sol" > 
  <ul class = "nav gezinme sekmeleri" > 
    ...
  </ul>
  <div class = "sekme içeriği" > 
    ...
  </div>
</div>

Sağdaki sekmeler

Sekmeleri sağa yerleştirmek için sınıfı değiştirin.

<div class = "sekmelenebilir sekmeler-sağ" > 
  <ul class = "nav gezinme sekmeleri" > 
    ...
  </ul>
  <div class = "sekme içeriği" > 
    ...
  </div>
</div>

Navbar iskele

Gezinme çubuğu, statik veya sabit görüntüleme için iyi bir şekilde yapılandırılması için yalnızca birkaç div gerektirir.

<div sınıfı = "navbar" > 
  <div sınıfı = "navbar-iç" > 
    <div sınıfı = "konteyner" > 
      ...
    </div>
  </div>
</div>

Sabit gezinme çubuğu

Gezinme çubuğunu, en dıştaki div'de ek bir sınıfla görünümün üstüne veya altına sabitleyin .navbar.

<div class = "navbar navbar-sabit-üst" > 
  ...
</div>

<div class = "navbar navbar-sabit-alt" > 
  ...
</div>

Gezinme çubuğunu yapıştırdığınızda, altındaki gizli alanı hesaba katmayı unutmayın. dosyasına 40 piksel veya daha fazla dolgu ekleyin <body>. Bunu, temel Bootstrap CSS'den sonra ve isteğe bağlı duyarlı CSS'den önce eklediğinizden emin olun.

Marka adı

Markanızı veya proje adınızı göstermek için basit bir bağlantı, yalnızca bir bağlantı etiketi gerektirir.

<a class = "marka" href = "#" >  
  Proje Adı
</a>

Gezinme çubuğundaki formlar

Gezinme çubuğu içinde bir forma uygun şekilde stil vermek ve konumlandırmak için, aşağıda gösterildiği gibi uygun sınıfları ekleyin. Varsayılan bir form için, onu uygun şekilde hizalamak için şunu ekleyin .navbar-formve ya .pull-leftda kullanın..pull-right

<form sınıfı = "navbar-formu sola çekme" > 
  <input type = "metin" sınıfı = "span2" >  
</form>

Daha özelleştirilmiş bir arama formu .navbar-searchiçin , gezinme çubuğundaki özelleştirilmiş stiller için girişe ve öğelerine formekleyin ..search-query

<form sınıfı = "navbar-arama sola çekme" > 
  <input type = "text" class = "arama sorgusu" yer tutucusu = "Ara" >   
</form>

İsteğe bağlı duyarlı varyasyon

Üst çubuğunuzdaki içerik miktarına bağlı olarak, duyarlı seçenekleri uygulamak isteyebilirsiniz. Bunu yapmak için, gezinme içeriğinizi içeren bir div içine sarın ve gezinme .nav-collapse.collapseçubuğu geçiş düğmesini ekleyin .btn-navbar.

<div sınıfı = "navbar" > 
  <div sınıfı = "navbar-iç" > 
    <div sınıfı = "konteyner" > 
 
      <!-- .btn-navbar, daraltılmış gezinme çubuğu içeriği için geçiş olarak kullanılır -->
      <a class = "btn btn-navbar" data-toggle = "collapse" data-target = ".nav-collapse" >   
        <span sınıfı = "simge çubuğu" ></span> 
        <span sınıfı = "simge çubuğu" ></span> 
        <span sınıfı = "simge çubuğu" ></span> 
      </a>
 
      <!-- Gösterilmesini istiyorsanız markayı orada bıraktığınızdan emin olun -->
      <a class = "brand" href = "#" > Proje adı </a>  
 
      <!-- 940 piksel veya daha düşük bir boyutta gizlenmesini istediğiniz her şeyi buraya yerleştirin -->
      <div sınıfı = "nav-çöküş" > 
        <!-- .nav, .navbar-arama, .navbar-form, vb -->
      </div>
 
    </div>
  </div>
</div>

Gezinme bağlantıları

Gezinme öğelerinin sırasız listeler aracılığıyla eklenmesi kolaydır.

<ul sınıfı = "nav" > 
  <li sınıf = "etkin" > 
    <a href = "#" > Ana Sayfa </a> 
  </li>
  <li><a href = "#" > Bağlantı </a></li> 
  <li><a href = "#" > Bağlantı </a></li> 
</ul>

Boş bir liste öğesi ve basit bir sınıf ile gezinme bağlantılarınıza kolayca bölücüler ekleyebilirsiniz. Sadece bunu bağlantılar arasına ekleyin:

<ul sınıfı = "nav" > 
  ...
  <li class = "bölücü-dikey" ></li> 
  ...
</ul>

Bileşen hizalama

Gezinti, arama formu veya metni hizalamak için .pull-leftveya .pull-rightyardımcı program sınıflarını kullanın. Her iki sınıf da belirtilen yönde bir CSS şamandırası ekleyecektir.

Açılır menüler ekleme

Navigasyona açılır listeler ve açılırlar eklemek son derece basittir, ancak javascript eklentimizin kullanılmasını gerektirir .

<ul sınıfı = "nav" > 
  <li class = "açılır menü" > 
    <a href = "#" 
          class = "açılır-geçiş"
          data-toggle = "açılır menü" >
          Hesap
          <b sınıfı = "şapka" ></b> 
    </a>
    <ul class = "açılır menü" > 
      ...
    </ul>
  </li>
</ul>

Javascript'i edinin →

Gezinme çubuğundaki metin

Uygun satır aralığı ve renk için metin dizelerini bir <.navbar-text>, genellikle bir etikete sarın.<p>

neden kullansınlar

Breadcrumb navigasyonu, kullanıcılara bir uygulama veya site içinde nerede olduklarını göstermenin bir yolu olarak kullanılır, ancak birincil gezinme için kullanılmaz. En etkili olması için kullanımlarını seyrek ve özlü tutun.

Örnekler

Birden çok sayfada görüntülenebileceği için gösterilen tek bir örnek.

• Ev

• Ana Sayfa /
• Kütüphane

• Ana Sayfa /
• Kütüphane /
• Veri

İşaretleme

HTML, bağlantıları olan standart sırasız listenizdir.

<ul sınıfı = "ekmek kırıntısı" > 
  <li>
    <a href = "#" > Ana Sayfa </a> <span class = "bölücü" > / </span>   
  </li>
  <li>
    <a href = "#" > Kitaplık </a> <span class = "bölücü" > / </span>   
  </li>
  <li class = "etkin" > Veri </li> 
</ul>

Ne zaman kullanılır

Uygulamalar ve arama sonuçları için harika, Rdio'dan ilham alan ultra basit ve minimal tarzda sayfalandırma. Büyük bloğu gözden kaçırmak zordur, kolayca ölçeklenebilir ve geniş tıklama alanları sağlar.

Durum bilgisi olan sayfa bağlantıları

Bağlantılar özelleştirilebilir ve birçok durumda doğru sınıfla çalışır. .disabledtıklanamayan bağlantılar ve .activemevcut sayfa için.

Esnek hizalama

Sayfalandırma bağlantılarının hizalamasını değiştirmek için isteğe bağlı iki sınıftan birini ekleyin: .pagination-centeredve .pagination-right.

Örnekler

Varsayılan sayfalandırma bileşeni esnektir ve çeşitli varyasyonlarda çalışır.

İşaretleme

Bir içine sarılmış <div>, sayfalandırma sadece bir <ul>.

<div sınıfı = "sayfalandırma" > 
  <ul>
    <li><a href = "#" > Önceki </a></li> 
    <li sınıf = "etkin" > 
      <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 = "#" > Sonraki </a></li> 
  </ul>
</div>

Çağrı cihazı hakkında

Çağrı cihazı bileşeni, hafif işaretleme ve hatta daha hafif stiller içeren basit sayfalandırma uygulamaları için bir dizi bağlantıdır. Bloglar veya dergiler gibi basit siteler için harikadır.

İsteğe bağlı devre dışı durumu

.disabledÇağrı cihazı bağlantıları ayrıca sayfalandırmadaki genel sınıfı kullanır .

Varsayılan örnek

Varsayılan olarak, çağrı cihazı bağlantıları ortalar.

• Öncesi
• Sonraki

<ul class = "çağrı cihazı" > 
  <li>
    <a href = "#" > Önceki </a> 
  </li>
  <li>
    <a href = "#" > Sonraki </a> 
  </li>
</ul>

Hizalanmış bağlantılar

Alternatif olarak, her bir bağlantıyı yanlara hizalayabilirsiniz:

• ← Daha yaşlı
• Daha yeni →

<ul class = "çağrı cihazı" > 
  <li sınıf = "önceki" > 
    <a href = "#" > ← Daha eski </a> 
  </li>
  <li sınıf = "sonraki" > 
    <a href = "#" > Daha yeni → </a> 
  </li>
</ul>

Hakkında

Rozetler, bir tür gösterge veya sayım görüntülemek için küçük, basit bileşenlerdir. Genellikle Mail.app gibi e-posta istemcilerinde veya anında iletme bildirimleri için mobil uygulamalarda bulunurlar.

Mevcut sınıflar

Bootstrap, sitenizdeki içeriği sergilemek için kahraman birimi adı verilen hafif, esnek bir bileşen sağlar. Pazarlama ve içerik ağırlıklı sitelerde iyi çalışır.

İşaretleme

İçeriğinizi divşu şekilde sarın:

<div class = "kahraman-birim" > 
  <h1> Başlık </h1>
  <p> Kısa Açıklama </p>
  <p>
    <a sınıfı = "btn btn-birincil btn-büyük" > 
      Daha fazla bilgi edin
    </a>
  </p>
</div>

h1Bir sayfadaki içeriğin bölümlerini uygun şekilde boşaltmak ve bölümlere ayırmak için basit bir kabuk . h1'nin default öğesini ve diğer bileşenlerin çoğunu kullanabilir small(ek stillerle).

<div class = "sayfa başlığı" > 
  <h1> Örnek sayfa başlığı </h1>
</div>

Varsayılan küçük resimler

Varsayılan olarak, Bootstrap'in küçük resimleri, minimum gerekli işaretleme ile bağlantılı görüntüleri sergilemek için tasarlanmıştır.

Son derece özelleştirilebilir

Biraz fazladan işaretleme ile başlıklar, paragraflar veya düğmeler gibi her türlü HTML içeriğini küçük resimlere eklemek mümkündür.

• 

  Küçük resim etiketi

  Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id, eget metus'ta elit olmayan porta gravida. Nullam kimliği dolor kimliği nibh ultricies vehicula ut id elit.

  Eylem Eylem

• 

  Küçük resim etiketi

  Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id, eget metus'ta elit olmayan porta gravida. Nullam kimliği dolor kimliği nibh ultricies vehicula ut id elit.

  Eylem Eylem

Küçük resimler neden kullanılır?

Küçük resimler (önceden .media-gridv1.4'e kadar) fotoğraf veya video ızgaraları, görsel arama sonuçları, perakende ürünler, portföyler ve çok daha fazlası için mükemmeldir. Bağlantılar veya statik içerik olabilirler.

Basit, esnek işaretleme

Küçük resim işaretlemesi basittir - gerekli olan tek şey ulherhangi bir sayıda liöğeye sahip olmaktır. Ayrıca süper esnektir, içeriğinizi sarmak için biraz daha fazla biçimlendirme ile her tür içeriğe izin verir.

Izgara sütun boyutlarını kullanır

Son olarak, küçük resimler bileşeni , küçük resim boyutlarının kontrolü için .span2veya benzeri mevcut ızgara sistemi sınıflarını kullanır ..span3

işaretleme

Daha önce de belirtildiği gibi, küçük resimler için gerekli işaretleme hafif ve basittir. Bağlantılı resimler için varsayılan kuruluma bir göz atın :

<ul class = "küçük resimler" > 
  <li sınıf = "span3" > 
    <a href = "#" class = "küçük resim" >  
      <img kaynak = "https://placehold.it/260x180" alt = "" >  
    </a>
  </li>
  ...
</ul>

Küçük resimlerdeki özel HTML içeriği için işaretleme biraz değişir. Herhangi bir yerde blok düzeyinde içeriğe izin vermek için, şununla <a>değiştiririz <div>:

<ul class = "küçük resimler" > 
  <li sınıf = "span3" > 
    <div sınıfı = "küçük resim" > 
      <img kaynak = "https://placehold.it/260x180" alt = "" >  
      <h5> Küçük resim etiketi </h5>
      <p> Küçük resim yazısı tam burada... </p>
    </div>
  </li>
  ...
</ul>

Daha fazla örnek

Kullanabileceğiniz çeşitli ızgara sınıfları ile tüm seçeneklerinizi keşfedin. Ayrıca farklı boyutları karıştırıp eşleştirebilirsiniz.

Yeniden yazılmış temel sınıf

Bootstrap 2 ile temel sınıfı basitleştirdik: .alertyerine .alert-message. Ayrıca gerekli minimum işaretlemeyi de azalttık <p>; varsayılan olarak hayır gereklidir, yalnızca dış <div>.

Tek uyarı mesajı

Daha az kod içeren daha dayanıklı bir bileşen için, daha fazla dolgu ve tipik olarak daha fazla metinle gelen blok uyarıları, mesajların ayırt edici görünümünü kaldırdık. Sınıf da değişti .alert-block.

javascript ile harika gidiyor

Bootstrap, uyarı mesajlarını destekleyen harika bir jQuery eklentisi ile birlikte gelir, bu da onları hızlı ve kolay bir şekilde devre dışı bırakır.

Eklentiyi edinin »

Örnek uyarılar

Mesajınızı ve isteğe bağlı bir kapatma simgesini basit sınıfla bir div'e sarın.

<div sınıfı = "uyarı" > 
  <button class = "kapat" data-dismiss = "alert" > × </button>  
  <strong> Uyarı! </strong> Kendinize iyi bakın, pek iyi görünmüyorsunuz.
</div>

Önüne bak! iOS cihazları href="#", uyarıların iptali için bir gerektirir. Bağlantı kapatma simgeleri için onu ve veri özniteliğini eklediğinizden emin olun. buttonAlternatif olarak, dokümanlarımız için yapmayı seçtiğimiz data özniteliğine sahip bir öğe kullanabilirsiniz .

Standart uyarı mesajını iki isteğe bağlı sınıfla kolayca genişletin: .alert-blockdaha fazla dolgu ve metin kontrolü ve .alert-headingeşleşen bir başlık için.

<div class = "uyarı uyarı bloğu" > 
  <a class = "kapat" data-dismiss = "alert" href = "#" > × </a>   
  <h4 class = "alert-heading" > Uyarı! </h4> 
  En iyisi kendini kontrol et, değilsin...
</div>

Hata veya tehlike

<div class = "uyarı uyarı hatası" > 
  ...
</div>

Başarı

<div class = "uyarı uyarısı başarısı" > 
  ...
</div>

Bilgi

<div class = "uyarı uyarı bilgisi" > 
  ...
</div>

Temel

Dikey eğimli varsayılan ilerleme çubuğu.

<div sınıfı = "ilerleme" > 
  <div sınıfı = "çubuk" 
       stil = " genişlik : % 60 ; " ></div> 
</div>

Çizgili

Çizgili bir efekt oluşturmak için bir degrade kullanır (IE yok).

<div class = "ilerleme ilerleme çizgili" > 
  <div sınıfı = "çubuk" 
       stil = " genişlik : % 20 ; " ></div> 
</div>

animasyonlu

Çizgili örneği alır ve onu canlandırır (IE yok).

<div class = "ilerleme ilerleme çizgili 
     aktif" >
  <div sınıfı = "çubuk" 
       stil = " genişlik : % 40 ; " ></div> 
</div>

Ek renkler

İlerleme çubukları, tutarlı stiller için aynı düğme ve uyarı sınıflarından bazılarını kullanır.

çizgili çubuklar

Düz renklere benzer şekilde, çeşitli çizgili ilerleme çubuklarımız var.

Davranış

İlerleme çubukları CSS3 geçişlerini kullanır, bu nedenle genişliği javascript aracılığıyla dinamik olarak ayarlarsanız sorunsuz bir şekilde yeniden boyutlandırılacaktır.

.activeSınıfı kullanırsanız , .progress-stripedilerleme çubuklarınız soldan sağa şeritleri canlandıracaktır.

tarayıcı desteği

İlerleme çubukları, tüm efektlerini elde etmek için CSS3 gradyanlarını, geçişlerini ve animasyonlarını kullanır. Bu özellikler, Firefox'un IE7-9 veya daha eski sürümlerinde desteklenmez.

Opera ve IE şu anda animasyonları desteklememektedir.

kuyular

Bir öğeye ek efekt vermek için kuyuyu basit bir efekt olarak kullanın.

<div sınıfı = "iyi" > 
  ...
</div>

Kapat simgesi

Modeller ve uyarılar gibi içerikleri kapatmak için genel kapat simgesini kullanın.

×

<düğme sınıfı = "kapat" > × </button> 

Bağlantı kullanmayı tercih ediyorsanız, iOS aygıtları tıklama olayları için bir href="#" gerektirir.

<a class = "kapat" href = "#" > × </a>