Bootstrap derslerimize devam ediyoruz.Bu derste
alerts yani uyarı kutularını çıkarmayı göreceğiz.Bir div oluşturup ardından classına
alert alert-tipi rolesine de
alert yazarak oluşturuyoruz.
İndir : http://ustaderslik.com/dosya/bootstrap-alerts.zip
İncele : http://ustaderslik.com/ornek/bootstrap-alerts/
<div class="alert alert-warning" role="alert"></div>
4 tale alert tipi bulunmakta.Bunlar : success,info,warning,danger.
<div class="alert alert-success" role="alert"></div>
<div class="alert alert-info" role="alert"></div>
<div class="alert alert-danger" role="alert"></div>
<div class="alert alert-warning" role="alert"></div>
Uyarıların içine kapatma butonu koyabiliyoruz.Bunun için aler'ın içine buton koyup
data-dismiss="alert" parametresini vermemiz yeterli.
<button type="button" class="close" data-dismiss="alert"><span>×</span></button>
Uyarının için de link kullanacaksak link'in classına
alert-link vererek güzel gözükmesini sağlayabiliriz.
<a href="#" class="alert-link"></a>
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="alert alert-success" role="alert">
<button type="button" class="close" data-dismiss="alert"><span>×</span></button>
Uyarı...
</div>
<div class="alert alert-info" role="alert"><b>Uyarı...</b></div>
<div class="alert alert-warning" role="alert">
<button type="button" class="close" data-dismiss="alert"><span>×</span></button>
Uyarı...
</div>
<div class="alert alert-danger" role="alert"><a href="#" class="alert-link">Uyarı...</a></div>
</div>
</body>
</html>
Görüntüsü :
UstaDerslik
