Bootstrap responsive nasıl yapılır? - R10.net
  • 11-09-2020, 15:45:03
    #1

    Günümüzde internet sitelerinin hemen hemen hepsi responsive yani duyarlı hale geldi. Artık Google'da üst sıralara çıkmanın önemli şartlarından biri web sitesinin her ekran boyutuna duyarlı olması.

    Sitelerimizi tasarlarken en çok kullandığımız Bootstrap framework'ü üzerinde nasıl responsive site yapılır sorusu için giriş bilgileri vereceğim.

    Bootstrap nedir?

    Bootstrap bir CSS framework'üdür. İçinde barındırdığı grid yapısı ve diğer komponentleri ile web tasarım yaparken işinizi kolaylaştırır. Twitter'ın geliştiricilerinin elinden türemiştir ve günümüzde çok popüler bir hale gelmiştir.

    Bootstrap responsive nasıl yapılır?

    Bootstrap'ın grid yani ızgara yapısından üst tarafta bahsetmiştim. Bu hazır yapı sayesinde breakpoint kullanmadan çeşitli div sınıfları ile basit bir şekilde responsive web tasarımı yapabiliyoruz.

    Bootstrap'ın resmi sitesi: https://getbootstrap.com/

    Her şeyden önce Bootstrap kütüphanesini projemize dahil etmemiz gerekmektedir. Bunun çeşitli yolları var. Bootstrap'ı indirerek lokal bir şekilde de dahil edebilirsiniz, CDN servisinden de sitenize çekebilirsiniz. Tercih sizin. Bu örnekte CDN üzerinden çekelim.

    Örnek kod: https://pastecode.io/s/K3Akr5OxHC

    Bootstrap responsive tasarımınıza başlamadan önce aşağıda bulunan başlangıç için önerilen yapıyı kullanabilirsiniz.

    Üstte bulunan yapı Bootstrap ve bileşenlerini projenize dahil etmekte.

    Bootstrap ızgara sistemi kullanımı

    Bootstrap ızgara sistemi en yaygın kullanılan grid sistemlerinden biridir. Responsive site tasarımı yaparken ızgara sistemi kullanılması neredeyse zorunlu hale geldi.

    Bootstrap grid sistemi üç ana yapıdan oluşmaktadır;

    - Kapsayıcı (.container): Satırların doğru yerleşmesi için her satırın bir kapsayıcıya ihityacı olur. Ayrıca ".container-fluid" yapısı ile tam sayfa (full-width) siteler oluşturulabilir.

    - Satır (.row): Kapsayıcıların dışında kullanılmaması gereken bir yapıdır. Her satır içinde 12'li kolon bulundurur. Her kolon arasında 30 piksellik bir boşluk bulunmaktadır.

    - Kolon (.col-*): Satırların içinde kullanılan kolonlardır. Her satır en fazla 12 kolon alabilir. Kolonların sağ ve sol iç boşlukları 15'er pikseldir.

    Bir responsive tasarım yaparken kullanacağımız ana bileşenler bunlardı.

    Genel mantığı ile büyük, orta, küçük ve mobil ekranlar için ızgara ayarlarını yapıp nasıl görüneceğini belirleyebiliriz.

    Örnekle pekiştirelim;

    <div class="container">
    <div class="row">
    <div class="col-6">
    * orta boyutlu ekranda ekranın yarısına kadar yarı genişlik
    </div>
    <div class="col-6">
    * orta boyutlu ekranda ekranın yarısına kadar yarı genişlik
    </div>
    </div>
    </div>
    Üstte bulunan ufak örnekte kapsayıcım standart genişlikte ve bir adet satırım var. Bu satırın içinde iki adet 6'lı ızgara kullanıp 12'li ızgara yapısını kullanmış oldum. Üstte bulunan kodun çıkaracağı sonuç aşağıdaki gibidir;

    Responsive tasarım için kullanılan ızgara sistemi kısaca bu şekildedir.

    Yararlanabileceğiniz Bootstrap kaynaklarını aşağıya bırakıyorum.

    Grid sisteminin dökümantasyonu: https://getbootstrap.com/docs/4.5/layout/grid/

    Bootstrap üzerinde hızlıca ızgara sistemi oluşturabileceğiniz site: https://www.layoutit.com/cn

    Bootstrap altyapısını kendinize göre özelleştirebileceğiniz site: https://bootstrap.build/themes

    Ücretli ya da ücretsiz temalar sunan site: https://bootstrapmade.com/

    Bootstrap framework'ünü kendinize göre özelleştirip indirebileceğiniz link: https://getbootstrap.com/docs/3.4/customize/
  • 11-09-2020, 15:47:44
    #2
    Emeğinize sağlık hocam.
    OSLOTR İNTERNET HİZMETLERİ - 0264 502 4 804