bootstrap-class-listesi

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

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.
Bu da ilginizi çekebilir  Pokki Sayesinde Masaüstünüze Güzel Bir Dokunuş Yapın

Alert Classları

bootstrap-alert

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

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

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

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

bootstrap-glyphicon

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



  • Emre

    Oldukça yararlı olmuş, emeğine sağlık dostum.

  • Ne zamandır böyle bir liste arıyordum. Umarım dediğiniz gibi güncellenir.

  • Erdem Kirmitçi

    teşkküürrler

  • Ağaç olarak detaylandırılabilir, konuyu bilmeyenler direk bu classları kullanmaya kalkacaklar ama html kısmında nasıl kullanılıyor bunlar? diyecekler.

  • Ayrıca paylaşım için de teşekkürler tabiki. Arşivime alıyorum.