Để tạo tab, trước đây khi chưa dùng tới Bootstrap, mình đã rất khó khăn khi phải làm việc với các đoạn code Javascript rối rắm. Tuy nhiên, giờ thì chúng ta đã có thể tạo tab với bootstrap 4 rất là đơn giản luôn, cùng mình tìm hiểu bài viết đầu tiên của Series kiến thức thiết kế web nhé !
Cách tạo tab với bootstrap 4 ?
*** Lưu ý, bài viết sử dụng bản mới nhất của Bootstrap là Bootstrap 4. Ngoài ra, để phù hợp phạm vi bài viết, mình sẽ nhúng Bootstrap với CDN, việc nhúng Bootstrap mình sẽ hướng dẫn bạn trong bài khác.
tạo tab với bootstrap 4
Đầu tiên, hãy tạo file HTML, và chúng ta sẽ bắt đầu bằng cách tạo markup cơ bản của HTML nhé :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap</title>
</head>
<body>
</body>
</html>
Sau đó, chúng ta sẽ tiến hành nhúng Bootstrap với link CDN. Chúng ta sẽ có 3 file quan trọng nhất là file CSS, file jQuery và file JS của Bootstrap. Ở đây, bạn có thể đặt cả 3 link nhúng bên trong cặp thẻ <head></head> , hoặc cũng có thể chia ra đặt file CSS trong cặp thẻ <head></head> còn 2 file jQuery và JS đặt trước thẻ đóng </body> . Dù là cách nào cũng được, tuy nhiên hãy nhớ rằng luôn đặt link jQuery trước link JS của Bootstrap nhé, nếu không chúng sẽ không hoạt động tốt đâu.
Mình sẽ nhúng với cách 2, và đây là HTML markup của mình sau khi nhúng:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap</title>
<!-- Bootstrap 4 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<!-- jQuery --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!-- Bootstrap 4 JS --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Rồi, chúng ta sẽ bắt đầu với việc tạo tab thông qua việc tạo cặp thẻ <ul></ul> với các thẻ <li> bên trong, và chúng ta sẽ thêm các class được định sẵn của Bootstrap :
<!-- tab -->
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="#" class="nav-link active">Tab đầu tiên</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Tab đầu tiên</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Tab đầu tiên</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link disabled">Tab đầu tiên</a>
</li>
</ul>
Như bạn đã thấy, tại thẻ mở <ul> , chúng ta có 2 class là .nav và .nav-tabs , các thẻ <li> bên trong sẽ có class là .nav-item còn các thẻ <a> bên trong sẽ có class là .nav-link . Bạn cũng sẽ chú ý thấy chúng ta có 2 class là .active và .disabled , class .active sẽ giúp Bootstrap biết đâu là thẻ bạn muốn để kích hoạt, còn những thẻ có class .disabled thì bạn sẽ không click được hay chuyển tab qua nó được. Rồi, sau khi save lại bạn sẽ có một tab khá là cơ bản như hình sau :
tạo tab với bootstrap 4
Kiểu tab dạng pills
Bootstrap cũng cung cấp cho bạn một kiểu tab khác thay vì kiểu chia viền như thế này, đó là kiểu Pills. Hãy thử thay đổi class .nav-tabs trong thẻ <ul> của bạn thành class .nav-pills và save lại thử, bạn sẽ được kiểu như sau :
kiểu tab dạng pills
Như vậy, chỉ với HTML CSS, bạn đã dễ dàng tạo ra một tab cơ bản. Tuy nhiên, bạn sẽ dễ dàng nhận ra rằng tab của bạn hiện tại chỉ có giá trị về mặt giao diện, bạn vẫn chưa thể chuyển qua lại giữa các tab được. Để giúp tab của bạn hoạt động được, rất dễ dàng chúng ta chỉ cần thêm vào các thẻ <a> của chúng ta một thuộc tính là data-toggle="tab" . Ngoài ra, chúng ta sẽ bắt đầu gắn link và thêm nội dung cho các tab để tab của chúng ta hoạt động tốt nhất :
<!-- tab -->
<ul class="nav nav-pills">
<li class="nav-item">
<a href="#tab1" data-toggle="tab" class="nav-link active">Tab đầu tiên</a>
</li>
<li class="nav-item"> <a href="#tab2" data-toggle="tab" class="nav-link">Tab đầu tiên</a>
</li>
<li class="nav-item">
<a href="#tab3" data-toggle="tab" class="nav-link">Tab đầu tiên</a>
</li>
<li class="nav-item">
<a href="#tab4" data-toggle="tab" class="nav-link disabled">Tab đầu tiên</a>
</li>
</ul>
<!-- Nội dung -->
<div class="tab-content">
<div class="tab-pane container active" id="tab1"> <p>Thêm nội dung của bạn vào đây.</p> </div>
<div class="tab-pane container fade" id="tab2"> <p>Thử thay đổi gì đó khi chuyển tab.</p></div>
<div class="tab-pane container fade" id="tab3"> </p>Thử thay đổi gì đó khi chuyển tab.</p></div>
</div>
Đây là 1 markup hoàn chỉnh của tab. Cùng coi sơ qua mình đã thêm những gì nào : Chúng ta đã tạo 1 thẻ <div> có class .tab-content, và các thẻ <div> con bên trong đều mang thẻ .tab-pane . Và cũng tương tự, chúng ta cũng có class .active với chức năng tương tự. Ngoài ra, mình đã thêm id cho tất cả các div con bên trong, và tên id này cũng sẽ được đặt tương ứng vào thuộc tính href . Hãy thêm class .fade như mình nếu bạn muốn việc chuyển tab trông mượt hơn.
Sau khi save lại, bạn đã có một tab khá là ổn với chức năng đầy đủ dù nhìn hơi … ” chuối ” 1 tí. Bạn hãy tự mình CSS lại tab của bạn giúp nó trông đẹp và phù hợp với ý của bạn hơn. Và bài viết này mình xin dừng ở đây, trong bài viết sau, chúng ta sẽ cùng nhau tạo một slide đơn giản với Bootstrap 4.
Nếu bạn gặp phải bất kì vấn đề nào hoặc muốn đóng góp ý kiến sửa chữa, hãy để lại một comment, chúng ta sẽ cùng thảo luận cũng như giúp đỡ lẫn nhau nhé !
Xem thêm: Website Là Gì? Cách Để “Làm” Một Website (Update 9/6/2020)
