Bootstrap Dersleri – 4 | Hizalama Nasıl Yapılır?

Teknotower desteği ile Bootstrap dersleri serimizin 4. bölümüyle devam ediyoruz. Bu derse başlamadan önce başlangıç dersimizi okumanızı tavsiye ederim.

Bu dersin içeriği:

1. Flex nedir?
2. Satır-sütun hizalama nasıl yapılır?
3. Order sınıfı nedir?
4. Offset sınıfı nedir?
5. Metin hizalama nasıl yapılır?
6. Renklendirme nasıl yapılır?

Flex Nedir?

Esnek Kutu Yerleşimi (Flexible Box Layout) olarak bilinen Flex(esnek), bildiğimiz CSS3 modüllerinden türemiş bir yapıdır. Yerleştireceğimiz kutuları etrafında var olan cisimlerden bağımsız bir şekilde konumlandırır. Önceki Flex(esnek kutu) modülleri;

• display:box : 2009’da standartlaşmıştır ve şu an kullanılmıyor. Sadece mobildeki sayılı tarayıcılar destekliyor.
• display:flexbox : 2011’de tanımlanmıştır. Hibrit bir çözüm. Şu an kullanılmıyor. Sadece İE 10 destekliyor.
• display:flex  : 2014 mart ayında standartlaştı ve şu an kullanımda olan tanım. Yeni nesil tarayıcıların tümü destekliyor.

Dersimizde CSS sınıflarımızın çoğunda kullanacağımız Flex’i, “d-flex” biçiminde kullanacağız. Bu display-flex’in kısaltılmış şekli olarak düşünülebilir.

Satır-Sütun Hizalama Nasıl Yapılır?

Konumlandırma işlemini iki şekilde gerçekleştirebiliriz. Bunlar: yatay ve dikey konumlandırmadır.

• Sütunları yatayda konumlandırma:

*justify-content-* sınıfını kullanacağız. Grid (ızgara) yapısında ufak eklemelerle daha farklı sonuçlar elde edilebilir. Örneğin sütun genişliğimiz toplamda 12 olması gerekirken biz 9 kullanıp, boş kalan 3’lük alanı boşluk olarak kullanıp, görüntünün daha iyi anlaşılmasını sağlayacağız. Bu boş alana göre sütunlarımız için  hizalama yapabiliriz. Bunun için row’un bulunduğu div e div’leri;

• ortalamak için –> justify-content-center
• sola yaslamak için –> justify-content-start
• sağa yaslamak için –> justify-content-end
• genişliğine göre aralarında boşluk bırakmak için –> justify-content-between
• genişliğine göre etrafında ve aralarında boşluk bırakmak için –> justify-content-around değerleri verilir.

Görselin kodu aşağıdaki gibidir.

    <h2>Hizalama</h2>
    <hr>
  <div class="container-1">
  <hr>

      <p class="font-weight-bold">ÖRNEKLER</p>

<p>Yatayda Hizalama</p>
 <hr>
         --------- Örnek 1
         <div class="d-flex justify-content-start ">
           <div class="col-example">col</div>
           <div class="col-example">col</div>
           <div class="col-example">col</div>
         </div>
         <br><br><hr>
         --------- Örnek 2

         <div class="d-flex justify-content-end ">
           <div class="col-example">col</div>
           <div class="col-example">col</div>
           <div class="col-example">col</div>
         </div>
         <br><br><hr>
         --------- Örnek 3

         <div class="d-flex justify-content-center">
           <div class="col-example">col</div>
           <div class="col-example">col</div>
           <div class="col-example">col</div>
         </div>
         <br><br>  <hr>
         --------- Örnek 4

         <div class="d-flex justify-content-between ">
           <div class="col-example">col</div>
           <div class="col-example">col</div>
           <div class="col-example">col</div>
         </div>
         <br><br><hr>
         --------- Örnek 5

         <div class="d-flex justify-content-around">
           <div class="col-example">col</div>
           <div class="col-example">col</div>
           <div class="col-example">col</div>
         </div>

• 

• 

• Sütunları düşeyde konumlandırma:

