Örnek

Bağlantı listelerini görüntülemek için değiştirilebilir, bağlamsal menü. Açılır JavaScript eklentisi ile etkileşimli hale getirildi .

<ul class = "açılır menü" rolü = "menü" aria-labelledby = "açılır menü" >   
  <li><a tabindex = "-1" href = "#" > Eylem </a></li>  
  <li><a tabindex = "-1" href = "#" > Başka bir işlem </a></li>  
  <li><a tabindex = "-1" href = "#" > Burada başka bir şey </a></li>  
  <li sınıf = "bölücü" ></li> 
  <li><a tabindex = "-1" href = "#" > Ayrılmış bağlantı </a></li>  
</ul>

İşaretleme

Sadece açılır menüye bakıldığında, gerekli HTML burada. Açılır menünün tetikleyicisini ve açılır menüyü içine .dropdownveya bildiren başka bir öğeye sarmanız gerekir position: relative;. O zaman sadece menüyü oluşturun.

<div sınıfı = "açılır menü" > 
  <!-- Açılır menüyü değiştirmek için bağlantı veya düğme -->
  <ul class = "açılır menü" rolü = "menu" aria-labelledby = "dLabel" >   
    <li><a tabindex = "-1" href = "#" > Eylem </a></li>  
    <li><a tabindex = "-1" href = "#" > Başka bir işlem </a></li>  
    <li><a tabindex = "-1" href = "#" > Burada başka bir şey </a></li>  
    <li sınıf = "bölücü" ></li> 
    <li><a tabindex = "-1" href = "#" > Ayrılmış bağlantı </a></li>  
  </ul>
</div>

Seçenekler

Menüleri sağa hizalayın ve ek açılır menü seviyeleri ekleyin.

Menüleri hizalama

.pull-righta'ya ekle .dropdown-menuaçılır menüyü sağa hizalayın.

<ul class = "açılır menü sağa çekme" rolü = "menü" aria-labelledby = "dLabel" >   
  ...
</ul>

Devre dışı menü seçenekleri

.disabledBağlantıyı devre dışı bırakmak için <li>açılır listeye ekleyin .

<ul class = "açılır menü" rolü = "menü" aria-labelledby = "açılır menü" >   
  <li><a tabindex = "-1" href = "#" > Normal bağlantı </a></li>  
  <li class = "devre dışı" ><a tabindex = "-1" href = "#" > Devre dışı bırakılmış bağlantı </a></li>   
  <li><a tabindex = "-1" href = "#" > Başka bir bağlantı </a></li>  
</ul>

Açılır menülerdeki alt menüler

Bazı basit biçimlendirme eklemeleriyle, OS X'teki gibi fareyle üzerine gelindiğinde görünen fazladan bir açılır menü düzeyi ekleyin. Otomatik şekillendirme için mevcut bir açılır menüden .dropdown-submenuherhangi birine ekleyin .li

<ul class = "açılır menü" rolü = "menu" aria-labelledby = "dLabel" >   
  ...
  <li class = "açılır-alt menü" > 
    <a tabindex = "-1" href = "#" > Diğer seçenekler </a>  
    <ul class = "açılır menü" > 
      ...
    </ul>
  </li>
</ul>

Örnekler

İki temel seçenek ve iki özel varyasyon daha.

Tek düğme grubu

Bir dizi düğmeyi .btnin ile sarın .btn-group.

<div sınıfı = "btn grubu" > 
  <button class = "btn" > Sol </button> 
  <button class = "btn" > Orta </button> 
  <button class = "btn" > Sağ </button> 
</div>

Çoklu düğme grupları

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>

Dikey düğme grupları

Bir dizi düğmenin yatay yerine dikey olarak yığılmış görünmesini sağlayın.

<div class = "btn-group btn-group-dikey" > 
  ...
</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 .

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.

