Bài 9: Navs – Tạo thanh menu trong Bootstrap

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.

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.

Liên hệ