Kullanılabilir glifler

Glyphicon Halflings setinden yazı tipi formatında 250'den fazla glif içerir. Glyphicons Halflings normalde ücretsiz olarak mevcut değildir, ancak yaratıcıları onları Bootstrap için ücretsiz olarak kullanıma sunmuştur. Teşekkür olarak, mümkün olduğunda yalnızca Glyphicons'a bir bağlantı eklemenizi rica ediyoruz .

glifon glifon-yıldız
glifon glifon artı
glifon glifon-euro
glyphicon glyphicon-eur
glifon glifon-eksi
glyphicon glyphicon-bulut
glifon glifon-zarf
glifon glifon-kalem
glifon glifon camı
glyphicon glyphicon-müzik
glifon glifon araması
glifon glifon-kalp
glifon glifon yıldızı
glifon glifon-yıldız-boş
glyphicon glyphicon kullanıcısı
glifon glifon filmi
glyphicon glyphicon-th-büyük
glyphicon glyphicon-th
glyphicon glyphicon-th-listesi
glifon glifon-tamam
glyphicon glyphicon-kaldır
glifon glifon yakınlaştırma
glyphicon glyphicon-uzaklaştırma
glifon glifon kapalı
glifon glifon sinyali
glifon glifon dişlisi
glyphicon glyphicon-çöp
glifon glifon-ev
glifon glifon dosyası
glifon glifon zamanı
glifon glifon yolu
glyphicon glyphicon-indir-alt
glyphicon glyphicon-indir
glifon glifon yüklemesi
glifon glifon-gelen kutusu
glyphicon glyphicon-play-daire
glifon glifon tekrarı
glifon glifon-yenileme
glyphicon glyphicon-list-alt
glifon glifon kilidi
glifon glifon bayrağı
glifon glifon kulaklıklar
glyphicon glyphicon-ses-kapalı
glyphicon glyphicon-ses kısma
glifon glifon hacmi artırma
glyphicon glyphicon-qrcode
glifon glifon-barkod
glifon glifon etiketi
glifon glifon etiketleri
glifon glifon kitabı
glyphicon glyphicon-yer imi
glifon glifon-baskı
glyphicon glyphicon-kamera
glyphicon glyphicon-yazı tipi
glifon kalın
glifon glifon-italik
glyphicon glyphicon-metin yüksekliği
glyphicon glyphicon-metin genişliği
glifon glifon-sola hizala
glifon glifon hizalama-merkezi
glifon glifon-sağ hizalama
glifon glifon hizala-yasla
glifon glifon listesi
glifon glifon girintisi-sol
glyphicon glifon girintisi-sağ
glyphicon glyphicon-facetime-video
glyphicon glyphicon-resmi
glifon glifon-harita-işaretleyici
glifon glifon ayarı
glifon glifon tonu
glifon glifon düzenleme
glyphicon glyphicon-pay
glifon glifon kontrolü
glifon glifon-hareket
glifon glifon-geri adım
glifon glifon-hızlı-geri
glifon glifon-geriye doğru
glifon glifon oyunu
glifon glifon-duraklatma
glifon glifon durdurma
glifon ileri glifon
glifon glifon hızlı ileri sar
glifon glifon bir adım ileri
glifon glifon çıkarma
glyphicon glyphicon-chevron-sol
glyphicon glyphicon-chevron-sağ
glifon glifon artı işareti
glifon glifon-eksi işareti
glifon glifon-kaldır-işareti
glifon glifon-tamam-işareti
glifon glifon-soru-işareti
glifon glifon-bilgi-işareti
glyphicon glyphicon-ekran görüntüsü
glifon glifon-kaldır-daire
glifon glifon-tamam-daire
glyphicon glyphicon-yasak-daire
glifon glifon-sol-ok
glifon glifon-ok-sağ
glifon glifon-yukarı ok
glifon glifon-aşağı ok
glyphicon glyphicon-share-alt
glyphicon glyphicon-resize-dolu
glifon glifon-yeniden boyutlandır-küçük
glifon glifon-ünlem işareti
glifon glifon-hediye
glifon glifon yaprağı
glyphicon glyphicon-ateş
glifon glifon gözü açık
glifon glifon-göz-kapat
glifon glifon-uyarı-işareti
glifon glifon düzlemi
glyphicon glyphicon-takvim
glifon glifon-rastgele
glyphicon glyphicon-yorum
glifon glifon-mıknatıs
glifon glifon-yukarı
glifon glifon-şevron aşağı
glyphicon glyphicon-retweet
glyphicon glyphicon-alışveriş sepeti
glyphicon glyphicon-klasör-kapat
glyphicon glyphicon-klasörü-açık
glyphicon glyphicon-resize-dikey
glifon glifon-yeniden boyutlandırma-yatay
glifon glifon-hdd
glifon glifon-boğa boynuzu
glifon glifon çanı
glifon glifon sertifikası
glifon glifon başparmak-up
glifon glifon başparmak aşağı
glifon glifon-sağ-el
glifon glifon-el-sol
glifon glifon elden ele
glifon glifon elden ele
glifon glifon-daire-ok-sağ
glifon glifon-daire-ok-sol
glifon glifon-daire-yukarı ok
glifon glifon-daire-aşağı ok
glifon glifon küresi
glifon glifon anahtarı
glifon glifon görevleri
glifon glifon filtresi
glifon glifon-evrak çantası
glifon glifon-tam ekran
glifon glifon-gösterge tablosu
glifon glifon-ataş
glifon glifon-kalp-boş
glifon glifon bağlantısı
glifon glifon telefon
glifon glifon-pushpin
glyphicon glyphicon-usd
glifon glifon-gbp
glifon glifon sıralama
glifon glifon alfabesine göre sıralama
glifon glifon-alfabe göre-sıralama-alt
glifon glifon-sıralama-sıralama
glifon glifon-sıralama-alt
glyphicon glyphicon-niteliklere göre-sıralama
glyphicon glyphicon-niteliklere göre-sırala-alt
glifon glifon-işaretsiz
glifon glifon-genişlet
glyphicon glyphicon-çöküş-aşağı
glyphicon glyphicon-çöküş
glyphicon glyphicon-log-in
glifon glifon flaşı
glyphicon glyphicon-log-out
glyphicon glyphicon-yeni pencere
glifon glifon kaydı
glyphicon glyphicon-kaydetme
glyphicon glyphicon-açık
glyphicon glyphicon-kaydedildi
glifon glifon içe aktarma
glifon glifon-ihracat
glifon glifon-gönder
glyphicon glyphicon-floppy-disk
glyphicon glyphicon-disket-kaydedildi
glyphicon glyphicon-disket-kaldır
glyphicon glyphicon-disket-kaydetme
glyphicon glyphicon-disket-açık
glyphicon glyphicon-kredi kartı
glifon glifon aktarımı
glyphicon glyphicon-çatal bıçak takımı
glyphicon glyphicon-header
glifon glifon sıkıştırılmış
glifon glifon kulaklık
glyphicon glyphicon-telefon-alt
glifon glifon kulesi
glifon glifon istatistikleri
glyphicon glyphicon-sd-video
glyphicon glyphicon-hd-video
glyphicon glyphicon-altyazılar
glyphicon glyphicon-ses-stereo
glyphicon glyphicon-ses-dolby
glifon glifon-ses-5-1
glifon glifon-ses-6-1
glifon glifon-ses-7-1
glyphicon glyphicon-telif hakkı işareti
glyphicon glyphicon-kayıt-işareti
glyphicon glyphicon-bulut-indir
glyphicon glyphicon-bulut-yükleme
glyphicon glyphicon-ağaç-kozalaklı ağaç
glyphicon glyphicon-ağaç-yaprak döken
glyphicon glyphicon-cd
glyphicon glyphicon-kaydetme dosyası
glyphicon glyphicon-açık dosya
glifon glifon seviye atlama
glifon glifon kopyası
glifon glifon-yapıştır
glifon glifon uyarısı
glifon glifon ekolayzır
glifon glifon-kral
glifon glifon kraliçesi
glifon glifon piyon
glifon glifon-fil
glifon glifon şövalyesi
glyphicon glyphicon-bebek formülü
glifon glifon çadırı
glifon glifon-karatahta
glifon glifon yatağı
glifon glifon-elma
glifon glifon silme
glifon glifon-kum saati
glifon glifon lambası
glifon glifon kopyası
glifon glifon kumbara
glifon glifon-makas
glifon glifon-bitcoin
glyphicon glyphicon-btc
glifon glifon-xbt
glifon glifon yen
glifon glifon-jpy
glifon glifon-rublesi
glifon glifon ovmak
glifon glifon ölçeği
glifon glifon-buzlu şeker
glyphicon glifon-buz-şeker tadında
glyphicon glyphicon-eğitim
glyphicon glyphicon-seçenek-yatay
glyphicon glyphicon-seçenek-dikey
glyphicon glyphicon-menü-hamburger
glyphicon glyphicon-modal-pencere
glifon glifon yağı
glifon glifon tanesi
glyphicon glyphicon-güneş gözlüğü
glyphicon glyphicon-metin boyutu
glyphicon glyphicon-text-color
glifon glifon-metin-arka planı
glifon glifon-nesne-hizalama-üst
glifon glifon-nesne-alt hizalama
glifon glifon-nesne-hizalama-yatay
glifon glifon-nesne-sol hizalama
glifon glifon-nesne-hizalama-dikey
glifon glifon-nesne-hizalama-sağ
glifon glifon-üçgen-sağ
glifon glifon-üçgen-sol
glifon glifon-üçgen-alt
glyphicon glyphicon-üçgen-üst
glifon glifon konsolu
glifon glifon-üst simge
glifon glifon-abone
glifon glifon-menü-sol
glyphicon glyphicon-menü-sağ
glyphicon glifon-menü-aşağı
glyphicon glyphicon-menüsü

