avatar

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

01/08/2014
Hakan Özakar

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.

Sol

Sağ

 

 

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ç:

Solumda 3 birim boşluk var...

 

Yorumlar Yorum Yap

  • Ferdi

    Yaa Sen Adamsın yaa.. display block olduğunu biliyorum ama 2 saattir ordan oraya ordan oraya ekleyip menünün altını üstüne getirdim. meğer ne kadar basitmiş. ne uğraştım ul lerle li lerle a larla nav larla.. neyse Adamın dibi olduğunu söylemiş miydim?

    Ferdi 04/05/2016 22:02
  • yasin

    dropdown hover olayı işime yaradı. Çok teşekkür ediyorum

    yasin 24/08/2015 12:10
  • kaanyus

    sabahın 8 den beri divlerle bogusuyorum bu grid sistemi bana hala sacma geliyo şahsi görüşüm bu uygulama işimi gördü teşekkür ederim kardeş...

    kaanyus 05/03/2015 17:13
  • Hakan

    Merhaba Samet, CSS'in sonuna şunu eklemen yeterli olur: .dropdown:hover > a { color: white !important; background-color: blue !important; }

    Hakan 04/11/2014 17:38
  • samet

    hocam öncelikle verdiğin bilgiler için teşekkürler bir sorum olacaktı. http://codepen.io/sametdemir/pen/gKHuJ gibi hakkımda nın üzerine gelince hover uyguluyor ama aşağı gidince kayboluyor bunu engellemenin bir yolu varmı.

    samet 22/10/2014 13:35