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

Cách tạo trang chi tiết sản phẩm 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 chi tiết sản phẩm bằng Bootstrap

Bước 1: Tạo cấu trúc HTML
 
 
Học thiết kế web bán hàng Online
Học thiết kế web bán hàng Online
Học thiết kế web bán hàng Online
Học thiết kế web bán hàng Online

Thời trang cho bé trai nhiều màu sắc ngộ nghĩnh

123 đánh giá

Với trang phục này mẹ có thể cùng bé diện đi chơi, đi học đều rất phù hợp. Khi bé mặc vào, chắc chắn mẹ sẽ có cảm nhận hoàn toàn khác biệt vì màu sắc phong phú không chỉ khiến bộ trang phục trở nên bắt mắt mà còn tôn thêm vẻ nhí nhảnh, nghịch ngợm và năng động của các bé trai. Khi diện những bộ thời trang cho bé trai ngộ nghĩnh này, mẹ đừng quên kèm theo cho bé một số phụ kiện phù hợp như mũ lưỡi trai cá tính, nón kết sành điệu, kính mát “cực ngầu” hay giày bata năng động nhé! Chúc con yêu của bạn có thêm những bộ đồ thời trang cho bé trai theo phong cách đa màu sắc cực xinh xắn và đáng yêu!

Giá bán: 200.000 đ

91% of người mua hài lòng với sản phẩm này (87 bình chọn)

Kích cỡ: s m l xl
Màu:
Bước 2: Định dạng CSS cho menu
 


body {	
font-family:Arial, Helvetica, sans-serif;	
overflow-x: hidden;
}

img {	
max-width: 100%;
}

.preview {	
display: -webkit-box;	
display: -webkit-flex;	
display: -ms-flexbox;	
display: flex;	
-webkit-box-orient: vertical;	
-webkit-box-direction: normal;	
-webkit-flex-direction: column;	
-ms-flex-direction: column;	
flex-direction: column;
} 

@media screen and (max-width: 996px) { 
.preview { 
margin-bottom: 20px;
}
}

.preview-pic {	
-webkit-box-flex: 1;	
-webkit-flex-grow: 1;	
-ms-flex-positive: 1;	
flex-grow: 1;
}

.preview-thumbnail.nav-tabs {	
border: none;	
margin-top: 15px;
}

.preview-thumbnail.nav-tabs li {	
width: 18%;	
margin-right: 2.5%;
}

.preview-thumbnail.nav-tabs li img {	
max-width: 100%;	
display: block;
}

.preview-thumbnail.nav-tabs li a {	
padding: 0;	
margin: 0;	
cursor:pointer;
}

.preview-thumbnail.nav-tabs li:last-of-type {	
margin-right: 0;
}

.tab-content {	
overflow: hidden;
}

.tab-content img {	
width: 100%;	
-webkit-animation-name: opacity;	
animation-name: opacity; 
-webkit-animation-duration: .3s; 
animation-duration: .3s;
}

.card {	
margin-top: 0px;	
background: #eee;	
padding: 3em;	
line-height: 1.5em;
} 

@media screen and (min-width: 997px) { 
.wrapper { 
display: -webkit-box; 
display: -webkit-flex; 
display: -ms-flexbox; 
display: flex;
}
}

.details {	
display: -webkit-box;
	display: -webkit-flex;	
display: -ms-flexbox;	
display: flex;	
-webkit-box-orient: vertical;	
-webkit-box-direction: normal;	
-webkit-flex-direction: column;	
-ms-flex-direction: column;	
flex-direction: column;
}

.colors {	
-webkit-box-flex: 1;	
-webkit-flex-grow: 1;	
-ms-flex-positive: 1;	
flex-grow: 1;
}

.product-title, .price, .sizes, .colors {	
text-transform: UPPERCASE;	
font-weight: bold;
}

.checked, .price span {	
color: #ff9f1a;
}

.product-title, .rating, .product-description, .price, .vote, .sizes {	
margin-bottom: 15px;
}

.product-title {	
margin-top: 0;
}

.size {
	margin-right: 10px;
}

.size:first-of-type {	
margin-left: 40px;
}

.color {	
display: inline-block;	
vertical-align: middle;	
margin-right: 10px;	
height: 2em;	
width: 2em;	
border-radius: 2px;
}

.color:first-of-type {	
margin-left: 20px;
}

.add-to-cart, .like {	
background: #ff9f1a;	
padding: 1.2em 1.5em;	
border: none;	
text-transform: UPPERCASE;	
font-weight: bold;	
color: #fff;	
text-decoration:none; 
-webkit-transition: background .3s ease; 
transition: background .3s ease;
}

.add-to-cart:hover, .like:hover {	
background: #b36800;	
color: #fff;	
text-decoration:none;
}

.not-available {	
text-align: center;	
line-height: 2em;
}

.not-available:before {	
font-family: fontawesome;	
content: "\f00d";	
color: #fff;
}

.orange {	
background: #ff9f1a;
}

.green {	
background: #85ad00;
}

.blue {	
background: #0076ad;
}

.tooltip-inner {	
padding: 1.3em;
} 

@-webkit-keyframes opacity { 
0% { opacity: 0; -webkit-transform: scale(3); transform: scale(3);} 
100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1);}
} 

@keyframes opacity { 
0% { opacity: 0; -webkit-transform: scale(3); transform: scale(3);} 
100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1);}
}
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 Chat với hocwebgiare.com
Bạn có thể quan tâm

Hướng dẫn cách tùy biến màu Bootstrap Tooltip Học lập trình web

Hướng dẫn cách tạo Accordion hướng bên phải bằng Bootstrap Học lập trình web

Hướng dẫn tạo Tab menu đổi màu bằng Bootstrap Học lập trình web

Hướng dẫn cách tạo menu Responsive với Bootsnav Học lập trình web

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

Hướng dẫn cách tạo Box Icon bằng Bootstrap Học lập trình web

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

Hướng dẫn thiết kế bộ lọc sản phẩm bằng Bootstrap Học lập trình web

Hướng dẫn cách tạo VIP card bằng Bootstrap Học lập trình web

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