BOOTSTRAP İLE BOYUTA ÖZEL TASARIM

Bootstrap açık kaynak kodlu bir html,css ve javascript kütüphanesidir(framework). Bootstrap'ın detaylarına bu yazıda değinmeyeceğim. Bu yazıda sizlerle bootstrap 4 beta sürümünde cihaza özgü boyutlara(xs-sm-md-lg) özel tasarım nasıl geliştirebiliriz ona göz atacağız. Yapacağım işlemin gözünüzde canlanması açısından sizlere bir örnekten bahsedeceğim. Böylece cihaza özgü tasarımdan neyi kastettiğimi de anlamış olacaksınız.

Elimizde bir adet navbarımız olduğunu ve bu navbarın sağ kısmında sosyal medya iconları için ayrılmış bir bölümün olduğunu gözünüzde canlandırın. Bu alan lg ve md boyutuna sahip olduğunda, tasarımımızın bu kısmında sosyal medya iconlarının yanında aynı zamanda bir yazının bulunmasını istiyorum.

Örneğimizi anlayabilmeniz açısından üstteki resim yeterli olabilir diye düşünüyorum.Bizim yapmak istediğimiz ise tasarımımızın sm boyutlarına ulaştığı zaman bu alanda bulunan yazının kaldırılması ve yalnızca sosyal medya iconlarının tasarımımızda gösterilmesi olsun.

Üstte de görebileceğiniz üzere tasarımımı responsive tasarım modunda açtığımda üstteki gibi bir görüntü elde ettim. Böylece tasarımımız lg ve md boyutlarında farklı sm boyutundan farklı bir görünüme sahip oldu.
Bu işlemi gerçekleştirebilmek için basit bir kod yazıyoruz.

d-none d-sm-block

Bu kod sayesinde tasarımımızda sm boyutunda istediğimiz bir alanı gizleyebilir, böylece sm boyutuna özel tasarımlar hazırlayabiliriz. Tahmin edebileceğiniz üzere sm kodu yerine lg,md,xs boyut isimleri de yer alabilir.Peki sm boyutuna ulaştığında gösterilecek tasarımı nasıl belirleyebiliyoruz ?
Oda oldukça basit bir kod sayesinde gerçekleştirilebiliyor.

d-sm-none

Üstteki kod sayesinde tasarımınızın sm boyutuna özel görünümünü elde etmesini sağlayabilirsiniz.

    <nav class="navbar navbar-expand-lg navbar-light bg-primary">
      <div class="container">
        <a class="navbar-brand" href="index.html" style="color:white;">OnurERGEN
        <img src="assets/deneme.jpg" width="50px" height="50px" alt="..." class="rounded-circle">
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link nav-l" href="index.html">ANASAYFA <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link nav-l" href="hakkimda.html">HAKKIMDA</a>
            </li>
          </ul>
          <span class="d-none d-sm-block navbar-text">             
            <i style="cursor:pointer;" class="fa fa-facebook" aria-hidden="true"></i>
            <i style="cursor:pointer;" class="fa fa-twitter" aria-hidden="true"></i> 
            <i style="cursor:pointer;" class="fa fa-instagram" aria-hidden="true"></i> 
            <i style="cursor:pointer;" class="fa fa-github" aria-hidden="true"></i>           
            <span>Software Developer, Open Source <i class="fa fa-heart"></i></span>
          </span>
          <span class="d-sm-none navbar-text navbar-center">
            <p><b>SOSYAL MEDYA</b></p>
            <i class="fa fa-facebook" aria-hidden="true" style="cursor:pointer;font-size: 20px;"></i>
            <i class="fa fa-twitter" aria-hidden="true" style="cursor:pointer;font-size: 20px;"></i> 
            <i class="fa fa-instagram" aria-hidden="true" style="cursor:pointer;font-size: 20px;"></i>
            <i class="fa fa-github" aria-hidden="true" style="cursor:pointer;font-size: 20px;"></i>          
          </span>
        </div>
      </div>
    </nav>


Olayı daha iyi anlayabilmeniz açısından üstten navbar'ın kodlarını inceleyebilirsiniz.

Okuduğunuz için teşekkür ederim.