Nasıl kullanılır

Performans nedenleriyle, tüm simgeler bir temel sınıf ve ayrı bir simge sınıfı gerektirir. Kullanmak için aşağıdaki kodu hemen hemen her yere yerleştirin. Uygun dolgu için simge ve metin arasında boşluk bıraktığınızdan emin olun.

Diğer bileşenlerle karıştırmayın

Simge sınıfları, diğer bileşenlerle doğrudan birleştirilemez. Aynı element üzerinde diğer sınıflarla birlikte kullanılmamalıdırlar. Bunun yerine, yuvalanmış bir öğe ekleyin <span>ve simge sınıflarını <span>.

Sadece boş elemanlarda kullanım için

Simge sınıfları yalnızca metin içeriği ve alt öğesi olmayan öğelerde kullanılmalıdır.

Simge yazı tipi konumunu değiştirme

../fonts/Bootstrap, simge yazı tipi dosyalarının derlenmiş CSS dosyalarına göre dizinde bulunacağını varsayar . Bu yazı tipi dosyalarını taşımak veya yeniden adlandırmak, CSS'yi üç yoldan biriyle güncellemek anlamına gelir:

Kaynak Daha az dosyadaki @icon-font-pathve/veya değişkenleri değiştirin .@icon-font-name
Daha az derleyici tarafından sağlanan göreli URL'ler seçeneğini kullanın .
url()Derlenmiş CSS'deki yolları değiştirin .

Özel geliştirme kurulumunuza en uygun seçeneği kullanın.

Erişilebilir simgeler

Yardımcı teknolojilerin modern sürümleri, CSS tarafından oluşturulan içeriğin yanı sıra belirli Unicode karakterlerini de duyurur. Ekran okuyucularda istenmeyen ve kafa karıştırıcı çıktılardan kaçınmak için (özellikle simgeler yalnızca dekorasyon için kullanıldığında), bunları aria-hidden="true"öznitelikle gizleriz.

Anlamı iletmek için bir simge kullanıyorsanız (yalnızca dekoratif bir öğe olarak değil), bu anlamın yardımcı teknolojilere de aktarıldığından emin olun - örneğin, görsel olarak .sr-onlysınıfa gizlenmiş ek içerik ekleyin.

Başka bir metin <button>içermeyen kontroller oluşturuyorsanız (yalnızca bir simge içerenler gibi), yardımcı teknolojilerin kullanıcılarına mantıklı gelmesi için kontrolün amacını belirlemek için her zaman alternatif içerik sağlamalısınız. aria-labelBu durumda, kontrolün kendisine bir öznitelik ekleyebilirsiniz .

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

Örnekler

Bunları düğmelerde, bir araç çubuğu için düğme gruplarında, gezinmede veya başa eklenen form girişlerinde kullanın.

<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

Bir uyarıda , bunun bir hata mesajı olduğunu iletmek için kullanılan ve .sr-onlybu ipucunu yardımcı teknolojilerin kullanıcılarına iletmek için ek metin içeren bir simge.

Geçerli bir e-posta adresi girin

<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Error:</span>
  Enter a valid email address
</div>

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 .

Örnek

Açılır menünün tetikleyicisini ve açılır menüyü içine .dropdownveya bildiren başka bir öğeye sarın position: relative;. Ardından menünün HTML'sini ekleyin.

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Açılır menüler, üst öğeye ekleyerek (aşağı yerine) yukarı doğru genişleyecek şekilde değiştirilebilir .dropup.

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