*align-items- ya da align-self-* sınıflarını kullanacağız. Bootstrap 4’te dikey hizalama işlemleri 2 şekilde yapılabilir. 1. yöntem row ‘un içine yerleştirilmiş olan tüm sütunları, üst orta veya alt değerlerinde dikey olarak konumlandırır. Aşağıdaki örnekte row’un bulunduğu div’e sütunları dikey olarak;

• üstte konumlandırmak için –> align-items-start
• ortada konumlandırmak için –> align-items-center
• altta konumlandırmak için –> align-items-end değerleri verilir.

2. yöntem ise tek bir sütunun dikeydeki hizalanmasını değiştirmektir. Bunun için; istenilen sütuna dikey olarak;

• üstte konumlandırmak için –> align-self-start
• ortada konumlandırmak için –> align-self-center
• altta konumlandırmak için –> align-self-end değerlerini col değerinden sonra yazmak yeterlidir.

Düşeyde uygulanacak olan sınıfların kullanımı da aşağıdaki kodda görüldüğü gibidir.

           <div class="d-flex align-items-start">
                <div class="p-2 bd-highlight">col</div>
                <div class="p-2 bd-highlight">col</div>
                <div class="p-2 bd-highlight">col</div>
              </div>
           <div class="d-flex align-items-end">
                <div class="p-2 bd-highlight">col1</div>
                <div class="p-2 bd-highlight">col1</div>
                <div class="p-2 bd-highlight">col1</div>
              </div>
           <div class="d-flex align-items-center">
                <div class="col-example">col</div>
                <div class="col-example">col</div>
                <div class="col-example">col</div>
              </div>
           <div class="d-flex align-items-baseline">
                <div class="col-example">col</div>
                <div class="col-example">col</div>
                <div class="col-example">col</div>
              </div>
           <div class="d-flex align-items-stretch">
                <div class="col-example">col</div>
                <div class="col-example">col</div>
                <div class="col-example">col</div>
              </div></div>

Order sınıfı nedir?

Order sıralama sınıfıdır. Var olan sıralamayı değiştirme yardımı sağlar. Örneğin; var olan sıralamamız col-1, col-2, col-3 ve col-4 olsun. Burada, col sınıflarımıza istediğimiz gibi order-1, order-2, order-3 ve order-4 şeklinde özellik verebiliriz. Col-1’e, order-3, Col-2’ye, order-1,   Col-3’e, order-4,   Col-4’e, order-2 şeklinde yaparsak, Sıralama col-1, col-2, col-3 ve col-4 iken; col-2, col-4, col-1 ve col-3 olacaktır.

  <div class="d-flex flex-nowrap bd-highlight">
  <div class="order-3 p-2 bd-highlight">1. yazı </div>
  <div class="order-2 p-2 bd-highlight">2. yazı </div>
  <div class="order-1 p-2 bd-highlight">3. yazı </div>
</div>

Offset sınıfı nedir?

Sütunlar etrafında boşluklar ile konumlandırma–> *offset-md-* Offset ile sütunun sol tarafında istenilen genişlikte boşluk bırakılması sağlanır. Örneğin, “col-md-6 offset-md-3″ şeklinde kullanımı mevcuttur. Özelliği verildiğinde sol tarafında 3 birim genişliğinde boşluk bulunan 6 birim genişliğinde bir sütun oluşturulmuş olur.

Metin hizalama nasıl yapılır?

Kutu içerisine yazmış olduğumuz yazıları, kutu kenarlarına göre konumlandırmamız da mümkündür. Peki ya nasıl? Hadi bakalım! Metin hizalama sınıfları ve kullanım amaçları aşağıdaki gibidir:

• text-left: Sola dayalı metin.
• text-center: Ortalanmış metin.
• text-right: Sağa dayalı metin.
• text-justify: Satır uzunluğunca hizalanmış metin.
• text-nowrap: Satırı doldurmuş metin.Koda ve ekran çıktısına bakacak olursak eğer:

  <p class="text-left">   Sola  dayalı metin .</p>
  <p class="text-center"> Ortalanmış  metin .</p>
  <p class="text-right">  Sağa  dayalı metin .</p>
  <p class="text-justify">Satır uzunluğunca metin. </p>
  <p class="text-nowrap"> Satırı doldurmuş metin .</p>

