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:
Flex nedir?
Satır-sütun hizalama nasıl yapılır?
Order sınıfı nedir?
Offset sınıfı nedir?
Metin hizalama nasıl yapılır?
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.Flex esnek kutu Bootstrap 4
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.
*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.
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-3olacaktı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>
Order kullanılmamış hali
Order kullanılmış hali
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>
Metin hizalama
Renklendirme Nasıl Yapılır?
Renklendirme için kullanılacak sınıflar:
muted
primary
success
info
warning
danger
secondary
dark
body
light sınıflarını kullandığımızda oluşacak olan renkler aşağıdaki gibidir.
Peki kullandığımızda oluşacak olan renkli görüntü ve kod nasıl olacak?
Bootstrap arkaplan renklendirme Kodu görecek olursak eğer;
<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…