Bootstrap ile Duyarlı Bir Web Sitesi Oluşturmak İçin Yeni Başlayanlar Kılavuzu - Bölüm 1

Son Güncelleme 5 Haziran 2019

Bu makale, web geliştiricilerini hızlı ve etkili bir şekilde yanıt veren web siteleri oluşturmak için Bootstrap Framework'ün temel ilkelerini kullanma konusunda eğitmeyi amaçlamaktadır. Bu, üretim maliyetini düşürür ve şirketlerin geliştiricilerini web sitelerini ve sayfaları kolaylıkla yönetmeleri ve oluşturmaları için güçlendirmelerine olanak tanır. Bootstrap çerçevesini indirme sürecini ve bu çerçeveyi web geliştirme çalışmalarınız için kullanmanın avantajlarını inceleyeceğim.

Bootstrap nedir?

Resmi Bootstrap web sitesine (getbootstrap.com) göre, "Bootstrap, web'de duyarlı ve mobil ilk proje geliştirme için en popüler HTML, CSS ve JavaScript çerçevesidir". Daha basit bir ifadeyle, Bootstrap, ön uç web geliştirmeyi daha hızlı hale getirmeye yardımcı olmanın yanı sıra farklı beceri seviyelerindeki geliştiricilere hitap eden son derece basit bir çerçevedir.

Bootstrap neden kullanılır?

Büyük ekranlar, normal ekranlar, telefonlar ve tabletler dahil olmak üzere çeşitli ortamlar için web siteleri tasarlama potansiyeli, Bootstrap'i inanılmaz derecede çekici ve web içeriği üretmek için akıllı bir seçim haline getiriyor. Bootstrap gibi bir çerçeve, web sitesini çeşitli işlevler ve sabit kodlama gerektirmeyen yanıt verme hızı için optimize etmek üzere kolayca değiştirilebilen genel işlevsellik sağlar. Kısacası, bir web sitesi oluşturmanın en basit yollarından biridir ve bir WordPress sitesinin aksine yine de özelleştirme yeteneğine sahiptir.

Nasıl Başlanır?

