Bootstrap 3 için bir kaç numara
Bootstrap 3 ile birlikte kullanabileceğiniz bir kaç ufak CSS numarası

Twitter Bootstrap büyük kolaylıklar sağlayan bir front-end framework olarak hayatımıza girdi. Web tasarımı dünyasında neredeyse bir standart haline gelmiş olan Bootstrap'ı kullanırken yararlanılabilecek bir kaç ufak numara paylaşmak isterim:

Liste nesnelerimizi ortalamak:

Liste nesnesiyle çalışırken elemanlarımızı sola (float: left) ya da sağa (float: right) yaslı kullanırız genelde, çünkü ortalamak eziyetli bir iştir... Öyle midir gerçekten?

Bir liste oluşturalım:

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

Sonuç:

• 1
• 2
• 3
• 4
• 5

Şimdi bu listeyi sıralı ve ortalanmış olarak yazalım: 

<ul class="list-inline text-center">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

Sonuç:

• 1
• 2
• 3
• 4
• 5

Açılır menüleri "hover"da çalıştırmak:

@media (min-width : 768px) { /* Eğer responsive yazıyorsak mobil
                                boyuttayken bu işlemi yapmamıza
                                gerek yok. Bu nedenle, CSS'imize
                                tarayıcı genişliği 768px veya daha
                                büyükse çalışmasını söylüyoruz. */
  .dropdown:hover .dropdown-menu {
    display: block;
  }
}

Aslında işlem son derece basit. Mouse açılır menünün üzerine geldiğinde menüyü gösteriyoruz...

Sonuç:

Eğer menü başlığımız aynı zamanda link olarak işlev görsün istiyorsak ufak bir de JS eklemek gerekli:

$(function() {
  $('.dropdown .dropdown-toggle').click(function(){
    /* Mobil boyutta çalışmaması için kontrolümüzü yapıyoruz. */ 
    if($(window).width() >= 768) location.assign($(this).attr('href'));
  });
});

Bu işlem çok basit ama bir kusuru var. Eğer linkimizde target özelliği belirtilmişse bunu dikkate almıyor ve target özelliği hiç yokmuş gibi davranmaya devam ediyor. Eğer target özelliğini kullanmamız gerekliyse aşağıdaki kodu tercih etmek daha yerinde olur.

$(function() {
  $('.dropdown .dropdown-toggle').click(function(){
    /* Mobil boyutta çalışmaması için kontrolümüzü yapıyoruz. */ 
    if($(window).width() >= 768) {
	  
      /* Linkimizin bir replikasını yaratıyoruz. */
      $('body').append(
        '<a id="ddToggleReplica" style="display: none;" ' +
        'href="' + $(this).attr('href') + '" target="' +
        $(this).attr('target') + '"></a>'
      );
	  
      /* Yarattığımız replikaya "click" gönderiyoruz. */
      ddToggleReplica.click();
	  
      /* Yarattığımız replikayı DOM dan kaldırıyoruz. */
      $('#ddToggleReplica').remove();
    }
  });
});

Sonuç:

Kolonların sıralamasını değiştirmek:

Bootstrap kullanıyorsanız col- classlarını kullanmaya alışkın olmalısınız. Peki kolonların sıralamasını tarayıcının boyutlarına göre değiştirmek isterseniz ne yapacaksınız?

<div class="col-xs-6 col-md-4 col-md-push-8 col-lg-6 col-lg-push-0">Sol</div>
<div class="col-xs-6 col-md-8 col-md-pull-4 col-lg-6 col-lg-pull-0">Sağ</div>

Sonuç: Tarayıcınızın boyutunu büyütüp - küçülterek sonucu gözlemleyebilirsiniz.

Kolonlara sol boşluk uygulamak:

Bootstrap ile yazılmış birçok siteyi incelerken, eğer herhangi bir kolona sol boşluk uygulanmak istenmişse şöyle düzenlendiği dikkatimi çekiyor:

<div class="col-xs-3"></div>
<div class="col-xs-9">Solumda 3 birim boşluk var...</div>

Halbuki bu işin bir kolay yöntemi var:

<div class="col-xs-offset-3 col-xs-9">Solumda 3 birim boşluk var...</div>

Sonuç: