Bootstrap Nedir? Bootstrap Nasıl Kullanılır? Bootstrap Örnekleri
Bootstrap Nedir?
Bootstrap, Arayüz geliştiricileri için yapılmış, son derece kullanışlı, açık kaynak kodlu bir CSS framework'tür. Bootstrap kullanarak mevcut tüm tarayıcılarda hatasız çalışacak tablet, mobil cihaz, masaüstü uyumlu web siteleri yapabilirsiniz. Bununla beraber standart bir web sitesi için kullanılabilecek, ihtiyaç duyulacak tüm bileşenleri içerisinde barındırır. Bunlar kısaca tablolar, formlar, hata, onay, bilgi uyarıları, çeşitli butonlar, sayfalama, mobil uyumlu açılır menüler ve birçok kullanılabilir öğe barındırmaktadır.
Bootstrap Nasıl Kullanılır?
Sayfamızı HTML5 ile uyumlu hale çevirip Bootstrap dosyalarını sayfamıza eklememiz gerekiyor. Yapacağımız projede açılır menü, popup gibi şeyler kullanacaksak Bootstrap'a ait javascript'i ve jquery script'i sayfaya ekliyoruz.
Web tarayıcılarının yaptığımız sayfayı HTML5 olarak görmesini sağlamak için aşağıdaki şekilde DOCTYPE kullanacağız.
<!DOCTYPE html>
Burada önemli bir nokta <!DOCTYPE html> ekledikten sonra <html> etiketini açmamız lazım. Bu etiketi açmazsak <DOCTYPE html> sayfanın sadece HTML5 olduğunu belirtir ve <html> eklemezsek hatalı kullanım olur.
Bootstrap CSS dosyasını online dahil edeceksek:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Bootstrap CSS dosyasını projenin klasörüne indirip dahil edeceksek :
<link rel="stylesheet" href="dosyayolu/bootstrap.min.css">
Yazdığımız min ifadesi mevcut css dosyasında bulunan fazlalık boşlukların temizlendiğini gösterir ve bu şekilde daha az yer kaplayarak sayfanın açılış hızına katkı yapar.
Bootstrap Javascript ve Jquery Script dosyalarını projeye dahil edelim :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Bu noktada önemli olan şey ise, sayfa açılış hızını düşürmemiz için Bootstrap'ın da tavsiye ettiği şekilde yukarıdaki script dosyalarının sayfanın sonuna Body kapanış etiketinden </body> hemen önce eklemeliyiz.
Jquery dosyasını önce eklememizin sebebi ise sayfa açıldığında tarayıcının sayfayı baştan sona doğru satır satır okumasıdır. Bootstrap.min.js, Jquery kullandığından dolayı ilk önce Bootstrap.min.js dosyasını eklersek Jquery bulamayacağı için hata verecektir.
Proje sayfalarının mobil cihazlara ve tabletlere uyumlu olması için :
<meta name="viewport" content="width=device-width, initial-scale=1">
Ekleyeceğimiz bu kod sayfayı açan cihazın çözünürlüğü algılanıp sayfayı o cihaza göre boyutlandıracaktır. Bu kodu <head> </head> etiketlerinin arasına yerleştirin.
Yukarıda yaptığımız tüm işlemlerin son hali aşağıdaki örnekte bulunmaktadır :
<!DOCTYPE html> <html lang="tr-TR"> <head> <meta charset="UTF-8"> <title>Oguzhanavci.com Bootstrap Örneği</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap Css Dosyası --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> </head> <body> <h1>Sayfa içeriği.</h1> <!-- JavaScript Dosyası --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html>
Bu şekilde artık sayfamızda Bootstrap kullanabiliriz. Bootstrap kodları için bu linkten kullanabileceğiniz kodlara ulaşabilirsiniz.
Bundan sonrası için Bootstrap kullanımı ve örnekleri yayınlamaya devam edeceğim, takipte kalın.
Oğuzhan Avcı
2011 yılından beri Front-End geliştirici olarak çalışmaktayım. Front-End alanında HTML & CSS, Bootstrap, JavaScript, Responsive Web Design, SASS & LESS, UI / UX, Git Versiyon Kontr...
