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

Cách thiết kế trang đăng ký bằng Bootstrap

Trong bài học thiết kế web này các Bạn sẽ được Hướng dẫn Cách thiết kế trang đăng ký bằng Bootstrap

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

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

 

body{   
padding-top:40px;
}

.body-bg{    
background: linear-gradient(to right,#7cacdc,#e0e5eb);
}

form{    
font-family: 'Roboto', sans-serif;
}

.form-horizontal .header{    
background: #b5953f;    
padding: 10px 25px;    
font-size: 30px;    
color: #fff;    
text-transform: uppercase;    
border-radius: 3px 3px 0 0;
}

.form-horizontal .form-content{    
padding: 25px;    
background: #f9fafd;
}

.form-horizontal .form-control{    
padding: 10px 50px 10px 15px;    
height: 50px;    
font-size: 18px;    
color: #000;    
border: 2px solid #acacac;    
margin-bottom: 15px;
}

.form-horizontal .form-control:hover{    
border-color: #c9af67;
}

.form-horizontal .form-control:focus{    
border-color: #b5953f;    
box-shadow: none;
}

.form-horizontal .control-label{    
width: 42px;    
height: 40px;    
font-size: 17px;    
color: #acacac;    
border-left: 1px solid #acacac;    
position: absolute;    
top: 5px;    
right: 20px;    
text-align: center;
}

.form-horizontal .captcha{    
padding-right: 0;
}

.form-horizontal .captcha label{    
background: #e0e0e0;    
display: block;    
height: 50px;    
font-size: 16px;    
color: #acacac;    
line-height: 45px;    
text-align: center;    
border-radius: 3px 0 0 3px;
}

.form-horizontal .captcha-text{    
padding-left: 0;
}

.form-horizontal .captcha-text input{    
border-radius: 0 3px 3px 0;
}

.form-horizontal .footer{    
background: #e8eaf6;    
border-top: 1px solid #b5953f;    
padding: 10px 25px;
}

.form-horizontal .footer .btn{    
background: #b5953f;    
font-size: 18px;    
color: #fff;    
float: right;    
margin: 10px 0;    
clear: both;    
padding: 10px 25px;    
transition: all 0.5s ease 0s;
}

.form-horizontal .name{    
padding: 10px 15px;
}

@media only screen and (max-width:767px){    
.form-horizontal .control-label i{        
line-height: 40px;    
}    

.form-horizontal .captcha label{        
font-size: 13px;    
}
}

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