<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 listeleri her boyutta çalışır: .btn-large, .btn-small, veya .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.

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.

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

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" > 
  <button class = "btn btn-mini" > Eylem </button> 
  <button class = "btn btn-mini açılır menü geçişi" data-toggle = "açılan 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>

Hafif varsayılanlar Aynı işaretleme, farklı sınıflar

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

Temel sekmeler

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

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

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

Engelli durumu

Herhangi bir gezinme bileşeni (sekmeler, haplar veya liste) .disablediçin gri bağlantılar ekleyin ve fareyle üzerine gelme efekti yok . hrefAncak, niteliği kaldırmadığınız sürece bağlantılar tıklanabilir kalır . Alternatif olarak, bu tıklamaları önlemek için özel JavaScript uygulayabilirsiniz.

<ul class = "nav nav hapları" > 
  ...
  <li class = "devre dışı" ><a href = "#" > Ana Sayfa </a></li>  
  ...
</ul>

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.

istiflenebilir

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

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

yığılmış haplar

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

açılır menüler

Biraz fazladan HTML ve açılır JavaScript eklentisi içeren açılır menüler ekleyin .

Açılan sekmeler

<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

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

Gezinme listeleri

İsteğe bağlı başlıklarla gezinme bağlantıları grupları oluşturmanın basit ve kolay bir yolu. En iyi OS X'teki Finder gibi kenar çubuklarında kullanılırlar.

Ö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 class = "etkin" ><a href = "#" > Ana Sayfa </a></li>  
  <li><a href = "#" > Kitaplık </a></li> 
  ...
</ul>

NotBir gezinme listesi içinde yuvalama class="nav nav-list"için herhangi bir yuvalanmış <ul>.

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>

Sekmeli gezinme

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.

Sekmeli örnek

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

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

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 belgeleri sayfasında sekmeli sekmelerin nasıl hayata geçirileceği hakkında daha fazla bilgi edinin .

Herhangi bir yönde sekmeli

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>

Temel gezinme çubuğu

Başlamak için, gezinme çubukları statiktir (üste sabitlenmez) ve bir proje adı ve temel gezinme desteği içerir. .containerBirini sitenizin ve içeriğinizin genişliğini ayarlayan içinde herhangi bir yere yerleştirin .

<div sınıfı = "navbar" > 
  <div sınıfı = "navbar-iç" > 
    <a class = "brand" href = "#" > Başlık </a>  
    <ul sınıfı = "nav" > 
      <li class = "etkin" ><a href = "#" > Ana Sayfa </a></li>  
      <li><a href = "#" > Bağlantı </a></li> 
      <li><a href = "#" > Bağlantı </a></li> 
    </ul>
  </div>
</div>

gezinme çubuğu bileşenleri

Marka

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

<a class = "brand" href = "#" > Proje adı </a>  

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>

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" >  
  <button type = "gönder" sınıfı = "btn" > Gönder </button>  
</form>

Arama Formu

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>

Bileşen hizalama

Gezinme bağlantılarını, arama formunu veya metni hizalayın, .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üleri kullanma

Biraz işaretleme ve aşağı açılır JavaScript eklentisi ile gezinmeye açılır listeler ve açılır listeler ekleyin .

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

Daha fazla işaretleme ve açılır listeleri çağırma hakkında bilgi için JavaScript açılır liste belgelerini ziyaret edin .

Metin

Metin dizelerini, uygun satır aralığı ve renk için .navbar-textgenellikle bir etiket üzerinde olan bir öğeye sarın.<p>

İsteğe bağlı ekran varyasyonları

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.

Üste sabitlendi

' e .navbar-fixed-topen az 40 piksel ekleyerek altındaki gizli alanı hesaba katmayı unutmayın . Bunu, temel Bootstrap CSS'den sonra ve isteğe bağlı duyarlı CSS'den önce eklediğinizden emin olun.padding<body>

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

Aşağıya sabitlenmiş

