Tất cả bài viết | Bootstrap

Cách tạo Bootstrap Alerts mới

Trong bài học thiết kế web này các Bạn sẽ được Hướng dẫn Cách tạo Bootstrap Alerts mới

Bước 1: Tạo cấu trúc HTML

 
  
  Cách tạo Bootstrap Alerts mới 
    Gọi ngay cho chúng tôi để đăng ký thành viên VIP365. Điện thoại: 0199 257 6350 - 0932 152 592 
   
    Gọi ngay cho chúng tôi để đăng ký thành viên VIP365. Điện thoại: 0199 257 6350 - 0932 152 592 
   
    Gọi ngay cho chúng tôi để đăng ký thành viên VIP365. Điện thoại: 0199 257 6350 - 0932 152 592 
   
    Gọi ngay cho chúng tôi để đăng ký thành viên VIP365. Điện thoại: 0199 257 6350 - 0932 152 592 
   
   Gọi ngay cho chúng tôi để đăng ký thành viên VIP365. Điện thoại: 0199 257 6350 - 0932 152 592 
   
   Gọi ngay cho chúng tôi để đăng ký thành viên VIP365. Điện thoại: 0199 257 6350 - 0932 152 592 
   
   Gọi ngay cho chúng tôi để đăng ký thành viên VIP365. Điện thoại: 0199 257 6350 - 0932 152 592

Bước 2: Định dạng CSS

.msg {    
background: #fefefe;    
color: #666666;    
font-weight: bold;    
font-size: small;    
padding: 12px;    
padding-left: 16px;    
border-top: solid 3px #CCCCCC;    
border-radius: 5px;    
margin-bottom: 10px;    
-webkit-box-shadow: 0 10px 10px -5px rgba(0,0,0,.08);       
-moz-box-shadow: 0 10px 10px -5px rgba(0,0,0,.08);            
box-shadow: 0 10px 10px -5px rgba(0,0,0,.08);
}

.msg-clear {    
border-color: #fefefe;    
-webkit-box-shadow: 0 7px 10px -5px rgba(0,0,0,.15);       
-moz-box-shadow: 0 7px 10px -5px rgba(0,0,0,.15);            
box-shadow: 0 7px 10px -5px rgba(0,0,0,.15);
}

.msg-info {    
border-color: #b8dbf2;
}

.msg-success {    
border-color: #cef2b8;
}

.msg-warning {    
border-color: rgba(255,165,0,.5);
}

.msg-danger {    
border-color: #ec8282;
}

.msg-primary {    
border-color: #9ca6f1;
}

.msg-magick {    
border-color: #e0b8f2;
}

.msg-info-text {    
color: #39b3d7;
}

.msg-success-text {    
color: #80d651;
}

.msg-warning-text {    
color: #db9e34;
}

.msg-danger-text {    
color: #c9302c;
}

.msg-primary-text {    
color: rgba(47,106,215,.9);
}

.msg-magick-text {    
color: #bb39d7;
}

Bước 3: Gọi thư viện Bootstrap và Font awesome

Bước 4: Gọi thư viện JQUERY

Xem demo Tải Code Đăng ký tham gia làm hội viên của kênh để được xem các bài học mới nhất