Bootstrap'te Genişlik Ayarlarını Nasıl Yapmalıyım?

Grid sistemi kullanırken genişlik değerini nasıl vermeliyiz? Aşağıdaki kodda col-sm ekran boyutuna gelince karışıklık oluşuyor. Bu gibi durumlar nasıl çözülüyor.

Aşağıdaki 490px vermiş olduğum yerlerde sıkıntı çıkıyor.

<div class="container" style="980px"> 

<!-- Bloklar -->
<div class="row" style="">

<!-- Content -->
<div class="col-lg-8 col-md-8 col-sm-7 col-xs-6" style="padding-right:0;" >

<!-- Birinci İçerik-->
<div class="panel panel-default" style="border-color:transparent">
    <div class="panel-body">

    <!-- Resim -->
    <div class="pull-left">
        <a href="#" class="thumbnail" style="width:100px; height:100px; margin:0">
            <img class="media-object" src="temalar/v1/img/resim.png">
        </a>
    </div>
    <!-- #Resim -->

    <!-- Bilgiler -->
    <div class="pull-right" style="width:490px;">
        <p class="text-muted" style="border-bottom: 1px #eee solid; padding-bottom: 2px;">
            <small>
                <span class="pull-right">
                    <i class="fa fa-calendar-o fa-fw"></i> 10.05.2016 
                    <i class="fa fa-eye fa-fw"></i> 14 
                </span>
                <i class="fa fa-user"></i>
                <a href="#">Yazar: Admin</a>
            </small>
        </p>
    </div>
    <!-- #Bilgiler -->

    <!-- İçerik Başlık -->
     <a href="#" class="pull-right" style="width:490px;">
        <h5 style="font-size:18px; margin-top: 10px; margin-bottom: 10px;">Css İle Animasyon Yapımı</h5>
    </a>
    <!-- #İçerik Başlık -->

    </div>
</div>
<!-- #Birinci İçerik-->

</div>
<!-- #Content -->

<!-- Sidebar -->
<div class="col-lg-4 col-md-4 col-sm-3 col-xs-2" style="">Sidebar</div>
<!-- #Sidebar -->

</div>
<!-- #Bloklar -->
</div>

 

Grid sistemini ve Bootstrap'i biraz yanlış anlamışsınız. Grid kullanırken herhangi bir yerde manuel olarak genişlik eklemiyoruz.

Grid sistemi 4 versiyona ayırılıyor. Bunlar aşağıda listelenmiştir.

  • xs: Extra Small'ın kısaltılmış halidir. Mobil'i ifade eder.
  • sm: Small'ın kısaltılmış halidir. Tablet'i ifade eder.
  • md: Middle'ın kısaltılmış halidir. Bilgisayar ekranlarını ifade eder.
  • lg: Large'ın kısaltılmış halidir. Geniş ekranları ifade eder.

Bootstrap, .container sınıfına her ekran versiyonunda farklı bir genişlik veriyor. Yine aynı şekilde Kolonlara da her ekran versiyonunda farklı bir genişlik veriyor. Yani Bootstrap kendi bileşenlerini ve kodlarını bütün ekranlara göre konumlandırıp stillendirmiş. Bizim ayrıca genişlik vermemize gerek yok. Şimdi ufak örnekler yaparak konuyu pekiştirelim.

<div class="row">
  <div class="col-md-8">
    Burası ekran genişliğinin yaklaşık 8/12'ünü kaplayacak
  </div>
  <div class="col-md-4">
    Burası ekran genişliğinin yaklaşık 4/12'ünü kaplayacak
  </div>
</div>

Yukarıdaki kod md ve lg versiyonda ekran genişliğini 8 ve 4 olarak ayarlayacak. Bir de aşağıdaki koda bakalım.

