Bootstrap Project A-Z 07 – Xây dựng menu responsive

0
545

[ VIDEO TUT ]

Bấm Subscribe Nhận video học mới nhất :

Chú ý: Các bạn lựa chọn video ở chế độ 720HD để xem được chất lượng hình ảnh và âm thanh tốt nhất nhé.

1. Giới thiệu menu responsive

Việc thiết kế một menu để điều hướng là rất quan trọng. Tuy nhiên khi hiển thị trong thiết bị di động, menu chiếm quá nhiều diện tích. Vì thế ta nên ẩn nó đi và chỉ hiển thị ra khi nào cần thiết. Sau đây chúng ta sẽ bắt đầu xây dựng một menu như vậy.

Đầu tiên chúng ta sẽ mở một trang HTML mới, khai báo đầy đủ các file css và js. Sau đó chúng ta thêm câu lệnh sau vào phần head:

Câu lệnh này sẽ giúp trình duyệt hiển thị tương ứng với kích thước của màn hình.

Hết phần thẻ head, giờ tới thẻ body, các bạn thêm vào đoạn code sau:

Phần nằm trong cặp thẻ <button> chính là phần sẽ giúp chúng ta hiển thị nút bấm thay vì tất cả các mục của menu khi xem bằng điện thoại hay máy tính bảng. Đây là kết quả thu được khi chúng ta co màn hình vào

học bootstrap

Tiếp theo ta sẽ tìm hiểu qua cách có thể style riêng cho thanh menu này. Ở đây class .navbar-fixed-top dùng để cố định thanh menu này ở top. Nếu không thích các bạn có thể xóa đi. Ta sẽ thêm vào class .my-navbar-header (class này bạn đặt tên là gì cũng được) và sau đó ta sẽ style cho class này (Lưu ý: tất cả các file CSS của riêng ta đều phải đặt dưới file bootstrap.css).

3 class trong thẻ ul gồm: .nav, .navbar-nav, .navbar-right nếu không thích dùng những style có sẵn của Bootstrap, bạn có thể xóa đi và xây dựng style riêng cho mình.

2. Xây dựng menu responsive cho giao diện

Bây giờ tôi sẽ áp dụng vào trang HTML của chúng ta:

Sửa lại CSS 1 chút theo ý chúng ta:

Các bạn có thể tham khảo  ví dụ ở trên và bài đầy đủ tại đây

Như vậy tôi vừa hướng dẫn các bạn tạo một menu responsive sử dụng bootstrap. Ở bài viết tiếp theo tối sẽ hướng dẫn các bạn cách để tạo một slide. Cảm ơn và hẹn gặp lại các bạn.

[ SOURCE CODE ]

  • Code mẫu của bài viết này, các bạn vui lòng download ở đây Source code

Các bài học tiếp theo:

Tác giả: Đạt Nguyễn Vietpro

 

[Total: 0    Average: 0/5]

LEAVE A REPLY

Please enter your comment!
Please enter your name here