Merhaba arkadaşlar. Ben Uygar. Bu yazımda Bootstrap’dan bahsedeceğim.
[sam id=”1″ codes=”true”]
[sam id=”1″ codes=”true”]
Bootstrap Nedir
Eğer web geliştirme ile biraz ilgilendiyseniz Bootstrap terimini duymuşsunuzdur. Bootstrap’ın resmi sitesinde yazanlara göre Bootstrap, mobil öncelikli, duyarlı (ekran boyutu olarak), en popüler HTML, CSS ve JS iskeletidir (framework). Harika geliyor! Şimdi onu nasıl kullanacağız?
Bootstrap’ın “Getting Started” sayfası, size onu nasıl kullanabileceğiniz hakkında detaylı açıklamayı yapıyor. Öncelikle Bootstrap’ın Getting Started sayfasına buradan bakalım.
Öncelikle Bootstrap’ı indirmeliyiz. Bir web sitesi tasarlarken kullanabileceğimiz iki yöntem var. Bootstrap dosyalarını kendi sunucumuzda barındırmak veya Bootstrap CDN’ini kullanmak. Ben dosyaları indirmenizi tavsiye ederim. Çünkü basit bir örnek vermem gerekirse siteyi çevrimdışı olarak test etmek istediğinizde dosyaları yerel bilgisayarınızdan okuyabilirsiniz. Ancak çevrimdışı bir ortamda CDN yöntemi çalışmayacaktır.
Son sürüm Bootstrap’ı indirdikten sonra onu bir klasöre (örn: Masaüstüne bir klasör açın ve oraya çıkarın) çıkarın. Şimdi çıkardığınız dosyaların görevlerini anlatacağım.
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ ├── bootstrap-theme.min.css
│ └── bootstrap-theme.min.css.map
├── 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.woff2Klasörlerimiz bu şekilde. Bunlardan js ve css klasörlerini kullanacağız. css klasörünün içerisinde ise bootstrap.css ve bootstrap.min.css gibi dosyalar var. Bu dosyaların hepsini zamanla açıklayacağım ancak şimdilik bu ikisi yeterli olacaktır 🙂
bootstrap.css, Bootstrap’ın ana CSS frameworküdür. bootstrap.min.css ise onun en minimum halidir diyebiliriz. Minimum halini kullanmamız sayfamızın yüklenme hızı açısından avantajlı olacaktır.
Şimdi ilk örneğimize geçelim. Bu örnekte html belgemize Bootstrap’ı dahil edip geleneğe uyarak ekrana “Hello, world!” yazacağız 🙂
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap Hello World!</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>Bu örneği çalıştırdığımızda aşağıdaki gibi bir sayfa bizi bekliyor olacak:
Şimdi üstteki kodu açıklayalım. Bu yazıda sadece Bootstrap ile alakalı olan satırları açıklayacağım. HTML ile olan yazılarımızı okuyabilirsiniz 🙂
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
Bu satır, sayfanın ekran boyutlarına göre otomatik olarak değişmesini sağlıyor.
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
Bu satır ise Bootstrap’ı indirdiğimiz dosyalardan dahil ediyor.
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
Bu satırlar, tarayıcı uyumluluğu için var.
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
Jquery’yi yüklüyor. Jquery, Bootstrap’ın JS frameworkü için gereklidir.
<script src="js/bootstrap.min.js"></script>
Bu satırda ise Bootstrap JS frameworkünü yükledik.
Bu yazımız da buraya kadar arkadaşlar. Sorularınızı yorum aracılığı ile sormaktan lütfen çekinmeyin 🙂 Bir sonraki yazımda görüşmek üzere, hoşça kalın…
[sam id=”1″ codes=”true”]
[sam id=”1″ codes=”true”]
