Bootstrap Class Listesi

Günümüz web tasarımının en popüler HTML, CSS ve JS frameworklerinden biri olan Bootstrap bünyesinde yüzlerce class barındırmakta. Liste bu kadar uzun olunca hatırlanması da güçleşiyor.

Adobewordpress sizler için bu geniş listeyi tek ekranda topluyor.

Grid Yapısı Classları

Bootstrap’in en önemli yapı taşları kullandığı ızgaraları. İşte bu yapıyı destekleyen classlar :

visible-xs	Öğeyi sadece 768px altı ekran genişliklerinde gösterir.
.visible-sm	Öğeyi sadece 768px ile 992px arasındaki altındaki ekran genişliklerinde gösterir.
.visible-md	Öğeyi sadece 992px ile 1200px arasındaki altındaki ekran genişliklerinde gösterir.
.visible-lg	Öğeyi sadece 1200px üstü ekran genişliklerinde gösterir.
.visible-#-block	Öğeyi belirteceğiniz ekran genişliğinde block yapıda gösterir.
.visible-#-inline	Öğeyi belirteceğiniz ekran genişliğinde inline yapıda gösterir.
.visible-#-inline-block	Öğeyi belirteceğiniz ekran genişliğinde inline-block yapıda gösterir.
.hidden-xs	Öğeyi sadece 768px altı ekran genişliklerinde gizler.
.hidden-sm	Öğeyi sadece 768px ile 992px arasındaki ekran genişliklerinde gizler.
.hidden-md	Öğeyi sadece 992px ile 1200px arasındaki ekran genişliklerinde gizler.
.hidden-lg	Öğeyi sadece 1200px üstü ekran genişliklerinde gizler.
.container	Sabit genişliğe sahip çerçeveyi ekler. Genellikle wrapper yapısı için kullanılır.
.container-fluid	100% genişliğe sahip çerçeveyi ekler. Genellikle wrapper yapısı için kullanılır.
.row	Öğenin sağındaki ve solundaki marginleri temizler.
.col-xs-#	Öğenin 768px altındaki ekran genişliklerinde erişeceği grid genişliğini belirler.
.col-sm-#	Öğenin 768px ile 992px arasındaki ekran genişliklerinde erişeceği grid genişliğini belirler.
.col-md-#	Öğenin 992px ile 1200px arasındaki ekran genişliklerinde erişeceği grid genişliğini belirler.
.col-lg-#	Öğenin 1200px üstü ekran genişliklerinde erişeceği grid genişliğini belirler.
.col-xs-offset-#	Öğenin 768px altındaki ekran genişliklerinde sağından ve solundan kaç grid genişliğinde ittirileceğini belirler.
.col-sm-offset-#	Öğenin 768px ile 992px arasındaki ekran genişliklerinde sağından ve solundan kaç grid genişliğinde ittirileceğini belirler.
.col-md-offset-#	Öğenin 992px ile 1200px arasındaki ekran genişliklerinde sağından ve solundan kaç grid genişliğinde ittirileceğini belirler.
.col-lg-offset-#	Öğenin 1200px üstü ekran genişliklerinde sağından ve solundan kaç grid genişliğinde ittirileceğini belirler.

Tablo Classları

Bootstrap ile tablolarınızı yönetmenizi sağlayan classlar da şöyle:

table	Table öğelerinin temel yapısıdır.
.table-striped	Her tür öğesinin farklı renkte (taramalı) gözükmesini sağlar.
.table-hover	Tablodaki tr öğeleri üzerine gelince renk değiştirir.
.table-bordered	Tabloya border uygulanmasını sağlar.
.table-condensed	Tablonun hücre genişliklerini yarı yarıya daraltır.
.active	Tablo satırlarına hover olunca aldığı renk varsayılan olarak eklenir.
.success	Tablo satırlarına başarılı ve pozitif algı bırakan yeşil renk eklenir.
.info	Bilgi mesajları içeren tablo satırları için kullanılabilir.
.warning	Uyarı mesajları içeren tablo satırları için kullanılabilir.
.danger	Hata mesajları içeren tablo satırları için kullanılabilir.