.navbar-fixed-bottomBunun yerine ekleyin .

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

Statik üst gezinme çubuğu

Ekleyerek sayfayla birlikte kayan tam genişlikte bir gezinme çubuğu oluşturun .navbar-static-top. Sınıftan farklı olarak, .navbar-fixed-topüzerinde herhangi bir dolguyu değiştirmeniz gerekmez body.

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

Duyarlı gezinme çubuğu

Daralan duyarlı bir gezinme çubuğu uygulamak için gezinme çubuğu 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 class = "nav-collapse daraltma" > 
        <!-- .nav, .navbar-arama, .navbar-form, vb -->
      </div>
 
    </div>
  </div>
</div>

ters varyasyon

ekleyerek gezinme çubuğunun görünümünü değiştirin .navbar-inverse.

<div sınıfı = "navbar navbar-tersi" > 
  ...
</div>

Örnekler

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

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

Standart sayfalandırma

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

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

Seçenekler

Devre dışı ve aktif durumlar

Bağlantılar farklı durumlar için özelleştirilebilir. .disabledTıklanamayan bağlantılar için ve .activegeçerli sayfayı belirtmek için kullanın .

<div sınıfı = "sayfalandırma" > 
  <ul>
    <li class = "devre dışı" ><a href = "#" > « </a></li>  
    <li class = "etkin" ><a href = "#" > 1 </a></li>  
    ...
  </ul>
</div>

İsteğe bağlı olarak, istenen stilleri korurken tıklama işlevini kaldırmak için etkin veya devre dışı bırakılmış çapaları yayılma alanları için değiştirebilirsiniz.

<div sınıfı = "sayfalandırma" > 
  <ul>
    <li class = "devre dışı" ><span> « </span></li> 
    <li class = "etkin" ><span> 1 </span></li> 
    ...
  </ul>
</div>

Boyutlar

Daha büyük veya daha küçük sayfalama ister misiniz? Ek boyutlar için .pagination-large, .pagination-smallveya ekleyin ..pagination-mini

<div class = "sayfalandırma sayfalandırma-büyük" > 
  <ul>
    ...
  </ul>
</div>
<div sınıfı = "sayfalandırma" > 
  <ul>
    ...
  </ul>
</div>
<div class = "sayfalandırma sayfalandırma-küçük" > 
  <ul>
    ...
  </ul>
</div>
<div class = "sayfalandırma sayfalandırma-mini" > 
  <ul>
    ...
  </ul>
</div>

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.

<div class = "sayfalandırma sayfalandırma merkezli" > 
  ...
</div>

<div class = "sayfalandırma sayfalandırma-sağ" > 
  ...
</div>

Çağrı cihazı

Hafif işaretleme ve stiller ile basit sayfalandırma uygulamaları için hızlı önceki ve sonraki bağlantılar. Bloglar veya dergiler gibi basit siteler için harikadır.

Varsayılan örnek

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

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

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

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

Çağrı cihazı bağlantıları ayrıca .disabledsayfalandırmadaki genel yardımcı program sınıfını da kullanır.

<ul class = "çağrı cihazı" > 
  <li class = "önceki devre dışı" > 
    <a href = "#" > ← Daha eski </a> 
  </li>
  ...
</ul>

Etiketler

Rozetler

Kolayca katlanabilir

Kolay uygulama için, etiketler ve rozetler, :emptyiçinde hiçbir içerik olmadığında (CSS seçici aracılığıyla) basitçe çökecektir.

kahraman birimi

Sitenizdeki önemli içeriği sergilemek için hafif, esnek bir bileşen. Pazarlama ve içerik ağırlıklı sitelerde iyi çalışır.

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

Sayfa başlığı

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ığı <small> Başlık için alt metin </small></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 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

