Bootstrap derslerimize kaldığımız yerden devam ediyoruz.Bu derste
list yani listeleri işleyeceğiz.Bu listeleri ister menü ister listeleme için kullanabiliriz.Kullanımına geçelim.
İndir : http://ustaderslik.com/dosya/bootstrap-List.zip
İncele : http://ustaderslik.com/ornek/bootstrap-List/
Listeleri
div-a veya
ul-li olmak üzere 2 şekilde oluşturabiliriz.div-a yapısının ul-li den tek farkı hover olduğunda renk değişimi.Etkileşim de renk değişmesini istiyorsak div-a istemiyorsak ul-li kullanırız.
Listeyi oluşturmak için div veya ulun classına
list-group ,a veya li nin classına ise
list-group-item veririz.
<div class="list-group">
<a href="#" class="list-group-item">Liste</a>
</div>
<ul class="list-group">
<li class="list-group-item">Liste</li>
</ul>
Temel kullanımı bu şekilde.Şimdi özelliklerine geçelim.Aşağıdaki göreceğimiz özellikler her 2 çeşit için de geçerli.
1-Başlık
Listedeki öğelere
disabled veya
active vererek bunları başlıkmış gibi kullanabiliriz.
<ul class="list-group ">
<li class="list-group-item active">Başlık</li>
<li class="list-group-item">Liste</li>
</ul>
2-Miktar
Listedeki öğelerin sağında daire için de bir sayı yazdırabiliriz.Bunun için liste içinde span oluşturup classına
badge vermemiz yeterli.Span içine de sayıyı yazabiliriz.
<ul class="list-group">
<li class="list-group-item"><span class="badge">10</span> Liste</li>
</ul>
3-Renk
Listedeki öğelerin arkaplan rengini değiştirebiliriz.Bunun için 4 tema mevcut.Bunlar
list-group-item-success,list-group-item-info,list-group-item-warning,list-group-item-danger .Yukarıdaki classları liste elemanlarına vererek uygulayabiliyoruz.
4-İçerik
Liste içine
başlık + açıklama girmek istiyorsak,liste elemanlarının içine
h ile başlık
p ile de açıklamayı yazarsak otomatik tasarım alacaktır.
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{width:100%;max-width:500px;margin:auto;margin-top:75px;text-align:Center;}
</style>
</head>
<body>
<div class="ortala">
<div class="list-group">
<a href="#" class="list-group-item">1-Liste</a>
<a href="#" class="list-group-item">2-Liste</a>
<a href="#" class="list-group-item">3-Liste</a>
</div>
<ul class="list-group ">
<li class="list-group-item active">Başlık</li>
<li class="list-group-item">1-Liste</li>
<li class="list-group-item">2-Liste</li>
<li class="list-group-item">3-Liste</li>
</ul>
<ul class="list-group">
<li class="list-group-item disabled">Başlık</li>
<li class="list-group-item"><span class="badge">10</span> 1-Liste</li>
<li class="list-group-item"><span class="badge">0</span> 2-Liste</li>
<li class="list-group-item"><span class="badge">7</span> 3-Liste</li>
</ul>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-success">1-Liste</a>
<a href="#" class="list-group-item list-group-item-info">2-Liste</a>
<a href="#" class="list-group-item list-group-item-warning">3-Liste</a>
<a href="#" class="list-group-item list-group-item-danger">4-Liste</a>
</div>
<div class="list-group">
<a href="#" class="list-group-item"><h3>1-Başlık</h3><p>Açıklama...</p></a>
<a href="#" class="list-group-item"><h2>2-Başlık</h2><p>Açıklama...</p></a>
<a href="#" class="list-group-item"><h1>3-Başlık</h1><p>Açıklama...</p></a>
</div>
</div>
</body>
</html>
Görüntüsü :
UstaDerslik
