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

  • zoom in
  • zoom out
  • text align left
  • text align center
  • text align right
  • Chỉnh màu chữ
  • Làm đậm

Hướng dẫn cách tạo Responsive Card Stack bằng Bootstrap & Jquery

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 Responsive Card Stack bằng Bootstrap & Jquery

Bước 1: Tạo cấu trúc HTML
 
 
Khóa học thiết kế web lành nghề

Khóa học Chuyên viên website lành nghề Online

Giáo viên: Trên 18 năm kinh nghiệm giảng dạy web
Thời gian học: 8 tháng + 2 tháng hướng dẫn đề tài
Được học thử 1 tuần.
Cam kết chất lượng đào tạo.
Học phí: 3.200.000 VND - Học phí khuyến mãi : 1.000.000 VND (Giảm 69%)

Khóa học Thiết kế giao diện website Online

Giáo viên: Trên 18 năm kinh nghiệm giảng dạy web
Thời gian học: 4 tháng+ 1 tháng hướng dẫn đề tài
Được học thử 1 tuần.
Cam kết chất lượng đào tạo.
Học phí: 1.800.000 VND - Học phí khuyến mãi : 700.000 VND (Giảm 61%)

Khóa học thiết kế giao diện website
Khóa học lập trình web html5 css3 rwd js bootstrap

Khóa học Lập trình HTML5, CSS3, RWD, JS, BOOTSTRAP Online

Giáo viên: Trên 18 năm kinh nghiệm giảng dạy web
Thời gian học: 3 tháng+ 1 tháng hướng dẫn đề tài
Được học thử 1 tuần.
Cam kết chất lượng đào tạo.
Học phí: 1.200.000 VND - Học phí khuyến mãi : 500.000 VND (Giảm 58%)

Khóa học Lập trình PHP Cơ Bản Online

Giáo viên: Trên 18 năm kinh nghiệm giảng dạy web
Thời gian học: 3 tháng+ 1 tháng hướng dẫn đề tài
Được học thử 1 tuần.
Cam kết chất lượng đào tạo.
Học phí: 1.000.000 VND - Học phí khuyến mãi : 500.000 VND (Giảm 50%)

Khóa học lập trình php cơ bản
Đăng ký thành viên VIP365

Đăng ký thành viên VIP365

Với mong muốn tạo điều kiện thuận lợi nhất cho các bạn sinh viên, học viên có thể theo học các khóa học thiết kế web & lập trình web, HocwebGiare.com tổ chức chương trình: ĐĂNG KÝ THÀNH VIÊN VIP ĐỂ CÓ THỂ HỌC ĐƯỢC NHIỀU HƠN VỚI HOCWEBGIARE.COM

Chi tiết chương trình như sau:

Khi đăng ký thành viên VIP / 1 năm học là 500.000 đ/năm - học viên sẽ được HỌC TOÀN BỘ TẤT CẢ CÁC KHÓA HỌC THIẾT KẾ WEB & LẬP TRÌNH WEB TẠI WEBSITE HOCWEBGIARE.COM trong vòng 1 năm (365 ngày).

Bước 2: Định dạng CSS
.fixed {  
position: fixed;  
top: 0;  
left: 0;  
right: 0;  
margin-top: 0px !important;
}


.item-1 {  
position: fixed;  
top: 0;
}


.item-2 { 
 margin-top: 80vh;
}

h1,h2,h3,h4,h5 {  
font-family: 'Lobster', cursive;
}

h1 {  
font-size: 30px;  
border-bottom: 4px solid rgba(0, 0, 0, .8);  
padding-bottom: 10px;
}

a {  color:#FFFFFF;  
font-family: 'Lobster', cursive;  
text-decoration: none;
}

a:visited {  
color:#FFFFFF;  
text-decoration: none;
}

a:hover {  
color:#FF0000;  
text-decoration: none;
}


.fa {  
font-size: 15em !important;
}


* {  
box-sizing: border-box;  
font-family: 'Open Sans', sans-serif;  
color: rgba(0, 0, 0, .8);
}


body {  margin: 0;  
padding: 0;
}


.item {  
width: 100%;  
height: 80vh;  
display: flex;  
flex-direction: row;  
justify-content: space-around;  
align-items: center;
}


.item-1 {  
background-color: #00abc7;  
z-index: -5;
}


.item-2 {  
background-color: #63aa73; 
z-index: -4;
}


.item-3 {  
background-color: #fea521;  
z-index: -3;
}


.item-4 {  
background-color: #f96c66;  
z-index: -2;
}


.item-5 {  
background-color:#00CC00;  
z-index: -1;
}


.col-5 {  
max-width: 700px;
}


@media (max-width: 700px) {  
h1 {    
font-size: 18px;  
}  

.fa {    
font-size: 2em !important;  
}  
.col-5 {    
max-width: auto;	
padding-right:20px;	
padding-left:20px;  
}
} 
Bước 3: Gọi thư viện Bootstrap và Font awesome
 
 
  
Bước 4: Gọi thư viện JQUERY
 
Bước 5: Tạo hiệu ứng Slide bằng 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
Bạn có thể quan tâm

Tổng hợp các bài học hay về kỹ thuật thiết kế giao diện web với Fireworks Học lập trình web

Tổng hợp các bài học hay về lập trình hướng đối tượng PHP cơ bản Học lập trình web

Tổng hợp các bài học hay về lập trình bootstrap Học lập trình web

Hướng dẫn cách tạo Bootstrap ScrollSpy (Phần 2) Học lập trình web

Hướng dẫn cách tạo Bootstrap ScrollSpy (Phần 1) Học lập trình web

Hướng dẫn cách tạo Bootstrap Javascript Modal (Phần 2) Học lập trình web

Hướng dẫn cách tạo Bootstrap Javascript Modal (Phần 1) Học lập trình web

Hướng dẫn cách tạo Tooltip trong Bootstrap Học lập trình web

Hướng dẫn tạo Arcordion Panel trong Bootstrap (Phần 2) Học lập trình web

Hướng dẫn tạo Arcordion Panel trong Bootstrap (Phần 1) Học lập trình web