Bootstrap Nedir ? Nerede Kullanılır? Nasıl Kullanılır?
Bootstrap, Html 5 yapısını kullanan, css yapısıyla zenginleştirilmiş, özellikle responsive (Mobil uyumluluk) tasarımları kolayca geliştirebilmek için üretilmiş bir kütüphanedir.
Mobil cihazların yaygın olarak kullanılmasıyla beraber, site tasarımlarının mobil cihazlardaki (cep telefonu, tablet vb.) görünümü hayli önem kazanmıştır. Mobil cihazların ekranlarının ve çözünürlüklerinin küçük olması sebebiyle masaüstü ortamları için tasarlanan internet sitelerinin bu cihazlarda görünürlük problemleri ortaya çıkmıştır. Küçük ekranlı cihazlarda tam sayfa görünen sitelerin okuma zorluğu tasarımcıların, sitenin mobil uyumluluğu üzerinde çalışmasını da zorunlu kılmaktadır. Ayrıca mobil uyumluluk Google gibi arama motorları için önemli referanslardandır.
Mobil uyumlu sitelerin kullanılabilirliği ve okunabilirlik deneyimi şüphesiz responsive olmayan sitelere göre daha başarılı. tasarımcılar ve programlayıcılara yönelik olarak responsive tasarımlar yapmaya yardımcı olacak en önemli kütüphane bootstrap kütüphanesidir. Meraklıları için yazı dizisi oluşturmaya karar verdim.
Bootstrap Nasıl Kullanılır ?
bootstrap’ın hazır bir kütüphane olduğunu ifade etmiştim. Bootstrap kütüphanesini bağlantı adresinden indirebilirsiniz.
Sarıyla boyadığım indirme türü çekirdek olarak başlangıç düzeyinde işimizi görecektir. Dilerseniz web Programcılarının daha gelişmiş içerikler oluşturmasına yardımcı olacak bootstrap kaynak dosyalarını da ilgili bağlantıdan indirebilirsiniz.
BootStrap’ın Dosya Yapısı
İndirdiğimiz Bootstrap dosyasının hiyerarşik dosya yapısı bu şekildedir. İndirdiğimiz dosya paketi içerisinde css, js ve fonts olmak üzere 3 klasör göreceğiz. Bu üç klasörü sitemizin kök klasörüne kaydetmemiz gerekiyor.
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ └── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2
Ben Uygulamaları ve örnekleri Visual Studio yazılımı üzerinde gerçekleştireceğim. DreamVeawer, brackets yada başka tasarım editörlerinde de uygulama geliştirebilirsiniz.
Ayrıca Bootstrap ile içerik üretebilmek için css klasörü içerisinde yer alan bootstrap.min.css dosyasının sayfaya çağrılması gerekiyor. Aşağıdaki kodu sayfamızın <head></head> bloklarının arasına yerleştirmeyi unutmayacağız.
<link href=”css/bootstrap.min.css” rel=”stylesheet”>
Sayfamızın bir html 5 dökümanı olması için eklediğimiz sayfanın başlangıç kısmın aşağıdaki şekilde düzenliyoruz.
<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”css/bootstrap.min.css” rel=”stylesheet”>
/head>
<body>
…….
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js”></script> <script src=”js/bootstrap.min.js”></script>
</body></html>
Body kod bloğu bitmeden hemen önce;
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js”>
</script> <script src=”js/bootstrap.min.js”></script>
2 script kod satırı bloğunu sayfamıza dahil etmemiz gerekiyor.
En sade haliyle bir bootstrap çalışma sayfası hazırlamış olduk. İlgili düzenlemeleri yaptıysanız eğer artık mobil uyumlu sayfalar hazırlamaya hazırsınız demektir.
*** Soru sormak için sayfamızın yorum bölümünü kullanabilirsiniz. Sorduğunuz sorulara mutlaka 48 saat içerisinde cevap verilecektir. Bir sonraki dersimizde görüşmek üzere…
Visual Studio ile hazırlanmış Örnek Bootstrap Çalışma Sayfası
seyfi
03 Nisan 2017 at 15:04
devamını bekliyoruz. Türkçe kaynak adına güzel bir çalışma olmasını diliyorum.
İbrahim FİDANCAL
03 Nisan 2017 at 15:06
2. Ders hazir sayilir. Yorum icin tesekkurler.