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

Thiết kế trang web đăng nhập với chức năng Social Login

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

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

 
  	
  Thành viên		
  				
   					
    						Tài khoản											
    					
    						Mật khẩu

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

body {	
padding-top: 20px;	
padding-bottom: 20px;
}
.header, .marketing, .footer {	
padding-right: 15px;	
padding-left: 15px;
}
.header {	
border-bottom: 1px solid #e5e5e5;
}
.header h3 {	
padding-bottom: 19px;	
margin-top: 0;	
margin-bottom: 0;	
line-height: 40px;
}
.footer {	
padding-top: 19px;	
color: #777;	
border-top: 1px solid #e5e5e5;
}

@media (min-width: 768px) { 
.container { max-width: 730px;}
}

.container-narrow > hr {	margin: 30px 0;}
.jumbotron {	
text-align: center;	
border-bottom: 1px solid #e5e5e5;
}

.jumbotron .btn {	
padding: 14px 24px;	
font-size: 21px;
}

.marketing {	margin: 40px 0;}
.marketing p + h4 {	margin-top: 28px;}

@media screen and (min-width: 768px) {  
.header,  .marketing,  .footer { 
padding-right: 0; 
padding-left: 0;
}  

.header { margin-bottom: 30px;}  
.jumbotron { border-bottom: 0;}
} 

@-ms-viewport {width: device-width;}    
.or-text-row {	
display: table-row;
}
.or-text {	display: table;	
width: 100%;	
position: relative;	
margin: 20px 0;
}
.or-text-step button[disabled] {	
opacity: 1 !important;	filter: alpha(opacity=100) !important;
}

.or-text-row:before {	
top: 14px;	
bottom: 0;	
position: absolute;	
content: "";	
width: 100%;	
height: 1px;	
background-color: #e8e8e8;	
z-order: 0;
}

.or-text-line {	
display: table-cell;	
text-align: center;	
position: relative;	
width: 100%;
}

.or-text-line p {	
margin-top:10px;
}

.btn-circle {	
width: 50px;	
height: 50px;	
text-align: center;	
padding: 2px 0;	
font-size: 17px;	
line-height: 1.428571429;	
border-radius: 25px;
}

.btn-group {	margin-bottom: 5px;}
.fa {	padding-right: 10px;}

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