Form Classları

Bootstrap ile formlarınızı yönetmenizi sağlayan classlar da şöyle:

.form-control	Input, textarea veya select gibi form öğelerini Bootstrap tasarımına çevirir.
.input-lg	Inputları büyük boyda gösterir.
.input-sm	Inputları orta boyda gösterir.
.form-group	Label ve input gibi form öğelerini kapsayan divisionlara verilebilecek class.
.form-inline	İçerisinde bulunan tüm öğeleri inline yapıya çeviren form classı.

Button Classları

Bootstrap ile butonlarınızı yönetmenizi sağlayan classlar da şöyle:

btn	Buton öğelerinin temel yapısıdır.
.btn-default	Klasik(gri) yapısındaki buton tasarımını gösterir.
.btn-primary	Birincil(mavi) yapısındaki buton tasarımını gösterir.
.btn-success	Başarılı(yeşil) yapısındaki buton tasarımını gösterir.
.btn-info	Bilgi(açık mavi) yapısındaki buton tasarımını gösterir.
.btn-warning	Uyarı(sarı) yapısındaki buton tasarımını gösterir.
.btn-danger	Hata(kırmızı) yapısındaki buton tasarımını gösterir.
.btn-link	Butonları link yapısına çevirir.
.btn-lg	Büyük boy butonlar oluşturur.
.btn-sm	Orta boy butonlar oluşturur.
.btn-xs	Küçük butonlar oluşturur.
.btn-block	Blok yapıda 100% genişlikte butonlar oluşturur.

Tipografi Classları

Yazılarınızı aşağıdaki classları kullanarak şekillendirebilirsiniz.

text-left	Yazıları sola hizalar.
.text-center	Yazıları ortaya hizalar.
.text-right	Yazıları sağa hizalar.
.text-justify	Yazıları içerisindeki öğeyi kaplayacak şekilde hizalar.
.text-nowrap	Yazıların satır atlamasını engeller.
.text-lowercase	Yazıları küçük harflere çevir.
.text-uppercase	Yazıları büyük harflere çevir.
.text-capitalize	Yazıların ilk harfini büyütür.
.text-muted	Yazıları soluk(gri) renge çevirir.
.text-primary	Yazıları mavi renge çevirir.
.text-success	Yazıları yeşil renge çevirir.
.text-info	Yazıları koyu mavi renge çevirir.
.text-warning	Yazıları sarı renge çevirir.
.text-danger	Yazıları kırmızı renge çevirir.

Alert Classları

Bootstrap ile uyarılar ve hatırlatmalar vermenizi sağlayan alert yapısını kontrol etmenizi sağlayan classlar da şöyle:

.alert	Alert öğelerinin temel yapısıdır.
.alert-success	Başarı mesajları gösterir.
.alert-danger	Hata mesajları gösterir.
.alert-warning	Uyarı mesajları gösterir.
.alert-info	Bilgi mesajları gösterir.

Resim Classları

Bootstrap ile resimlerinizi yönetmenizi sağlayan classlar da şöyle:

.img-rounded	Resimlere köşelerini yuvarlar.
.img-circle	Resimleri tam border-radius tanımıyla yuvarlak hale getirir.
.img-thumbnail	Resimlere çerçeve ekler.
.img-responsive	Resimlerin tarayıcı boyutuna göre ölçülerinin değişmesini sağlıyor.

Arkaplan Classları

Bootstrap ile arkaplanlarınızı yönetmenizi sağlayan classlar da şöyle:

.bg-primary	Mavi arkaplan ekler.
.bg-success	Yeşil arkaplan ekler.
.bg-info	Açık mavi arkaplan ekler.
.bg-warning	Sarı arkaplan ekler.
.bg-danger	Kırmızı arkaplan ekler.

Liste Classları

