Tất cả bài viết | Bootstrap
Tạo menu tự động ẩn bằng Bootstrap
Trong bài học thiết kế website chuyên nghiệp này các Bạn sẽ được hướng dẫn cách tạo menu tự động ẩn bằng Bootstrap
Bước 1: Tạo cấu trúc HTML
Chào mừng Bạn đến với website hocwebgiare.com
Chào mừng Bạn đến với website hocwebgiare.com
Chào mừng Bạn đến với website hocwebgiare.com
Chào mừng Bạn đến với website hocwebgiare.com
Chào mừng Bạn đến với website hocwebgiare.com
Chào mừng Bạn đến với website hocwebgiare.com
Bước 2: Định dạng CSS
ul.dropdown-cart {
min-width:250px;
}
ul.dropdown-cart li .item {
display:block;
padding:3px 10px;
margin: 3px 0;
}
ul.dropdown-cart li .item:hover {
background-color:#f3f3f3;
}
ul.dropdown-cart li .item:after {
visibility: hidden;
display: block;
font-size: 0;
content: "";
clear: both;
height: 0;
}
ul.dropdown-cart li .item-left {
float:left;
}
ul.dropdown-cart li .item-left img, ul.dropdown-cart li .item-left span.item-info {
float:left;
}
ul.dropdown-cart li .item-left span.item-info {
margin-left:10px;
}
ul.dropdown-cart li .item-left span.item-info span {
display:block;
}
ul.dropdown-cart li .item-right {
float:right;
}
ul.dropdown-cart li .item-right button {
margin-top:14px;
}
.demo-long {
margin-top: 100px;
margin-bottom: 200px;
}
Bước 3: Gọi thư viện Bootstrap
Bước 4: Gọi thư viện JQUERY
Bước 5: Tạo hiệu ứng cho Table bằng JQUERY
$("nav.navbar-fixed-top").autoHidingNavbar(); Bootstrap Xem (7003) Học thiết kế web giá rẻ
