Bootstrap Ders-8 Progress Bar

Udemy'e Git

Demo

Bootstrap Ders-8 Progress Bar

cArleone

BEĞEN(1)

BEĞENME(0)

GÖRÜNTÜLENME(5853)

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