Bootstrap Ders-8 Progress Bar
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-8 Progress Bar

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(1756)
RAPOR ET
Bootstrap serimize devam ediyoruz.Bu derste progress bar özelliğini işleyeceğiz.progress barı yükleme ekranlarında veya istatistik gibi yerler de kullanabiliriz.Öncelikle bazı genel parametreleri mevcut.Öncelikle bunlara baktıktan sonra özelliklere geçelim.

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

İncele : http://ustaderslik.com/ornek/bootstrap-progress-bar/

aria-valuenow : Progress barın değeri
aria-valuemin : Minimum progress bar değeri
aria-valuemax : Maxsimum progress bar değeri
style : width vererek görsel olarak değeri ilerletiyoruz.

<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%"></div>
</div>


Progress barı bu şekil de oluşturuyoruz.

1-Tipleri


Progress bar da success,info,warning ve danger olmak üzere 4 tane tipi bulunmakta. progress-bar classına ait div de ek olarak progress-bar-tip vererek tipi değiştiriyoruz.Standart olarak kalapı mavi bir renge sahiptir.
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%"></div>
</div>


2-Animasyon


Progress bar içindeki progress-barına sahip dive progress-bar-striped classını vererek animasyon çubuklarını çıkartabiliriz.Animasyonlu olması içinse active classını da vermek gerekir.
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
</div>


3-Çoklu Progress Bar


Progress classına ait divin içine birden çok progress-bar classına ait div koyarsak hepsi art arda gözükecektir.İstediğimiz kadar koyabiliriz.
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 30%"></div>
<div class="progress-bar progress-bar-info" style="width: 40%"></div>
<div class="progress-bar progress-bar-danger" style="width: 30%"></div>
</div>


4-İçerik


Progress-bar içine span içine metin girebiliriz.Bu metin yüklenme boyutu vs olabilir.Bu size kalmış.
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%">
<span>25%</span>
</div>
</div>


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">

<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%">
<span>25%</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%">
<span class="sr-only">50%</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%">
<span>75%</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
<span>100%</span>
</div>
</div>

<br /><br />

<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%"></div>
</div>

<br /><br />

<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 30%"></div>
<div class="progress-bar progress-bar-info" style="width: 40%"></div>
<div class="progress-bar progress-bar-danger" style="width: 15%"></div>
<div class="progress-bar progress-bar-warning" style="width: 15%"></div>
</div>

<br /><br />

<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
<span>100%</span>
</div>
</div>

</div>

</body>
</html>

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