İş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 = "span4" > 
    <a href = "#" class = "küçük resim" >  
      <img data-src = "holder.js/300x200" 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 = "span4" > 
    <div sınıfı = "küçük resim" > 
      <img data-src = "holder.js/300x200" alt = "" >  
      <h3> Küçük resim etiketi </h3>
      <p> Küçük resim yazısı... </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.

Varsayılan uyarı

.alertTemel bir uyarı uyarı mesajı için herhangi bir metni ve isteğe bağlı bir kapatma düğmesini sarın .

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

Kapat düğmeleri

Mobile Safari ve Mobile Opera tarayıcıları, data-dismiss="alert"özniteliğe ek olarak, bir etiket href="#"kullanıldığında uyarıların kaldırılması için bir gerektirir.<a>

<a href = "#" class = "kapat" data-dismiss = "uyarı" > × </a>   

<button>Alternatif olarak, dokümanlarımız için yapmayı seçtiğimiz data özniteliğine sahip bir öğe kullanabilirsiniz . kullanırken <button>, eklemeniz gerekir, type="button"aksi takdirde formlarınız gönderilmeyebilir.

<button type = "button" class = "close" data-dismiss = "alert" > × </button>   

JavaScript aracılığıyla uyarıları kapat

Uyarıların hızlı ve kolay bir şekilde kapatılması için uyarılar jQuery eklentisini kullanın .

Seçenekler

Daha uzun mesajlar için, uyarı sarmalayıcısının üstündeki ve altındaki dolguyu ekleyerek artırın .alert-block.

<div class = "uyarı uyarı bloğu" > 
  <button type = "button" class = "close" data-dismiss = "alert" > × </button>   
  <h4> Uyarı! </h4>
  En iyisi kendini kontrol et, değilsin...
</div>

bağlamsal alternatifler

Bir uyarının çağrışımını değiştirmek için isteğe bağlı sınıflar ekleyin.

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>

Örnekler ve işaretleme

Temel

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

<div sınıfı = "ilerleme" > 
  <div class = "bar" stili = " genişlik : % 60 ; " ></div>   
</div>

Çizgili

Çizgili bir efekt oluşturmak için bir degrade kullanır. IE7-8'de mevcut değildir.

<div class = "ilerleme ilerleme çizgili" > 
  <div class = "bar" stili = " genişlik : % 20 ; " ></div>   
</div>

animasyonlu

Sağdan sola şeritleri canlandırmak için .activeekleyin . .progress-stripedIE'nin tüm sürümlerinde mevcut değildir.

<div class = "ilerleme ilerleme çizgili aktif" > 
  <div class = "bar" stili = " genişlik : % 40 ; " ></div>   
</div>

Yığılmış

.progressİstiflemek için birden fazla çubuğu aynı yere yerleştirin.

<div sınıfı = "ilerleme" > 
  <div class = "bar-success" style = " width : % 35 ; " ></div>   
  <div class = "bar çubuğu uyarısı" stili = " genişlik : % 20 ; " ></div>   
  <div class = "bar-bar-danger" stili = " genişlik : % 10 ; " ></div>   
</div>

Seçenekler

Ek renkler

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

<div class = "ilerleme ilerleme bilgisi" > 
  <div class = "bar" stili = " genişlik : % 20 " ></div>   
</div>
<div class = "ilerleme ilerleme-başarı" > 
  <div class = "bar" stili = " genişlik : % 40 " ></div>   
</div>
<div class = "ilerleme ilerleme uyarısı" > 
  <div class = "bar" stili = " genişlik : % 60 " ></div>   
</div>
<div class = "ilerleme ilerleme tehlikesi" > 
  <div class = "bar" stili = " genişlik : % 80 " ></div>   
</div>

çizgili çubuklar

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

<div class = "ilerleme ilerleme bilgisi ilerleme çizgili" > 
  <div class = "bar" stili = " genişlik : % 20 " ></div>   
</div>
<div class = "ilerleme ilerleme-başarı ilerleme çizgili" > 
  <div class = "bar" stili = " genişlik : % 40 " ></div>   
