Tất cả bài viết | Bootstrap
Hướng dẫn cách tạo Bootstrap Alert Messages
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 Alert Messages
Bước 1: Tạo cấu trúc HTML
Hướng dẫn cách tạo Bootstrap Alert Messages
Bước 2: Định dạng CSS
.alert-message{
margin: 20px 0;
padding: 20px;
border-left: 3px solid #eee;
}
.alert-message h4{
margin-top: 0;
margin-bottom: 5px;
}
.alert-message p:last-child{
margin-bottom: 0;
}
.alert-message code{
background-color: #fff;
border-radius: 3px;
}
.alert-message-success{
background-color: #F4FDF0;
border-color: #3C763D;
}
.alert-message-success h4{
color: #3C763D;
}
.alert-message-danger{
background-color: #fdf7f7;
border-color: #d9534f;
}
.alert-message-danger h4{
color: #d9534f;
}
.alert-message-warning{
background-color: #fcf8f2;
border-color: #f0ad4e;
}
.alert-message-warning h4{
color: #f0ad4e;
}
.alert-message-info{
background-color: #f4f8fa;
border-color: #5bc0de;
}
.alert-message-info h4{
color: #5bc0de;
}
.alert-message-default{
background-color: #EEE;
border-color: #B4B4B4;
}
.alert-message-default h4{
color: #000;
}
.alert-message-notice{
background-color: #FCFCDD;
border-color: #BDBD89;
}
.alert-message-notice h4{
color: #444;
}
Bước 3: Gọi thư viện Bootstrap và Font awesome
Bước 4: Gọi thư viện JQUERY
Bootstrap Xem (2584) Học thiết kế web giá rẻ
