Home » Web Design » [Bootstrap] Bài 4: Tạo Navigation Bar (menu) đơn giản.

[Bootstrap] Bài 4: Tạo Navigation Bar (menu) đơn giản.

This entry is part 4 of 5 in the series Bootstrap

1: Sơ lược:

Các thành phần điều hướng trong Bootstrap đều có dạng markup và trạng thái giống nhau, bắt đầu với class cơ sở .nav. Đổi chỗ các class để hoán đổi các style với nhau.
Hình ảnh minh họa:

bootstrap

Đây được gọi là một Navigation bar hay là một menu.

A: Thành phần điều hướng dạng thẻ:

B: Thành phần điều hướng dạng nút:

Ngoài theo hàng ngang thì cũng có thể xếp chồng lên nhau:

C: Sử dụng menu sổ xuống:

Áp dụng như dạng thẻ và nút.

Hình ảnh minh họa chung cho các ví dụ trên:

1

2

2: Tạo một menu đơn giản:

Chỉ cần gõ bs3-navbar + tab là sẽ ra một đoạn code menu, đó là một chuẩn chung tùy theo mục đích mà chugn1 ta lựa chọn sử dụng các phần trong đó cho phù hợp:

Và kết quả như hình:

screenshot-10

Đây là hình ví dụ minh họa:

3

Như vậy thì mình đã chỉ các bạn làm một menu đơn giản một cách nhanh chóng.
Và các bạn có thể tìm hiểu thêm các phần mở rộng, sâu hơn về Navigation Bar tại: đây.

Chúc các bạn thành công!. Đừng quên để lại lời nhắn nếu có thắc mắc gì nhé. 🙂

Bài 5: Thực hành làm một website bán hàng đơn giản (Tự học).
Các bạn sao khi làm xong có thể gởi về Mail sau: sonlam27@outlook.com.vn. Layout của trang web bán hàng như sau:

screenshot-11

Gợi ý: Để 1 ký tự canh bên phải hoặc trái dùng pull-right và ngược lại. Các icon dùng thuộc tính Glyphicons, các slideshow hình ảnh dùng Carousel.

Series Navigation<< [Bootstrap] Bài 3: Hệ thống lưới và căn chỉnh.[Bootstrap] Bài 6: Buttons And Button Groups >>
Share
Share
Free WordPress Themes - Download High-quality Templates