BootstrapTeknoKültürYazılım

Bootstrap Dersleri – 5 | Kenarlık

Teknotower desteği ile Bootstrap dersleri serimizin 5. bölümü olan “Kenarlık” ile devam ediyoruz.

Bu derse başlamadan önce başlamanız için başlangıç dersimizi okumanızı tavsiye ederim.

Dersleri takip ediyorsanız eğer bir önceki dersimiz olan “Hizalama” konusunu okumanızı öneririm.

Bu Dersin İçeriği:

  • Bootstrap’de kenarlık nasıl eklenir?(border)
  • Padding- Margin kullanarak neler yapılabilir?
  • Float‘ın amacı nedir?
  • Görüntüleme (display) nasıl kullanılır?
  • Eleman gizleme nasıl yapılır?(hidden-visible)
  • Boyutlandırma nasıl yapılır?(height-width)
  • Position sınıfları kullanımı nasıl yapılır?
  • Arkaplan resmi nasıl eklenir?(background image)

Bootstrap’de Kenarlık(border) Nasıl Eklenir?

Kenarlıklar (border) , kutu kenarlığı, herhangi bir yazının kenarı ya da resimin kenarları Olabilir. Bu kenarları şekillendirmek mümkün.

Kenarlık kullanımı için kullanacağımız sınıf “border”’dir.

Peki border türleri nelerdir?

  • Tüm kenarlar için kenarlık kullanımı –>border sınıfı ile,
  • Üst kenar için kenarlık –> border-top sınıfı ile,
  • Sağ taraftan kenarlık verme –>border-right sınıfı ile,
  • Alt kısımdan kenarlık verme –>border-bottom sınıfı ile,
  • Sol taraftan kenarlık verme –>border-left sınıfı ile yapılır.
bootstrap kenarlık
Yukarıdaki kenarlık sınıflarımızın kullanım şeklidir.

Kod ise şu şekildedir;

      <span class="border">        tüm kenarlar </span><br><br>
      <span class="border-top">    üst kenar </span><br><br>
      <span class="border-right">  sağ kenar </span><br><br>
      <span class="border-bottom"> alt kenar </span><br><br>
      <span class="border-left">   sol kenar </span><br><br>

Kenarlık rengi nasıl eklenir?

4. dersimizde değindiğimiz renk sınıfları burada da geçerli ve şu şekildedir;

  • class=”border border-primary”
  • class=”border border-secondary”
  • class=”border border-success”
  • class=”border border-danger”
  • class=”border border-warning”
  • class=”border border-info”
  • class=”border border-light”
  • class=”border border-dark”
  • class=”border border-white” ‘dir.
bootstrap kenarlık renklendirme
Boostrap kenarlık renkleri

Kodu görecek olursak eğer;

      <span class="border border-primary"  >    kenarlık renkleri</span><br><br>
      <span class="border border-secondary"  >  kenarlık renkleri</span><br><br>
      <span class="border border-success"  >    kenarlık renkleri</span><br><br>
      <span class="border border-danger"  >     kenarlık renkleri</span><br><br>
      <span class="border border-warning"  >    kenarlık renkleri</span><br><br>
      <span class="border border-info"  >       kenarlık renkleri</span><br><br>
      <span class="border border-light"  >      kenarlık renkleri</span><br><br>
      <span class="border border-dark"  >       kenarlık renkleri</span><br><br>
      <span class="border border-white"  >      kenarlık renkleri</span><br><br>

Resim kenarları nasıl düzenlenir?

  • Tüm köşeleri oval resim için –> class=”rounded” sınıfı,
  • Üst köşesi oval resim için –> class=”rounded-top” sınıfı,
  • Sağ köşesi oval resim için –> class=”rounded-right sınıfı,
  • Alt köşesi oval resim için –> class=”rounded-bottom” sınıfı,
  • Sağ köşesi resim için –> class=”rounded-left” sınıfı,
  • Yuvarlak çerçeveli resim için –> class=”rounded-circle” sınıfı,
  • Orijinal resim için –> class=”rounded-0″ sınıfı kullanılır.

Bu resim kenarlıklarını deneyecek olursak;

bootstrap kenarlık düzenlemesi
Bootstrap kenar düzenleme

NOT: Değişiklikleri fark etmek için köşelere dikkat ediniz!

Görselin kodu:

      <img src="tt.jpeg " class="rounded"><br>tüm köşeleri oval resim<br>
      <img src="tt.jpeg " class="rounded-top"><br>üst köşesi oval  resim<br>
      <img src="tt.jpeg " class="rounded-right"><br>sağ köşesi oval  resim<br>
      <img src="tt.jpeg " class="rounded-bottom"><br>alt köşesi oval resim<br>
      <img src="tt.jpeg " class="rounded-left"><br>sağ köşesi resim<br>
      <img src="tt.jpeg " class="rounded-circle"><br>yuvarlak çerçeveli resim<br>
      <img src="tt.jpeg " class="rounded-0"><br>orijinal  resim<br>

