Bootstrap’ın CSS çerçevesinde nasıl kullanılacağıyla ilgili eksiksiz talimat kılavuzu. Bootstrap sisteminin nasıl çalıştığını ve kendi stillerini nasıl ekleyeceğinizi öğrenin.
Web geliştirme ile ilgileniyorsanız, muhtemelen Bootstrap hakkında bilgi almışsınızdır. Resmi web sitesine göre, Bootstrap, web üzerinde duyarlı, mobil ve ilk projeler geliştirmek için kullanılan en popüler HTML, CSS ve JS yapısıdır. Harika geliyor! Şimdi nasıl kullanırım?
Sizi Getting Started sayfasına yönlendirebilir ve oradan ilerlemenizi isteyebilirdik. Fakat bu doğru bir yöntem olmazdı. Kurulum kılavuzları aslında CDN’lere bağlantılar, Bower ile yükleme hakkında açıklamalar, npm ve Besteci, Autoprefixer ve LESS ile entegrasyon hakkında bilgi, şablonlar, lisanslar ve çevirilerden oluşan bir grup faydalı bilgiler barındırmaktadır. Ancak başlamak için kesinlikle adım adım bir rehber değildir.
Birkaç yıl önce Bootstrap’ı keşfettiğimizde, duyarlı tasarım hala popülerlik kazanıyordu ve beklenen norm olmamalıydı. Web sitelerini yalnızca sıfırdan ürettikten sonra, bir framework konsepti hakkında biraz kafam karıştı. HTML, CSS ve JS‘ye ek olarak şimdi duyarlı tasarım kavramlarını ve Bootstrap ve JavaScript kitaplıklarını öğrenmesi beklenen yeni başlayanlar için daha da kafa karıştırıcı olduğunu düşünürdüm.
Bu kılavuz, yeni başlayanlar için Bootstrap’a ilk adım anlamındadır, dolayısıyla daha orta/ileri düzey kavramlar olan LESS ve Sass entegrasyonuna geçmeyeceksiniz. Geçerli ve istikrarlı bir sürüm olan Bootstrap 3 için yazılmış olsa da, kavramlar gelecekteki sürümler için aynı kalacaktır.
Hedefler
- Bir front-end framework‘ün ne olduğunu ve nasıl yararlı olabileceğini öğrenin.
- Bootstrap’ın CSS ve JavaScript’ini nasıl doğru bir şekilde içerdiğini ve özelleştirme işlemini başlatmayı öğrenin.
Ön şartlar
- Temel bilgi ve HTML ve CSS anlayışı
Bootstrap nedir?
Bootstrap aşağıdaki üç ana dosyalarla birlikte çalışır:
- bootstrap.css – CSS framework
- bootstrap.js – JavaScript/jQuery framework
- glyphicons – font (Yazı tipi) (ikon font seti)
Ek olarak, Bootstrap, jQuery’nin çalışmasını gerektirir. JQuery, JavaScript‘e çapraz tarayıcı uyumluluğunu basitleştiren ve ekleyen son derece popüler ve yaygın olarak kullanılan bir JavaScript kitaplığıdır.
Bootstrap belgelerini incelerken (Grunt, Gulp, Sass, LESS, bower, npm vb.) Gerçekleşebilecek diğer her şey Bootstrap’ı kullanmaya başlamanız için gerekli değildir. Bunlar, görev yöneticileri, ön işlemciler, kurulum yardımcıları ve paket yöneticileri. Bu nedenle bunlardan herhangi birini nasıl kullanacağınızı bilmiyorsanız cesaretinizi kırmayın.
Bootstrap neden önemlidir? kullanmam gerekiyor mu?
Kesinlikle bir framework kullanmanız gerekmiyor. Fakat framework’ler çok popülerdir ve birçok yararı vardır, bu nedenle onlarla nasıl çalışacağınızı öğrenmek önemlidir.
Frameworklerin size yardımcı olabilecek yollarından bazıları:
- Projeler arasında tekrarı önleme
- Web sitenizin çeşitli ekran boyutlarına (mobil, masaüstü) uyum sağlamasına yardımcı olmak için duyarlı tasarımı kullanın
- Projeler arasında ve geliştiriciler arasında tasarım ve kod tutarlılığı.
- Yeni tasarımları hızlı ve kolay bir şekilde prototip haline getirin
- Tarayıcılar arası uyumluluk sağlayın.
Genel olarak, üzerinde çalıştığınız her web projesinin duyarlı olması ve tüm büyük tarayıcılarda düzgün çalışması gerekir ve büyük olasılıkla eski tarayıcılar için bazı geri dönüşler olacaktır. Bootstrap’in bunu kapsayan büyük bir açık kaynak topluluğu var, böylece gerekmiyor. Ayrıca, birden fazla geliştirici aynı sistemi biliyorsa, daha iyi bir uyum içinde çalışabilirler – ve aynı zamanda bir projedeki yeni gelişenlerin hız kazanmalarını kolaylaştırır.
Izgara muhtemelen frameworklerin en önemli yönlerinden biridir. Bu, tüm düzenin oluşturulduğu temeldir. Bunun ötesinde, Bootstrap’in çekirdek CSS’si ayrıca formlar, tablolar, butonlar, listeler ve resimlerin yanı sıra tam işleyen gezinme çubuklarına yararlı şekiller ekleyecektir; çekirdek JavaScript modlar, döngüsel mesajlar, alarmlar, açılır pencereler, açılır menüler oluşturmak için yararlı kodlar ekleyecektir.
Bootsrap’ın kullanımı ile ilgili detaylı incelememizi yakında hazırlayacağız.