hizalama

Varsayılan olarak, bir açılır menü otomatik olarak üst öğesinin üst kısmından ve sol tarafında %100 olarak konumlandırılır. .dropdown-menu-righta'ya ekle .dropdown-menuaçılır menüyü sağa hizalayın.

<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
  ...
</ul>

Başlıklar

Herhangi bir açılır menüde eylemlerin bölümlerini etiketlemek için bir başlık ekleyin.

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
  ...
  <li class="dropdown-header">Dropdown header</li>
  ...
</ul>

bölücü

Bir açılır menüde bağlantı dizilerini ayırmak için bir ayırıcı ekleyin.

<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="separator" class="divider"></li>
  ...
</ul>

Devre dışı bırakılmış menü öğeleri

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

<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
  <li><a href="#">Regular link</a></li>
  <li class="disabled"><a href="#">Disabled link</a></li>
  <li><a href="#">Another link</a></li>
</ul>

Düğme grubuyla bir dizi düğmeyi tek bir satırda gruplayın. Düğme eklentimizle isteğe bağlı JavaScript radyo ve onay kutusu stili davranışı ekleyin .

Düğme gruplarındaki araç ipuçları ve açılır pencereler özel ayar gerektirir

içindeki öğelerde araç ipuçlarını veya açılır pencereleri kullanırken, istenmeyen yan etkilerden (araç ipucu veya açılır pencere tetiklendiğinde öğenin genişlemesi ve/veya yuvarlatılmış köşelerinin kaybolması gibi) kaçınma .btn-groupseçeneğini belirtmeniz gerekir .container: 'body'

Doğru olduğundan emin olun `role`ve bir etiket sağlayın

Ekran okuyucular gibi yardımcı teknolojilerin bir dizi düğmenin gruplandığını iletebilmesi için uygun bir roleözniteliğin sağlanması gerekir. Düğme grupları için bu role="group", araç çubuklarında bir role="toolbar".

Bir istisna, yalnızca tek bir denetim (örneğin, öğeler içeren iki yana yaslanmış düğme grupları<button> ) veya bir açılır liste içeren gruplardır.

Ek olarak, gruplara ve araç çubuklarına açık bir etiket verilmelidir, çünkü çoğu yardımcı teknoloji, doğru roleözniteliğin varlığına rağmen bunları duyurmaz. Burada verilen örneklerde kullanıyoruz aria-labelama gibi alternatifler aria-labelledbyde kullanılabilir.

Temel örnek

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

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

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

<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
</div>

boyutlandırma

Bir gruptaki her düğmeye düğme boyutlandırma sınıfları uygulamak yerine, birden çok grubu iç içe yerleştirirken de dahil olmak üzere yalnızca .btn-group-*her birine ekleyin..btn-group

<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>

yuvalama

Bir dizi düğmeyle karışık açılır menüler istediğinizde, a'yı .btn-groupdiğerinin içine yerleştirin ..btn-group

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

Dikey varyasyon

Bir dizi düğmenin yatay yerine dikey olarak yığılmış görünmesini sağlayın. Bölme düğmesi açılır menüleri burada desteklenmez.

<div class="btn-group-vertical" role="group" aria-label="...">
  ...
</div>

Yaslanmış düğme grupları

Bir grup düğmeyi, üst öğesinin tüm genişliğini kapsayacak şekilde eşit boyutlarda gerdirin. Ayrıca düğme grubu içindeki düğme açılır listeleriyle de çalışır.

Kenarlıkları işleme

Düğmeleri yaslamak için kullanılan belirli HTML ve CSS nedeniyle (yani display: table-cell), aralarındaki kenarlıklar iki katına çıkar. Normal düğme gruplarında, margin-left: -1pxkenarlıkları kaldırmak yerine yığmak için kullanılır. Ancak, marginile çalışmıyor display: table-cell. Sonuç olarak, Bootstrap özelleştirmelerinize bağlı olarak, kenarlıkları kaldırmak veya yeniden renklendirmek isteyebilirsiniz.

IE8 ve sınırlar

<a>Internet Explorer 8, açık veya <button>öğeler olsun, iki yana yaslanmış bir düğme grubundaki düğmelerde kenarlıklar oluşturmaz . Bunu aşmak için, her düğmeyi başka bir düğmeye sarın .btn-group.

Daha fazla bilgi için #12476'ya bakın.

`<a>`Elemanlarla _

Bir dizi .btns sarmanız yeterlidir .btn-group.btn-group-justified.

Ayrıldı Orta Doğru

Ayrıldı Orta

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  ...
</div>

Düğme görevi gören bağlantılar

Öğeler, geçerli sayfadaki başka bir belgeye veya bölüme gitmek yerine sayfa içi işlevselliği tetikleyen düğmeler olarak kullanılıyorsa , <a>bunlara ayrıca uygun bir role="button".

`<button>`Elemanlarla _

<button>Öğelerle hizalanmış düğme gruplarını kullanmak için her düğmeyi bir düğme grubuna sarmanız gerekir . Çoğu tarayıcı, öğelerin gerekçelendirilmesi için CSS'imizi düzgün şekilde uygulamaz <button>, ancak düğme açılır listelerini desteklediğimiz için bu sorunu çözebiliriz.

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Left</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Middle</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Right</button>
  </div>
</div>

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.

Eklenti bağımlılığı

Düğme açılır listeleri, açılır liste eklentisinin Bootstrap sürümünüze dahil edilmesini gerektirir.

Tek düğmeli açılır menüler

Bazı temel biçimlendirme değişiklikleriyle bir düğmeyi açılır bir geçişe dönüştürün.

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

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

Benzer şekilde, yalnızca ayrı bir düğmeyle, aynı biçimlendirme değişiklikleriyle bölünmüş düğme açılır listeleri oluşturun.

<!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

boyutlandırma

Düğme açılır menüleri, her boyuttaki düğmelerle çalışır.

<!-- Large button group -->
<div class="btn-group">
  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Extra small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Extra small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

Açılan varyasyon

.dropupÜst öğeye ekleyerek öğelerin üzerindeki açılır menüleri tetikleyin .

<div class="btn-group dropup">
  <button type="button" class="btn btn-default">Dropup</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Metin tabanlı herhangi bir metnin önüne, arkasına veya her iki tarafına metin veya düğmeler ekleyerek form denetimlerini genişletin <input>. Öğeleri tek bir öğenin başına veya sonuna eklemek için veya .input-groupile kullanın ..input-group-addon.input-group-btn.form-control

Yalnızca metinsel `<input>`s

<select>WebKit tarayıcılarında tam olarak biçimlendirilemeyecekleri için burada öğeleri kullanmaktan kaçının .

