Bileşenler

Navigasyon, uyarılar, açılır pencereler ve çok daha fazlasını sağlamak için Bootstrap'ta düzinelerce yeniden kullanılabilir bileşen yerleşiktir.

Düğme grupları

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

En iyi uygulamalar

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

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

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

Varsayılan örnek

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

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

Araç çubuğu örneği

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

  1. <div sınıfı = "btn-araç çubuğu" >
  2. <div sınıfı = "btn grubu" >
  3. ...
  4. </div>
  5. </div>

Onay kutusu ve radyo aromaları

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

Javascript'i edinin »

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

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

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

Genel bakış ve örnekler

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

Örnek işaretleme

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

  1. <div sınıfı = "btn grubu" >
  2. <a class = "btn açılır-geçiş" data-toggle = "açılır menü" href = "#" >
  3. Eylem
  4. <span class = "şapka" ></span>
  5. </a>
  6. <ul class = "açılır menü" >
  7. <!-- açılır menü bağlantıları -->
  8. </ul>
  9. </div>

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

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

javascript gerektirir

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

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


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

Genel bakış ve örnekler

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

Boyutlar

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

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

Örnek işaretleme

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

  1. <div sınıfı = "btn grubu" >
  2. <button class = "btn" > Eylem </button>
  3. <button class = "btn açılır-geçiş" data-toggle = "açılır menü" >
  4. <span class = "şapka" ></span>
  5. </button>
  6. <ul class = "açılır menü" >
  7. <!-- açılır menü bağlantıları -->
  8. </ul>
  9. </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.

  1. <div class = "btn-group drop-up" >
  2. <button class = "btn" > Açılır Pencere </button>
  3. <button class = "btn açılır-geçiş" data-toggle = "açılır menü" >
  4. <span class = "şapka" ></span>
  5. </button>
  6. <ul class = "açılır menü" >
  7. <!-- açılır menü bağlantıları -->
  8. </ul>
  9. </div>

Çoklu sayfa sayfalandırma

Ne zaman kullanılır

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

Durum bilgisi olan sayfa bağlantıları

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

Esnek hizalama

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

Örnekler

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

İşaretleme

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

  1. <div sınıfı = "sayfalandırma" >
  2. <ul>
  3. <li><a href = "#" > Önceki </a></li>
  4. <li sınıf = "etkin" >
  5. <a href = "#" > 1 </a>
  6. </li>
  7. <li><a href = "#" > 2 </a></li>
  8. <li><a href = "#" > 3 </a></li>
  9. <li><a href = "#" > 4 ​​</a></li>
  10. <li><a href = "#" > Sonraki </a></li>
  11. </ul>
  12. </div>

Çağrı Cihazı Hızlı önceki ve sonraki bağlantılar için

Çağrı cihazı hakkında

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

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

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

Varsayılan örnek

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

  1. <ul class = "çağrı cihazı" >
  2. <li>
  3. <a href = "#" > Önceki </a>
  4. </li>
  5. <li>
  6. <a href = "#" > Sonraki </a>
  7. </li>
  8. </ul>

Hizalanmış bağlantılar

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

  1. <ul class = "çağrı cihazı" >
  2. <li sınıf = "önceki" >
  3. <a href = "#" > Daha eski </a>
  4. </li>
  5. <li sınıf = "sonraki" >
  6. <a href = "#" > Daha yeni → </a>
  7. </li>
  8. </ul>
Etiketler İşaretleme
Varsayılan <span class="label">Default</span>
Başarı <span class="label label-success">Success</span>
Uyarı <span class="label label-warning">Warning</span>
Önemli <span class="label label-important">Important</span>
Bilgi <span class="label label-info">Info</span>
Ters <span class="label label-inverse">Inverse</span>

Hakkında

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

Mevcut sınıflar

İsim Örnek İşaretleme
Varsayılan 1 <span class="badge">1</span>
Başarı 2 <span class="badge badge-success">2</span>
Uyarı 4 <span class="badge badge-warning">4</span>
Önemli 6 <span class="badge badge-important">6</span>
Bilgi 8 <span class="badge badge-info">8</span>
Ters 10 <span class="badge badge-inverse">10</span>

kahraman birimi

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

İşaretleme

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

  1. <div class = "kahraman-birim" >
  2. <h1> Başlık </h1>
  3. <p> Kısa Açıklama </p>
  4. <p>
  5. <a sınıfı = "btn btn-birincil btn-büyük" >
  6. Daha fazla bilgi edin
  7. </a>
  8. </p>
  9. </div>

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

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

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

Varsayılan küçük resimler

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

Son derece özelleştirilebilir

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

  • Küçük resim etiketi

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

    Eylem Eylem

  • Küçük resim etiketi

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

    Eylem Eylem

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

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

Basit, esnek işaretleme

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

Izgara sütun boyutlarını kullanır

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

işaretleme

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

  1. <ul class = "küçük resimler" >
  2. <li sınıf = "span3" >
  3. <a href = "#" class = "küçük resim" >
  4. <img kaynak = "https://placehold.it/260x180" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </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>:

  1. <ul class = "küçük resimler" >
  2. <li sınıf = "span3" >
  3. <div sınıfı = "küçük resim" >
  4. <img kaynak = "https://placehold.it/260x180" alt = "" >
  5. <h5> Küçük resim etiketi </h5>
  6. <p> Küçük resim yazısı tam burada... </p>
  7. </div>
  8. </li>
  9. ...
  10. </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.

Hafif varsayılanlar

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

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

Tek uyarı mesajı

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


javascript ile harika gidiyor

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

Eklentiyi edinin »

Örnek uyarılar

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

Uyarı! En iyisi kendini kontrol et, pek iyi görünmüyorsun.
  1. <div sınıfı = "uyarı" >
  2. <button class = "kapat" data-dismiss = "alert" > × </button>
  3. <strong> Uyarı! </strong> Kendinize iyi bakın, pek iyi görünmüyorsunuz.
  4. </div>

Önüne bak! iOS cihazları href="#", uyarıların iptali için bir gerektirir. Bağlantı kapatma simgeleri için onu ve veri özniteliğini eklediğinizden emin olun. <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.

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

Uyarı!

En iyisi kendini kontrol et, pek iyi görünmüyorsun. Nulla vitae seçkin libero, bir pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

  1. <div class = "uyarı uyarı bloğu" >
  2. <a class = "kapat" data-dismiss = "alert" href = "#" > × </a>
  3. <h4 class = "alert-heading" > Uyarı! </h4>
  4. En iyisi kendini kontrol et, değilsin...
  5. </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

Çabuk! Birkaç şeyi değiştirin ve tekrar göndermeyi deneyin.
  1. <div class = "uyarı uyarı hatası" >
  2. ...
  3. </div>

Başarı

Aferin! Bu önemli uyarı mesajını başarıyla okudunuz.
  1. <div class = "uyarı uyarısı başarısı" >
  2. ...
  3. </div>

Bilgi

Önüne bak! Bu uyarıya dikkat etmeniz gerekiyor, ancak çok önemli değil.
  1. <div class = "uyarı uyarı bilgisi" >
  2. ...
  3. </div>

Örnekler ve işaretleme

Temel

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

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

Çizgili

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

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

animasyonlu

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

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

Seçenekler ve tarayıcı desteği

Ek renkler

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

çizgili çubuklar

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

Davranış

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

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

tarayıcı desteği

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

Opera ve IE şu anda animasyonları desteklememektedir.

kuyular

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

Bak, bir kuyudayım!
  1. <div sınıfı = "iyi" >
  2. ...
  3. </div>

Kapat simgesi

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

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

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

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