2012-02-24 35 views
23

Tôi đã xem xét khung công tác Bootstrap của Twitter và tôi thực sự ấn tượng. Tuy nhiên, tôi không hiểu suy nghĩ đằng sau cách menu điều hướng thả xuống hoạt động.Suy nghĩ đằng sau việc triển khai thực đơn thả xuống trong Twitter Bootstrap là gì?

Thứ nhất, để xem các liên kết con, bạn phải nhấp vào phụ huynh. Tôi có thể thấy những lợi ích của điều này, nhưng tại sao không có trình đơn thả xuống truyền thống trên phương pháp di chuột như mặc định?

Thứ hai, có vẻ như suy nghĩ đằng sau trình đơn thả xuống của Twitter Bootstrap chiếu sáng các trang mẹ. Tôi có lẽ không giải thích rằng rất tốt ... Say, bạn có một cấu trúc trang web đơn giản:

  • Home
  • Về
    • Nhóm
  • Dịch vụ
    • Thiết kế Web
    • Hosting
    • Domains
  • Liên

Trong một cấu trúc menu thả xuống truyền thống, bạn muốn di chuột qua "về" và "dịch vụ" và trình đơn thả xuống chứa các liên kết con (ví dụ: "Thiết kế web", "Lưu trữ", v.v.) sẽ xuất hiện. Tuy nhiên, bạn cũng có thể nhấp vào trang gốc (tức là "Giới thiệu" và "Dịch vụ") và truy cập chúng.

Với Bootstrap, bạn không thể có trang cha trong cấu trúc, bạn phải sử dụng thẻ neo ("#"). Khi bạn nhấp vào điều này, bạn sẽ thấy các trang trong menu thả xuống. Điều này là không tốt nếu có một trang cha mẹ. Nó cũng không tuyệt vời từ ngữ nghĩa (nghĩa là gì "#" nghĩa là gì?) Và khả năng truy cập (javascript tắt, trình đọc màn hình, vv) quan điểm.

Tôi có thể đã bỏ lỡ điều gì đó, nhưng ai đó có thể giải thích suy nghĩ đằng sau điều này đặc biệt liên quan đến các trang gốc và html/khả năng truy cập ngữ nghĩa?

+1

Bạn sẽ chỉ nhận được câu trả lời dựa trên ý kiến ​​về chủ đề này để có được câu trả lời thẳng vì sao không liên hệ với các nhà phát triển chính của bootstrap? Dưới đây là các xử lý twitter của các nhà phát triển: [@mdo] (http://twitter.com/mdo), [@fat] (http://twitter.com/fat). –

+0

Tôi chắc chắn quan tâm đến ý kiến ​​nhà phát triển chính, nhưng cũng quan tâm đến quan điểm của người khác và cách mọi người đang sử dụng thanh điều hướng Bootstrap trong trường hợp tôi đã nêu bật ở trên. – iagdotme

Trả lời

17

Nó đã được thực hiện theo cách này đơn giản chỉ vì trình đơn di chuột không hoạt động tốt trên các thiết bị màn hình cảm ứng.

https://github.com/twitter/bootstrap/issues/1029

+1

Cảm ơn. Nhận xét về github về cơ bản trả lời câu hỏi. Tôi có thể thấy những ưu điểm chính khi sử dụng cùng một menu trên thiết bị di động vì bạn không thể thấy menu thả xuống khi di chuột bằng cách nhấp vào thiết bị di động. Tuy nhiên, điều này không giải quyết được các vấn đề về khả năng truy cập và ngữ nghĩa mà tôi nêu ở trên. Tôi sẽ liên lạc với Mark Otto về điều này khi anh ta đề cập đến bài viết này trên blog của anh ấy! – iagdotme

0

Có rất nhiều CSS và js hacks ra có cho chức năng này, nhưng tất cả chúng đều phá vỡ một cái gì đó.

Tôi chống lại việc sử dụng di chuột, nhưng nếu ai đó thực sự cần điều đó thì hãy làm đúng.Tôi đã thực hiện một plugin mà chỉ được sử dụng Bootstrap API javascript mà không cần bất kỳ hack, vì vậy nó hoạt động trên tất cả các thiết bị mà không cần phanh khả năng sử dụng:

https://github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover

0

Quyết định thiết kế được thực hiện bởi các folks tại Twitter thấy http://markdotto.com/2012/02/27/bootstrap-explained-dropdowns/

Nếu bạn nhìn vào số lượng người mà tìm kiếm một giải pháp để có được di chuột trở lại (một số 1000 tích cực/số 700000 fews như của 2017-11):

How to make Twitter Bootstrap menu dropdown on hover rather than click

bạn có thể thấy rằng quyết định không làm mọi người hạnh phúc. Đặc biệt là nếu bạn di chuyển các trang web đã có trình đơn di chuột trong nhiều năm, nó sẽ bị "ép buộc" một kiểu mới bởi một số khung công tác.

Các vấn đề liên quan