Bazı durumlarda özniteliklerine saygı gösterilmeyeceği için <textarea>öğeleri burada kullanmaktan kaçının .rows

Giriş gruplarındaki araç ipuçları ve popover'lar özel ayar gerektirir

Bir içindeki öğelerde araç ipuçlarını veya açılır pencereleri kullanırken, istenmeyen yan etkilerden (araç ipucu veya açılır pencere tetiklendiğinde öğenin genişlemesi ve/veya yuvarlatılmış köşelerinin kaybolması gibi) kaçınma .input-groupseçeneğini belirtmeniz gerekir .container: 'body'

Diğer bileşenlerle karıştırmayın

Form gruplarını veya ızgara sütun sınıflarını doğrudan giriş gruplarıyla karıştırmayın. Bunun yerine, giriş grubunu form grubunun veya ızgarayla ilgili öğenin içine yerleştirin.

Her zaman etiket ekle

Her giriş için bir etiket eklemezseniz, ekran okuyucular formlarınızda sorun yaşar. Bu girdi grupları için, herhangi bir ek etiket veya işlevin yardımcı teknolojilere iletildiğinden emin olun.

Kullanılacak tam teknik (görünür <label>öğeler, sınıf <label>kullanılarak gizlenen öğeler veya , , veya özniteliğin kullanımı) ve hangi ek bilgilerin iletilmesi gerekeceği, uyguladığınız arabirim widget'ının tam türüne bağlı olarak değişecektir . Bu bölümdeki örnekler, önerilen birkaç vakaya özel yaklaşım sağlar..sr-onlyaria-labelaria-labelledbyaria-describedbytitleplaceholder

Temel örnek

Bir girişin her iki tarafına bir eklenti veya düğme yerleştirin. Bir girişin her iki tarafına da bir tane yerleştirebilirsiniz.

Tek bir tarafta birden fazla eklentiyi ( .input-group-addonveya ) desteklemiyoruz..input-group-btn

Tek bir giriş grubunda birden çok form denetimini desteklemiyoruz.

<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>

<label for="basic-url">Your vanity URL</label>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

boyutlandırma

Göreceli form boyutlandırma sınıflarını .input-groupkendisine ekleyin ve içindeki içerik otomatik olarak yeniden boyutlandırılacaktır; her öğede form kontrol boyutu sınıflarını tekrarlamaya gerek yoktur.

<div class="input-group input-group-lg">
  <span class="input-group-addon" id="sizing-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>

<div class="input-group">
  <span class="input-group-addon" id="sizing-addon2">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>

<div class="input-group input-group-sm">
  <span class="input-group-addon" id="sizing-addon3">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>

Onay kutuları ve radyo eklentileri

Metin yerine bir giriş grubunun eklentisine herhangi bir onay kutusu veya radyo seçeneği yerleştirin.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="radio" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Düğme eklentileri

Giriş gruplarındaki düğmeler biraz farklıdır ve fazladan bir iç içe yerleştirme düzeyi gerektirir. Bunun yerine , düğmeleri sarmak .input-group-addoniçin kullanmanız gerekir . .input-group-btnBu, geçersiz kılınamayan varsayılan tarayıcı stilleri nedeniyle gereklidir.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" class="form-control" placeholder="Search for...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Açılır menülü düğmeler

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" aria-label="...">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Parçalı düğmeler

<div class="input-group">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
</div>

Çoklu düğmeler

Her tarafta yalnızca bir eklentiniz olabilirken, tek bir .input-group-btn.

<div class="input-group">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
</div>

Bootstrap'ta bulunan gezinmeler, temel .navsınıftan başlayarak paylaşılan işaretlemelerin yanı sıra paylaşılan durumlara sahiptir. Her stil arasında geçiş yapmak için değiştirici sınıfları değiştirin.

Sekme panelleri için gezinmeyi kullanmak JavaScript sekmeleri eklentisi gerektirir

Sekme alanları olan sekmeler için sekmeler JavaScript eklentisini kullanmalısınız . İşaretleme ayrıca ek roleve ARIA öznitelikleri gerektirecektir - daha fazla ayrıntı için eklentinin örnek işaretlemesine bakın.

Navigasyon olarak kullanılan navigasyonları erişilebilir yap

Gezinti çubuğu sağlamak için navs kullanıyorsanız, role="navigation"öğesinin en mantıklı üst kapsayıcısına a eklediğinizden veya tüm gezinmenin etrafına <ul>bir öğe sardığınızdan emin olun. <nav>Rolü <ul>kendisine eklemeyin, çünkü bu, yardımcı teknolojiler tarafından gerçek bir liste olarak duyurulmasını engeller.

Sekmeler

Sınıfın temel .nav-tabssınıf gerektirdiğini unutmayın ..nav

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

haplar

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

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

Haplar ayrıca dikey olarak istiflenebilir. Sadece ekleyin .nav-stacked.

<ul class="nav nav-pills nav-stacked">
  ...
</ul>

Haklı

ile 768 pikselden daha geniş ekranlarda sekmeleri veya hapları ebeveynleriyle eşit genişlikte kolayca yapın .nav-justified. Daha küçük ekranlarda, gezinme bağlantıları yığılmıştır.

Yaslanmış gezinme çubuğu gezinme bağlantıları şu anda desteklenmemektedir.

Safari ve duyarlı gerekçeli navigasyonlar

v9.1.2'den itibaren Safari, tarayıcınızı yatay olarak yeniden boyutlandırmanın, gerekçeli gezinmede yenileme sırasında temizlenen oluşturma hatalarına neden olduğu bir hata sergiler. Bu hata, gerekçeli gezinme örneğinde de gösterilmiştir .

<ul class="nav nav-tabs nav-justified">
  ...
</ul>
<ul class="nav nav-pills nav-justified">
  ...
</ul>

Devre dışı bırakılan bağlantılar

Herhangi bir gezinme bileşeni (sekmeler veya haplar) .disablediçin gri bağlantılar ekleyin ve fareyle üzerine gelme efekti yok .

Bağlantı işlevi etkilenmedi

Bu sınıf <a>, işlevselliğini değil, yalnızca görünümünü değiştirecektir. Buradaki bağlantıları devre dışı bırakmak için özel JavaScript kullanın.

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
  ...
</ul>

Açılır menüleri kullanma

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

Açılan sekmeler

<ul class="nav nav-tabs">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

Açılan haplar

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

Gezinti çubukları, uygulamanız veya siteniz için gezinme üstbilgileri görevi gören duyarlı meta bileşenlerdir. Mobil görünümlerde daraltılmaya (ve değiştirilebilir) başlarlar ve kullanılabilir görünüm alanı genişliği arttıkça yatay hale gelirler.

