Xin chào các bạn quay lại blog của mình. Hôm nay mình sẽ giới thiệu các component jumbotron và carousel trong Bootstrap 4. Nào hãy cũng mình tìm hiểu nhé!
Component Jumbotron
Component Jumbotron giúp bạn có thể gây sự chú ý của người dùng khi vào trang web của mình với một nội dung nhất định. Theo tìm hiểu của mình thì component rất hữu ích cho các trang tin tức vì những tin tức quan trọng hay nổi bật ta có thể sử dụng Jumbotron.
Ở đây mình giải thích một tí về component, bạn có thể hiểu đơn giản là khi ta viết giao diện cho trang web thì có một button(nút) được sử dụng nhiều nơi và mỗi khi muốn button này thì ta phải code lại về HTML, CSS. Điều này thực sự không cần thiết và mất thời gian, nên từ đó xuất hiện component. Nó là tổng hợp của HTML, CSS đã được viết sẵn mà khi cần thì ta chỉ cần gọi nó ra là được. Và nó có thể bao gồm Javascript nữa nhé.
Bây giờ chúng ta sẽ tìm hiểu component thông qua việc viết trên trang web. Các bạn xem đoạn code dưới đây để hiểu rõ hơn nha:
<div class="container-fluid">
<div class="container">
<div class="jumbotron">
<h1>Xin Chào Các Bạn</h1>
<p>Chào mừng các bạn đến với Niềm Vui Lập Trình.</p>
</div>
</div>
</div>Ở đây mình sử dụng container-fluid có chức năng cũng giống như container nhưng nó có độ rộng 100% của trang web. Và để gọi component jumbotron thì các bạn chỉ cần gọi thẻ div với class là jumbotron. Nào cùng mình xem kết quả bên dưới nhé:
Xin Chào Các Bạn
Chào mừng các bạn đến với Niềm Vui Lập Trình.
Vậy có thể thay đổi màu nền hay ảnh nền cho component jumbotron không?
Cách thông thường hay được sử dụng là mình sẽ thêm một class trong thẻ div có class jumbotron. Ở ví dụ trên mình sẽ thêm một class gọi là jumbotron-anh-nen. Sau đó chúng ta sẽ dùng file CSS chỉnh sửa giao diện cho component. Để hiểu rõ hơn các bạn xem đoạn code dưới đây nhé:
HTML:
<div class="container-fluid">
<div class="container">
<div class="jumbotron jumbotron-anh-nen">
<h1>Xin Chào Các Bạn</h1>
<p>Chào mừng các bạn đến với Niềm Vui Lập Trình.</p>
</div>
</div>
</div>
CSS:
.jumbotron-anh-nen {
background-image: url('bau_troi.jpg');
background-size: cover;
color: white;
}Và sau đây là kết quả bạn cùng mình xem nhé:
Mình có một chú ý nhỏ là các bạn không nên vào thằng file css của Bootstrap để điều chỉnh nhé. Vì nó sẽ làm cho người ta nhìn vào source sẽ rất khó để theo dõi và cũng như khó sửa chữa hơn. Các bạn có thể tải file code ở trên để dễ theo dõi ở phía dưới nhé:
Đường dẫn tải File Source Code
Component Carousel:
Đây cũng là một component làm nổi bật nội dung của bạn trong trang web nhưng nó có nhiều tính năng ưu việt hơn jumbotron. Carsouel thì thường được đặt ở đầu trang và nó giúp các bạn hiển thị những hình ảnh khác nhau theo thời gian định sẵn, có các nút để di chuyển qua lại giữa các hình. Đối với các trang web cửa hàng thì các bạn sẽ gặp component thường xuyên. Nào chúng ta xem đoạn code dưới đây để hiểu hơn nhé:
<div id="Hien_Thi_Anh" class="carousel slide" data-ride="carousel" data-interval="3000">
<ol class="carousel-indicators">
<li data-target="#Hien_Thi_Anh" data-slide-to="0" class="active"></li>
<li data-target="#Hien_Thi_Anh" data-slide-to="1"></li>
<li data-target="#Hien_Thi_Anh" data-slide-to="2"></li>
</ol> <div class="carousel-inner">
<div class="carousel-item active" style="height:400px">
<img class=d-block img-fluid" src="https://images.pexels.com/photos/2161598/pexels-photo-2161598.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="First slide">
</div>
<div class="carousel-item" style="height:400px">
<img class="d-block img-fluid" src="https://images.pexels.com/photos/1381134/pexels-photo-1381134.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Second slide">
</div>
<div class="carousel-item" style="height:400px">
<img class="d-block img-fluid" src="https://images.pexels.com/photos/2418576/pexels-photo-2418576.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#Hien_Thi_Anh" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#Hien_Thi_Anh" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Các bạn xem kết quả trước rồi cùng mình đi tìm hiểu sâu hơn về component carousel này nhé:
Cái này không chỉ đơn giản như component jumbotron là chúng ta chỉ cần gọi class của nó ra. Do tính phức tạp của carousel, thì đầu tiên mình sẽ gọi thẻ cha của nó ra trước bằng dòng code dưới đây:
<div id="Hien_Thi_Anh" class="carousel slide" data-ride="carousel" data-interval="3000">Bây giờ mình sẽ phân tích từng thành phần trong nó nhé.
- Thứ nhất là sử dụng id để tạo tương tác cho các nút bấm trong carsouel và cũng như jquery(Phần này mình học ở sau nhé).
- Thứ hai là thuộc tính data-ride="carousel" sẽ tự động khởi động khi người dùng tải trang.
- Thư ba là thuộc tính data-interval="3000" giúp bạn xác định thời gian chuyển ảnh trong carousel.
Sau khi đã thiết lập các thuộc tính cơ bản thì ta sẽ đi tạo thẻ div với class là carousel-inner để chứa các phần tử con(hình ảnh sản phẩm..) trong component carousel bằng đoạn code sau đây:
<div class="carousel-item active" style="height:400px">
<img class="d-block img-fluid" src="https://images.pexels.com/photos/2161598/pexels-photo-2161598.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="First slide">
</div>
Chúng ta sẽ gọi thẻ div với class là carousel-item để xác định những hình ảnh có trong component carousel được hiển thị. Cái này không giới hạn số lượng nha bạn có thể gọi bao nhiêu tùy thích nhưng theo mình thì tầm 5 carousel-item là được rồi vì nhiều quá thì người dùng không thể chú ý được hết những sản phẩm. Và với class active nó có nghĩ là carousel-item này sẽ được hiển thị đầu tiên khi trang được load và sẽ được thêm vào sản phẩm tiếp theo được gọi. Bạn lưu ý là chỉ có một class active trong component carousel thôi nhé.
Tiếp theo mình sẽ thêm các nút điều khiển hình ảnh sản phẩm qua lại bằng đoạn code sau:
<a class="carousel-control-prev" href="#Hien_Thi_Anh" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#Hien_Thi_Anh" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>Đây là hai nút bạn có thể thấy ở bên trái và phải giúp điều khiển hình ảnh trong component carousel. Và chúng ta chú ý là khi gọi những nút này thì ta cần để ý thuộc tính href="ID_Component_carousel" vì nếu trong cùng một trang web ta có nhiều component carousel thì chúng ta phải xác định nút này dành cho carousel nào bằng Id của nó. Thuộc tính data-slide chỉ có hai giá trị là prev dùng để quay lại hình ảnh trước và next để đi tới hình tiếp theo. Các icon trong trong những nút này chúng ta có thể thay đổi bằng hình ảnh mà bạn muốn thông qua thẻ span đầu tiên trong carousel-control-next(prev).
Chúng ta cũng có cách khác điều khiển những hình ảnh sản phẩm bằng thẻ div cới class carousel-indicators và nằm phía dưới trong component carousel. Để hiểu rõ hơn các bạn xem đoạn code dưới đây nhé:
<ol class="carousel-indicators">
<li data-target="#Hien_Thi_Anh" data-slide-to="0" class="active"></li>
<li data-target="#Hien_Thi_Anh" data-slide-to="1"></li>
<li data-target="#Hien_Thi_Anh" data-slide-to="2"></li>
</ol>
Ở đây mình có hai thuộc tính quan trọng là:
- data-target="#Hien_Thi_Anh" là sẽ điều khiển component carousel với Id là Hien_Thi_Anh.
- data-slide-to=giá trị dùng để xác định nút này sẽ hiển thị hình ảnh sản phẩm nào bằng cách xét giá trị cho nó.
Vậy có thể thêm văn bản cho từng hình ảnh sản phẩm trong component carousel?
Để thêm thông tin tương ứng cho từng hình ảnh thì ta sẽ dùng thẻ div với class carousel-caption và đặt nó nằm trong thẻ div có class carousel-iem. Dễ hình dùng hơn bạn xem doạn code sau đây nhé:
<div class="carousel-item active" style="height:400px">
<img class="d-block img-fluid" src="https://images.pexels.com/photos/2161598/pexels-photo-2161598.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="First slide">
<div class="carousel-caption"> Xin Chào Các Bạn </div>
</div>
Và đây là kết quả nhé:
