Bootstrap Ders-9 Listeler - Lists
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-9 Listeler - Lists

profil
cArleone
BEĞEN(0)
BEĞENME(0)
GÖRÜNTÜLENME(1836)
RAPOR ET
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ü :
http://ustaderslik.com/resim/ders/sd2as5sdf21a4.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