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

Hướng dẫn thiết kế trang đăng nhập bằng Bootstrap

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

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

 
  
   
    
    ADMIN
     
     
      
       
       
       
  
       
      
      
       
       
       
  
       
      
      
       Nhớ thông tin 
       
      
      
       
       
      Bạn có tài khoản không? Đăng ký ngay!

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

.col-center-block {	
float: none;	
display: block;	
margin-left: auto;	
margin-right: auto;
}

html,  body,  .container {	
height: 100%;	
width: 100%;
}

.container {	
display: table;	
vertical-align: middle;
}

.vertical-center-row {	
display: table-cell;	
vertical-align: middle;
}

.login-screen-bg {	
background-color: #EFEFEF;
}

.panel-git {	
border: 1px solid #d8dee2;
}

.panel-git h3 {	
color: #fff;
}
.panel-git .panel-heading {	
background-color: #829AA8;
}

.login-widget {	
padding: 50px;	
border-radius: 10px;	
padding: 30px;	
box-shadow: 0px 0px 1px 1px rgba(161, 159, 159, 0.1);	
background-color: #FFF;
}
.login-screen-bg {	
background-color: #EFEFEF;
}

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

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