Tuesday, December 20, 2016

Yorum yok

kapanır uyarı mesajları html

uyarı, not, hata, bilgi mesajları kodu

 kapanabilen uyarı mesajları html kodu. CSS ile kullanılan ( Success Message, Info Message, Warning Message, Danger Message ) her platform için uygun ve denenmiştir.
nasıl kullanılır?

ÖNİZLEME
mesaj kod
orjinal boyut için tıkla
verilen kodlar içerisinde uyarı, not, hata ve bilgi olarak ayırın. düzenlemeyi yapamazsanız msj bölümünden bana ulaşıp yardım alabilirsiniz.
HTML

<div class="container">
<div class="row">
<div class="col-sm-6 col-md-6">
  <div class="alert alert-success">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">
×</button>
span class="glyphicon glyphicon-ok"></span> <strong>Success Message</strong>
<hr class="message-inner-separator">
 <p>
You successfully read this important alert message.</p>
 </div>
 </div>
<div class="col-sm-6 col-md-6">
<div class="alert alert-info">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">
 ×</button>
<span class="glyphicon glyphicon-info-sign"></span> <strong>Info Message</strong>
 <hr class="message-inner-separator">
<p>
 This alert needs your attention, but it's not super important.</p>
 </div>
  </div>
<div class="col-sm-6 col-md-6">
<div class="alert alert-warning">
 <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
 ×</button>
<span class="glyphicon glyphicon-record"></span> <strong>Warning Message</strong>
<hr class="message-inner-separator">
<p>
Best check yo self, you're not looking too good.</p>
 </div>
  </div>
<div class="col-sm-6 col-md-6">
<div class="alert alert-danger">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">
 ×</button>
<span class="glyphicon glyphicon-hand-right"></span> <strong>Danger Message</strong>
 <hr class="message-inner-separator">
<p>
                    Change a few things up and try submitting again.</p>
            </div>
        </div>
    </div>
</div>

       
CSS

    body { margin-top:30px; }
hr.message-inner-separator
{
    clear: both;
    margin-top: 10px;
    margin-bottom: 13px;
    border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.15),rgba(0, 0, 0, 0));
    background-image: -moz-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0.15),rgba(0,0,0,0));
    background-image: -ms-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0.15),rgba(0,0,0,0));
    background-image: -o-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0.15),rgba(0,0,0,0));
}
   

0 yorum:

Post a Comment