NOT : Benim kullanmış olduğum resmin adı “tt.jpeg” olduğu için sizlerde çalışmayacaktır. Bu sebeple, kenarlıkların uygulanmasını istediğiniz bir resmi çalıştığınız dosyanın içerisine aktarıp kullanabilirsiniz.

Padding – Margin Nasıl Kullanılır?

Sayfalara eklenen elemanların, etraflarındaki nesnelere göre konumlandırılması için margin ve padding kullanılır. Bunun için;

Margin – m padding – p  harfleri ile ifade edilir. Padding ve marginin yanında kenarları belli etmek için;

  • top (üst) –> t ,
  • bottom (alt) –> b ,
  • right (sağ) –> r ,
  • left (sol) –> l ,
  • x boyutu (sağ – sol) –> x ,
  • y boyutu (üst – alt) –> y ,
  • Şeklinde kullanımı vardır ve her tarafa aynı büyüklük verilecek ise boş bırakılır.

Padding ile yazı ve çerçeve arasına mesafe eklenebilir. Margin kullanılarak da çerçevenin kapsayıcısı arasındaki mesafeler arası için kullanılır.

bootstrap padding
Boostrap’de, css’de de olduğu gibi padding iç boşluğu temsil eder.
bootstrap margin
Bootrstrap’de, css’de de olduğu gibi margin dış boşluğu temsil eder.
      <div class="mt-3">Bu div'e üstten 3 birim margin verilmiştir.</div>
      <div class="p-2">Bu div'e her yönden 2 birim padding verilmiştir.</div>
      <div class="my-2 px-1">Bu div'e üstten ve alttan 2 birim margin ve soldan sağdan 1 birim padding verilmiştir.</div>

Şeklinde kullanılır. Ekran çıktısı ile anlaşılamayacağı için önemli değil. Fakat, bu kullanım web site tasarımlarında çokça kullanılır.

Float’ın Amacı Nedir?

Float, elemanları sabitlemek için kullanılır. Konumlandırılacak elemanların birine float özelliği verilip diğerine verilmezse görüntüde bozukluk meydana gelir. Buna dikkat edelim :)

float kullanımı
Float kullanımı

Görselin kodu:

      <div class="float-left">Float sola dayalı metin</div><br>
      <div class="float-right">Float sağa dayalı metin </div><br>
      <div class="float-none"> Konumu belirtilmemiş etrafındakilere göre konumlanan metin</div>

Ekran boyutuna göre:

      <div class="float-sm-left">    </div><br>
      <div class="float-md-left">    </div><br>
      <div class="float-lg-left">    </div><br>
      <div class="float-xl-left">    </div><br>

Şeklinde elemanları konumlandırmak da mümkün.

Tüm float sınıflarını görecek olursak;

  • .float-left,
  • .float-right,
  • .float-none,
  • .float-sm-left,
  • .float-sm-right,
  • .float-sm-none,
  • .float-md-left,
  • .float-md-right,
  • .float-md-none,
  • .float-lg-left,
  • .float-lg-right,
  • .float-lg-none,
  • .float-xl-left,
  • .float-xl-right,
  • .float-xl-none

Şeklinde boyutlara göre kullanımları vardır.

Görüntüleme(display) Nasıl Kullanılır?

Display(görüntüleme) için istenilen sayfa boyutuna göre görünürlük ayarlanır. Örneğin; xs ekranda bir navbar(menü çubuğu) olsun ve görüntülensin, xl ekranlarda da görüntülenmesin. İşte bunu ayarlamak için kullanılır.

Display sınıfları;

  • d-none–> Her şeyi gizlemek için,
  • d-inline –> Elementlere varsılan olarak verilen yükseklik, genişlik gibi özellikler d-inline sınıfını etkilememesi ve yan yana basılması için ,
  • d-inline-block –> Elemenetler hem yan yana hemde var sayılan kendi değerlerini korumaları için,
  • d-block –> Eelementlere varsayılan değer vermek için,
  • d-table –> Dikey hizalaması ve tablo özelliği taşıması için ,
  • d-table-cell –> Elementlere birer tablo hücresi özelliği vermek, öğeyi ortalamak ve dikey hizalamayı kolaylaştırmak için,
  • d-flex –> Flex containeri satır içi yapmak için,
  • d-inline-flex –> Elementi varsayılan değerleri ile satır içi yapmak için kullanılır.

Display‘de görünürlük ve gizlilik için hangi sınıflar kullanılır?

Hepsinde gizli .d-none
Sadece xs’de gizli .d-none .d-sm-block
Sadece sm’de gizli .d-sm-none .d-md-block
Sadece md’de gizli .d-md-none .d-lg-block
Sadece lg’de gizli on .d-lg-none .d-xl-block
Sadece xl’de gizli .d-xl-none
Herkese görünür .d-block
Sadece xs’ye görünür .d-block .d-sm-none
Sadece sm’ye görünür .d-none .d-sm-block .d-md-none
Sadece md’ye görünür .d-none .d-md-block .d-lg-none
Sadece lg’ye görünür.d-none .d-lg-block .d-xl-none
Sadece xl’ye görünür.d-none .d-xl-block

