İlk makalede genel ızgara yapısı ve bootstrap ızgara yapısının ana elemanlarından bahsettim. Bu makalede bootstrap ızgara yapısının detaylarına değineceğim.

##Farklı yükseklikte kutular için satır yapısını koruma

Kutular float:left ile yan yana dizildiğinde kutulardan birinin yüksekliği fazla ise satır yapısı bozulur. Aşağıdaki örneği büyük pencere açınız.

Görüldüğü gibi yüksekliği fazla olan 2. kutu satır dizilimini bozuyor. Bootstrap’in bunun için çözümü çok kolay.

<div class="clearfix visible-md-block"></div>

Yukarıdaki kod bloğunu kodumuza eklediğimizde satır yapımız korunacaktır. visible-md-block kısmı hangi ekran boyutunda bu satırın işlevsel hale geleceğini gösterir.

##İç içe kolon kullanımı

Bootstrap ızgara yapısı iç içe kolon kullanımını destekler. Genelde sitelerimiz tek kolonlu yapılarından oluşmaz. İç içe kolonların olduğu daha karışık planlardan oluşur. Bu durumda nasıl bir yol izlemeliyiz?

Yukarıdaki örnekte görüldüğü gibi iç içe kullanımda aynı ızgara elemanları kullanılıyor. Sadece daha önce container tanımı yapıldığı için tekrar yapılmıyor. İçerideki kolon tanımına başlarken direk row tanımı ile başlıyoruz.

Kolonları denkleştirme (Offsetting)

Bootstrap’in .col-md-offset-* sınıflarını kullanarak kolonları sağa doğru atabiliriz. Izgara yapısından kolonları soldan hizalamak veya denkleştirmek için margin kullanmak yerine .col-md-offset-* sınıfını kullanırız.

Yukarıdaki örnekte görüldüğü gibi ikinci satırdaki kolon soldan 4 kolonluk sağa doğru atıldı. Bunun için col-sm-offset-4 kullandık.

Kolon sıralama

Uyumlu web uygulamalarında can sıkan durumlardan bir tanesi büyük ekranlarda sağda olan bir kutu küçük ekranlarda sola yaslanması durumudur. Tabi bu tip anaçatıların avantajı tüm bu sorunlara bir çözüm oluşturmalarıdır.

Çözüm yine bir sınıf tanımlamak kadar kolay. Boostrap class yapılarından bildiğimiz .col-xs-#, .col-sm-#, .col-md-#, and .col-lg-# kullanımlarının sonuna soldan sağa ötelemek için push, sağdan sola çekmek için pull eklemelerini kullanıyoruz. Örneğin cep telefonlarında bir yer değiştirme yapacaksak .col-xs-push-# or .col-xs-pull-# diyelerine yerine ise kaç kolon öteleneceğini yazmamız yeterli.

Bir örnek ile konuyu pekiştirelim. Örneğin cep telefonu ekranında üstte iki kutu altında bir kutu şeklinde olan bir sayfa yapımız olsun. Geniş ekranlara bu üç kutuyu yan yana koyalım ve alttaki 3. kutuyu iki kutu arasına koyalım.

Örneği geniş ekran ve küçük ekranlarda deneyelim. Süper. Mobile öncelik vermeyi unutmayalım.

Kullanışlı sınıf tanımları

Boostrap uyumlu web için bazı hazır CSS sınıfları bize sunar. Bazı durumlarda bazı elemanları göstermek veya gizlemek isteriz. Bun işi yapmak için boostrap yine bize kullanışlı sınıflar sağlar.

Sadece bir ekran boyutunda göstermek için .visible-xs-#, .visible-sm-#, .visible-md-# ve .visible-lg-# sınıflarını bize sunar. Buradaki diyez (#) yerine göstereceğimiz elemanın display özelliğine göre inline, block ve inline-block değerine göre değişir. Örnek olarak farklı kutu yükseklikleri bölümünde ki kullanımı gösterebiliriz.

<div class="clearfix visible-md-block visible-lg-block"></div>

Aynı şekilde gizlemek için de sınıflar mevcuttur. .hidden-xs, .hidden-sm, .hidden-md ve .hidden-lg Farklılık dikkatinizi çekmiştir. Göstermenin aksine gizlemede elemanın blok veya inline-blok olmasının bir önemi olmadığı için bu kısım kaldırılmıştır.

Son olarak yazıcı görünümünde gizleme ve gösterme içinde sınıflar vardır. .visible-print-block, .visible-print-inline, .visible-print-inline-block ve .hidden-print sınıflarıda kullanışlı sınıflardır.

Anlamlı kodlama

Buraya kadar boostrap’in genel kullanımını gösterdik. Okunabilir kodlama için anlamlı sınıflar tanımlamak bize avantajlar sağlar. Örneğin Bir sayfayı kodlarken “Neden Zingat Enerji” bölümüm var. Boostrap genel kullanımı ile burayı kodlamak istesem kodlarım aşağıdaki gibi olacaktı.

