Çarşamba, 23 Mayıs 2018
Bootstrap Kullanımı ve Sayfa Yapısı
Eğitim

Bootstrap Kullanımı ve Sayfa Yapısı

Doruk Karaboncuk Doruk Karaboncuk
05 Aralık 2016

Bootstrap nedir öncelikle onu açıklayalım. Bootstrap sizi kod yazma yükünden kurtaracak bir framework olarak doğmuştur.

Bir CSS dosyası ile masaüstü, tablet ve mobil uyumlu harika siteler yaratabilirsiniz.

Bununla birlikte ihtiyacınız olan bir çok eklenti de Bootstrap ile beraber gelmektedir. Bunlara örnek vermek gerekirse menü yapıları, tab yapıları, hazır düğmeler, açılır kutular (Modal Box), uyarılar gibi ihtiyacınıza yarayacak bir çok eklenti içerisinde sunulmuştur. 

Kullanımı çok kolaydır ve hemen hemen her türlü tarayıcıda rahatlıkla çalışır.

Öncelikle buraya tıklayarak gerekli dosyalarımızı indirelim.

CDN kullanmak isteyenler de aşağıdaki kodları indirmeden direk olarak HTML dosyalarının içinde kullanabilirler.

<!-- Minimize edilmiş Bootstrap Stil Dosyası -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Minimize edilmiş Bootstrap Javascript Dosyası -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Bootstrap Yapısı ve Kullanımı

Bootstrap kullanımı çok detaylı olduğu için bu bölümde sadece yapısını anlatacağım. Dosyaları indirdiğimiz de CSS, Font ve JS klasörleri gelmektedir. CSS klasörünün içerisinde  kendi teması (ben kullanmıyorum) ve asıl stil dosyalarımız bulunmaktadır. Rahat düzenlemek açısından minimize edilmiş (.min.css) olanları başlangıçta kullanmamanızı tavsiye ederim.

Web sayfanızı tamamladıktan sonra bu adresten dosyanızı küçültebilirsiniz.

Dosyaları sunucumuza atıp ilk sayfamızı oluşturalım. İlk dosyamız için aşağıdaki örneği kullanabilirsiniz.

<!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">
    <!-- Yukarıdaki 3 satır mutlaka <head> kısmından sonra ilk gelmelidir. Ekleyeceğiniz dosyaları bu bölümden alt tarafa ekleyin -->
    <title>Yeni Sitem</title>

    <!-- Bootstrap Stil Dosyamız-->
    <link href="css/bootstrap.css" rel="stylesheet">

    <!-- Alt bölümdeki satırlar tabiki IE için düzeltmeler -->
    <!-- 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>Merhaba</h1>

    <!-- jQuery Bootstrap uygulamalarının çalışması için mutlaka gerekir -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <!-- Tüm uygulamaları tek dosya ile yükleyebilirsiniz -->
    <script src="js/bootstrap.js"></script>
  </body>
</html>

Yukarıda bulunan örnekte de ben min dosyaları yerine normal dosyaları yerleştirdim. Siz isteğinize göre isterseniz min dosyalarını kullanabilirsiniz.

Artık body etiketimize rahatlıkla bakabiliriz ve hangi boyutta nelerin gözükmesini isteyip istemediğimize karar verebiliriz.

Bir kapsayıcı div yapmamız gerekiyor öncelikle. Bunu iki şekilde yapabiliyoruz.

<div class="container"> İçerikler </div>

<div class="container-fluid"> İçerikler </div>

Sayfanızın düzenine göre yukarıdakilerden birini seçebilirsiniz. Container-fluid olan class yüzde mantığı ile çalışır. Alanımızı %100 açar ve yanlardan 15px padding (boşluk) bırakır. Diğer sadece container olansa belli bir boyuttadır (1140px masaüstü görünümde) ve aynı şekilde yanlardan 15px padding bırakır.

