Navigasyon, uyarılar, açılır pencereler ve daha fazlasını sağlamak için oluşturulmuş düzinelerce yeniden kullanılabilir bileşen.
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>
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 .dropdown
veya 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>
Menüleri sağa hizalayın ve ek açılır menü seviyeleri ekleyin.
.pull-right
a'ya ekle .dropdown-menu
açılır menüyü sağa hizalayın.
- <ul class = "açılır menü sağa çekme" rolü = "menü" aria-labelledby = "dLabel" >
- ...
- </ul>
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-submenu
herhangi 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>
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 = "#" > Sonraki </a></li>
- </ul>
- </div>
Bağlantılar farklı durumlar için özelleştirilebilir. .disabled
Tıklanamayan bağlantılar için ve .active
geçerli sayfayı belirtmek için kullanın .
- <div sınıfı = "sayfalandırma" >
- <ul>
- <li class = "devre dışı" ><a href = "#" > Önceki </a></li>
- <li class = "etkin" ><a href = "#" > 1 </a></li>
- ...
- </ul>
- </div>
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-centered
ve .pagination-right
.
- <div class = "sayfalandırma sayfalandırma merkezli" >
- ...
- </div>
- <div class = "sayfalandırma sayfalandırma-sağ" >
- ...
- </div>
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 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>
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>
Çağrı cihazı bağlantıları ayrıca .disabled
sayfalandı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 | İş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> |
İ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> |
Sitenizdeki önemli içeriği sergilemek için hafif, esnek bir bileşen. Pazarlama ve içerik ağırlıklı sitelerde iyi çalışır.
Bu basit bir kahraman birimi, öne çıkan içerik veya bilgilere ekstra dikkat çekmek için basit bir jumbotron tarzı bileşendir.
- <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>
h1
Bir sayfadaki içeriğin bölümlerini uygun şekilde boşaltmak ve bölümlere ayırmak için basit bir kabuk . h1
'nin default öğesini ve diğer bileşenlerin çoğunu kullanabilir small
(ek stillerle).
- <div class = "sayfa başlığı" >
- <h1> Örnek sayfa başlığı </h1>
- </div>
Varsayılan olarak, Bootstrap'in küçük resimleri, minimum gerekli işaretleme ile bağlantılı görüntüleri sergilemek için tasarlanmıştır.
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 (önceden .media-grid
v1.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.
Küçük resim işaretlemesi basittir - gerekli olan tek şey ul
herhangi 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.
Son olarak, küçük resimler bileşeni , küçük resim boyutlarının kontrolü için .span2
veya benzeri mevcut ızgara sistemi sınıflarını kullanır ..span3
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 kaynak = "https://placehold.it/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 kaynak = "https://placehold.it/300x200" alt = "" >
- <h3> Küçük resim etiketi </h3>
- <p> Küçük resim yazısı... </p>
- </div>
- </li>
- ...
- </ul>
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.
.alert
Temel 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>
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 = "alert" > × </button>
<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>
Uyarıların hızlı ve kolay bir şekilde kapatılması için uyarılar jQuery eklentisini kullanın .
Daha uzun mesajlar için, uyarı sarmalayıcısının üstündeki ve altındaki dolguyu ekleyerek artırın .alert-block
.
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.
- <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>
Bir uyarının çağrışımını değiştirmek için isteğe bağlı sınıflar ekleyin.
- <div class = "uyarı uyarı hatası" >
- ...
- </div>
- <div class = "uyarı uyarısı başarısı" >
- ...
- </div>
- <div class = "uyarı uyarı bilgisi" >
- ...
- </div>
Dikey eğimli varsayılan ilerleme çubuğu.
- <div sınıfı = "ilerleme" >
- <div class = "bar" stili = " genişlik : % 60 ; " ></div>
- </div>
Ç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>
Sağdan sola şeritleri canlandırmak için .active
ekleyin . .progress-striped
IE'nin tüm sürümlerinde mevcut değildir.
- <div class = "ilerleme ilerleme çizgili aktif" >
- <div class = "bar" stili = " genişlik : % 40 ; " ></div>
- </div>
.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>
İ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>
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>
İ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.
Bir öğeye ek efekt vermek için kuyuyu basit bir efekt olarak kullanın.
- <div sınıfı = "iyi" >
- ...
- </div>
İ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>
Modeller ve uyarılar gibi içerikleri kapatmak için genel kapat simgesini kullanın.
- <düğme sınıfı = "kapat" > × </button>
Bağlantı kullanmayı tercih ediyorsanız, iOS aygıtları tıklama olayları için bir href="#" gerektirir.
- <a class = "kapat" href = "#" > × </a>
Küçük ekran veya davranış değişiklikleri için basit, odaklanmış sınıflar.
Bir öğeyi sola kaydır
- class="pull-left"
- .pull-left {
- float: left;
- }
Float an element right
- class="pull-right"
- .pull-right {
- float: right;
- }
Change an element's color to #999
- class="muted"
- .muted {
- color: #999;
- }
Clear the float
on any element
- class="clearfix"
- .clearfix {
- *zoom: 1;
- &:before,
- &: sonra {
- ekran : tablo ;
- içerik : "" ;
- }
- &: sonra {
- temizle : ikisi de ;
- }
- }