Yaslanmış gezinme çubuğu gezinme bağlantıları şu anda desteklenmemektedir.

taşan içerik

Bootstrap, gezinme çubuğunuzdaki içeriğin ne kadar alana ihtiyacı olduğunu bilmediğinden, içeriği ikinci bir satıra sarmayla ilgili sorunlarla karşılaşabilirsiniz. Bunu çözmek için şunları yapabilirsiniz:

Gezinme çubuğu öğelerinin miktarını veya genişliğini azaltın.
Duyarlı yardımcı program sınıflarını kullanarak belirli gezinme öğelerini belirli ekran boyutlarında gizleyin .
Gezinme çubuğunuzun daraltılmış ve yatay mod arasında geçiş yaptığı noktayı değiştirin. Değişkeni özelleştirin @grid-float-breakpointveya kendi medya sorgunuzu ekleyin.

Daraltılmış mobil gezinme çubuğu kesme noktasını değiştirme

Gezinme çubuğu, görünüm alanı 'den daha dar olduğunda dikey mobil görünümüne daralır @grid-float-breakpointve görünüm alanı en azından @grid-float-breakpointgenişlikte olduğunda yatay mobil olmayan görünümüne genişler. Gezinme çubuğunun ne zaman çökeceğini/genişleyeceğini kontrol etmek için Daha Az kaynakta bu değişkeni ayarlayın. Varsayılan değerdir 768px(en küçük "küçük" veya "tablet" ekranı).

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Metni bir <img>. Kendi dolgusu ve yüksekliği olduğundan .navbar-brand, resminize bağlı olarak bazı CSS'leri geçersiz kılmanız gerekebilir.

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="...">
      </a>
    </div>
  </div>
</nav>

.navbar-formDar görünümlerde uygun dikey hizalama ve daraltılmış davranış için form içeriğini içine yerleştirin. Gezinme çubuğu içeriğinde nerede olduğuna karar vermek için hizalama seçeneklerini kullanın.

Bir başlık .navbar-formolarak, kodunun çoğunu .form-inlinemixin ile paylaşır. Giriş grupları gibi bazı form denetimleri, bir gezinme çubuğunda düzgün bir şekilde görüntülenmesi için sabit genişlikler gerektirebilir.

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Her zaman etiket ekle

Her giriş için bir etiket eklemezseniz, ekran okuyucular formlarınızda sorun yaşar. .sr-onlyBu satır içi formlar için sınıfı kullanarak etiketleri gizleyebilirsiniz . aria-label, aria-labelledbyveya titleözniteliği gibi yardımcı teknolojiler için bir etiket sağlamanın başka alternatif yöntemleri de vardır . placeholderBunların hiçbiri yoksa, ekran okuyucular , varsa , özniteliği kullanmaya başvurabilir , ancak placeholderdiğer etiketleme yöntemlerinin yerine kullanılmasının önerilmediğini unutmayın.

.navbar-btnSınıfı , gezinme çubuğunda dikey olarak ortalamak için <button>içinde bulunmayan öğelere ekleyin .<form>

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

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

<p class="navbar-text">Signed in as Mark Otto</p>

Normal gezinme çubuğu gezinme bileşeninde olmayan standart bağlantıları kullanan kişiler .navbar-linkiçin, varsayılan ve ters gezinme çubuğu seçenekleri için uygun renkleri eklemek için sınıfı kullanın.

<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>

.navbar-leftveya .navbar-rightyardımcı program sınıflarını kullanarak gezinme bağlantılarını, formları, düğmeleri veya metni hizalayın . Her iki sınıf da belirtilen yönde bir CSS şamandırası ekleyecektir. Örneğin, gezinme bağlantılarını hizalamak için, bunları <ul>uygulanan ilgili yardımcı program sınıfıyla ayrı bir yere koyun.

.pull-leftBu sınıflar ve öğesinin karma sürümleridir .pull-right, ancak gezinme çubuğu bileşenlerinin cihaz boyutlarında daha kolay işlenmesi için ortam sorgularına yöneliktir.

.navbar-fixed-topBir .containerveya .container-fluidortala ve gezinme çubuğu içeriğini ekleyin ve ekleyin.

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

Gövde dolgusu gerekli

paddingDosyanın en üstüne eklemediğiniz sürece, sabit gezinme çubuğu diğer içeriğinizi kaplar <body>. Kendi değerlerinizi deneyin veya aşağıdaki snippet'imizi kullanın. İpucu: Varsayılan olarak, gezinme çubuğu 50 piksel yüksekliğindedir.

body { padding-top: 70px; }

Bunu , temel Bootstrap CSS'den sonra eklediğinizden emin olun .

.navbar-fixed-bottomBir .containerveya .container-fluidortala ve gezinme çubuğu içeriğini ekleyin ve ekleyin.

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

Gövde dolgusu gerekli

paddingDosyanın altına eklemediğiniz sürece, sabit gezinme çubuğu diğer içeriğinizi kaplar <body>. Kendi değerlerinizi deneyin veya aşağıdaki snippet'imizi kullanın. İpucu: Varsayılan olarak, gezinme çubuğu 50 piksel yüksekliğindedir.

body { padding-bottom: 70px; }

Bunu , temel Bootstrap CSS'den sonra eklediğinizden emin olun .

Bir or to center ve pad gezinme çubuğu içeriği ekleyerek .navbar-static-topve ekleyerek sayfayla birlikte kayan tam genişlikte bir gezinme çubuğu oluşturun ..container.container-fluid

Sınıflardan farklı olarak, .navbar-fixed-*üzerinde herhangi bir dolguyu değiştirmeniz gerekmez body.

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

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

<nav class="navbar navbar-inverse">
  ...
</nav>

Galeta unu

Gezinme hiyerarşisi içinde geçerli sayfanın konumunu belirtin.

:beforeAyırıcılar, ve aracılığıyla CSS'ye otomatik olarak eklenir content.

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

sayfalandırma

Çok sayfalı sayfalandırma bileşeni veya daha basit çağrı cihazı alternatifi ile siteniz veya uygulamanız için sayfalandırma bağlantıları sağlayın .

Varsayılan 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.

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </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="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

Sayfalandırma bileşenini etiketleme

<nav>Sayfalandırma bileşeni, onu ekran okuyucuları ve diğer yardımcı teknolojiler için bir gezinme bölümü olarak tanımlamak için bir öğeye sarılmalıdır . Ek olarak, bir sayfada bu tür birden fazla gezinme bölümü olması muhtemel olduğundan (başlıktaki birincil gezinme veya kenar çubuğu gezinme gibi), amacını yansıtan bir açıklayıcı aria-labelsağlanması tavsiye edilir. <nav>Örneğin, sayfalandırma bileşeni bir dizi arama sonucu arasında gezinmek için kullanılıyorsa, uygun bir etiket olabilir aria-label="Search results pages".

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 .

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
    ...
  </ul>