Bu container classlarını gerçek bir konteynır gibi düşünebilirsiniz. Artık onların içini doldurmaya başlayabiliriz. Bootstrap bize 12’li sistemle gelmektedir. Hayali konteynırımız 12 eşit parçaya bölünmüştür. Bu parçalara CSS dosyasında “Col” denilmektedir. Lg,md,sm ve xs ise konteynıra nereden baktığımızı gösterir. En sona da 12 eşit parçadan kaçını kullanacağını yazıyoruz.

Col-lg-*,col-md-*,col-sm-*,col-xs-* ne anlama gelir?

Bu framework ile hepsine alışacaksınız. Alıştıktan sonra o kadar rahat edeceksiniz ki artık tüm sitelerinize yukarıdaki şablonla başlayacaksınız.

Lg en büyük, md, sm ve xs olarak sıralanır.

Col-lg-*:   Büyük masaüstü çözünürlükleri,
Col-md-*: Masaüstü bilgisyarları
Col-sm-*: Tabletler
Col-xs-*:  Mobil

Şimdi bir örnek yapalım.

Yüksek çözünürlüklü bilgisayarlarda konteynırın enine 4 eşit parçada kullanmak istiyoruz. Daha az çözünürlüklü masaüstü bilgisayarlarda ise konteynırımızı 3 eşit parçaya bölmek istiyoruz. Tabletlerde 2 eşit parçada ve mobil versiyonda konteynırın eninin tamamını kullanmak istiyoruz.

Her zaman tam bir sıra oluşturmak için 12 bölüme tamamlıyoruz. Yukarıdaki gibi bir yapı yaratmak istersek bir div yaratıp içine aşağıdaki örneği yazıyoruz.

<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> İçerik </div>

Yukarıdaki kodu tek bölüm için yaptım. Ondan 4 tane eklerseniz yazınıza toplamda 4 bölüm için yapmış olursunuz. Fotoğraftaki örnekler tam otursun diye belirli sayılardadır sizi yanıltmasın.

Kolonların içerisinde tekrar kolon kullanmak

Zaman zaman kolonların içerisinde tekrar kolon kullanmamız gerekiyor. Örnek olarak sayfayı 2 ye bölüp, böldüğümüz kısımları da tekrar daha fazla kolona ayırmak gerekebiliyor.

Burada row classı devreye giriyor.

<div class="container">

<div class="col-sm-6">
   <div class="row">
      <div class="col-sm-6"> İçerik </div>
      <div class="col-sm-6"> İçerik </div>
   </div>
</div>

<div class="col-sm-6">
   <div class="row">
      <div class="col-sm-4"> İçerik </div>
      <div class="col-sm-4"> İçerik </div>
      <div class="col-sm-4"> İçerik </div>
      <div class="col-sm-4"> İçerik </div>
   </div>
</div>

</div>

Burada row classı padding (boşlukları) etksizi hale getirir ve size tekrar sanki bir container classı kullanıp içine yazıyormuşçasına alan bırakır. Row kullandığınızda da doldurmanız gereken kolon sayısı 12’dir.

Yukarıdaki örnek sayfayı ikiye böler. Bölünen alanların içinde sol bölümü ikiye, sağ bölümü de dörde böler. Örnekteki gibi illa hepsini aynı kullanmanız gerekmiyor. 12 kolona tamamladığınız sürece sıkıntı olmadan kullanabilirsiniz.

İç içe dilediğiniz kadar row kullanabilirsiniz. Row size konteynır içerisinde yeni bir konteynır yaratır.

Bootstrap konusu dediğim gibi uzun olduğu için hem soru sormanız açısından hem daha rahat anlatmak açısından parça parça yazacağım.

Sorunuz olursa yorum bırakabilir, başkalarının da bu eğitimden faydalanmasını isterseniz paylaşabilirsiniz.

Emoji ile Tepki Ver

6
2
1
2
0
1

Yorumlar

Registration Login
Sign in with social account
or
Lost your Password?
Registration Login
Sign in with social account
or
A password will be send on your post
Registration Login
Registration