本篇文章給大家談談響應式折疊導航欄，以及折疊式車載導航對應的知識點，希望對各位有所幫助，不要忘了收藏本站喔。

本文目錄一覽：

• 1、bootstrap響應式導航怎么設置折疊的大?。?/a>
• 2、手機端底部導航欄響應式怎么設置
• 3、折疊形左側導航欄

bootstrap響應式導航怎么設置折疊的大小？

做法：為了給導航欄添加響應式特性，您要折疊的內容必須包裹在帶有 classes .collapse、.navbar-collapse 的 div 中。折疊起來的導航欄實際上是一個帶有 class .navbar-toggle 及兩個 data- 元素的按鈕。

拓展：

1、Bootstrap，來自 Twitter，是目前很受歡迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它簡潔靈活，使得 Web 開發(fā)更加快捷。 它由Twitter的設計師Mark Otto和Jacob Thornton合作開發(fā)，是一個CSS/HTML框架。Bootstrap提供了優(yōu)雅的HTML和CSS規(guī)范，它即是由動態(tài)CSS語言Less寫成。

2、Bootstrap一經推出后頗受歡迎，一直是GitHub上的熱門開源項目，包括NASA的MSNBC(微軟全國廣播公司)的Breaking News都使用了該項目。 國內一些移動開發(fā)者較為熟悉的框架，如WeX5前端開源框架等，也是基于Bootstrap源碼進行性能優(yōu)化而來。

手機端底部導航欄響應式怎么設置

第一步，打開手機“設置”選項。

第二步，在設置列表頁面中，打開“系統(tǒng)”選項。

第三步，在系統(tǒng)設置頁面中，打開“系統(tǒng)導航”選項。

第四步，在系統(tǒng)導航設置頁面中，打開“導航欄”選項。

第五步，在導航欄設置頁面中，選擇合適“導航欄樣式”即可。

折疊形左側導航欄

一、準備元件

1、打開 Axure 新建文件，從元件欄拖出4個矩形1，左對齊從上往下擺放。寬度一致，為 200 px。高度分別為 80 px，45?px，30 px，30 px;

2、雙擊矩形，在矩形內分別輸入“后臺管理”，“用戶管理”，“角色列表”，“賬戶列表”；

3、第2個矩形是一級導航欄，設置背景顏色為 #545C64，字體顏色為 #FFFFF。接著添加1個icon圖標，w 30px,h 20px。然后選中矩形、圖標，右鍵組合，并命名為“一級導航_用戶管理組合”。

4、第3個矩形是二級導航欄，設置背景色為?#FFFFFF，字體顏色為 #333333.。

5、第4個矩形同樣設置。

完成了以上動作，就可以得到一下的展示，看圖：

二、設置交互樣式

1、全選“角色列表、賬戶列表 ”，右鍵點擊 交互樣式設置 ，選擇鼠標懸停 – 填充顏色 – 色值為 #F2F2F2，然后再選 選中 – 填充顏色 – 色值 #AAAAAA 。如圖：

2、繼續(xù)全選“角色列表、賬戶列表 ”，右鍵點擊設置選項組名稱 ，命名為“二級導航_用戶管理選項組合”。選擇“角色列表”，右鍵點擊 選中（ 默認選中 ），完成 。

三、設置交互用例

1、選擇“角色列表 ”，設置鼠標點擊時 – 選中 – 選擇 This 為 ture ，點擊確定。添加目標，選中元件“一級導航_用戶管理組合”，選擇為true，點擊確定。

2、 “賬戶列表”同上設置，復制粘貼過去即可 。

完成以上設置，我們的選項就可以點擊切換的效果了。

3、把 “角色列表、賬戶列表 ” 選中，右鍵點擊 轉換為動態(tài)面板，命名為 “二級導航_用戶管理選項動面?” ，點擊把該面板隱藏。

4、選中“一級導航_用戶管理組合” ，新建交互?–?設置鼠標單擊時 – 顯示/隱藏 ，選擇目標元件“二級導航_用戶管理選項組合”；選擇：切換，動畫：顯示時向下滑動 / 隱藏時向上滑動，動畫為：線性，250 毫秒 ； 勾上置于頂層 ； 選擇：推動元件，方向為下方，動畫為：線性，250毫秒。

4、選中“一級導航_用戶管理組合” ， 單擊時 增加動作：旋轉 ，選擇目標元件“用戶管理展開”；選擇：順時針 180 度，動畫：線性，250 毫秒 。

完成以上的制作，我們會看到了單個導航欄已經完成。我們可以給它復制多個這樣的導航欄在一起，就可以實現多個并用了。

四、進階

1、全選除“后臺管理”外的所有元件，然后我們給它復制粘貼 1 個（根據需要可以粘貼n個），并把元件的名稱修改為需要的名稱。這里修改為“日志管理” 。按照以下方式排列：

2、因前面設置“用戶管理”的時候，我們已經把 “推動元件 ” 設置好了 ，所以后面無需再設置。但前面我們把 “角色列表 ” 設置為默認選中狀態(tài)，這里我們又復制了1個，所以我們需要把多復制出來的1個 “系統(tǒng)日志 ”去掉默認選中狀態(tài) 。

3、選中“一級導航_用戶管理組合”和“一級導航_日志管理組合”(如有多個一級導航，則全部選中)，右鍵選中“選項組”，命名為“一級導航_選項組”。

到這里就完成所有制作了，如有相關問題或建議請在下方留言，謝謝大家觀看。

附參考：

響應式折疊導航欄的介紹就聊到這里吧，感謝你花時間閱讀本站內容，更多關于折疊式車載導航、響應式折疊導航欄的信息別忘了在本站進行查找喔。