Peki sm, md, lg ve xl neydi? Önceki derslerimizde değindiğimiz bu ekran boyutları ile ilgili kısaltmaları tekrar hatırlayalım beraber;

  • xs–> Extra small (<576px) — ekstra küçük,
  • md–> Medium (≥768px) — orta,
  • lg–> Large (≥992px) –> büyük,
  • xl–> Extra large ( ≥1200px ) ekstra büyük ekranlar için kullanılır.

Display, başlıklara uygulanan h1-h6 gibi de davranabilir.

Display
Display

Kod;

      <div class="container">
        <h1>Görüntüleme</h1>
        <h1 class="display-1">Display 1</h1>
        <h1 class="display-2">Display 2</h1>
        <h1 class="display-3">Display 3</h1>
        <h1 class="display-4">Display 4</h1>
      </div>

Display-inline ve display-block’un farkı aşağıdaki görüntüde olduğu gibidir;

Display sınıfları.
Display inline ve block.

Kod;

      <div class="d-inline p-2 bg-primary text-white">d-inline</div>
      <div class="d-inline p-2 bg-dark text-white">d-inline</div>
      <br><br><br>
      <span class="d-block p-2 bg-primary text-white">d-block</span>
      <span class="d-block p-2 bg-dark text-white">d-block</span>

Eleman Gizleme Nasıl Yapılır?

Display konusu ile benzerlik gösteren eleman gizleme, “hidden”(gizlemek için) ve “visible”(görüntülemek için) ile yapılır. Örneğin; web sayfasında görüntüleyip, mobilde görüntülemek istemediğiniz div sınıfınız var bunu nasıl yapabiliriz?

  • hidden-xs” class’ını kullanarak mobilde görüntülemek istemediğimiz gizleyebiliriz,
  • visible-xs-block” class’ını kullanarak da sadece mobilde görüntüleyebiliriz.

Boyutlandırma Nasıl Yapılır?

Web sitemizde oluşturduğumuz bir div ya da eklediğimiz resim için yükseklik ve genişliğini kendimiz ayarlamak istediğimiz anlar olur bunun için boyulandırma yaparız. Peki bunu nasıl ekleriz? Nasıl boyut büyüklüğünü değiştiririz? Hadi bunu % değerleriyle beraber yapalım!

Genişlik için “width”, yükseklik için “height” kullanacağız örnek olarak;

Boostrap genişlik ayarlanmış görsel.
Bootstrap genişlik ayarları.

Görselin kodu;

       <p>Genişlik </p>
      <div class="w-25 p-3" style="background-color: #eee;"> Genişlik 25%</div>
      <div class="w-50 p-3" style="background-color: #eee;"> Genişlik 50%</div>
      <div class="w-75 p-3" style="background-color: #eee;"> Genişlik 75%</div>
      <div class="w-100 p-3" style="background-color: #eee;">Genişlik 100%</div>

Yükseklik için;

bootstrap yükseklik ayaralanmış görsel
Bootstrap yükseklikleri ayarlanmış kutular.

Görselin kodu;


      <div style="height: 100px; background-color: rgba(255,0,0,0.1);">
      <div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)"> Yükseklik 25%</div>
      <div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)"> Yükseklik 50%</div>
      <div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)"> Yükseklik 75%</div>
      <div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Yükseklik 100%</div>
    </div>

Position(pozisyon) Sınıflarının Kullanımı Nasıl Yapılır?

  • class=”position-static” –> Statik konumlandırmak için,
  • class=”position-relative” –> Bağıl olarak konumlandırmak için,
  • class=”position-absolute” –> Mutlak konumlandırma için,
  • class=”position-fixed” –> Sabit konumlandırmak için,
  • class=”position-sticky” –> Bulunduğu yere yapıştırmak için kullanılır.

Arka Plan Resmi Nasıl Eklenir?

Bootstrap için arka plana resim ekleme CSS’de olduğu gibi iki şekilde yapılabilir:

  1. Bootstrap de, CSS’de olduğu gibi style etiketinin içerisinde arka plan resmi ayarlanabilir,
  2. Bulunduğumuz sınıfın yanında style etiketi açıp, arka plana resim ekelenebilir.

Örneğin;

Teknotower bootstrap dersleri
TeknoTower ile Bootstrap

Görselin kodu ise;

<div class="container" style="background-image:url(tt.jpeg);">
  <h1>BOOTSTRAP</h1>
  <h1>BOOTSTRAP</h1>
  <h1>BOOTSTRAP</h1>
  <h1>BOOTSTRAP</h1>
</div>

Bu şekildedir.

NOT: “url” parantezinin içerisine istediğiniz resmin kısa yolunu ekleyebilirsiniz.

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

Bootstrap derslerimizin 5.si olan bu derste, sizlerle beraber hizalama konusunu ele almış olduk. Bir sonraki yazımızda; yazı ayarları, tablolar ve daha fazlası ile beraber olmak üzere…

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.

Başa dön tuşu