1、怎樣用bootstrap做一個樹形導航菜單
你好,很高興為你作答。 使用ajax方法,從後台獲取菜單, 組裝菜單信息,構件html代碼 形如 "....."。 使用jquery的append或者html等方法將構件的代碼嵌入到頁面中即可。
2、Bootstrap導航欄下拉菜單中如何添加子菜單?
應該是樣式問題!你參考一下我下邊這個成功例子吧!
<!DOCTYPE HTML>3、bootstrap 導航 怎麼知道是點擊那個菜單了
在點擊的圖片或文字上加上<a href=""></a>跳到指定的處理上即可。
4、html 前端頁面,如果用bootstrap4製作左側菜單欄?
雖然現在不怎麼純手工敲了,但是我還是可以給你說一下思路。
你先給一個div,{width:200px;height:400px;float:left;}
在這個div裡面放10個小的div{width:200px;height:40px;}
然後就是js了,你想要什麼效果,就在hover或者click裡面加。(個人默認你懂jQ)
5、我現在在用bootstrap搭建一個小項目,主頁面有頭部,左側導航菜單,和右下內容頁面,
你有bootstrap教程嗎,能給我一份嗎,我也想學
6、如何實現一個bootstrap 下拉菜單
一、下拉菜單
用於顯示鏈接列表的可切換、有上下文的菜單。
案例
將下拉菜單觸發器和下拉菜單都包裹在.dropdown里,然後添加組成菜單的HTML代碼。
<div class="dropdown"> <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> <li role="presentation" class="divider"></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> </ul></div>
可以通過上面的代碼發現,裡面可能有很多陌生的樣式類或者屬性。
一個Dropdown按鈕和右側有個小圖標caret,當然這個小圖標和按鈕的文本是平級的。
首先看button按鈕中有個dropdown-toggle,還有一個data-toggle屬性,根據這個屬性來彈出下來列表。
緊接著ul標簽的dropdown-menu應該是和上面button按鈕的樣式類dropdown-toggle聯合使用,在通過aria-labelledby綁定上面的button按鈕。
下來第四個li標簽中有個divider其實是一個分割線的樣式類。
對齊選項
給下拉菜單.dropdown-menu加上.text-right 使文字右對齊。
<div class="dropdown"><button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">Dropdown<span class="caret"></span></button><ul class="dropdown-menu text-right" role="menu" aria-labelledby="dropdownMenu1"><li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li><li role="presentation" class="divider"></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li></ul></div>
主要是添加了< li role="presentation" class="dropdown-header">Dropdown header 裡面有個.dropdown-header的樣式類。
禁用的菜單項
給下拉菜單中的< li>加上.disabled禁用鏈接。
繼續修改上面的代碼將Something else here行的代碼進行替換
<li class="disabled" role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
主要是在li標簽中添加.disabled的樣式類。
你運行之後可以查看效果,其實效果和上面的標題樣式差不多,當你點擊的時候會有一個禁用的圖標顯示。
二、按鈕組
按鈕組中的工具提示和彈出框需要特別的設置 當為.btn-group中的元素應用工具提示或彈出框時,必須指定container: 'body'選項,這樣可以避免不必要的副作用(例如工具提示或彈出框觸發時,會讓頁面元素變寬和/或失去圓角)。
基本案例
把一系列的.btn按鈕放入.btn-group。
<div class="btn-group"> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button></div>
通過.btn-group就可以將一組button按鈕並且為其添加樣式類btn
按鈕工具欄
把一組< div class="btn-group">組合進一個< div class="btn-toolbar">做成更復雜的組件。
<div class="btn-toolbar" role="toolbar"> <div class="btn-group"> <button type="button" class="btn btn-default">1</button> <button type="button" class="btn btn-default">2</button> <button type="button" class="btn btn-default">3</button> <button type="button" class="btn btn-default">4</button> <button type="button" class="btn btn-default">5</button> <button type="button" class="btn btn-default">6</button> </div> <div class="btn-group"> <button type="button" class="btn btn-default">7</button> <button type="button" class="btn btn-default">8</button> </div> <div class="btn-group"> <button type="button" class="btn btn-default">9</button> </div></div>
尺寸
只要給.btn-group加上.btn-group-*,而不是給組中每個按鈕都應用大小類。
<div class="btn-group btn-group-lg"> <button type="button" class="btn btn-default">1</button> <button type="button" class="btn btn-default">2</button> <button type="button" class="btn btn-default">3</button> <button type="button" class="btn btn-default">4</button> <button type="button" class="btn btn-default">5</button> <button type="button" class="btn btn-default">6</button></div><div class="btn-group btn-group-sm"> <button type="button" class="btn btn-default">7</button> <button type="button" class="btn btn-default">8</button></div><div class="btn-group btn-group-xs"> <button type="button" class="btn btn-default">9</button></div>
7、請問如何設置bootstrap導航欄中的菜單項居中均勻分布?謝謝
這個應該很簡單吧,用柵格就可以了。
整個導航欄的div看做一個整體,裡面的菜單項的class加上col-xs-3之類的,比如4個菜單就是col-xs-3,6個就是col-xs-2,肯定就均勻分布並且文字居中了。
8、為什麼很多Bootstrap做的管理平台左側菜單欄都是點擊刷新頁面
1、這事和bs關系不大。
2、有回答seo的,哥們你沒認真審題啊,一管理後台搞毛seo…
3、開發成本低。
4、維護成本低。
5、耦合度低。
6、穩定。
7、方便統計啊,埋點啊啥的。
8、兼容性好。
總之一句話,沒必要。
9、bootstrap中有沒有類似菜單的
你引入了jquery.js和bootstrap.js嗎?並且jquery要在bootstrap之前引入
10、bootstrap中下拉菜單三級列表怎樣實現
通過為下拉菜單的父元素設置
.dropup
類,可以讓菜單向上彈出(默認是向下彈出的)。