Stil Sayfaları (CSS) 17 - Uyarı Mesajı ve Modal Sınıfları

 4.4.3.8. Uyarı Mesajı Sınıfı

Alert sınıfı ile primary, success, info, warning, danger, secondary, dark, light arka plan renklerine

sahip, dikkat çekici mesaj kutuları oluşturulabilir (Görsel 4.42). En temel kullanım şekli aşağıdaki

örnek kodlarda görülmektedir.

<div class="alert alert-danger">

<strong>Uyarı! </strong> Mesajınızı buraya yazabilirsiniz.

</div>

Alert-dismisible sınıfı ile mesaj kutusu kapatılabilir bir kutuya dönüştürülür. Aşağıdaki örnek

kodda görüldüğü gibi kapatma tuşu için bir <button> elemanı eklenmelidir.

<div class="alert alert-success alert-dismissible">

<button type="button" class="close" data-dismiss="alert">&times;</button>

<strong>Uyarı!</strong> Bu mesaj kutusu kapatılabilir.

</div>

Not

<button> elemanının içine yazılan “&times;” ifadesi yerine “kapat” veya başka ifadeler

de yazılabilir.

Görsel 4.42: Uyarı mesajı

4.4.3.16. Modal Sınıfı

Modal sınıfı ile geçerli sayfa üzerinde bir iletişim kutusu açılır. Bu iletişim kutusu ile bilgilendirici

içerikler, kullanıcının bilgi girişi yapabileceği kutular sunulabilir (Görsel 4.49). Örneğin bir e-ticaret

sitesinin ürün ile ilgili detayları modal sınıfı kullanılarak verilebilir veya kullanıcının müşteri

memnuniyetini ölçecek bir anket sorusu da modal sınıfı kullanılarak sorulabilir.

Görsel 4.49: Modal sınıfı

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#Detaylar">

Ürün Detayları

</button><!-- <button> elemanının data-target değeri Modal’ın id değerine uygun olmalıdır.

-->

<div class="modal" id="Detaylar">

<div class="modal-dialog">

<div class="modal-content">

<!-- Modal Başlığı -->

<div class="modal-header">

<h4 class="modal-title">Ürün Özellikleri</h4>

<button type="button" class="close" data-dismiss="modal">&times;</button>

</div>

<!-- Modal İçeriği -->

<div class="modal-body">

<ul>

<li>8 Çekirdekli İşlemci</li>

<li>2 GB Paylaşımlı Ekran Kartı</li>

<li>8 GB Ram(Sistem Belleği)</li>

<li>1 TB Sabit Disk</li>

<li>15,6 inç Ekran Boyutu</li>

</ul>

</div>

<!-- Modal Alt Bölümü -->

<div class="modal-footer">

<button type="button" class="btn btn-info"> Sepete Ekle</button>

<button type="button" class="btn btn-danger" data-dismiss="modal">İptal</button>

</div>

</div>

</div>

</div>

Not

data-dismiss özelliği modalı kapatmak için kullanılmıştır.