Bootstrap Nasıl Kullanılır Ve Temel Tasarım Mantığı.

twitter-bootstrap

Merhaba arkadaşlar önceki yazımda Bootstrap’ın ne olduğu ve bootstrap ile neler yapabileceğimizden bahsetmiştik, bundan sonraki yazılarımızda da önceki yazımızda gördüğümüz özellikleri kendi tasarımlarımıza nasıl uyarlayabileceğimizden bahsedeceğiz.

Bootstrap nasıl kullanılır?

Bootstrap hazır bir css/js kütüphanesi olduğundan dolayı öncelikle kütüphanemizi getbootstrap.com adresine girip, Getting started linkine tıklayıp ve buradan Download Bootstrap deyip kütüphanemizi indiriyoruz. İndirdiğimiz Bootstrap-3.1.1-dist.zip dosyasının içinde bizim için gerekli olan css, js ve font dosyaları buluyor ama herhangi bir örnek tasarım bulunmamakta bu yüzden kendimiz index.html isimli bir dosya oluşturuyoruz. Ve oluşturduğumuz html dosyasınız içine aşağıdaki css ve js dosyalarımızın include edilmiş halinin kodunu ekliyoruz.

Basic Template:

<!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">
    <title>ilk Bootstrap Tasarımımız</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/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.0/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Temel Tasarım Mantığı

Gelelim Bootstrap’ın temel tasarım mantığına, Bootstrap bir sütunun genişliğini 12 parça halinde ele alıp farklı cihazlara göre esnetiyor.

div

 

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

Kod olarak da bu şekilde kullanabiliyoruz. Tabi bu sadece Bilgisayarlar için, farklı cihazlar için de div’lerimizin istediğimiz gibi görünmesini istiyorsak, mesela bilgisayarda 4 parça halinde görünen sayfamızı telefonda yada tablette 2 parça halinde göstermek istiyorsak kodlarımızı düzenlememiz gerekecek. Cep Telefonları için kullanacağımız Class .col-xs- , tabletler için kullanacağımız Class .col-sm- dir. Bunu yapmak için ise Class’ları örneğin aşağıdaki gibi düzenliyoruz.

<div class="row">
<div class="col-md-3 col-xs-6"></div>
<div class="col-md-3 col-xs-6"></div>
<div class="col-md-3 col-xs-6"></div>
<div class="col-md-3 col-xs-6"></div>
</div>

Bootstrap genel tasarım mantığı bu şekilde, sormak istediğiniz sorular olursa yorumlar aracılığıyla yardımcı olmaya çalışırım yine, teşekkürler..

 

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir