Bootstrap Ders-6 Uyarılar - Alerts
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-6 Uyarılar - Alerts

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