</nav>

<span>Hedeflenen stilleri korurken tıklama işlevini kaldırmak için etkin veya devre dışı bırakılmış bağlantıları yerine geçirmenizi veya önceki/sonraki oklar olması durumunda bağlantıyı çıkarmanızı öneririz .

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled">
      <span>
        <span aria-hidden="true">&laquo;</span>
      </span>
    </li>
    <li class="active">
      <span>1 <span class="sr-only">(current)</span></span>
    </li>
    ...
  </ul>
</nav>

boyutlandırma

Daha büyük veya daha küçük sayfalandırma mı istiyorsunuz? Ekle .pagination-lgveya .pagination-smek boyutlar için.

<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>

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

<nav aria-label="...">
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>

Hizalanmış bağlantılar

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

<nav aria-label="...">
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

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

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

<nav aria-label="...">
  <ul class="pager">
    <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

Örnek

Örnek başlık Yeni

<h3>Example heading <span class="label label-default">New</span></h3>

Mevcut varyasyonlar

Bir etiketin görünümünü değiştirmek için aşağıda belirtilen değiştirici sınıflardan herhangi birini ekleyin.

Varsayılan Birincil Başarı Bilgisi Uyarı Tehlike

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

Tonlarca etiket var mı?

Dar bir kap içinde her biri kendi inline-blocköğesini (bir simge gibi) içeren düzinelerce satır içi etiketiniz olduğunda oluşturma sorunları ortaya çıkabilir. Bunu aşmanın yolu ayardır display: inline-block;. Bağlam ve bir örnek için bkz. #13219 .

<span class="badge">Bağlantıları, Bootstrap gezinmelerini ve daha fazlasını ekleyerek yeni veya okunmamış öğeleri kolayca vurgulayın .

Gelen kutusu42

<a href="#">Inbox <span class="badge">42</span></a>

<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button>

kendi kendine çöken

Yeni veya okunmamış öğe olmadığında, :emptyiçinde herhangi bir içerik bulunmadığı sürece rozetler (CSS seçici aracılığıyla) basitçe çökecektir.

Tarayıcılar arası uyumluluk

:emptyRozetler, seçici desteği olmadığı için Internet Explorer 8'de kendiliğinden çökmez .

Aktif gezinme durumlarına uyum sağlar

Hap navigasyonlarında aktif durumdaki rozetleri yerleştirmek için yerleşik stiller dahildir.

<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>

İsteğe bağlı olarak sitenizdeki önemli içeriği sergilemek için tüm görünümü genişletebilen hafif, esnek bir bileşen.

Selam Dünya!

Bu basit bir kahraman birimi, öne çıkan içerik veya bilgilere ekstra dikkat çekmek için basit bir jumbotron tarzı bileşendir.

Daha fazla bilgi edin

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

Jumbotronu tam genişlikte ve yuvarlatılmış köşeler olmadan yapmak için, onu tüm s'lerin dışına yerleştirin .containerve bunun yerine bir iç ekleyin .container.

<div class="jumbotron">
  <div class="container">
    ...
  </div>
</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 varsayılan smallöğesini ve diğer bileşenlerin çoğunu (ek stillerle) kullanabilir .

<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

Görüntü, video, metin ve daha fazlasının ızgaralarını kolayca görüntülemek için Bootstrap'in ızgara sistemini küçük resim bileşeniyle genişletin.

Farklı yüksekliklerde ve/veya genişliklerde küçük resimlerin Pinterest benzeri bir sunumunu arıyorsanız, Masonry , Isotope veya Salvattore gibi bir üçüncü taraf eklentisi kullanmanız gerekir .

Varsayılan örnek

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.

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." alt="...">
    </a>
  </div>
  ...
</div>

Özel içerik

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.

Buton Buton

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.

Buton Buton

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.

Buton Buton

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>

Bir avuç kullanılabilir ve esnek uyarı mesajıyla tipik kullanıcı eylemleri için bağlamsal geri bildirim mesajları sağlayın.

Örnekler

Herhangi bir metni ve isteğe bağlı bir kapatma düğmesini temel uyarı mesajları için .alertdört bağlamsal sınıftan birine (örn. ) sarın..alert-success

Varsayılan sınıf yok

Uyarıların varsayılan sınıfları yoktur, yalnızca temel ve değiştirici sınıfları vardır. Varsayılan bir gri uyarı çok anlamlı değildir, bu nedenle bağlamsal sınıf aracılığıyla bir tür belirtmeniz gerekir. Başarı, bilgi, uyarı veya tehlike arasından seçim yapın.

Aferin! Bu önemli uyarı mesajını başarıyla okudunuz.

Önüne bak! Bu uyarıya dikkat etmeniz gerekiyor, ancak çok önemli değil.

Uyarı! Kendini kontrol etsen iyi olur, pek iyi görünmüyorsun.

Çabuk! Birkaç şeyi değiştirin ve tekrar göndermeyi deneyin.

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

Kapatılabilir uyarılar

.alert-dismissibleİsteğe bağlı ve kapat düğmesi ekleyerek herhangi bir uyarı oluşturun .

JavaScript uyarı eklentisi gerektirir

Tam olarak işleyen, kapatılabilir uyarılar içinTam olarak işleyen, kapatılabilir uyarılar için uyarılar JavaScript eklentisini .

Uyarı! Kendini kontrol etsen iyi olur, pek iyi görünmüyorsun.

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

Tüm cihazlarda doğru davranışı sağlayın

<button>elemanı ile birlikte kullandığınızdan emin olun .data-dismiss="alert" data özniteliği

Uyarılardaki bağlantılar

.alert-linkHerhangi bir uyarı içinde hızlı bir şekilde eşleşen renkli bağlantılar sağlamak için yardımcı program sınıfını kullanın .

Aferin! Bu önemli uyarı mesajını başarıyla okudunuz .

Önüne bak! Bu uyarıyla ilgilenmeniz gerekiyor , ancak çok önemli değil.

Uyarı! Kendini kontrol etsen iyi olur, pek iyi görünmüyorsun .

Çabuk! Birkaç şeyi değiştirin ve tekrar göndermeyi deneyin.

<div class="alert alert-success" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
  <a href="#" class="alert-link">...</a>
</div>

Basit ama esnek ilerleme çubuklarıyla bir iş akışının veya eylemin ilerlemesi hakkında güncel geri bildirim sağlayın.

