Bootsrap nedir
Bootstrap Site Yapımı O bir açık kaynak kodlu tasarım harikası, CSS Freamwork ustası, tasarım denilince akla ilk o geliyor. Açılın Bootstrap geliyor. Evet bu yazımızda yine sizlere faydalı olacağını düşündüğümüz bir konudan bahsedeceğiz. Bootstrap! Cep telefonu, tablet ve masaüstü bilgisayarınızda kullandığınız temaları tasarlayabileceğiniz harika bir program.
Bootstrap Nasıl Kullanılır? Çalışma Mantığı Nedir?
Hazır bir sistemdir. Sürükle-bırak, kopyala yapıştır mantığı ile çalışır. Yani herkesin kısa sürede öğrenebileceği ve kullanabileceği bir yapıdadır. Şimdi de nasıl çalıştığını maddeler halinde açıklamaya çalışalım:
- Öncelikle internet sitesi sayfanızın HTML5 tabanlı olması gerekiyor.Ayrıca sayfanıza, CSS ve Jquery scripti eklemeniz gerekiyor. Böylelikle sayfanızda kullanacağınız tüm öğelerin referansı getbootstrap.com adresinden sağlanabilecektir.
- Siteye girdiğinizde üst menüde yer alan “Getting Started”, “CSS”, “Component” ve “JavaScript” alanlarını buluyorsunuz ve buraya gerekli olan kodları yapıştırıyorsunuz.
- Farklı cihazlarda ekran boyutları farklı olduğu için Class etiketi içerisine bu cihazların genişliklerini yazıyorsunuz.
- Siteden indireceğiniz Bootstrap.zip dosyası içerisinde, sizin için gerekli olan tüm dosyaları bulabilirsiniz. Ana şablon üzerinde değişiklik yapmak size zor gelirse, dosyalar arasında bulunan örnek sayfaları kullanabilirsiniz. Bu sayfalar, bir tür hazır şablondur. Beğendiğinizi kullanabilirsiniz.
- http://trbootstrap.com/getting-started/ adresinden kaynak kodları indirebilir ve gerekli olan eklemeleri bu kodlar sayesinde yapabilirsiniz.
- Aslında bu konuda anlatacak çok şey var. Ancak sizleri sıkmamak adına yukarıda verdiğimiz adresten kurulum ve kullanım hakkında daha detaylı bilgilere ulaşabilirsiniz.
Zaten az bir çabayla Bootstrap çalışma mantığını kısa sürede kavrayabilirsiniz.
Bootstrap Nerelerde Kullanılır?
Kişisel bloglarınızda Bootstrap programını kullanabilirsiniz. Biraz kodlama bilgisi edinmek için de programı kullanabilirsiniz. Çünkü programda bazı işlemleri, kodlama ile yapılmaktadır.
Haydi Bootstrap ile Sayfa Kuralım
Tasarlamak istediğiniz sitede; en üstte header alanında ana menü, onun altında carousel, altında üçlü sütundan oluşan bir alan ve en altta footer bölümü yer alsın. Daha sonra:
- Bootstrap sitesinden indireceğiniz 3.0 zip dosyasını çıkarın ve Examples klasöründeki Navbar örnek şablonunu kullanabilmek için index.html dosyasını kopyalayın. Aynı dosyayı, bootstrap-3.0.1-dist klasörünün içine yapıştırın.
- Bu işlemi gerçekleştirdiğinizde muhtemelen açılışta tasarım düzgün görüntülenmez. Endişelenmeyin! Bu durumun nedeni, CSS dosyasının linkinin doğru yerde olmamasıdır. İndex.html dosyası içerinde bulunan CSS ve Bootstrap.js dosyalarını tanımlayan kısımları siliyoruz. Böylece dosyayı tekrar açtığınızda tasarımın artık düzgün bir şekilde görüntülendiğini fark edeceksiniz.
- com adresine gidiyoruz ve JavaScript bölümünden Carousel kısmı için gerekli olan Scripti kopyalayıp, sayfamızda görüntülenmesini istediğimiz yere yapıştırıyoruz.
- Kullanacağımız Slide efektleri için gerekli active class satırı yalnızca ilk Slide satırında bulunmalıdır. Diğer satırlardan silmeniz gerekmektedir.
- İlave olarak imajlar için dosya yolunu ve Slide içerisinde kullanacağımız metni kod sayfasında düzenlememiz gerekiyor.
- Şimdi de üçüncü sütunu ekleyeceğiz. Bu işlem için Bootstrap sitesine tekrar gidiyoruz. Components-Thumbnail-Custom Content kodunu buradan alıyoruz ve sitemize kopyalıyoruz. Üçlü sütun olarak çalışacağız ve bunun için Row Div satırı içerisinde yer alan Div satırını çoğaltmamız gerekiyor.
- Footer alanını ekleyerek sitemizi tamamlamaya oldukça yaklaşmış olacağız. Daha önceden indirdiğimiz Examples klasörü içinde bulunan Sticky Footer klasöründe yer alan kodu kopyalamamız yeterli olacaktır. Kodu sayfanızda istediğiniz yere yapıştırabilirsiniz.
- Artık sitemiz tamamen hazır. Dilerseniz farklı yöntemlerle, farklı tasarımları gerçekleştirebilirsiniz. Biz bu yazımızda sadece, temel olan tasarım aşamalarından bahsetmiş olduk. Umarız Bootstrap ile sayfa kurulumu ile ilgili verdiğimiz bilgiler sizler için faydalı olmuştur.
Bootstrap İle Neler Yapabileceğinizi Hayal Edin
- Ücretsiz olmasının ayrı bir güzelliği var tabi ki. Onun dışında, Bootstrap ile aşağıdakileri yapabilirsiniz:
- Tasarım için saatlerce uğraşmazsınız. Belki de saniyeler içinde etkileyici tasarımlar yapabilirsiniz.
- Bootstrap yardımcı bir unsurdur. Daha önceden edindiğiniz temaya, istediklerinizi eklemenizi sağlar.Mobil uyumlu özelliği sayesinde, temanızın cep telefonlarında da etkileyici görünmesini sağlar. Ayrıca mobil tasarım için ciddi çabalar göstermeniz gerekmeyecektir.
- En önemlisi de web tasarımcıların en çok sıkıntı çektiği konulardan olan, tarayıcı uyumsuzluğu konusunu kafanıza takmamış olursunuz. Bootstrap sistemi, tüm tarayıcılar ile uyumludur.
- Bootstrap, CSS ve JS dosyalarını sıkıştırılmış olarak kullanır. Böylece web siteniz hiç olmadığı kadar hızlı hale gelebilir.