Tất cả bài viết | Bootstrap
Hướng dẫn thiết kế bộ lọc sản phẩm bằng Bootstrap
Trong bài tự học lập trình web này các Bạn sẽ được Hướng dẫn thiết kế bộ lọc sản phẩm bằng Bootstrap cho website
Bước 1: Tạo cấu trúc HTML
Thiết kế bộ lọc sản phẩm
Lọc sản phẩm
Chào mừng Bạn đến với hocwebgiare.com
Bước 2: Tạo cấu trúc CSS
.behclick-panel .list-group {
margin-bottom: 0px;
}
.behclick-panel .list-group-item:first-child {
border-top-left-radius:0px;
border-top-right-radius:0px;
}
.behclick-panel .list-group-item {
border-right:0px;
border-left:0px;
}
.behclick-panel .list-group-item:last-child {
border-bottom-right-radius:0px;
border-bottom-left-radius:0px;
}
.behclick-panel .list-group-item {
padding: 5px;
}
.behclick-panel .panel-heading {
border-top-right-radius: 0px;
border-top-left-radius: 0px;
border-bottom: 1px solid darkslategrey;
}
.behclick-panel {
border-radius: 0px;
border-right: 0px;
border-left: 0px;
border-bottom: 0px;
box-shadow: 0 0px 0px rgba(0, 0, 0, 0);
}
.behclick-panel .radio, .checkbox {
margin: 0px;
padding-left: 10px;
}
.behclick-panel .panel-title > a, .panel-title > small, .panel-title > .small, .panel-title > small > a, .panel-title > .small > a {
outline: none;
}
.behclick-panel .panel-body > .panel-heading {
padding:10px 10px;
}
.behclick-panel .panel-body {
padding: 0px;
}
.behclick-panel a:link {
text-decoration:none;
}
.behclick-panel a:visited {
text-decoration:none;
}
.behclick-panel a:hover {
text-decoration:none;
}
.behclick-panel a:active { text-decoration:none;}
Bước 3: Gọi thư viện Bootstrap và Font awesome
Bước 4: Gọi thư viện JQUERY
Bước 5: Tạo hiệu ứng Flip bằng JQUERY
function toggleChevron(e) {
$(e.target) .prev('.panel-heading')
.find("i.indicator")
.toggleClass('fa-caret-down fa-caret-right');
}
$('#accordion').on('hidden.bs.collapse', toggleChevron);
$('#accordion').on('shown.bs.collapse', toggleChevron); Bootstrap Xem (10246) Học thiết kế web giá rẻ