Tarayıcılar arası uyumluluk

İlerleme çubukları, bazı efektlerini elde etmek için CSS3 geçişlerini ve animasyonlarını kullanır. Bu özellikler, Internet Explorer 9 ve altı ya da Firefox'un daha eski sürümlerinde desteklenmez. Opera 12, animasyonları desteklemez.

İçerik Güvenliği Politikası (CSP) uyumluluğu

Web sitenizde buna izin vermeyen bir İçerik Güvenliği Politikası (CSP) varsa, aşağıdaki örneklerimizde gösterildiği gibi ilerleme çubuğu genişliklerini ayarlamak style-src 'unsafe-inline'için satır içi öznitelikleri kullanamazsınız . styleSıkı CSP'lerle uyumlu genişlikleri ayarlamaya yönelik alternatif yöntemler, küçük bir özel JavaScript (ayarlar element.style.width) veya özel CSS sınıfları kullanmayı içerir.

Temel örnek

Varsayılan ilerleme çubuğu.

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

etiketli

Görünür bir yüzde göstermek için ilerleme çubuğunun içinden <span>with sınıfını kaldırın ..sr-only

%60

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>

Düşük yüzdelerde bile etiket metninin okunaklı kalmasını sağlamak min-widthiçin ilerleme çubuğuna bir eklemeyi düşünün.

%0

%2

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
    0%
  </div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
    2%
  </div>
</div>

bağlamsal alternatifler

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

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

Çizgili

Çizgili bir efekt oluşturmak için bir degrade kullanır. IE9 ve altında mevcut değildir.

<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

animasyonlu

Sağdan sola şeritleri canlandırmak için .activeekleyin . .progress-bar-stripedIE9 ve altında mevcut değildir.

<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="sr-only">45% Complete</span>
  </div>
</div>

Yığılmış

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

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

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 medya

Varsayılan medya, içerik bloğunun solunda veya sağında bir medya nesnesi (görüntüler, video, ses) görüntüler.

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.

İç içe 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.

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.

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

.pull-leftve sınıfları .pull-rightda mevcuttur ve daha önce medya bileşeninin bir parçası olarak kullanılmıştır, ancak v3.3.0'dan itibaren bu kullanım için kullanımdan kaldırılmıştır. Bunlar yaklaşık olarak .media-leftve ile eşdeğerdir .media-right, bunun dışında .media-righthtml'dekinden sonra yerleştirilmelidir .media-body.

Medya hizalama

Görüntüler veya diğer ortamlar üste, ortaya veya aşağıya hizalanabilir. Varsayılan, üste hizalanmıştır.

Üst hizalanmış ortam

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.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus ve magnis doğumdan uzak montes, nascetur ridiculus mus.

Orta hizalanmış ortam

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.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus ve magnis doğumdan uzak montes, nascetur ridiculus mus.

Alt hizalanmış medya

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.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus ve magnis doğumdan uzak montes, nascetur ridiculus mus.

<div class="media">
  <div class="media-left media-middle">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Middle aligned media</h4>
    ...
  </div>
</div>

Medya listesi

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

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.

İç içe 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.

İç içe 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.

İç içe 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.

<ul class="media-list">
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img class="media-object" src="..." alt="...">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
    </div>
  </li>
</ul>

Liste grupları, yalnızca basit öğe listelerini değil, aynı zamanda özel içerikli karmaşık listeleri de görüntülemek için esnek ve güçlü bir bileşendir.

Temel örnek

En temel liste grubu, liste öğelerini ve uygun sınıfları içeren sırasız bir listedir. Takip eden seçeneklerle veya gerektiğinde kendi CSS'nizle bunun üzerine inşa edin.

cras justo odio
Dapibus ac tesisi
morbi aslan burcu
Porta ac conectetur ac
Vestibulum ve eros

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

Rozetler

Rozetler bileşenini herhangi bir liste grubu öğesine eklediğinizde, otomatik olarak sağda konumlandırılacaktır.

14cras justo odio
2Dapibus ac tesisi
1morbi aslan burcu

<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

Bağlantılı öğeler

Liste öğeleri yerine bağlantı etiketleri kullanarak liste grubu öğelerini birbirine bağlayın (bu, aynı zamanda , <div>yerine bir üst öğe anlamına gelir <ul>). Her öğenin etrafında bireysel ebeveynlere gerek yok.

cras justo odio Dapibus ac tesisi morbi aslan burcu Porta ac conectetur ac Vestibulum ve eros

<div class="list-group">
  <a href="#" class="list-group-item active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

Düğme öğeleri

Liste grubu öğeleri, liste öğeleri yerine düğmeler olabilir (bu, aynı zamanda bir <div>yerine bir üst öğe anlamına gelir <ul>). Her öğenin etrafında bireysel ebeveynlere gerek yok. Burada standart .btnsınıfları kullanmayın.

<div class="list-group">
  <button type="button" class="list-group-item">Cras justo odio</button>
  <button type="button" class="list-group-item">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item">Morbi leo risus</button>
  <button type="button" class="list-group-item">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item">Vestibulum at eros</button>
</div>

Devre dışı bırakılmış öğeler

Devre dışı görünmesi için griye .disabledekleyin ..list-group-item

cras justo odio Dapibus ac tesisi morbi aslan burcu Porta ac conectetur ac Vestibulum ve eros

<div class="list-group">
  <a href="#" class="list-group-item disabled">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

bağlamsal sınıflar

Varsayılan veya bağlantılı liste öğelerine stil vermek için bağlamsal sınıfları kullanın. Ayrıca .activedevlet içerir.

Dapibus ac tesisi
Cras sit amet nibh libero
Porta ac conectetur ac
Vestibulum ve eros

Dapibus ac tesisi Cras sit amet nibh libero Porta ac conectetur ac Vestibulum ve eros

<ul class="list-group">
  <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
  <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
  <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
  <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>

Özel içerik

Aşağıdaki gibi bağlantılı liste grupları için bile hemen hemen her HTML'yi ekleyin.

Liste grubu öğesi başlığı

Donec id, eget metus'ta elit olmayan porta gravida. Maecenas sed diam eget risus varius blandit.

Liste grubu öğesi başlığı

Donec id, eget metus'ta elit olmayan porta gravida. Maecenas sed diam eget risus varius blandit.

Liste grubu öğesi başlığı

Donec id, eget metus'ta elit olmayan porta gravida. Maecenas sed diam eget risus varius blandit.

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>

Her zaman gerekli olmasa da bazen DOM'unuzu bir kutuya koymanız gerekir. Bu durumlar için panel bileşenini deneyin.

Temel örnek

