[vc_empty_space height=”200px”]

Bootstrap Nedir – Nasıl Kullanılır ?

Yazımızda ” Bootstrap Nedir ? ” sorusuna cevap aramakla başlayacağız. Artık yeni sayılmayacak bir CSS teknolojisi olan Bootstrap CSS, tasarım konusunda web tasarımcıların olmazsa olmazlar arasına girmiştir.

Dilerseniz ilk olarak Bootstrap CSS dosyalarını nerden bulabileceğinizden bahsedelim. Aşağıda vereceğim linkten faydalanarak dosyayı indirebilir eğer bir web sitesi tasarlıyorsanız dosyayı kök dizininize ftp yoluyla ya da eğer host sağlayan bir paketten faydalanıyorsanız Host şirketinin size sağlamış olduğu yöntemleri kullanarak yükleyebilirsiniz. (Bu konulardan da gelecek yazılarımızda bahsedeceğiz. Takipte kalın)

Bootstrap genel olarak web geliştiricilerin yavaş yavaş aşina olmaya başladığı Grid sistemini kullanmaktadır.

Bu sistemde sayfa bölümlendirmeleri col – md-1, col md-4 vb. gibi tanımlanan sınıfların sonuna eklenen sayılarla belirlenir. Bu css kodunu oluşturan yazılımcıların belli bir hesaplaması sonrasında tespit edilmiştir.

GRID SINIFLARININ TANIMLAMALARI

  • col-xs-? (Akıll telefonlar için)
  • col-sm-? (Tabletler için)
  • c0l-md-? (Masaüstü PCler için)
  • c0l-lg-? (Laptoplar için)

 

BS JUMBOTRON

BOOTSTRAP tarafından biz web tasarımcılar için başka bir marjinal özellik ise Jumbotron metin sınıfıdır.Bu sınıfı kullanan web sitesi metinleri akıllı telefonlar için daha okunaklı olan bir yazı tasarımına kavuşmaktadır. Günümüzde kullanmayan insanların parmakla bile sayılamadığı akıllı telefonlar için özel tasarımların kaçınılmaz olduğu düşünülürse bu tür hoş yazı tasarımları bir gereksinim halini almıştır.

Aşağıda ilk satırda gördüğünüz yazılar ‘jumbotron’ sınıfı kullanmakta ve bu yazılar akıllı telefon ile tabletlerle yüksek puntoda metinler oluşturmaktadır.

İkinci satırda ise mobil kullanıcılar için okunması daha yorucu metin stilleri görülmektedir.

BOOTSTRAP İLE TASARIM NE RAHAT

BOOTSTRAP İLE TASARIM NE RAHAT

 BS IMAGE

1.Image Rounded Sınıfı

2.Image Circle Sınıfı

3.Image Thumbnail Sınıfı

Image Rounded Sınıfı

Bu sınıf ile web sitesi görsellerini köşeli şekilde gösterebiliriz. Bu kullanım standart CSS’te yer alan “border-radius” özelliğine benzemektedir. Yani bu sınıf resimlere hazır olarak uygulanabilen “border-radius” özelliği olarak düşünülebilir.

 

luvstock-62887
Örnekte sitemizin resimlerinden birine yukarıda bahsettiğimiz sınıfı uyguladığımızda bu şekilde bir görüntü elde etmiş olduk.

Image Circle Sınıfı

Gereken değişikliği elde etmeniz için yapmanız gereken şey “IMG” etiketinin içerisinde bulunan class tanımlamasının “img-circle” olarak değiştirmenizdir. Bunu uyguladığınızda aşağıdaki gibi bir görüntü elde edebilirsiniz.

luvstock-62887

Image-Circle sınıfı da görmüş olduğunuz gibi resmimizi yuvarlak halde görüntelememizi sağladı.

Image Thumbnail Sınıfı

Resminizi küçük resim formatında görüntülemek istiyorsanız bu sınıfı kullanabilirsiniz. Yukarıda bahsettiğimiz işlemleri aynı şekilde uygulamanız gerekir.

luvstock-62887

BS RESMİ SİTESİ : http://getbootstrap.com/

BS İNDİRME LİNKİ : https://github.com/twbs/bootstrap/releases/download/v3.3.4/bootstrap-3.3.4-dist.zip

Bootstrap hakkındaki ilk yazımız burada sona ermiştir. Çok geniş bir konu yelpazesine sahip olan Bootstrap konumuza yeni yazılarla devam edeceğiz…