Responsive Bootstrap Tabs - Hayat bir alem :)
Responsive Bootstrap Tabs
Aşağıdaki görsel nasıl bir şey yapmayı planladığımı açıklıyor:
Sağdaki ve soldaki oklar aslında birer tab. Biraz CSS tanımlamasıyla içindeki metinleri gizliyoruz ve :after elemanlarının da birer ok gibi görünmesini sağlıyoruz. Bunun sıkıntılı bir yanı var: Eğer tablarımızın içinde dropdown kullanırsak, sağdaki ve soldaki okların aşağıyı göstermesini sağlamamız gerekecek. Bu durumda ilk tıklamada dropdown menümüz açılacak ve biz açılan alt tablardan birini görüntüledikten sonra (eğer varsa) diğer taba geçebileceğiz. Çok şık bir çözüm değil ama tablarımızı bu şekilde kullanmak istiyorsak şimdilik başka çaremiz yok gibi görünüyor.
Standart tab yapısında bazı küçük değişiklikler yapmamız gerekiyor.
<ul class="nav nav-tabs nav-tabs-responsive">
<a href="#tab1" data-toggle="tab">
<span class="text">Tab 1</span>
<a href="#tab2" data-toggle="tab">
<span class="text">Tab 2</span>
<a href="#tab3" data-toggle="tab">
<span class="text">Tab 3</span>
Fark edeceğiniz üzere dikkat çekmek istediğim üç nokta var:
İstediğimizde tabları olduğu gibi kullanabilmemiz için, yeni bir sınıf tanımlıyoruz.
Gerektiğinde bu küçük eklemeleri yapıp, responsive tabımızı kullanabileceğiz. Eğer bazı tablarda bu responsive yaklaşımı uygulamak istemiyorsak, standart yapıyla devam edebiliriz.
Tab başlıklarını ‘text’ sınıfını verdiğimiz span elemanlarının içine yazıyoruz.
Bu sayede telefon genişliğine geldiğimizde metinleri kolayca gizliyoruz.
İkinci tabımıza ‘next’ sınıfını veriyoruz.
Bitmiş uygulamayı aşağıda görebilirsiniz. Ayrı bir pencerede görüntülemek için tıklayınız.
See the Pen Reponsive Bootstrap Tabs by Ömür Yanıkoğlu (@hayatbiralem) on CodePen.
Umarım hoşunuza gitmiştir ;)
Teşekkürler, projemde kullandım. İşime yaradı.
Merhaba, işinize yaramasına sevindim :)
Paylaşım açısından şu uygulama da hoşmuş.
Pingback: Make Bootstrap 3 Tabs Responsive – inneka.com()