Bootstrap Ders-15 Collapse
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

Bootstrap Ders-15 Collapse

profil
cArleone
BEĞEN(0)
BEĞENME(0)
GÖRÜNTÜLENME(1703)
RAPOR ET
Bootstrap derslerimize devam ediyoruz.Bu dersimiz de collapse özelliğini işleyeceğiz.Collapse eklediğimiz panelleri bir birine bağlayarak dikey bir tab sistemi yapmamızı sağlıyor.Paneli http://ustaderslik.com/konu.php?k=Bootstrap_Ders-10_Panel bu dersimiz de işlemiştik.Kullanımına geçelim.

İndir : http://ustaderslik.com/dosya/bootstrap-Collapse.zip

İncele : http://ustaderslik.com/ornek/bootstrap-Collapse/

<div class="panel-group" id="accordion">

</div>

Bu şekil de collapsemizi oluşturuyoruz.Daha sonra bunun içine panellerimizi

 <div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#alan-1">Başlık</a>
</h4>
</div>
<div id="alan-1" class="panel-collapse collapse in">
<div class="panel-body">İçerik</div>
</div>
</div>

bu şekil de ekliyoruz.Dikkat etmemiz gereken yerler ana diviminin idsi accordion verdik.Başlık oluşturduğumuz a tagına data-parent="#accordion" ana divin idsini belirtmeliyiz.Başka dikkat etmemiz gereken yer ise,içeriğe verdiğimiz id yi başlığın hrefine yazmamız gerek.Bu şekil de bağlama işlemlerini yapıyoruz.

Yapı bu şekil de.Yukarda yazdığımız 2 ayarı yaparak istediğimğiz kadar panel ekleyerek bir collapse oluşturabiliriz.

Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap-theme.min.css" />
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<title>UstaDerslik.com</title>
<style type="text/css">
.ortala{max-width:960px;margin:auto;margin-top:50px;}
</style>
</head>
<body>

<div class="ortala">
<div class="panel-group" id="accordion">

<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#alan-1">Başlık</a>
</h4>
</div>
<div id="alan-1" class="panel-collapse collapse in">
<div class="panel-body">İçerik</div>
</div>
</div>

<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#alan-2">Başlık-2</a>
</h4>
</div>
<div id="alan-2" class="panel-collapse collapse">
<div class="panel-body">İçerik-2</div>
</div>
</div>

<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#alan-3">Başlık-3</a>
</h4>
</div>
<div id="alan-3" class="panel-collapse collapse">
<div class="panel-body">İçerik-3</div>
</div>
</div>

</div>
</div>

</body>
</html>

Görüntüsü :
http://ustaderslik.com/resim/ders/22as5ds12ds85a.png



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol