Bootstrap.jpg-Bootstrap ile site yapmak-cahitsoyman.blogspot.comBootstrap; duyarlı, mobil web siteleri ve uygulamaları oluşturmak geliştirmek için dünyanın en popüler HTML, CSS ve JavaScript iskeletidir.

Bootstrap indirmek ve kullanmak tamamen ücretsizdir. Tasarım aracıdır. Kolayca masaüstü bilgisayarlar, telefonlar ve tabletler için farklı ve cihaz büyüklüğüne uygun sitenizin gözükmesi için tasarımlar yapabilirsiniz. Bu nedenle, bir site için lazım olan tüm bileşenleri (navigasyon bar, açılan menüler, formlar, butonlar, tablolar v.s.) içinde bulundurarak bütün cihazlara uygun site tasarımı yapmamızı kolaylaştırır. Stiller, js ler, imajlar hazır olduğundan bizim yapacağımız bunları sitemize çağırmaktır. 


Bootstrap.png-Bootstrap ile site yapmak-cahitsoyman.blogspot.com
Bootstrapı kullanmak için önce indirmemiz gerekmektedir. Tarayıcımızın adres satırına http://getbootstrap.com/ yazıyoruz. Sayfadaki bootstrapı (şu anda 3.3.6 versiyonu) hızlı bir şekilde başlatmak için bir kaç yolu bulunmakta olup, her biri farklı bir beceri seviyesine hitap etmektedir. Biz daha az deneyim isteyen en baştaki paketi indiriyoruz. 

İndirdiğimiz dosya içinde; css dosyaları, ikon olarak kullanılan fontlar, ve js dosyaları bulunmaktadır. Bu dosyaları index dosyamıza bağlamamız gerekmektedir.
Aslında biz web sitemizi hazırlarken bu dosyaları indirmemize gerek de yoktur. Çünkü; bununla ilgili tüm dökümantasyon  zaten sayfasında bulunmaktadır. Biz sadece gerekli bağlantı kodlarını buradan alarak sayfamıza kopyalayabiliriz.

Bootstrap ve buna benzer tüm plugin veya framework'leri belgemize dahil etmenin 2 yolu vardır. İlki CDN kullanmak, ikincisi de kütüphane dosyalarını kendi sunucumuzda host etmek. 


CDN kullanmak istersek de download butonunun hemen altındaki Bootstrap CDN bölümünden CDN adreslerini alabilirtiz. İndex sayfamıza bağlayacağımız kodlar aşağıda verilmektedir.

 
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/
css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxh
jVME1fgjWPGmkzs7" 
crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/
css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3u
ZzapT0u7EYsXMjQV+0En5r" 
crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" 
integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" 
crossorigin="anonymous">
</script>
Bu dosyaların (css, font ve js) kod yapısı aşağıdaki gibidir. Yani siteden indirdiğimiz css, js ve font klasörlerinin içinde aşağıda gösterilen dosyalar bulunmaktadır. 

 
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.woff2


 Bootstrapın bütün özelliklerini kullanabilmek için sayfamızı HTML5 e göre oluşturmalıyız. Bunun için yapacağımız her projede sayfamızın başına aşağıdaki kodu yazmalıyız.

 
<!DOCTYPE html>
<html lang="tr">
</html>
Şimdi basit bir bootstrap sayfası yapmak için aşağıdaki kodları kopyalayıp boş olarak oluşturduğumuz (notepad veya dreamweaverde) index.html dosyamıza yapıştıralım.

 
<!DOCTYPE html>
<html lang="tr">
  <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 101 Template</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.2/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.11.3/jquery.min.js"></script>
   <!-- Include all compiled plugins (below), or include individual files as needed -->    <script src="js/bootstrap.min.js"></script>                                              </body>                                                                                    </html>                                                                                                      




 Daha önceki bootstrapla ilgili aşağıdaki makaleleri de inceleyebilirsiniz.


Twitter Bootstrap Nedir ve Nasıl Kullanılır? Bölüm-1

Twitter Bootstrap Nedir ve Nasıl Kullanılır? Bölüm-2

Bootstrap Ile Web Sitesi Yapmak Bolum-3


 



Sonraki bölümde devam etmek üzere...