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

Hướng dẫn cách thiết kế trang thông tin cá nhân bằng Bootstrap

Trong bài học lập trình web này các Bạn sẽ được hướng dẫn cách thiết kế trang thông tin cá nhân bằng Bootstrap cho website

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

 
  
  Cách tạo Collapsible Panel 
   
   		
    			
     							
      									
      											
      					
       						HocwebGiare										
       						Web Developer									
      												
      					
       					
       				
      											
      					
       						
        																					Cập nhật thông tin cá nhân 						
        						
        																					Sản phẩm yêu thích 						
        						
        																					Quản lý đơn hàng 						
        						
        																					Tin nhắn 						
        					
       				
      							
     		
    		
     
     			   Chào mừng Bạn đến với website hocwebgiare.com

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

 
body {  
background: #F1F3FA;
}


.profile {  margin: 20px 0;}

.profile-sidebar {  
padding: 20px 0 10px 0;  
background: #fff;
}


.profile-userpic img {  
float: none;  
margin: 0 auto;  
width: 50%;  
height: 50%;  
-webkit-border-radius: 50% !important;  
-moz-border-radius: 50% !important;  
border-radius: 50% !important;
}


.profile-usertitle {  
text-align: center;  
margin-top: 20px;
}


.profile-usertitle-name {  
color: #5a7391;  
font-size: 16px;  
font-weight: 600;  
margin-bottom: 7px;
}


.profile-usertitle-job {  
text-transform: uppercase;  
color: #5b9bd1;  
font-size: 12px;  
font-weight: 600;  
margin-bottom: 15px;
}


.profile-userbuttons {  
text-align: center;  
margin-top: 10px;
}


.profile-userbuttons .btn {  
text-transform: uppercase;  
font-size: 11px;  
font-weight: 600;  
padding: 6px 15px;  
margin-right: 5px;
}


.profile-userbuttons .btn:last-child {  
margin-right: 0px;
}    
.profile-usermenu {  
margin-top: 30px;
}

.profile-usermenu ul li {  
border-bottom: 1px solid #f0f4f7;
}


.profile-usermenu ul li:last-child {  
border-bottom: none;
}

.profile-usermenu ul li a {  
color: #93a3b5;  
font-size: 14px;  
font-weight: 400;
}


.profile-usermenu ul li a i {  
margin-right: 8px;  
font-size: 14px;
}

.profile-usermenu ul li a:hover {  
background-color: #fafcfd;  
color: #5b9bd1;
}


.profile-usermenu ul li.active {  
border-bottom: none;
}


.profile-usermenu ul li.active a {  
color: #5b9bd1;  
background-color: #f6f9fb;  
border-left: 2px solid #5b9bd1;  
margin-left: -2px;
}


.profile-content {  
padding: 20px;  
background: #fff;  
min-height: 460px;
}

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

Bước 3: 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