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" > 
  <a class = "btn" href = "#" > 1 </a>  
  <a class = "btn" href = "#" > 2 </a>  
  <a class = "btn" href = "#" > 3 </a>  
</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 »

Önüne bak

Düğme grupları için CSS ayrı bir dosyadadır, button-groups.less.

Düğme açılır menüleri

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.

Önüne bak! Düğme açılır listelerinin çalışması için Bootstrap açılır eklentisi gerekir.

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

Bölme düğmesi açılır menüleri

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.

Ö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" > 
  <a class = "btn" href = "#" > Eylem </a>  
  <a class = "btn açılır-geçiş" data-toggle = "açılır menü" href = "#" >   
    <span class = "şapka" ></span> 
  </a>
  <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
• Profil
• Yıkılmak
  • Eylem
  • Başka bir eylem
  • Burada başka bir şey
  • Ayrılmış bağlantı

<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
• Profil
• Yıkılmak
  • Eylem
  • Başka bir eylem
  • Burada başka bir şey
  • Ayrılmış bağlantı

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

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

Sekmeli örnek

.nav-tabsSekmeleri sekmeli hale getirmek için , class ile başka bir div'e sarın .tabbable.

Özel jQuery eklentisi

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 →

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

.navbar-fixed-topGezinme çubuğunu görünümün üst kısmına sabitlemek için en dıştaki div'e ekleyin , .navbar.

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

CSS'nizde, dosyanıza 40 piksel veya daha fazla dolgu ekleyerek neden olduğu çakışmayı da hesaba katmanız gerekir <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>

Arama Formu

.navbar-searchArama formları, sınıfla birlikte gezinme çubuğunda özel stiller alır . Hizalamak için .pull-leftveya .pull-rightüzerine ekleyin .form

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

Navigasyona açılır menüler 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 →

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 sınıf = "etkin" > 
    <a href = "#" > Veri </a> 
  </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.

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>

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-haeder" > 
  <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ı" > 
  <a class = "kapat" data-dismiss = "alert" > × </a>  
  <strong> Uyarı! </strong> Kendinize iyi bakın, pek iyi görünmüyorsunuz.
</div>

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" > × </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.

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

animasyonlu

Çizgili örneği alır ve canlandırır.

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

Ek renkler

İlerleme çubukları, benzer stiller için düğmeler ve uyarılar olarak aynı sınıf adlarından bazılarını kullanır.

• .progress-info
• .progress-success
• .progress-danger

Alternatif olarak, LESS dosyalarını özelleştirebilir ve kendi renk ve boyutlarınızı yuvarlayabilirsiniz.

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-8 veya daha eski sürümlerinde desteklenmez.

Opera şu anda animasyonları desteklemiyor.

kuyular

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

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

Rozetler

Okunmamış bir sayı için veya basit bir gösterge olarak bir öğe üzerinde bir rozet kullanın.

<span class = "rozet" > 3 </div> 

Kapat simgesi

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

×

<a sınıf = "kapat" > × </a>