Bootstrap ile listelerinizi yönetmenizi sağlayan classlar da şöyle:

list-unstyled	İlgili listenin list-style tanımını none olarak değiştirir.
.list-inline	Listeyi inline yapıya büründürür. Ayrıca list-style tanımını da none olarak değiştirir.

Label Classları

Bootstrap ile labellarınızı yönetmenizi sağlayan classlar da şöyle:

label	Label öğelerinin temel yapısıdır.
.label-default	Klasik(gri) yapısındaki label tasarımını gösterir.
.label-primary	Birincil(mavi) yapısındaki label tasarımını gösterir.
.label-success	Başarılı(yeşil) yapısındaki label tasarımını gösterir.
.label-info	Bilgi(açık mavi) yapısındaki label tasarımını gösterir.
.label-warning	Uyarı(sarı) yapısındaki label tasarımını gösterir.
.label-danger	Hata(kırmızı) yapısındaki label tasarımını gösterir.

Panel Classları

Bootstrap ile panellerinizi yönetmenizi sağlayan classlar da şöyle:

panel	Panel öğelerinin temel yapısıdır.
.panel-default	Klasik(gri) yapısındaki panel tasarımını gösterir.
.panel-primary	Birincil(mavi) yapısındaki panel tasarımını gösterir.
.panel-success	Başarılı(yeşil) yapısındaki panel tasarımını gösterir.
.panel-info	Bilgi(açık mavi) yapısındaki panel tasarımını gösterir.
.panel-warning	Uyarı(sarı) yapısındaki panel tasarımını gösterir.
.panel-danger	Hata(kırmızı) yapısındaki panel tasarımını gösterir.

Yükleme Çubuğu Classları

Bootstrap ile progress barlarınızı yönetmenizi sağlayan classlar da şöyle:

progress	Progress öğelerinin temel yapısıdır.
.progress-bar	Progress öğelerinin stilize eden temel yapıdır.
.progress-bar-success	Başarılı(yeşil) yapısındaki yükleme çubuğu tasarımını gösterir.
.progress-bar-info	Bilgi(mavi) yapısındaki yükleme çubuğu tasarımını gösterir.
.progress-bar-warning	Uyarı(sarı) yapısındaki yükleme çubuğu tasarımını gösterir.
.progress-bar-danger	Hata(kırmızı) yapısındaki yükleme çubuğu tasarımını gösterir.
.progress-bar-striped	Yükleme çubuğu tasarımını çizgilerle süsler.
.active	Striped ile eklediğimiz çizgilerin sola doğru kaymasını sağlar.

Ek Classlar

Üstteki kategorilere sığdıramadığımız Bootstrap classları:

.pull-left	Öğeleri float:left tanımıyla sola yaslar.
.pull-right	Öğeleri float:right tanımıyla sağa yaslar.
.center-block	Öğeyi yatay pozisyonda ortaya taşır.
.clearfix	Öğenin başka öğelerle olan ilişkisini kaldırır. Böylece olası float sorunları çözülür.
.show	Öğeyi görünür kılar.
.hide	Öğeyi görünmez kılar.
.breadcrumb	Ol ve ul gibi yapıları ekmek kırıntıları gibi kullanmanızı sağlar.
.pagination	Ol ve ul gibi yapıları sayfalama gibi kullanmanızı sağlar.
.well	İçe gömülmüş havası veren yapılar oluşturmanızı sağlar.
.jumbotron	Basit yapılı ve flexible bir çerçeve oluşturmanızı sağlar.
.glyphicon	SVG yapılı iconları kullanmanızı sağlar.

Düzeltmeler

Bu liste, Bootstrap’e gelen güncellemelerle eş zamanlı olarak yenilenecektir.

Gördüğünüz eksik ve hataları yorum alanında bildirmeniz, daha doğru bir bilgi havuzuna erişmemizi sağlayacaktır. Bu konuda desteklerinizi beklemekteyiz.

İyi çalışmalar.

Bootstrap Class Listesi