Css bölümünde text-align işlemlerinin ve display özelliğinin css kodları yazılarak nasıl yapıldığını öğrendik.
Bootstrap 4 ile gelen text-align ve display kavramları için kullanabileceğimiz bazı bootstrap text-align ve bootstrap display class' ları mevcuttur. Bu bootstrap sınıflarını kullanarak text hizalama ve display özelliklerini çok daha basit olarak kullanabiliriz.
Bootstrap 4' de Text Hizalama Nasıl Yapılır ?
Bootstrap 4' de kullanabileceğimiz text-align özelliğinin alabileceği değerler;
text-justify => block etiket içindeki yazıları iki yana hizalar.
text-right => block etiket içindeki yazıları sağa hizalar.
text-left => block etiket içindeki yazıları sola hizalar.
<p class="text-justify"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p> <p class="text-right"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p> <p class="text-left"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
Örnek 1 için tıklayınız.
Bootstrap 4' de Display Nasıl Kullanılır ?
Css display özelliği ile yazdığımız css kodlarını bootstrap 4 ile gelen hazır display sınıfları ile çok daha kolay bir şekilde kullanabiliriz.
** Bir etiketi block bir etikete çevirmek için d-block sınıfını kullanabiliriz.
** Bir etiketi inline bir etikete çevirmek için d-inline sınıfını kullanabiliriz.
** Bir etiketi inline-block bir etikete çevirmek için d-inline-block sınıfını kullanabiliriz.
<!-- Inline to Block -->
<span class="d-block bg-danger">d-block</span>
<span class="d-block bg-danger">d-block</span>
<br><br>
<!-- Block to Inline -->
<div class="bg-warning d-inline">d-inline</div>
<div class="bg-warning d-inline">d-inline</div>
<br><br>
<!-- Inline Block-->
<div class="bg-primary d-inline-block">
<h3>Product Name</h3>
Description
</div>
Örnek 2 için tıklayınız.
** display:none; ile bir nesneyi görünmez hale getirebilriz. Bu işlemi bootstrap ile yapmak istersek .d-none sınıfını kullanmamız gerekir.
Bootstrap 4' de Text Hizalama ve Display Özelliklerini Responsive Tasarımlar için Nasıl Kullanabilirim ?
Bootsrap 4' de responsive tasarımlar için kullanabileceğimiz ve belli çözünürlük değerlerine sahip responsive class' ları mevcuttur.
Boostrap 4 'ün kullandığı breakpoint aralıkları aşağıda verilmiştir.
Örneğin kullanıcı sitemizi telefondan ziyaret ediyorsa yani tarayıcının genişliği mininum 576px ise bu durumda ilk media query aralığındaki css kodları çalışacaktır. Yani ziyaretçilerin hangi çözünürlük arasındaki tarayıcıya sahip olup olmadığını media query aracılığıyla sorgulatıp tespit etmemiz ve ona göre css kodu yazmamız gerekir. Telefondan gelen bir kullanıcı için kullandığımız font büyüklüğü ile geniş ekranlı bir tarayıcı kullanıcısının font büyüklüğü aynı olmamalıdır.
// Small devices (landscape phones, 576px ve yukarısı)
@media (min-width: 576px) { ... }
// Medium devices (tablets, 768px ve yukarısı)
@media (min-width: 768px) { ... }
// Large devices (desktops, 992px ve yukarısı)
@media (min-width: 992px) { ... }
// Extra large devices (large desktops, 1200px ve yukarısı)
@media (min-width: 1200px) { ... }
Tüm bu breakpoint sayısal değerlerini media query 'leri ile kullanmaktansa bootstrap 4 ile gelen hazır responsive ön ek class' ları kullanmamız çok daha kolay.
** Small cihazlar için .sm
** Medium cihazlar için .md
** Large cihazlar için .lg
** Eksta Large cihazlar için .xl
Bootstrap responsive ön ekleri ile text hizalamayı nasıl yaparız ?
<p class="text-sm-right bg-primary">Right aligned on small or larger</p> <p class="text-md-right bg-primary">Right aligned on medium or larger</p> <p class="text-lg-right bg-primary">Right aligned on large or larger</p> <p class="text-xl-right bg-primary">Right aligned on xl or larger</p>
Örnek 3 için tıklayınız.
** ilk içeriğimiz small ve üstündeki tarayıcılarda sağa hizalanır yani .text-right sınıfımız small cihazlar için etkin olacaktır.
** ilk içeriğimiz medium ve üstündeki tarayıcılarda sağa hizalanır yani .text-right sınıfımız small cihazlar için etkin olacaktır.
** ilk içeriğimiz large ve üstündeki tarayıcılarda sağa hizalanır yani .text-right sınıfımız small cihazlar için etkin olacaktır.
** ilk içeriğimiz ekstra large tarayıcılarda sağa hizalanır yani .text-right sınıfımız small cihazlar için etkin olacaktır.
Her bir aşamada bir sonraki breakpoint aralığını kullandığımıza dikkat ediniz.
Aynı şekilde .text-left ve .text-justify sınıflarını responsive ön ekleri ile birlikte kullanabilirsiniz.
Bootstrap responsive ön ekleri ile display sınıflarını nasıl kullanırız ?
<div class="d-none">Hidden on all</div> <div class="d-none d-sm-block">Hidden only on xs</div> <div class="d-sm-none d-md-block">Hidden only on sm</div> <div class="d-md-none d-lg-block">Hidden only on md</div> <div class="d-lg-none d-xl-block">Hidden only on lg</div> <div class="d-xl-none">Hidden only on xl</div>
Örnek 4 için tıklayınız.
** d-none ile içerik her zaman gizlidir.
** d-none d-sm-block ile içerik sadece ekstra small cihazlarda gizlidir.
** d-sm-none d-md-block ile içerik sadece small cihazlarda gizlidir.
** d-md-none d-lg-block ile içerik sadece medium cihazlarda gizlidir.
** d-lg-none d-xl-block ile içerik sadece large cihazlarda gizlidir.
** d-xl-none ile içerik sadece ekstra large cihazlarda gizlidir.