Tất cả bài viết | Bootstrap

Hướng dẫn tạo Panel có chức năng lọc dữ liệu bằng Bootstrap

Trong bài thực hành này các Bạn sẽ được hướng dẫn tạo Panel có chức năng lọc dữ liệu bằng Bootstrap

Bước 1: Dùng HTML tạo danh sách

 
  
  Tạo Panel có chức năng lọc dữ liệu bằng Bootstrap 
   
    
     
      
      Danh sách thành viên 
        Lọc dữ liệu   
       
      
       
      
      
       
        
        # 
        Họ 
        Tên 
        Tài khoản 
        
       
       
       1 
       Nguyễn Văn 
       Tèo 
       teonv 
       
       
       2 
       Lê Thị 
       Hoa 
       hoalt 
       
       
       3 
       Trần Văn 
       Tám 
       tamtv

#	Họ	Tên	Tài khoản
1	Nguyễn Văn	Tèo	teonv
2	Lê Thị	Hoa	hoalt
3	Trần Văn	Tám	tamtv

Bước 2: Định nghĩa CSS

.row {	
margin-top:40px;	
padding: 0 10px;
}
.clickable {	
cursor: pointer;
}
.panel-heading div {	
margin-top: -18px;	
font-size: 15px;
}
.panel-heading div span {	
margin-left:5px;
}
.panel-body {	
display: none;
}

Bước 3: Gọi thư viện Bootstrap

Bước 4: Gọi thư viện JQUERY

Bước 5: tạo chức năng lọc dữ liệu bằng 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