1199

Komple Uygulamalı Web Geliştirme Eğitimi | 2019

Bootstrap Floats & Positions

Bootstrap 4 ile float ve position özelliklerini nasıl kullanabilirim?


Boostrap 4 ile Floating ve Positions 

Css floating ve Css position özelliklerini Boostrap 4 ile gelen hazır css sınıfları yardımıyla çok daha kolay bir şekilde kullanabiliriz. 

Css floating özelliğini daha iyi anlayabilmek için linke tıklayınız.

Css position özelliğini daha iyi anlayabilmek için linke tıklayınız.

Bir nesneyi sola hizalamak için .float-left, sağa hizalamak için ise .float-right sınıflarını kullanabiliriz.

<div class="clearfix">
    <span class="float-left">Float left</span>
    <span class="float-right">Float right</span>
</div>

Örnek 1 için tıklayınız.

Css derslerimizden hatırlarsınız ki; float uyguladığımız nesneler normal akış dışına çıkıyordu ve daha sonra gelen nesneler istemediğimiz şekilde görünüyordu ve bu sorunu ortadan kaldırmak için bir clear işlemi uygulamamız gerekiyordu. 

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

bu şekildeki css kodunu bootstrap içerisinde .clearfix sınıfı ile kullanıma sunmuşlar. Tek yapmamız gereken clearfix sınıfını gerekli yerde kullanmamız.

Tarayıcının genişliğine göre bir nesneyi sağa ya da sola hizalama işlemi yapmak isterseniz .float-left ve .float-right sınıflarının responsive karşılıklarını kullanmanız gerekiyor.

.float-*-left ve .float-*-right sınıflarındaki * işaretinin yerine responsive ekler (.sm, .md, .lg, xl ) gelmelidir.

** Small cihazlar için .sm (>=576px), 

** Medium cihazlar için .md (>=768px), 

** Large cihazlar için .lg (>=992px)

** Eksta Large cihazlar için .xl (>=1200px)

<div class="float-sm-right">small ve daha büyük cihazlarda</div><br>
<div class="float-md-right">medium ve daha büyük cihazlarda</div><br>
<div class="float-lg-right">large ve daha büyük cihazlarda</div><br>
<div class="float-xl-right">ekstra large ve daha büyük cihazlarda</div><br>
<div class="float-none">Float none</div>

Örnek 2 için tıklayınız.

** responsive float sınıflarının etkisini görebilmek için tarayıcı genişliğini arttırıp azaltmanız gerekiyor.

Bootstrap 4 ile Position Fixed ve Sticky Kullanımı

Boostrap 4' de .fixed-top ve .fixed-bottom sınıfları ile nesneleri sırasıyla yukarıda ya da aşağıda sabitleyebiliriz. Ayrıca .sticky-top sınıfı ile relative bir nesneyi kaydırma çubuğu ile nesne üst pencereye getirdiğimiz anda en yukarıda sabitleyebiliriz.

  <h3 class="fixed-top">Fixed Top</h3>
  <p>Lorem ipsum dolor sit amet...</p>
		
  <h3 class="sticky-top">Fixed Sticky</h3>
  <p>Lorem ipsum dolor sit amet...</p>
		
  <h3 class="fixed-bottom">Fixed Bottom</h3>

Örnek 3 için tıklayınız.

 

Paylaş