Renklendirme Nasıl Yapılır?

Renklendirme için kullanılacak sınıflar:

1. muted
2. primary
3. success
4. info
5. warning
6. danger
7. secondary
8. dark
9. body
10. light     sınıflarını kullandığımızda oluşacak olan renkler aşağıdaki gibidir.

Yukarıdaki görselin kodu:

  <h2>Renklendirme</h2>
  <a href="#" class="text-muted">     class="text-muted </a>     <br><br>
  <a href="#" class="text-primary">   class="text-primary </a><br><br>
  <a href="#" class="text-success">   class="text-success </a><br><br>
  <a href="#" class="text-info">      class="text-info </a><br><br>
  <a href="#" class="text-warning">   class="text-warning </a><br><br>
  <a href="#" class="text-danger">    class="text-danger </a><br><br>
  <a href="#" class="text-secondary"> class="text-secondary </a><br><br>
  <a href="#" class="text-dark">      class="text-dark </a><br><br>
  <a href="#" class="text-body">      class="text-body </a><br><br>
  <a href="#" class="text-light">     class="text-light </a><br><br>

Arka Plan Renklendirme:

Arkaplan renklendirme için kullanılan sınıflar:

1. bg-primary text-white
2. bg-success text-white
3. bg-info text-white
4. bg-warning text-white
5. bg-danger text-white
6. bg-secondary text-white
7. bg-dark text-white
8. bg-light text-dark sınıfları kullanılır.

Peki kullandığımızda oluşacak olan renkli görüntü ve kod nasıl olacak?

  <div class="container">
    <h2>Arka Plan Renklendirme</h2>

    <p class="bg-primary text-white">  Bu   class="bg-primary text-white  </p>
    <p class="bg-success text-white" > Bu   class="bg-success text-white   </p>
    <p class="bg-info text-white">     Bu   class="bg-info text-white  </p>
    <p class="bg-warning text-white">  Bu   class="bg-warning text-white  </p>
    <p class="bg-danger text-white">   Bu   class="bg-danger text-white  </p>
    <p class="bg-secondary text-white">Bu   class="bg-secondary text-white  </p>
    <p class="bg-dark text-white">     Bu   class="bg-dark text-white  </p>
    <p class="bg-light text-dark">     Bu   class="bg-light text-dark  </p>
  </div>

Alışılagelenler

Dersi bitirmeden evvel, ufak bir konuya değinmek istiyorum: Hindistan’da filleri yetiştirmek için, filler küçükken ayaklarına zincirle bir kazığa bağlarlarmış. Bu küçük filler zincirleri çıkarmak için çok çabalarlar, kendilerini yaralarlarmış. Fakat güçleri o zincirleri çıkarmaya yetmez. Hep tam gücüyle bunu çıkarmaya çalışırlar. Filler pratik zekalı hayvanlardır. Buna rağmen, çabaları sonuçsuz kalan filler, bir zaman sonra zincire alışır. Çıkarmak için bir daha çaba göstermemeye başlarlar. Sonucun değişmeyeceğini anlamışlardır. Zaman geçer. Filler kocaman olurlar. O zinciri çıkarabilecek güce sahip olsalar da asla tekrar o zinciri çıkarma çabasına girmezler. Küçükken çok deneyip aynı sonucu aldıklarından dolayı alışmışlardır. Özgür olamayacağına, kısıtlanmış olduğuna inanmışlardır artık. Artık kırılmayan, çıkmayan şey fillerin ayaklarındaki zincir değil, kendi zihinleridir.

Buna psikolojide “Öğrenilmiş Çaresizlik” denmektedir.

Hepimizin zihnindeöğrenme ile ilgili yerleşmiş zincirler var, onları koparalım.

Bootstrap kursları ve çekilişlerden haberdar olmak için kesinlikle Instagram sayfamızı takip edin.

Bu yazımızda, sizlerle beraber Bootstrap’te hizalama konusunu ele almış olduk. Bir sonraki yazımızda; görüntüleme, kenarlıklar ve daha fazlası ile beraber olmak üzere…