<div class="row">
  <div class="col-xs-10 col-sm-6 col-md-7 col-lg-8">
    Burası lg'de yani geniş ekranlarda ekran genişliğinin yaklaşık 8/12'ünü kaplayacak
    Burası md'de yani normal ekranlarda ekran genişliğinin yaklaşık 7/12'ünü kaplayacak
    Burası sm'de yani tablet ekranlarında ekran genişliğinin yaklaşık 6/12'ünü kaplayacak
    Burası xs'de yani mobil ekranlarda ekran genişliğinin yaklaşık 10/12'ünü kaplayacak
  </div>
  <div class="col-xs-2 col-sm-6 col-md-5 col-lg-4">
    Burası lg'de yani geniş ekranlarda ekran genişliğinin yaklaşık 4/12'sini kaplayacak
    Burası md'de yani normal ekranlarda ekran genişliğinin yaklaşık 7/12'sini kaplayacak
    Burası sm'de yani tablet ekranlarında ekran genişliğinin yaklaşık 6/12'sini kaplayacak
    Burası xs'de yani mobil ekranlarda ekran genişliğinin yaklaşık 2/12'sini kaplayacak
  </div>
</div>

Yukarıda ki örnekleri inceleyerek ve deneme yanılma yöntemiyle kodları çalıştırarak Grid sisteminin mantığını daha iyi kavrayabilirsin.

NOT: Div'lerin varsayılan özellikleri Block'dur. Bootstrap'ta mevcut ekran genişliği ile ilgili herhangi bir tanım yapılmadığı sürece bir alt versiyonda ki tanımları dikkate alır. İlk iki örnekte lg versiyonu tanımlanmadığı için lg versiyonda yani geniş ekranda giriş yapan kullanıcı bir alt versiyon yani md versiyonun tanımını dikkate alır. Eğer md versiyonunda da herhangi bir tanım yapılmamışsa daha alt versiyonların tanımlarını dikkate alır. Eğer herhangi bir tanım yapılmamışsa kullanılan elementin özelliğini alır (yukarıda div elementi kullanıldığı için varsayılan olarak block özelliği alır).

-

Bootstrap ile çalışırken ilgili sayfaya ilk önce Bootstrap CSS kütüphanesi dahil edilir. Sonrasında bir custom.css dosyası oluşturarak bu dosya üzerinden Bootstrap bileşenlerine ve elemanlarına müdahale edilebilir ve yeni özellikler de eklenebilir. Örneğin;

...
<head>

  ....
  
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/custom.css">  
</head>
...

Yukarıda görüldüğü gibi sayfamıza ilk önce Bootstrap kütüphanesinin CSS dosyasını dahil ettik. Sonrasında ise custom.css adında bir dosya oluşturup bu dosyayı sayfamıza dahil ettik. Daha iyi anlamak için birde custom.css sayfamıza bakalım.

@charset "utf-8";

/* Bootstrap düzenlemeleri */
.navbar {
  background: blue;
  border: 0;
  border-radius: 0;
}
.jumbotron {
  background: #fafafa;
  padding: 15px;
}

/* Genel düzenlemeler */
.header {
  background: yellow;
}

Görüldüğü gibi Bootstrap düzenlemelerini yerel stillendirme yöntemiyle değilde custom (özel) adında bir dosya oluşturup oradan yapıyoruz. 

Teşekkür ederim Nurullah Bey. Ama ben hala birkaç noktayı anlamadım.

1) container'a genişlik vermemize gerek yok demişsiniz. Peki sayfanın genişliğini istediğimiz şekilde nasıl ayarlayacağız?

2) custom.css şeklinde biliyorum ama önce sonucu görmek için style olarak deniyorum.

3) Colonların yapısını anladım onlara genişlik vermiyoruz onlar otomatik.
Ama mesela col-sm-7 bir grid yapısı içindeki elemanın genişliği meseleseni anlayamadım.

Diyelimki col-sm-7 classlı bir yapım var. Bunun içinde iki adet sağ ve sol olacak şekilde div kullanmak istiyorum. Sol div'in genişlik ve yüksekliği 100px boyutunda, sağ div'in genişliği ise 490px olsun. İşte anlamadığım nokta burası. col-lg-8 düzgün görülen div'ler col-sm-7'ye düşünce divlerde kayma oluyor. Bu kayma sorunu nasıl düzeltiliyor. Yoksa grid yapısı içinde yine grid yapısı mı kullanmak gerekiyor?

