Hướng dẫn tạo menu bootstrap
Như vậy sau khi kết thúc bài viết trước thì các bạn cùng với tôi đã tìm hiểu xong phần glyphicons dùng để nhúng các biểu tượng vào website. Ở bài viết này thì chúng ta sẽ tìm hiểu về một components khá là quan trọng, đó chính là navs. Nghe cái tên là thấy quen quen rồi hen, chức năng chính của nó sẽ giúp chúng ta tạo ra các menu đẹp mắt và ứng dụng nó vào website dễ dàng hơn. Nó có rất là nhiều kiểu và chúng ta sẽ tìm hiểu cách sử dụng nó thông qua từng kiểu menu. Show Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức. 1. Tạo menu nằm ngang với navs trong bootstrap 3Ông bà ta thường nói, khi bắt đầu làm việc gì đó thì đều bắt đầu từ những việc đơn giản nhất. Tôi sử dụng các thẻ Ví dụ: Xem demo Hình ảnh navs Như vậy để có thể tao ra menu giống như hình trên thì ngay thẻ ul , các bạn khai báo cho nó class cha là navs và phía sau nó sẽ là các class con bổ trợ chúng ta tạo ra các kiểu menu khác. Tiếp theo chúng sẽ sẽ tìm hiểu kiểu đầu tiên đó chính là dạng menu theo kiểu tabs. Bài viết này được đăng tại [free tuts .net] Ví dụ: Xem demo
Hình ảnh nav-tabs Như vậy các bạn có thể dễ dàng nhân ra rằng là sau khi chúng ta thêm class con là Để có thể làm nổi bật menu đã được click chuột và xác định là người dùng đang ở trang nào thì chắc hẳn các bạn vẫn còn nhớ class active đúng không nào. Ai quên rồi thì vui lòng xem lại các bài cũ nhé. Ví dụ: Xem demo
Hình ảnh active nav-tabs Với css thông thường thì để có thể thêm một icons vào kế bên menu thì chắc hẳn các bạn sẽ mất rất nhiều thời gian để canh lề cho background, vậy thì khi làm việc với navs điều mà khiến các bạn đau đầu bất lâu nay sẽ trở nên rất là đơn giản. hoàn toàn có thể kết hợp glyphicons nhúng vào menu. 2. Nhúng glyphicons vào navs trong bootstrap 3Cách sử dụng và khai báo glyphicons thì quá đơn giản rồi hen, nên tôi sẽ không nhắc lại. Ví dụ: Xem demo
Hình ảnh nhúng icons vào nav-tabs Như vậy xem như chúng ta vừa hoàn thành xong việc tìm hiểu kiểu menu đầu tiên mà navs trong bootstrap 3 cung cấp cho chúng ta. Để tôi trình bày sơ lược ví dụ minh họa ở trên, tôi sử dụng cặp thẻ 3. Thay đổi background active menu navs trong bootstrap 3Ở phần này thì navs có một class con là Ví dụ: Xem demo
Hình ảnh nav-pills Ngoài ra còn có class con là nav-stacked dùng để tạo ra menu dạng nằm dọc, tôi sẽ không demo đâu nhé, các bạn có thể thay đổi code và cảm nhận mà thôi. Kết bài:Bài viết này cũng khá ngắn nhưng nó là nền tảng để các bạn có thể học tốt các phần sau hơn,ở bài tiếp theo chúng ta sẽ lại tiếp tục tìm hiểu vmột components khác để tạo ra các kiểu menu bắt mắt hơn. Mình viết xong bài này là hơn 1h sáng rồi, đóng lap và xin chào tạm biệt các bạn. |