Tất cả bài viết | Bootstrap
Cách tạo trang lọc sản phẩm nổi bật bằng Bootstrap
Trong bài thực hành học thiết kế web online này các Bạn sẽ được hướng dẫn Cách tạo trang lọc sản phẩm nổi bật bằng Bootstrap
Bước 1: Tạo cấu trúc HTML cho các hình ảnh sản phẩm
Sản phẩm nổi bật
Bước 2: Định dạng CSS
body { font-family:Arial, Helvetica, sans-serif; font-size:12px; } .glyphicon { margin-right:5px;} .thumbnail { margin-bottom: 20px; padding: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; } .item.list-group-item { float: none; width: 100%; background-color: #fff; margin-bottom: 10px; } .item.list-group-item:nth-of-type(odd):hover, .item.list-group-item:hover { background: #428bca; } .item.list-group-item .list-group-image { margin-right: 10px; } .item.list-group-item .thumbnail { margin-bottom: 0px; } .item.list-group-item .caption { padding: 9px 9px 0px 9px; } .item.list-group-item:nth-of-type(odd) { background: #eeeeee; } .item.list-group-item:before, .item.list-group-item:after { display: table; content: ""; } .item.list-group-item img { float: left; } .item.list-group-item:after { clear: both; } .list-group-item-text { margin: 0 0 11px; }
Bước 3: Gọi thư viện Bootstrap
Bước 4: Gọi thư viện JQUERY
Bootstrap Xem (5124) Học thiết kế web giá rẻ