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 
   
    
    
    
    
   
   
    
      
      
       Sản phẩm 1 
       Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
       
        
         200.000 đ 
        
        Chi tiết 
        
       
      
     
    
    
      
      
       Sản phẩm 2 
       Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
       
        
         200.000 đ 
        
        Chi tiết 
        
       
      
     
    
    
      
      
       Sản phẩm 3 
       Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
       
        
         200.000 đ 
        
        Chi tiết 
        
       
      
     
    
    
      
      
       Sản phẩm 4 
       Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
       
        
         200.000 đ 
        
        Chi tiết 
        
       
      
     
    
    
      
      
       Sản phẩm 5 
       Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
       
        
         200.000 đ 
        
        Chi tiết 
        
       
      
     
    
    
      
      
       Sản phẩm 6 
       Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
       
        
        200.000 đ 
        
        Chi tiết 
        
       
      
     
    
    
      
      
       Sản phẩm 7 
       Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
       
        
        200.000 đ 
        
        Chi tiết 
        
       
      
     
    
    
      
      
       Sản phẩm 8 
       Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
       
        
        200.000 đ 
        
        Chi tiế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

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