<div class="container">
<div class="row">
  <h3>NEDEN ZİNGAT ÜST SIRA ENERJİSİ?</h3>
  <div class="col-md-4">
    <h4>ÜSTE ÇIKSIN</h4>
    <p>İlanınız diğer ilanların üstünde...</p>
  </div>
  <div class="col-md-4">
    <h4>DİKKAT ÇEKSİN</h4>
    <p>İlanınız daha fazla ziyaretçinin...</p
  </div>
  <div class="col-md-4">
    <h4>KOLAY ULAŞILSIN</h4>
    <p>Gayrimenkul arayanlar hem...</p>
  </div>
</div>
</div>

Bunun yerine

<div class="container">
<div class="neden-zingat-enerji">
  <h3>NEDEN ZİNGAT ÜST SIRA ENERJİSİ?</h3>
  <div class="ustte-ciksin">
    <h4>ÜSTE ÇIKSIN</h4>
    <p>İlanınız diğer ilanların üstünde...</p>
  </div>
  <div class="dikkat-ceksin">
    <h4>DİKKAT ÇEKSİN</h4>
    <p>İlanınız daha fazla ziyaretçinin...</p
  </div>
  <div class="kolay-ulasilsin">
    <h4>KOLAY ULAŞILSIN</h4>
    <p>Gayrimenkul arayanlar hem...</p>
  </div>
</div>
</div>

Şeklinde sınıfları anlaşılır yaptığımda kodu okurken daha hızlı anlıyorum. Less dosyasında kodlama yaparken anlamlı sınıf isimleri kod hızımı arttırıyor. Tabi tercih meselesi. Ama çok fazla kod yığınının olduğu yerlerde kodlama yaparken anlamlı kodlama yapmak şart.

Bootstrap 4 ızgara sistemi

Şimdiye kadar anlattığım Bootstrap 3.x kullanımıydı. Bootstrap geliştiricileri 4. alfa sürümünü çıkardılar. Genel itibari ile bütün kısımlar oturmuş gibi. Beta ve yayın sürüçlerinde değişiklikler olsa da genel olarak bu yapı korunur.

Bootstrap 4 birçok yenilik barındırıyor. En çarpıcı yeniliklerden birisi de ızgara yapısını artık sadece float ile değil de flexbox üzerinden yapmayada imkan sağlıyor olmaları. CSS3 ile gelen bu güzel özelliğin seçilmesi doğru karar.

Flexbox kullanmak için _variables.scss dosyasında;

$enable-flex: true !default;

yapmak yeterli.

Ayrıca CSS önderleyici olarak artık LESS değil SASS kullanma kararı almışlar.

Bootstrap 4 ızgara yapısı hakkında daha fazla deneyimim oldukça bu konuda da yazı yazarım.

Kalın sağlıcakla.

Kaynaklar

Başta kendim için not almak amacıyla başladığım blog sonraları bu iş ile ilgilenen kişlerin başvurduğu bir site haline geldi, son yıllarda yazı sayısı azalsa da hayatına devam ediyor. 10 seneye 600 küsür yazı ve bunlardan çıkan 2 kitap sığdırdım. Yazı yazmak kendim açısından da öğretici oluyor. Ne kadar az yazıyorsam aslında öğrenme sürecimde o kadar azalmış oluyor.

Her seneye bir dahaki sene daha çok yazı yazacağım diye giriyorum ama sonuç hiçbir zaman beklediğim seviyede olmuyor.

Bu sefer olacak umudu ile; önümüzdeki sene “Uyumlu Web” yazılarının yoğun olmasını planlıyorum. Bakalım ne kadar gerçekleştirebileceğim.

Blog’un kazandırdığı avantajlardan birisi; yeni bir çalışma ortamında veya sektör çalışanları ile birlikte girdiğim sohbetlerde giriş bölümünü hızlı geçmek. “Aaa abi senin blog’dan çok şey öğrendik zamanında” cümlesini çok duyuyorum. Bu tip tepkilerle karşılaşmak güzel bir his. Cümlenin sonundaki zamanında kısmı beni düşündürüyor.

Geçen sene şöyle bir şeyi daha gördüm ki tek alan adı üzerinde çalıştığım şirketlerde (zingat.com, sahibinden.com) web ajanslarından daha az üretken oluyorum. Web ajanslarında devamlı farklı projelerle uğraşmanın iyi yanı. Tabi onunda kendince dezavantajları da var.

Blog’da beni düşündüren durumlardan birisi de yazılar hakkında olumlu veya olmusuz çok fazla geribildirimin olmaması. Genelde “güzel yazı”, “eline sağlık” mesajları geliyor. Ben daha çok abi “bu yazıda şu kısım yanlış olmuş” veya “şöyle bir kod var abi bu daha iyi” yazan yorumları beğeniyorum. Ben de çok şey istiyorum galiba :)

