Tất cả bài viết | Bootstrap
Hướng dẫn thiết kế web bằng Bootstrap tạo Banner Slider
Trong bài học này các Bạn sẽ được hướng dẫn thiết kế web bằng Bootstrap để tạo Banner Slider cho website.
Bước 1: Tạo cấu trúc HTML cho các ảnh cần Slide
Học thiết kế website online
SALOMON SENSE 4
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
DYNAFIT PDG
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
NOVITÀ TRAIL RUNNING
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
LA PORTVIA -BUSHIDO
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Bước 2: Định dạng CSS
#myCarousel {
padding:5px;
background: #428BCA;
}
#myCarousel .carousel-caption {
top:auto;
width:auto;
right:auto;
bottom:0px;
left:0;
padding:34px;
background:rgba(255, 255, 255, 0.55);
text-align:center;
height:auto;
width:100%;
color:#432A18;
text-shadow:none;
}
#myCarousel .carousel-caption h2 {
color:#F00;
margin-top:0;
}
.carousel-control {
color:#fff;
top:44%;
background:#428BCA;
bottom:auto;
padding-top:3px;
width:36px;
border-radius:50%;
height:36px;
opacity:1;
}
.carousel-control.left, .carousel-control.right {
background-image:none !important;
}
.carousel-control.right, .carousel-control .glyphicon-chevron-right {
left:auto;
right:-16px;
}
.carousel-control.left {
right:auto;
left:-16px;
}
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
Bootstrap Xem (10302) Học thiết kế web giá rẻ
