Hướng dẫn code html trang admin - mã html trang quản trị

Bước 1: Tạo cấu trúc HTML

 
 
 
   
Cách thiết kế giao diện trang Admin List bằng Bootstrap
 
   
 
     
 
       
 
        
Danh sách khách hàng
 
       
 
        
      
 
     
 
      
 
        
        
 
         

         
 
         
Mã số
 
         
Họ tên
 
         
Email
 
        
 
        
       
 
        
 
        
 
        
1
 
        
Nguyễn văn A
 
        
 
       
 
       
 
        
 
        
 
        
2
 
        
Nguyễn văn B
 
        
 
       
 
       
 
        
 
        
 
        
3
 
        
Nguyễn văn C
 
        
 
       
 
       
 
        
 
        
 
        
4
 
        
Nguyễn văn D
 
        
 
       
 
      
 
     
 
      
    
 
  

Bước 2: Định dạng CSS

.panel-table .panel-body {	
padding:0;
}
.panel-table .panel-body .table-bordered {	
border-style: none;	
margin:0;
}
.panel-table .panel-body .table-bordered > thead > tr > th:first-of-type {	
text-align:center;	width: 100px;}.panel-table .panel-body .table-bordered > thead > tr > th:last-of-type, .panel-table .panel-body .table-bordered > tbody > tr > td:last-of-type {	
border-right: 0px;
}
.panel-table .panel-body .table-bordered > thead > tr > th:first-of-type, .panel-table .panel-body .table-bordered > tbody > tr > td:first-of-type {	
border-left: 0px;
}
.panel-table .panel-body .table-bordered > tbody > tr:first-of-type > td {	
border-bottom: 0px;
}
.panel-table .panel-body .table-bordered > thead > tr:first-of-type > th {	
border-top: 0px;
}
.panel-table .panel-footer .pagination {	
margin:0;
}
.panel-table .panel-footer .col {	
line-height: 34px;	
height: 34px;
}
.panel-table .panel-heading .col h3 {	
line-height: 30px;	
height: 30px;
}
.panel-table .panel-body .table-bordered > tbody > tr > td {	
line-height: 34px;
}

Bước 3: Gọi thư viện Bootstrap và Font awesome

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