Varsayılan olarak, tüm yapılması .panelgereken, bazı içeriği içermek için bazı temel kenarlık ve dolgu uygulamaktır.

Temel panel örneği

<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

Başlıklı panel

ile panelinize kolayca bir başlık kabı ekleyin .panel-heading. Ayrıca, önceden biçimlendirilmiş bir başlık eklemek için herhangi bir - sınıfı da ekleyebilirsiniz <h1>. Ancak, yazı tipi boyutları - tarafından geçersiz kılınır .<h6>.panel-title<h1><h6>.panel-heading

Doğru bağlantı renklendirmesi için, bağlantıları içindeki başlıklara yerleştirdiğinizden emin olun .panel-title.

Başlıksız panel başlığı

Panel içeriği

Panel başlığı

Panel içeriği

<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

Altbilgili panel

Düğmeleri veya ikincil metni .panel-footer. Ön planda olmaları amaçlanmadığından, bağlamsal varyasyonlar kullanılırken panel altbilgilerinin renkleri ve kenarlıkları devralmadığını unutmayın .

Panel içeriği

Panel altbilgisi

<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

bağlamsal alternatifler

Diğer bileşenler gibi, bağlamsal durum sınıflarından herhangi birini ekleyerek bir paneli belirli bir bağlam için kolayca daha anlamlı hale getirin.

Panel başlığı

Panel içeriği

Panel başlığı

Panel içeriği

Panel başlığı

Panel içeriği

Panel başlığı

Panel içeriği

Panel başlığı

Panel içeriği

<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>

tablolarla

.tableKusursuz bir tasarım için bir panelin içine kenarlıksız olanları ekleyin . Varsa .panel-body, ayırma için tablonun üst kısmına fazladan bir kenarlık ekliyoruz.

Panel başlığı

Burada bazı varsayılan panel içeriği. Nulla vitae seçkin libero, bir pharetra augue. Aenean lacinia bibendum nulla sed conectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam kimliği dolor kimliği nibh ultricies vehicula ut id elit.

#	İlk adı	Soy isim	Kullanıcı adı
1	İşaret	Otto	@mdo
2	Yakup	Thornton	@yağ
3	Larry	kuş	@twitter

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

Panel gövdesi yoksa, bileşen panel başlığından tabloya kesintisiz hareket eder.

Panel başlığı

#	İlk adı	Soy isim	Kullanıcı adı
1	İşaret	Otto	@mdo
2	Yakup	Thornton	@yağ
3	Larry	kuş	@twitter

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

Liste gruplarıyla

Tam genişlikte liste gruplarını herhangi bir panele kolayca dahil edin.

Panel başlığı

Burada bazı varsayılan panel içeriği. Nulla vitae seçkin libero, bir pharetra augue. Aenean lacinia bibendum nulla sed conectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam kimliği dolor kimliği nibh ultricies vehicula ut id elit.

cras justo odio
Dapibus ac tesisi
morbi aslan burcu
Porta ac conectetur ac
Vestibulum ve eros

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- List group -->
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Tarayıcıların, herhangi bir cihazda uygun şekilde ölçeklenecek bir içsel oran oluşturarak, içeren bloklarının genişliğine dayalı olarak video veya slayt gösterisi boyutlarını belirlemesine izin verin.

Kurallar doğrudan <iframe>, <embed>, <video>ve <object>öğelerine uygulanır; .embed-responsive-itemdiğer niteliklerin stilini eşleştirmek istediğinizde isteğe bağlı olarak açık bir alt sınıf kullanın .

Profesyonel İpucu! frameborder="0"Bunu sizin <iframe>için geçersiz kıldığımız için s'nize eklemeniz gerekmez .

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

Varsayılan kuyu

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

Bak, bir kuyudayım!

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

Bak, büyük bir kuyudayım!

<div class="well well-lg">...</div>

Bak, küçük bir kuyudayım!

<div class="well well-sm">...</div>

Bileşenler

glifonlar

Kullanılabilir glifler

Nasıl kullanılır

Diğer bileşenlerle karıştırmayın

Sadece boş elemanlarda kullanım için

Simge yazı tipi konumunu değiştirme

Erişilebilir simgeler

Örnekler

açılır menüler

Örnek

hizalama

Ek konumlandırma gerektirebilir

Kullanımdan kaldırılmış .pull-righthizalama

Başlıklar

bölücü

Devre dışı bırakılmış menü öğeleri

Düğme grupları

Düğme gruplarındaki araç ipuçları ve açılır pencereler özel ayar gerektirir

Doğru olduğundan emin olun roleve bir etiket sağlayın

Temel örnek

Düğme araç çubuğu

boyutlandırma

yuvalama

Dikey varyasyon

Yaslanmış düğme grupları

Kenarlıkları işleme

IE8 ve sınırlar

<a>Elemanlarla _

Düğme görevi gören bağlantılar

<button>Elemanlarla _

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

Eklenti bağımlılığı

Tek düğmeli açılır menüler

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

boyutlandırma

Açılan varyasyon

Giriş grupları

Yalnızca metinsel <input>s

Giriş gruplarındaki araç ipuçları ve popover'lar özel ayar gerektirir

Diğer bileşenlerle karıştırmayın

Her zaman etiket ekle

Temel örnek

boyutlandırma

Onay kutuları ve radyo eklentileri

Düğme eklentileri

Açılır menülü düğmeler

Parçalı düğmeler

Çoklu düğmeler

Gezinmeler

Sekme panelleri için gezinmeyi kullanmak JavaScript sekmeleri eklentisi gerektirir

Navigasyon olarak kullanılan navigasyonları erişilebilir yap

Sekmeler

haplar

Haklı

Safari ve duyarlı gerekçeli navigasyonlar

Devre dışı bırakılan bağlantılar

Bağlantı işlevi etkilenmedi

Açılır menüleri kullanma

Açılan sekmeler

Açılan haplar

gezinme çubuğu

Varsayılan gezinme çubuğu

taşan içerik

JavaScript eklentisi gerektirir

Daraltılmış mobil gezinme çubuğu kesme noktasını değiştirme

Gezinme çubuklarını erişilebilir yap

Marka imajı

Formlar

Mobil cihaz uyarıları

Her zaman etiket ekle

Düğmeler

Bağlama özel kullanım

Metin

Gezinmeyen bağlantılar

Bileşen hizalama

Birden çok bileşeni sağa hizalama

Üste sabitlendi

Gövde dolgusu gerekli

Alt sabit

Kullanımdan kaldırılmış `.pull-right`hizalama

Doğru olduğundan emin olun `role`ve bir etiket sağlayın

`<a>`Elemanlarla _

`<button>`Elemanlarla _

Yalnızca metinsel `<input>`s