Daha üretken bir sene olması dileğiyle. Kalın sağlıcakla.

Mobilde her kilobaytın hesabı yapıldığı için ve masaüstüne göre nispeten daha yavaş bağlantılar nedeniyle uyumlu web çalışmalarında performan daha fazla önem kazanıyor.

Tasarım icabı mobilde gizlenecek alanlardaki artalan resimleri kaldırmamız bize avantaj sağlayacaktır.

  .logo {
    background: url(logo.png) 0 0 no-repeat;
  }
  
  @media (max-width: 979px) {
     .logo { 
        display: none;
     }
  }

yerine

  .logo {
    background: url(logo.png) 0 0 no-repeat;
  }
  
  @media (max-width: 979px) {
     .logo { 
        background-image: none
     }
  }

kullanımı bize performans olarak geri dönecektir.

Kaynaklar

iOS Safari’de karşılaştığım bir sorundu çözümüde çok basit paylaşayım hemen.

iOS input elementine yaptığımız CSS tanımlarını uygulamıyor. Webkit’in form elemanları konusunda bazı takıntıları var.

Normalde aşağıdaki gibi görünmesi gereken buton;

enter image description here

Böyle görünüyor

enter image description here

Çözümü ise çok basit

  input {
    -webkit-appearance: none;
  }

Tanımını ekledikten sonra sizin stillerinizi algılıyor.

Kaynaklar

Her ne kadar son zamanlarda etkisini kaybetse de Internet Explorer testi hayatımızın bir gerçeği. Benim gibi MacOs kullananlar için veya Linux kullananlar için bu testleri yapmak bir eziyet halini alıyor. Ben uzun süredi Virtualbox üzerinde kurulu Windows’lar ile bu sorunu halletmekteyim. Bugün tekrar kurarken bunu yazmalıyım dedi.

Sırası ile yaptığım adımları anlatayım.

İlk olarak VirtualBox‘ı kuruyoruz. Ben kendi makinem için VirtualBox 5.0.14 for OS X hosts amd64 olanı indirdim. Yaklaşık 90,5 Mb.

VirtualBox, Linux (veya MacOS) üzerinde yaygın olarak kullanılan sanallaştırma araçlarından birisidir. Böylece Windows ortamında çalışması gereken programları Linux (veya MacOS) altında kolaylıkla çalıştırabilirsiniz.

Kaynak http://wiki.ubuntu-tr.net/index.php?title=VirtualBox

Hazır bir paket olan kurulum paketini next - next - finish :) sırası ile kurdum.

Sıra geldi istediğim işletim sistemini kurmaya. Bu konuda Microsoft bize çok güzel bir imkan sağlıyor. https://dev.windows.com/en-us/microsoft-edge/tools/vms/ adresi üzerinden istediğimiz Windows - Internet Explorer sürümünün imajını indirme imkanı sağlıyor.

İndirebileceğiniz Window ve Internet Explorer sürümleri. Bugün ( 11 Şubat 2016 ) itibari ile aşağıdaki gibidir.

  • IE6 on XP
  • IE7 on Vista
  • IE8 on XP
  • IE8 on Win7
  • IE9 on Win7
  • IE10 on Win7
  • IE10 on Win8
  • IE11 on Win81
  • IE11 on Win7
  • MSEdge on Win10

enter image description here

Ben Windows 7 üzerinde Internet Explorer 11 seçtim. Sonrada ( Select Platform ) kısmından VirtualBox’ı seçtim.

enter image description here

Sağ taraftan Download.zip’a tıklayıp windows imajını indirdim. Dosya boyutu 3,81 Gb. Uygun zamanda indirmekte yarar var.

Bu dosyayı dokümanlarda uygun bir yere taşıyıp Rar Extrator Free ile bu dosyayı açtım. IE11 - Win7.ova adlı bir dosyamız oluyor. Bu dosyaya çift tıklayarak Window imajını VirtualBox’a ekliyoruz. Yine next - next - finish sırası ile kurulumu yapıyoruz. Bazı ayarlar yapılabilir ben herhangi bir şeye dokunmadan kurulu yaptım, pardon küçük bir ayar yaptım. Sanal makinenin kullanacağı RAM’i başlangıç değeri olan 512Mb’dan 1024Mb’a çektim.

Sonuç aşağıdaki gibi.

enter image description here

Daha sonra Windows üzerinde ağ ayarlarını yaparak kendi bilgisayarınıza ağ üzerinden ulaşabilirsiniz. Ben daha önce bu konuda sorun yaşarken bu sefer sorun yaşamadım.

enter image description here

Direk bilgisayarımın ip’sini yazarak İnternet Explorer testlerime başladım.

enter image description here

Kalın sağlıcakla.

Kaynaklar