Trong bài bày, chúng ta sẽ tìm hiểu về một thành phần khác của Bootstrap là Navs – tạo thanh menu trong Bootstrap. Mình sẽ hướng dẫn các bạn các tạo một menu đơn giản, với những kiến thức Bootstrap đã học. Ngoài ra, mình cũng hướng dẫn nâng cao về menu nhiều tab.
Nội dung chính
Video – Navs – Tạo thanh menu trong Bootstrap
Hướng dẫn chi tiết
Thanh menu đơn giản
Để tạo một thanh menu đơn giản, các bạn có thể sử dụng bộ thẻ ul và li như sau
<ul class="nav"> <li class="nav-item"><a class="nav-link" href="">Trang chủ</a></li> <li class="nav-item"><a class="nav-link" href="">Sản phẩm</a></li> <li class="nav-item"><a class="nav-link" href="">Liên hệ</a></li> </ul>
Các class cần sử dụng
+ thẻ ul sẽ có class=”nav”
+ thẻ li sẽ có class=”nav-item”
+ thẻ a nằm trong có li sẽ có class=”nav-link”
Với các class trên, Bootstrap giúp định dạng sẵn menu như bỏ gạch chân cho liên kết, padding … rất tiện lợi cho việc làm web.
Lưu ý: Mặc định thanh menu của chúng ta sẽ canh lề trái cho các item.
+ Nếu bạn muốn canh giữa, thêm class justify-content-center cho thẻ ul.
+ Nếu bạn muốn canh lề phải, thêm class justify-content-end cho thẻ ul.
Ngoài cách dùng ul à li, các bạn có thẻ dùng thẻ nav và các thẻ a như sau
<nav class="nav"> <a class="nav-link" href="">Trang chủ</a> <a class="nav-link" href="">Sản phẩm</a> <a class="nav-link" href="">Liên hệ</a> </nav>
Tạo thanh menu tab có hiệu ứng
Menu có các tab, khi chọn vào tab thì nội dung thay đổi theo.
Ví dụ demo: chúng ta sẽ là menu có 3 tab là Trang chủ, Sản phẩm và Liên hệ



FBI Warning - dưới đây có QUẢNG CÁO Bạn MUỐN TĂNG KÍCH THƯỚC website, nhanh, rẻ và dễ sử dụng có thể chọn hosting Azdigi nhé. Link đăng ký: https://my.azdigi.com/aff.php?aff=1612 Nếu các bạn click và đăng ký hosting từ link trên, mình sẽ có một ít tiền để duy trì.
Phần thanh menu với các tab
Chúng ta sẽ dùng thẻ nav và thẻ a cho ngắn gọn
<nav class="nav nav-tabs"> <a class="nav-link" id="home-tab" data-toggle="tab" href="#home">Trang chủ</a> <a class="nav-link" id="product-tab" data-toggle="tab" href="#product">Sản phẩm</a> <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact">Liên hệ</a> </nav>
+ Thẻ nav thêm vào class nav-tabs
+ Thẻ a thêm vào
- id : nên đặt sao cho liên quan đến nội dung của tab, cấu trúc đặt id là id_nội dung + -tab”
- thuộc tính data-toggle=”tab”
- href=”#id_của_nội dung”
Phần nội dung tab
Phần nội dung sẽ là có khối div bao ngoài cùng có class=”tab-content”.
Những khối con bên trong có id trùng với href của các tab bên trên, và có các class=”tab-pane fade show”. Tab mặc định sẽ có thêm class active.
<div class="tab-content"> <div class="tab-pane fade show active" id="home"> <p>Parturient, pede distinctio erat atque urna iusto sociosqu, felis? </p> </div> <div class="tab-pane fade" id="product"> <p>Tempora culpa magna ipsum class diam qui dicta ad architecto sequi. ucimus accumsan</p> </div> <div class="tab-pane fade" id="contact"> <p>Pede quaerat quo sapienteat accusamus magnam, eget magni. Mollitia animi ipsum ph</p> </div> </div>
Code mẫu: Download
Nếu có thắc mắc, hãy đặt câu hỏi bằng cách comment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web.
[…] bài 9: Navs, chúng ta đã biết cách tạo 1 menu đơn giản. Bài này chúng ta sẽ làm một menu […]
[…] ra, nếu các bạn chưa hiểu rõ về menu trong Bootstrap, có thể xem lại Bài 9 – Navs và Bài 10: Navbar […]