導航:首頁 > 萬維百科 > bootstrapCMS菜單

bootstrapCMS菜單

發布時間:2020-08-31 12:32:20

1、怎樣用bootstrap做一個樹形導航菜單

你好,很高興為你作答。 使用ajax方法,從後台獲取菜單, 組裝菜單信息,構件html代碼 形如 "....."。 使用jquery的append或者html等方法將構件的代碼嵌入到頁面中即可。

2、Bootstrap導航欄下拉菜單中如何添加子菜單?

應該是樣式問題!你參考一下我下邊這個成功例子吧!

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>菜單項狀態</title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<style type="text/css">
        .dropdown-submenu {
            position: relative;
        }
        .dropdown-submenu > .dropdown-menu {
            top: 0;
            left: 100%;
            margin-top: -6px;
            margin-left: -1px;
            -webkit-border-radius: 0 6px 6px 6px;
            -moz-border-radius: 0 6px 6px;
            border-radius: 0 6px 6px 6px;
        }
        .dropdown-submenu:hover > .dropdown-menu {
            display: block;
        }
        .dropdown-submenu > a:after {
            display: block;
            content: " ";
            float: right;
            width: 0;
            height: 0;
            border-color: transparent;
            border-style: solid;
            border-width: 5px 0 5px 5px;
            border-left-color: #ccc;
            margin-top: 5px;
            margin-right: -10px;
        }
        .dropdown-submenu:hover > a:after {
            border-left-color: #fff;
        }
        .dropdown-submenu.pull-left {
            float: none;
        }
        .dropdown-submenu.pull-left > .dropdown-menu {
            left: -100%;
            margin-left: 10px;
            -webkit-border-radius: 6px 0 6px 6px;
            -moz-border-radius: 6px 0 6px 6px;
            border-radius: 6px 0 6px 6px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <h2>Bootstrap 3多級下拉菜單</h2>
        <hr>
        <div class="dropdown">
            <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#"
               href="javascript:;">
                下拉多級菜單 <span class="caret"></span>
            </a>
            <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
                <li><a href="javascript:;">一級菜單</a></li>
                <li><a href="javascript:;">一級菜單</a></li>
                <li class="divider"></li>
                <li class="dropdown-submenu">
                    <a tabindex="-1" href="javascript:;">一級菜單</a>
                    <ul class="dropdown-menu">
                        <li><a tabindex="-1" href="javascript:;">二級菜單</a></li>
                        <li class="divider"></li>
                        <li class="dropdown-submenu">
                            <a href="javascript:;">二級菜單</a>
                            <ul class="dropdown-menu">
                                <li><a href="javascript:;">三級菜單</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</body>
</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
類,可以讓菜單向上彈出(默認是向下彈出的)。

與bootstrapCMS菜單相關的知識