Giu cho navbar luon o tren top trong bootstrap năm 2024

Đây cũng đang là phiên bản 1.0, nếu trong quá trình sử dụng phát hiện lỗi gì vui lòng để lại bình luận bằng công cụ facebook-comment bên dưới. (Lưu ý là mình sẽ không thảo luận qua Live chat nhé).

Đây là clip số 19: Nav - Navigation - menu

Nav giúp tạo menu đẹp hơn, dễ hơn và nhanh hơn.

Ví dụ, class=“nav nav-tabs”.

• Item1
• Item2
• Item3

Ví dụ, class=“nav nav-pills”

• Item1
• Item2
• Item3

Ví dụ, menu dọc: class = “nav nav-tabs nav-stacked”. Để làm nổi bật phần nội dung: class=“well”.

• Item1
• Item2
• Item3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit ex sunt, alias ea excepturi repellendus voluptatum nihil praesentium porro temporibus ad, ab quos autem magnam eum optio possimus dolore incidunt natus aliquid atque dolorem repellat pariatur ut ullam. Deleniti assumenda, exercitationem architecto sed ut perferendis, non expedita obcaecati. Doloribus, nam.

Đây là clip số 20: Navbar – thanh menu

Nav để tạo menu, navbar để tạo thanh menu.

Sử dụng thẻ nav của HTML5 kết hợp với các class của Bootstrap để tạo navbar.

Thanh menu màu xám:

Thanh menu màu đen:

Để căn giữa một phần tử, đưa phần tử đó vào trong

Trong Sublime Text, sử dụng phím tắt “ctrl+shift+D” để copy/paste một dòng.

Thanh menu gồm hai phần: navbar-header và navbar-collapse, mục đích là để khi thu nhỏ màn hình thì phần navbar-header được giữ nguyên, còn phần navbar-collapse thì bị thu lại (ẩn đi), ví dụ: