Làm cách nào để sử dụng hiệu ứng di chuột trong thanh điều hướng Bootstrap?
|
Bạn đã bao giờ tạo thanh điều hướng Bootstrap với menu thả xuống chưa? . Thay vào đó, chúng xuất hiện bằng cách nhấp vào nó. Đây là một quyết định thiết kế có chủ ý theo Mark Otto, một trong những người sáng lập Bootstrap Show
“Mục đích của trạng thái di chuột là để cho biết nội dung nào đó có thể nhấp được (văn bản được gạch chân) hoặc để cung cấp một số thông tin nhanh (URL đầy đủ trong chú giải công cụ). Mục đích của một cú nhấp chuột là để thực sự làm điều gì đó, để thực hiện một hành động rõ ràng. ” – Mark Otto Điểm công bằng Mark. Nhưng vẫn có một số tình huống mà các nhà phát triển có thể thích di chuột hơn. Vì vậy, trong hướng dẫn ngắn này, chúng ta sẽ xây dựng một thanh điều hướng Bootstrap điển hình với một giải pháp nhanh chóng để hiển thị danh sách thả xuống của nó khi di chuột Ghi chú. Hướng dẫn này giả định rằng bạn đã có một số sự quen thuộc với Bootstrap 4 Bootstrap Navbar thả xuống khi di chuộtĐây là những gì chúng ta sẽ xây dựng. Ghi chú. Để chúng ta có thể thấy các menu thả xuống đang hoạt động được nhúng trên trang này, tôi đã sử dụng các lớp mở rộng đáp ứng của Bootstrap; . Bạn có thể muốn sử dụng điểm ngắt lớn hơn để tránh nhấn đúp khi di chuột trên iPad Tốt hơn nữa, vì bạn không nên đánh giá khả năng cảm ứng của màn hình theo kích thước của màn hình, bạn có thể sử dụng Truy vấn phương tiện CSS cấp 4 để phát hiện xem người dùng có thể di chuột hay không hoặc phát hiện tính năng JavaScript như Modernizr. Tuy nhiên, cả hai điều này đều không thể đánh lừa được 100% Dù sao đi nữa, chúng ta hãy bắt đầu 1. Bao gồm nội dung BootstrapĐể bắt đầu, chúng tôi sẽ bao gồm các tệp CSS và JavaScript cần thiết trong bản demo Codepen của chúng tôi 2. Tạo thanh điều hướng đơn giảnĐể tạo thanh điều hướng của chúng tôi, chúng tôi sẽ dựa vào một số mã ví dụ cho thành phần thanh điều hướng do Bootstrap cung cấp 1 2 3 4 |
