Bootstrap Nedir Ne İşe Yarar Web Sitesinde Nasıl Kullanılır ?
İçindekiler
Bu yazımız ile bootstrap nedir ne işe yarar konusunu anlatıp daha sonra gelecek yazılar ile daha ayrıntılı kullanımlarına değineceğiz.
Bootstrap Nedir Ne İşe Yarar ?
CSS ve Java script kodları sayesinde daha kolay ve hızlı bir şekilde siteler tasarlamamızı sağlayan araçları barındıran açık kaynak kodlu bir platformdur. Bu platformun en önemli özelliği responsive siteler tasarlamaya imkan vermesidir. Yeni bir kavram daha responsive bir de bu kavramı açıklayalım ki kafa karışıklığı olmasın.
Responsive Nedir ?
Bootstrap platformunun en önemli özelliği responsive siteler hazırlamaktır. Yani bilgisayar, tablet ve cep telefonlarında görüntülenen sitelerin o sistemin ekran çözünürlüğüne göre sayfayı boyutlarını otomatik olarak yeniden düzenlemesidir. Ayrıca bir çok hazır web sitesi bileşenini sadece koplaya yapıştır yöntemi ile kullanmanıza imkan vermektedir.
Bootstrap sitesine girildiğinde sitenizde kullanabileceğiniz bir çok bileşenin hazır kodlarına ulaşabilirsiniz. Örneğin sayfanızda Carosel (Slayt şeklinde resim) bölümü yapmak istiyorsunuz. Bunun için Carosel bölümüne girip oradan istediğiniz bir Carosel türünü seçip kodunu sitenize yapıştırmanız ve kendinize göre değişiklik yapmanız yeterli olacaktır. Ayrıca daha bir çok bileşenin de menüler, formlar gibi hazır kodlarını bulup sitenizde kullanabilirsiniz. Tabi bu kodların sitenizde çalışabilmesi için sitenize bootstrap ı dosyalarını entegre etmelisiniz.
Bootstrap Nasıl Kullanılır ve Siteye Entegre Edilir ?
Getbootstrap adresine girdiğimizde karşımıza çıkan sayfada getstarted ve download seçenekleri bulunmaktadır. Önce getstarted bölümünü anlatalım, bu bölüm seçildiğinde yeni acılan sayfada CSS kodunu kopyalayıp
bu kodu sitemizde bulunan <head> </head> bölümleri arasına yapıştırmamız gerekmektedir. Sonra JS bölümünde bulunan kodları da kopyalayıp sitemizin <body> …. bu kısma</body> bölümünün en altına ekliyoruz. Artık sitemiz bootstrap bileşenlerini çalıştırabilir duruma geliyor. Zaten css kodu ve js kodunun nerelere eklenmesi gerektiği ile ilgili bir örnek bölümünde aynı sayfada yer almakta.
Örnekte olduğu gibi kodlarımızı yerleşimini gerçekleştiriyoruz.
<html>
<head>
buraya css kodunu ekliyoruz
</head>
<body>
burayada JS kodunu ekliyoruz
</body
</html>
ve istediğimiz bileşenin kodunu alıp sitemizde kullanabiliyoruz.
Bu yöntem en kolay olanı.Bir de uzun yöntem var. Bunda da yükleme bölümünden bootstrap dosyalarını indirip sitemize yüklüyoruz. Sonra bootstrap klasörünün içinde css ve js klasörleri göreceksiniz aynı üstte anlattığımız gibi. css kodunu aşağıdaki örnekte olduğu gibi <head></head> etiketleri arasına ekliyoruz. burada dosya yolu olarak kendi sitemize göre düzenleme yapmalıyız.
Js klasöründe bulunan dosyayı yüklemek için ise yine kendi sitemize göre dosya yolunu ayarlayıp <body></body> etiketleri içerisinde en alt ekliyoruz.
<body>
Site kodları ve bileşenleri bu kısıma gelmelidir.
js kodu ise bu alana gelecek
</body> kodunun hemen üzerine ekliyoruz.
Bu sayede bootstrap bileşenlerini artık sitemizde çalıştırabilir duruma getiriyoruz.
