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

Cách tạo trang nhận xét của khách hàng 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 tạo trang nhận xét của khách hàng bằng Bootstrap

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

 
  
   
   Nhận xét của học viên 
    
     
      
        
       
       Khóa học rất chi tiết dễ hiểu di từ dễ đến khó,nhiều bài tập ứng dụng rất sát với thực tế, giáo viên nhiệt tình, luôn giải đáp mọi thắc  mắc của học viên.  
       Đặng Cao Sơn Lớp Web Lành Nghề 
       
      
      
        
       
       Học Web online rất tốt đỡ mất thời gian đi lại, học được mọi lúc mọi nơi. Bài giảng có thể xem lại nhiều lần, video minh họa cụ thể theo từng bước kèm âm thanh giải thích tỷ mỷ nên rất dễ tiếp thu.  
       Nguyễn Đức Tế Lớp Web Lành Nghề 
       
      
      
        
       
       Tất cả các bài học của lớp website lành nghề đều rất hay và dễ hiểu cho mọi đối tượng  
       Lưu Văn Thuận Lớp Web Lành Nghề

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

.testimonial{    
text-align: center;
}

.testimonial .pic{    
width: 85px;    
height: 85px;    
border-radius: 50%;    
margin: 0 auto 40px;    
border: 4px solid #eb7260;    
overflow: hidden;
}
.testimonial .pic img{    
width: 100%;    
height: auto;
}

.testimonial .description{    
color: #8a9aad;    
font-size: 15px;    
font-style: italic;    
line-height: 24px;    
margin-bottom: 20px;
}

.testimonial .testimonial-prof{    
margin:20px 0;
}

.testimonial .title{    
font-size: 20px;    
color: #eb7260;    
margin-right: 20px;    
text-transform: capitalize;
}

.testimonial .title:after{    
content: "";    
margin-left: 30px;    
border-right: 1px solid #808080;
}

.testimonial .testimonial-prof small{    
display: inline-block;    
color: #8a9aad;    
font-size: 17px;    
text-transform: capitalize;
}

.owl-theme .owl-controls .owl-buttons div{    
background: transparent;    
opacity: 1;
}

.owl-buttons{    
position: absolute;    
top: 8%;    
width: 100%;
}

.owl-prev{    
position: absolute;    
left:30%;
}
.owl-next{    
position: absolute;    
right:30%;
}

.owl-prev:after,.owl-next:after{    
content: "\f060";    
font-family: 'FontAwesome';    
width: 28px;    
height: 28px;    
font-size: 16px;    
color:#808080;    
transition: all 0.15s ease 0s;
}
.owl-next:after{    
content: "\f061";
}

@media only screen and (max-width: 479px){    
.owl-prev{        
left: 10%;    
}    
.owl-next{        
right: 10%;    
}
}

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

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

Bước 5: tạo hiệu ứng Slide bằng JQUERY

$(document).ready(function(){    
$("#testimonial-slider").owlCarousel({        
items:1,        
itemsDesktop:[1199,1],        
itemsDesktopSmall:[979,1],        
itemsTablet:[768,1],        
pagination: false,        
navigation:true,        
navigationText:["",""],        
autoPlay:true    
});
});

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