Bootstrap Css Kullanışlı Sınıflar

Bootstrap Css barındırdığı sınıflar açısından oldukça kullanışlı bir web teknolojisidir. Css konularına başka bir boyut kazandıran Bootstrap teknolojisi bir çok önde gelen web sitesi ve sosyal medya platformlarında kullanılmaktadır. ( Twitter bootstrap kullanılan en önemli sitedir. Yabancı ve yerli bir çok sitenin kullandığı bilinmektedir. ) Bizim asıl bahsedeceğimiz konu bu kullanışlı sınıflar nelerdir ve nasıl kullanılırlar ? Dilerseniz ilk konumuz ile başlayalım…

BS Wells

Tanımlandığı elemana gri ve yuvarlak  köşeli bir arkaplan verir. Hazır bir span etiket sınıfı gibi düşünebilir ve güzel bir tasarım için gerekli olabilir.

BS Sınıflar – Tables

TABLE sınıfı: Normal bir tablo eklemek için kullanılan yararlı bir CSS sınıfıdır. HTML tablosuna benzemekle beraber responsive olarak tablo oluşturmaya yarar.Örnek kullanım aşağıdadır.

TABLE-STRIPED: Eğer tablomuzun bir siyah bir beyaz arkaplana sahip şekilde verilerden oluşmasını istiyorsak bu sınıfı kullanabiliriz. Daha iyi anlamanız için aşağıda paylaşacağım görselden faydalanabilirsiniz. Bu tabloyu oluşturmak için yukarıdaki kodda yer alan “class=table” kodunun yerine “class=table table-striped” yazmanız yeterlidir. İlk olarak table kullanmamızın sebebi tasarımın daha iyi olması ile alakalıdır.

TABLE-BORDERED: Tablomuzun kenarlarının daha kalın şekilde görüntülenmesi için bu sınıfı kullanmanız gerekir. Aşağıdaki gibi bir görüntü elde edebiliriz. Uygulamak için ise class özelliğimizi “class=table table-bordered” şeklinde değiştirmeliyiz.

TABLE-HOVER: Satırın üstüne fare ile geldiğinizde hover efekti oluşmasını istiyorsanız bu sınıfı kullanabilirsiniz. Burada anlamanız için görsel paylaşmadan uygulamalı olarak göstermem gerektiğini düşünüyorum.

Bu adresten örnek koda ulaşabilirsiniz.

TABLE-CONDENSED: Eğer daha hoş bir tasarımda olan bir tablo oluşturmak istiyorsanız çok kullanışlı olan bu sınıfı kullanabilirsiniz. Yukarıda bahsettiğimiz işlemlerin aynısı yapmanız yeterlidir (class=”table table-condensed”)

Contextual-Sınıflar : İçeriğin konusuna göre renk verebileceğiniz satırların olduğu table sınıflarıdır. Daha renkli bir tablo yapmak istiyorsanız bu sınıfları kullanabilirsiniz.

BS Glyphicons : Sayfanıza çeşitli ikonlar ve hazır butonlar eklemenize yarayan metinlerde,formlarda,button stillerinde ve menulerde kullanılabilen bootstrap sınıfıdır.

BS Pagination 

Sitenizde çok fazla sayıda sayfanız varsa rakam şeklinde menuler düzenleyebildiğiniz bu sınıf oldukça yararlıdır. Sayfa numarasına tıkladığınızda verdiğiniz linkle alakalı olan sayfaların navigasyonları bu sınıf ile basit bir şekilde gerçekleştirilmektedir. Aktif olan linki belirtmek için ise “active” sınıfı kullanmaktadır.

Örnek Kullanım için buraya tıklayınız

Sonucu elde etmek için yararlandığımız html kodlarında 5 adet html sayfası kullandık ve hangi rakamdaysak o rakam için active sınıfını kullandık.

Adından da anlayabileceğiniz gibi web sayfanıza panel şeklinde bir eleman eklemek için kullanılan bootstrap yapısıdır.

BS Pager

 Sayfalama yaparken önceki sayfa – sonraki sayfa şeklinde bir html tasarımı kullanmak istiyorsak bu hazır css sınıfını kullanabiliriz

Yararlı sınıflarımıza bir sonraki yazımızda kaldığımız yerden devam edeceğiz.

NOT : Bootstrap hakkında temel düzeyde bilgi sahibi olmak ve bahsettiğimiz sınıflar konusunda kendinizi geliştirmek istiyorsanız http://www.w3schools.com/bootstrap/ sitesinden faydalanabilirsiniz.