Ở phần này thì chúng ta sẽ tìm hiểu cách khai báo kiểu navbar cơ bản mà bootstrap hỗ trợ sẵn đó là tạo ra một thanh ngang menu và không hỗ trợ responsive (không co giãn theo độ phân giải màn hình). Và cũng xin các bạn lưu ý rằng, ở ví dụ của bài này thì tôi sử dụng html5 để định dạng cho navbar cho đúng chuẩn yêu cầu mà bootstrap đề ra.
Đầu tiên để có thể tạo ra thanh ngang navigation thì các bạn cần khai báo cho nó class navbar và cũng giống như các component khác thì nó cũng cần có class con hỗ trợ các kiểu màu sắc...vvv nói suông thôi thì khó hình dung lắm nên các bạn chịu khó xem demo phía dưới nha.
Các class con hỗ trợ navigation:
- navbar-default (Kiểu màu trắng)
- navbar-inverse (Kiểu màu đen)
- nav navbar-nav (Định dạng style cho phần menu ul,li)
- navbar-toggle (Định dạng hiệu ứng menu xổ xuống)
Bây giờ thì chúng ta sẽ thêm các phần tử vào thành phần bên trong của navbar để xem nó tạo ra điều gì thú vị. Phần navigation này nó sẽ được chia thành 2 thành phần, ở bên trái là chỗ khai báo brand( Thương hiệu) tương ứng với logo và text link. Ngoài ra thì các link menu có thể nằm tiếp theo hoặc là nằm ở bên phải trên thanh ngang.
Để có thể chia phần này ra thành 2 thành phần riêng biệt thì ngay trong phần tử html navbar thì chúng ta sẽ thêm vào sau nó một thẻ div với class là
navbar-header, và bên trong phần tử này chúng ta dùng thẻ a href để khai báo vào đó phần class navbar-brand.
1
2
3
| <div class="navbar-header"><a href="" class="navbar-brand">Freetuts.net</a></div> |
Sau khi khai báo xong phần brand thì chúng ta tiếp tục thêm vào phía sau nó là class
navbar-collapse, class này sẽ giúp phần navigation tạo ra môt nút nhấn để khi click vào sẽ show menu link, nó sẽ hiện nút nhấn khi các bạn co giãn và thu nhỏ trình duyệt, nếu website các bạn đang thiết kế không tương tác với responsive thì không cần phải khai báo thêm class này.
1
| <div class="navbar-collapse "></div> |
Ví dụ: Xem demo (Do phần live demo đã bị co giãn màn hình nên các bạn chịu khó copy code về và chạy để được kết quả như hình bên dưới nhé)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
| <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Bootstrap 3 Navigation</title> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> <style type="text/css"> .example{ margin: 5px; } </style></head><body> <div class="example"> <h2 class="text-center">Freetuts.net - Bootstrap 3 Navigation - Author Hoài Minh</h2> <div id="header"> <nav class="navbar navbar-inverse"> <div class="navbar-header"> <a href="" class="navbar-brand">Freetuts.net</a> </div> <div class="navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="">Trang chủ</a></li> <li><a href="">Giới thiệu</a></li> <li><a href="">Tin tức</a></li> <li><a href="">Thương hiệu</a></li> <li><a href="">Liên hệ</a></li> </ul> </div> </nav> </div> </div> </body> </html> |
Hình ảnh navigation cơ bản
Tiếp theo nếu các bạn muốn di chuyển cái đoạn menu link sang bên phải thì như thế nào ? nếu ở css thông thường thì chúng ta sẽ cho nó về trạng thái
float:right đúng không nào? còn với bootstrap thì chúng ta chỉ việc thêm vào class navbar-right, tức là cú pháp như sau <ul class="nav navbar-nav navbar-right">.
1
2
3
4
5
6
7
8
9
| <div class="navbar-collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="">Trang chủ</a></li> <li><a href="">Giới thiệu</a></li> <li><a href="">Tin tức</a></li> <li><a href="">Thương hiệu</a></li> <li><a href="">Liên hệ</a></li> </ul> </div> |
Ví dụ: Xem demo (Do phần live demo đã bị co giãn màn hình nên các bạn chịu khó copy code về và chạy để được kết quả như hình bên dưới nhé)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
| <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Bootstrap 3 Navigation</title> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> <style type="text/css"> .example{ margin: 5px; } </style></head><body> <div class="example"> <h2 class="text-center">Freetuts.net - Bootstrap 3 Navigation - Author Hoài Minh</h2> <div id="header"> <nav class="navbar navbar-inverse"> <div class="navbar-header"> <a href="" class="navbar-brand">Freetuts.net</a> </div> <div class="navbar-collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="">Trang chủ</a></li> <li><a href="">Giới thiệu</a></li> <li><a href="">Tin tức</a></li> <li><a href="">Thương hiệu</a></li> <li><a href="">Liên hệ</a></li> </ul> </div> </nav> </div> </div> </body> </html> |
Hình ảnh navigation right
Chỉ với một thao tác đơn giản là thêm class hỗ trợ vào thì menu link đã được di chuyển về bên phải giống như hình trên. Các ban hoàn toàn có thể tùy biến thêm menu ở trá/ phải một cách rất là dễ dàng. Như vậy chúng ta vừa tạo xong phần navigation trên desktop, nhưng mà nó chỉ mới hiển thị tốt trên desktop mà thôi, không tin các bạn thử co giãn trình duyệt hoặc sử dụng addon giả lập màn hình smartphone thì sẽ thấy phần menu của nó hiển thị như sau.
Hình ảnh responsive navigation
Các bạn có thể thấy là nó show hết toàn bộ menu ra luôn , việc tiếp theo cần làm là chúng ta sẽ ẩn phần menu này đi...thay vào đó sẽ tạo ra nút nhấn để khi click vào thì mới show phần menu ra khí các bạn đang ở trạng thái thu nhỏ trình duyệt.
Không có nhận xét nào:
Đăng nhận xét