Bootstrap Ders-7 Sayfalama - Pagination
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-7 Sayfalama - Pagination

profil
cArleone
BEĞEN(0)
BEĞENME(0)
GÖRÜNTÜLENME(2515)
RAPOR ET
Bootstrap serimize kaldığımız yerden devam ediyoruz.Bu derste Pagination özelliğini yani sayfalama,ileri-geri ve önceki-sonraki gibi butonları koymayı işleyeceğiz.

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

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

1-Sayfalama


Bootstrap da sayfalama butonları çıkarmak için öncelikle bir ul li yapısı oluşturarak,ula pagination classını veriyoruz.Daha sonra lilerin içine a tagı koyarak butonları oluşturuyoruz.

<ul class="pagination">
<li><a href="#"><</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">></a></li>
</ul>


Eğer boyutunu değiştirmek istiyorsak ul'a ek olarak pagination-lg classını vermemiz yeterli.Küçültmek için ise ul'a pagination-sm classını vermemiz yeterli.

2-İleri-Geri


İleri-geri butonu çıkartmak için ise öncelikle bir ul-li yapısı oluşturup ul'a pager classını veriyoruz.Daha sonra içine 2 buton koyarak oluşturabiliyoruz.
<ul class="pager">
<li><a href="#"><< Geri</a></li>
<li><a href="#">İleri >></a></li>
</ul>


3-Önceki-Sonraki


Önceki ve soraki butonlarını oluşturmak içi ise yukarıda ki gibi bir ul li oluşturup aynı şekilde ul'a pager classını veriyoruz.Daha sonra 2 li koyuyoruz.Önceki yazdığımız liye previous classını,sonraki classını verdiğimiz liye ise de next classını veriyoruz.
<ul class="pager">
<li class="previous disabled"><a href="#">< Önceki</a></li>
<li class="next"><a href="#">Sonraki ></a></li>
</ul>


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:1000px;margin:auto;margin-top:75px;text-align:Center;}
</style>
</head>
<body>

<div class="ortala">

<ul class="pagination pagination-lg">
<li><a href="#"><</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">></a></li>
</ul>
<br />
<ul class="pagination">
<li><a href="#"><</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">></a></li>
</ul>
<br />
<ul class="pagination pagination-sm">
<li><a href="#"><</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">></a></li>
</ul>

<ul class="pager">
<li><a href="#"><< Geri</a></li>
<li><a href="#">İleri >></a></li>
</ul>

<ul class="pager">
<li class="previous disabled"><a href="#">< Önceki</a></li>
<li class="next"><a href="#">Sonraki ></a></li>
</ul>

</div>

</body>
</html>

Görüntüsü :
http://ustaderslik.com/resim/ders/a5d2sws5ds.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