<div class="container">

<!-- Row -->
<div class="row">

<!-- Grid -->
<div class="col-lg-8 col-md-8 col-sm-7">

    <!-- İçerik -->
    <div class="panel panel-default" style="border-color:transparent">
        <div class="panel-body">

        <!-- Sol Div -->
        <div style="width:100px; height:100px; margin-right:15px; float:left">
            <a href="#" class="thumbnail" style="margin:0">
                <img class="media-object" src="temalar/v1/img/logo.png">
            </a>
        </div>
        <!-- #Sol Div -->

        <!-- Sağ Div -->
        <div style="width:490px; float:right">
         <a href="#">
            <h5 style="font-size:18px; margin-top: 10px; margin-bottom: 10px;">Css İle Animasyon Yapımı</h5>
        </a>
        </div>
        <div class="clearfix"></div>
        <!-- Sağ Div -->
        </div>
    </div>
    <!-- #İçerik -->

    <!-- Sidebar -->
       <div class="col-lg-4 col-md-4 col-sm-3">Sidebar</div>
    <!-- #Sidebar -->
              
</div>
<!-- #Grid -->

</div>
<!-- #Row -->
</div>

 

Container sınıfının varsayılan bir değeri var. Bu değer ekran boyutlarına göre değişiyor. Bu değerleri Grid Ayarları tablosunda Container Width sutununda görebilirsin. Bu genişliği düzenlemek isterseniz de aşağıdaki örnekten faydalanabilirsiniz.

// Bu genişlik, ekran genişliği minimum 1200 px olunca çalışacak.
@media screen and (min-width: 1200px) {
  .container { width: 850px; }
}

Son soruda neyi anlamadığınızı anlayamadım :)

Bootstrap kullanıcılara 12'lik grid sistemi sunuyor. Bu da demek oluyor ki; bir alandaki kolonların toplamı her zaman 12 olmak zorunda. Bu 12'lik grid sistemiyle bir ekranı/alanı 1, 2, 3, 4 ve 6'ya bölebiliriz. Her ekran için farklı grid tanımlamanıza gerek yok. İsterseniz sadece xs versiyonunu tanımlayıp bütün ekranlarda aynı kolon genişliğini sunarsınız. İsterseniz de her ekran için ayrı ayrı tanım yaparsınız.

Teşekkür ederim.

Son soruda kayma problemini nasıl düzeltiyoruz onu anlamadım :) Yani Sol ve Sağ divin boyutu otamatik küçülmüyor direkt olarak kayma oluyor. Bunun nedeninin genişlik vermemden dolayı olduğunu düşünüyorum ama çözümünüde bilmiyorum.

Son örneğinde sidebar kısmı .col-md-8'in içinde kaldığı için alt satıra geçmiş. Kod yazarken hiyerarşiye dikkat edersen daha iyi olur. Yazdığın kodu Bootstrap standartlarına uygun kodladım inceleyebilirsin. Bootstrap Bileşenleri sayfasından bileşenlere arada bir göz atmanda fayda var. Ayrıca türkçe Bootstrap dökümanı okumak istiyorsanda trbootstrap adresini ziyaret edebilirsin. Yukarıda yapmaya çalıştığın yapıyı Bootstrap'in Media bileşeni ile rahatlıkla yapabilirsin. 

<div class="container">
  <div class="row">
    <!-- Content -->
    <div class="col-md-8 col-sm-7"> 
      <div class="media">
        <div class="media-left">        
          <a href="#" class="media-object">
            <img src="http://lorempixel.com/50/50/food" class="thumbnail">
          </a>
        </div>
        <div class="media-body media-middle">
           <div class="media-heading">Css İle Animasyon Yapımı</div>
        </div>
      </div>
    </div>
    
    <!-- Sidebar -->
    <div class="col-lg-4 col-md-4 col-sm-3">Sidebar</div>
  </div>
</div>

 

Teşekkür ederim Nurullah Bey.

Cevap Yaz

Cevap yazabilmek için üye girişi yapmanız gerekiyor!

Yukarı Git