Bootstrap kullanmaya başlamak için resmi Bootstrap web sitesini (http://getbootstrap.com/) ziyaret etmelisiniz. Bootstrap açık kaynaklı bir projedir ve GitHub'da barındırılır, geliştirilir ve bakımı yapılır; bu, kullanıcıların kaynak koduna erişmelerine ve web siteleri oluşturmak için bir araç olarak çerçevenin tüm kapsamını anlamalarına olanak tanır.

Geçerli Bootstrap sürümünü (v3.3.6) indirmenin üç yolu vardır: Bootstrap'in uyumlu bir sürümünü indirebilir, Bootstrap kaynak kodunu indirebilir ve Bootstrap çerçevesini Less'ten Sass'a taşıyabilirsiniz. Bu durumda, yeni başlayan biriyseniz, Bootstrap'in uyumlu sürümünü indirmenizi öneririm. Bootstrap çerçevesini Rails, Compass veya yalnızca Sass projelerine entegre etmek istiyorsanız, indirmeyi Less'ten Sass'a taşımanız gerekir.

Boostrap dosyasını indirdikten sonra, uyumlu Bootstrap çerçevesinin yapısını görmek için sıkıştırılmış klasörü açmalısınız. Dosya yapısını görmek için aşağıya bakın:

Artık bu dosyaları üzerinde çalıştığınız herhangi bir web projesinin dosya sistemine bırakabilir ve istediğiniz projeyi tasarlamak ve oluşturmak için Bootstrap ile çalışmaya başlayabilirsiniz. Bootstrap'ın işlevselliği hakkında daha fazla bilgi için, bu yazının 2. Kısmında daha ayrıntılı olarak bahsedeceğiz, lütfen getboostrap.com web sitesini ziyaret ederek çerçeve ile erişilebilen bileşenleri, CSS özelliklerini ve JavaScript işlevlerini görmekten çekinmeyin.

Sorumlu tasarım

Duyarlı tasarım, Bootstrap çerçevesinin ayırt edici özelliklerinden biridir; Bootstrap ile duyarlı bir şekilde geliştirme yeteneği, geliştiricilerin tüm görüntüleme platformlarında düzgün biçimlendirilebilen tek bir web sitesi geliştirmesine olanak tanır. Çoğu zaman, bir web sitesi iyi tasarlanabilir ve kullanıcı deneyimi yalnızca belirli bir platform veya ekran boyutunda en uygunudur. Bootstrap, geliştiricilerin daha küçük bir ekranda okunduğunda web sayfasının belirli sütunlarını belirli boyutlarda atamalarına izin vererek bu sorunlarla mücadele etmek için harika bir iş çıkarır. Duyarlı web siteleri oluştururken Bootstrap'in hesaba kattığı dört tür cihaz vardır:

• Ekstra Küçük Cihazlar (Akıllı telefonlar <768px)
• Küçük Cihazlar (Tabletler >= 768px)
• Orta Boy Cihazlar (Masaüstü Bilgisayarlar >= 992px)
• Büyük Cihazlar (Masaüstü Bilgisayarlar >= 1200 piksel)

Geliştirici, belirli web içeriğini daraltmak, genişletmek, gizlemek veya belirli platformlarda görünür olmak üzere ayarlamak için yukarıdaki bu sınıflara etiketler ekleyebilir. Bu, web sitesinin görünümünü ve hissini oluşturma sürecini basitleştirmek için son derece yararlıdır.

Izgara Sistemi

Bootstrap, çerçevenin duyarlı web siteleri tasarlamak için kullanılmasına izin veren ana özellik olan bir ızgara sistemine sahiptir. Bootstrap'daki tüm satırlar bir kapsayıcı sınıfına yerleştirilmelidir ve ardından sonraki satırlar belirli boyutlar olarak tanımlanabilir.

Izgara sistemi için bir gösterim örneği:

• Önceden tanımlanmış satır sınıfı bir satır üretir
• Bu satırda, ikinci sınıf “col-md-6”yı belirtir.
• Bu, sınıfın web sayfasında 6 sütuna yayılan bir sütun ürettiği anlamına gelir.
• "Md", bunun yalnızca 768 pikselden küçük veya buna eşit olan orta düzey cihazlarda veya masaüstlerinde gerçekleşeceğini belirtir.
• "Ofset" sınıfı, bu sütunların boş bırakılacağı anlamına gelir. Bu durumda ofset 3'tür, bu nedenle içeriğin bir kısmını doldurmak için üç sütun boş alan bırakılacaktır.
  Bu ızgara sistemi, geliştiricilerin içeriğin bölümlerini hızlı bir şekilde tanımlamasına ve içerik arasında temiz, duyarlı bir tasarıma sahip olması için uygun boşluk bırakmasına olanak tanır.

Bootstrap ile Zorluklar

Tüm Bootstrap dosyalarını doğrudan indirirken JavaScript ve CSS dosyalarının boyutları büyüktür. Bu, hızlı bir sayfa oluştururken bazı zorluklara yol açabilir. Bunun nedeni, Bootstrap dosyalarındaki tüm dosyaların tamamen kullanılmamasıdır ve bu, gereksiz verilerin indirilmesinin sorun olabileceği anlamına gelebilir. Bu, kullanıcı deneyimini etkileyebilir, bu nedenle, Kullanıcı Deneyimini Geliştirmek için Bootstrap Temelleri Nasıl Kullanılır (https://moz.com/ugc/how-to-use-bootstrap-) gönderisini ziyaret ederek bunu daha ayrıntılı olarak kontrol etmekten çekinmeyin. kullanıcı deneyimini geliştirmek için temel bilgiler).

Duyarlı ve temiz web sitesi tasarımları oluşturmak için harika bir çerçeve olduğu için Bootstrap'ı denemenizi umuyorum. Bootstrap hakkında daha fazla başlangıç ​​konseptine değinen serideki bir sonraki gönderi için bizi izlemeye devam edin.

Yazar: Esme Vazquez, Junior Web Developer

Bir yapımcı, sanatçı, oyuncu, kodlayıcı, web geliştiricisi ve blog yazarı; Esme, içerik yönetimi blog sitesi Medium'daki son blog yayını Indiellect'in yaratıcısıdır. Şu anki deneyimi, web geliştirme ve oyun geliştirmede yatmaktadır; Şu anda That'da çalışıyor ve SEO eğitimi alıyor! Şirket, Junior Web Developer olarak Leesburg, FL'de. Gelecekte insanlığın güzelliğini gösteren video oyunları yapmayı hedefliyor. Herhangi bir sorunuz varsa, @EsmeVazquez18 adresinden ona tweet atmaktan ve/veya onu LinkedIn'den eklemekten çekinmeyin.