web元件之導航條（Bootstrap navbar）

renke發表於2021-09-09
Web元件boot

在終端裝置多種多樣的今天，響應式已成為必然趨勢，今天分享一下響應式的導航條。
想到響應式的框架，Bootstrap肯定首當其衝，網格系統利用媒體查詢，更好的實現了多種螢幕尺寸的適應。
說道導航條，在pc上正常展示肯定是沒問題的，但是在中小螢幕，甚至超小螢幕上該如何應用呢，Bootstrap,結合js實現了摺疊導航的效果。
PC裝置上的導航：
圖片描述

在平板，移動裝置上的導航：
圖片描述
圖片描述

導航條程式碼

其中，最後一個導航設定了右浮動，但在中小螢幕下清楚了，使他能夠更好的摺疊。
關於Bootstrap，慕課網有很詳細的課程，其中對導航欄的講解也很詳細，（如果上述程式碼有不清楚的地方，建議看看Bootstrap的課程）。
在此感謝《Bootstrap實戰》,書中詳細講解了響應式導航的實現，以及一些less檔案的修改。

演示地址：

檔案地址：

在此分享給大家。

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/430/viewspace-2807524/，如需轉載，請註明出處，否則將追究法律責任。

相關文章