</div>
<div class = "ilerleme ilerleme uyarısı ilerleme çizgili" > 
  <div class = "bar" stili = " genişlik : % 60 " ></div>   
</div>
<div class = "ilerleme ilerleme-tehlike ilerleme çizgili" > 
  <div class = "bar" stili = " genişlik : % 80 " ></div>   
</div>

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.

Internet Explorer 10 ve Opera 12'den önceki sürümler animasyonları desteklemez.

Metin içeriğinin yanı sıra sola veya sağa hizalanmış bir görüntü içeren çeşitli bileşen türleri (blog yorumları, Tweetler vb.) oluşturmak için soyut nesne stilleri.

Varsayılan örnek

Varsayılan medya, bir medya nesnesinin (görüntüler, video, ses) bir içerik bloğunun soluna veya sağına kaydırılmasına izin verir.

Medya başlığı

Cras, amet nibh libero, gravida nulla'da oturuyor. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vulputatta vestibulum, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Faucibus'ta Donec lacinia congue felis.

Medya başlığı

Cras, amet nibh libero, gravida nulla'da oturuyor. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vulputatta vestibulum, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Faucibus'ta Donec lacinia congue felis.

Medya başlığı

Cras, amet nibh libero, gravida nulla'da oturuyor. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vulputatta vestibulum, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Faucibus'ta Donec lacinia congue felis.

<div sınıfı = "medya" > 
  <a class = "sola çekme" href = "#" >  
    <img class = "media-object" data-src = "holder.js/64x64" >  
  </a>
  <div sınıfı = "medya gövdesi" > 
    <h4 class = "media-heading" > Medya başlığı </h4> 
    ...
 
    <!-- İç içe medya nesnesi -->
    <div sınıfı = "medya" > 
      ...
    </div>
  </div>
</div>

Medya listesi

Biraz fazladan işaretleme ile, medyayı liste içinde kullanabilirsiniz (yorum dizileri veya makale listeleri için kullanışlıdır).

<ul class = "medya listesi" > 
  <li sınıf = "medya" > 
    <a class = "sola çekme" href = "#" >  
      <img class = "media-object" data-src = "holder.js/64x64" >  
    </a>
    <div sınıfı = "medya gövdesi" > 
      <h4 class = "media-heading" > Medya başlığı </h4> 
      ...
 
      <!-- İç içe medya nesnesi -->
      <div sınıfı = "medya" > 
        ...
     </div>
    </div>
  </li>
</ul>

kuyular

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

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

İsteğe bağlı sınıflar

İki isteğe bağlı değiştirici sınıfla kontrol dolgusu ve yuvarlatılmış köşeler.

<div class = "iyi-büyük" > 
  ...
</div>

<div class = "iyi iyi küçük" > 
  ...
</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> 

href="#"Bir bağlantı kullanmayı tercih ederseniz, iOS aygıtları bir tıklama olayı gerektirir .

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

yardımcı sınıflar

Küçük ekran veya davranış değişiklikleri için basit, odaklanmış sınıflar.

.çek-sol

Bir öğeyi sola kaydır

sınıf = "sola çekme"

. çekme - sol {
  yüzer : sol ;
}

.sağa çekme

Bir öğeyi sağa kaydır

sınıf = "sağa çekme"

. çekme - sağa {
  yüzer : sağ ;
}

.sessiz

Bir öğenin rengini şu şekilde değiştirin:#999

sınıf = "sessiz"

. sessiz {
  renk : #999; 
}

.açık düzeltme

floatHerhangi bir öğeyi temizle

sınıf = "düzeltme"

. düzeltme {
  * yakınlaştırma : 1 ; 
  &: önce ,
  &: sonra {
    ekran : tablo ;
    içerik : "" ; 
  }
  &: sonra {
    temizle : ikisi de ;
  }
}