php - 无法将我当前的菜单转换为 Bootstrap 菜单

Question

嗯，目前我的数据库中有这个 main_menu 表。

-- phpMyAdmin SQL Dump
-- version 4.5.1
-- http://www.phpmyadmin.net
--
-- Host: 127.0.0.1
-- Generation Time: Oct 29, 2016 at 04:49 PM
-- Server version: 10.1.13-MariaDB
-- PHP Version: 5.6.20

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Database: `database`
--

-- --------------------------------------------------------

--
-- Table structure for table `main_menu`
--

CREATE TABLE `main_menu` (
  `id` bigint(20) NOT NULL,
  `title` text COLLATE utf8_unicode_ci NOT NULL,
  `link` mediumtext COLLATE utf8_unicode_ci NOT NULL,
  `parentid` bigint(20) NOT NULL DEFAULT '0'
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

--
-- Indexes for dumped tables
--

--
-- Indexes for table `main_menu`
--
ALTER TABLE `main_menu`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `main_menu`
--
ALTER TABLE `main_menu`
  MODIFY `id` bigint(20) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=53;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

我有这个代码来制作下拉菜单(不是自举的)

<?php

error_reporting(0);
ini_set('display_errors', 0);

header('Content-Type: text/html; charset=utf-8');


	//Set the database connection
	// $con1 = mysqli_connect('localhost','root','');
	$con1 = mysqli_connect('localhost', '', '');

	// mysqli_select_db($con1, 'database_name') or die(mysqli_error($con1));
	mysqli_select_db($con1, 'database_name') or die(mysqli_error($con1));

	//select all rows from the main_menu table

	mysqli_query($con1, "SET NAMES utf8");	

	$result = mysqli_query($con1, "select id,title,parentid,link from main_menu order by id asc");

	//create a multidimensional array to hold a list of menu and parent menu
	$menu = array(
		'menus' => array(),
		'parent_menus' => array()
	);

	//build the array lists with data from the menu table
	while ($row = mysqli_fetch_assoc($result)) {
		//creates entry into menus array with current menu id ie. $menus['menus'][1]
		$menu['menus'][$row['id']] = $row;
		//creates entry into parent_menus array. parent_menus array contains a list of all menus with children
		$menu['parent_menus'][$row['parentid']][] = $row['id'];
	}

	mysqli_set_charset($con1,"utf8");
	
	// Create the main function to build milti-level menu. It is a recursive function.	
	function buildMenu($parent, $menu) {
	$html = "";
	if (isset($menu['parent_menus'][$parent])) {
		$html .= "<ul>";
		foreach ($menu['parent_menus'][$parent] as $menu_id) {
			if (!isset($menu['parent_menus'][$menu_id])) {
				$html .= "<li><a href='" . $menu['menus'][$menu_id]['link'] . "'>" . $menu['menus'][$menu_id]['title'] . "</a></li>";
			}
			if (isset($menu['parent_menus'][$menu_id])) {
				$html .= "<li><a href='" . $menu['menus'][$menu_id]['link'] . "'>" . $menu['menus'][$menu_id]['title'] . "</a>";
				$html .= buildMenu($menu_id, $menu);
				$html .= "</li>";
			}
		}
		$html .= "</ul>";
	}
	return $html;
}

?>

到目前为止它一直有效，但问题是我已经尝试将代码复制/粘贴到我最近购买的名为 Karma 的 Bootstrap 主题中，但我不知道如何根据我的 main_menu 表制作菜单。

这是示例自举导航代码

<div class="sidebar-module">
  <nav class="sidebar-nav-v2">
    <ul>
      <li class="page-arrow active-page">
        <a href="index.html"><i class="fa fa-dashboard"></i> Dashboard <span class="indicator-pill">32</span></a>
      </li>
      <li>
        <a href="statistics.html"><i class="fa fa-sun-o"></i> Statistics<span class="indicator-dot">2</span></a>
      </li>
      <li>
        <a href="charts.html"><i class="fa fa-bar-chart-o"></i> Charts</a>
      </li>
      <li>
        <a href="calendar.html"><i class="fa fa-calendar-o"></i> Calendar</a>
      </li>
      <li>
        <a href="#"><i class="fa fa-envelope-o"></i> Form Elements <i class="fa fa-caret-left pull-right"></i></a>

        <!-- * sub menu * -->
        <ul>
          <li>
            <a href="forms.html">Forms</a>
          </li>
          <li>
            <a href="forgot.html">Forgot Form</a>
          </li>
          <li>
            <a href="login.html">Login Form</a>
          </li>
          <li>
            <a href="login2.html">Login 2 Form</a>
          </li>
          <li>
            <a href="reset.html">Reset Form</a>
          </li>
          <li>
            <a href="signup.html">Signup Form</a>
          </li>
          <li>
            <a href="wizard.html">Wizard</a>
          </li>
          <li>
            <a href="wysiwyg.html">WYSIWYG</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#"><i class="fa fa-file-o"></i> Pages <i class="fa fa-caret-left pull-right"></i></a>

        <!-- * sub menu * -->
        <ul>
          <li>
            <a href="#">Billing</a>
          </li>
          <li>
            <a href="comments.html">Comments</a>
          </li>
          <li>
            <a href="clients.html">Clients</a>
          </li>
          <li>
            <a href="faqs.html">FAQs</a>
          </li>
          <li>
            <a href="files.html">Files</a>
          </li>
          <li>
            <a href="planning.html">Planning</a>
          </li>
          <li>
            <a href="#">Social</a>
          </li>
          <li>
            <a href="ticketsupport.html">Ticket Support</a>
          </li>
          <li>
            <a href="timeline.html">Timeline</a>
          </li>
          <li>
            <a href="wiki.html">Wiki</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#"><i class="fa fa-star-o"></i> UI Elements<i class="fa fa-caret-left pull-right"></i></a>

        <!-- * sub menu * -->
        <ul>
          <li>
            <a href="buttonsandicons.html">Buttons &amp; Icons</a>
          </li>
          <li>
            <a href="notifications.html">Notifications</a>
          </li>
          <li>
            <a href="dropdownmenu.html">Dropdown &amp; Menu</a>
          </li>
          <li>
            <a href="misc.html">Misc</a>
          </li>
          <li>
            <a href="tabs.html">Tabs</a>
          </li>
          <li>
            <a href="toolbars.html">Toolbars</a>
          </li>
        </ul>
      </li>
      <li class="seperator">
        <!-- * seperator line * -->
      </li>
      <li>
        <a href="media.html"><i class="fa fa-picture-o"></i> Media</a>
      </li>
      <li>
        <a href="modules.html"><i class="fa fa-wrench"></i> Modules</a>
      </li>
      <li>
        <a href="tables.html"><i class="fa fa-table"></i> Tables</a>
      </li>
      <li>
        <a href="pagelayout.html"><i class="fa fa-th"></i> Page Layout</a>
      </li>
      <li>
        <a href="#"><i class="fa fa-warning"></i> Error Pages <i class="fa fa-caret-left pull-right"></i></a>

        <!-- * sub menu * -->
        <ul>
          <li>
            <a href="400.html">400</a>
          </li>
          <li>
            <a href="401.html">401</a>
          </li>
          <li>
            <a href="403.html">403</a>
          </li>
          <li>
            <a href="404.html">404</a>
          </li>
          <li>
            <a href="500.html">500</a>
          </li>
          <li>
            <a href="503.html">503</a>
          </li>
        </ul>

      </li>
      <li class="menu-label">
        <div class="spacer-20"></div>
        Some group label
        <div class="spacer-10"></div>
      </li>
      <li>
        <a href="maps.html"><i class="fa fa-map-marker"></i> Maps</a>
      </li>
      <li>
        <a href="widgets.html"><i class="fa fa-columns"></i> Widgets</a>
      </li>
      <li>
        <a href="sitemap.html"><i class="fa fa-sitemap"></i> Sitemap</a>
      </li>
    </ul>
  </nav>
  <!-- End .sidebar-nav-v1 -->
</div>
<!-- End .sidebar-module -->

谁能帮我把我的旧菜单转换成 Bootstrap 式导航？

Answer 1

您的 html 代码中没有 Bootstrap 下拉列表类。这是片段。确保在您的代码中包含 jquery、bootstrap(包含在此代码段中)链接标记位于 head 标记下，script 标记位于 body 标记下。

.navbar-nav > li:hover ul.dropdown-menu, .menu li:hover ul.dropdown-menu{
  display: block;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Start Bootstrap</a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
   
      <li class="page-arrow active-page">
        <a href="index.html"><i class="fa fa-dashboard"></i> Dashboard <span class="indicator-pill">32</span></a>
      </li>
      <li>
        <a href="statistics.html"><i class="fa fa-sun-o"></i> Statistics<span class="indicator-dot">2</span></a>
      </li>
      <li>
        <a href="charts.html"><i class="fa fa-bar-chart-o"></i> Charts</a>
      </li>
      <li>
        <a href="calendar.html"><i class="fa fa-calendar-o"></i> Calendar</a>
      </li>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="fa fa-envelope-o"></i> Form Elements <i class="fa fa-caret-left pull-right"></i> <span class="caret"></span></a>

        <!-- * sub menu * -->
        <ul class="dropdown-menu">
          <li>
            <a href="forms.html">Forms</a>
          </li>
          <li>
            <a href="forgot.html">Forgot Form</a>
          </li>
          <li>
            <a href="login.html">Login Form</a>
          </li>
          <li>
            <a href="login2.html">Login 2 Form</a>
          </li>
          <li>
            <a href="reset.html">Reset Form</a>
          </li>
          <li>
            <a href="signup.html">Signup Form</a>
          </li>
          <li>
            <a href="wizard.html">Wizard</a>
          </li>
          <li>
            <a href="wysiwyg.html">WYSIWYG</a>
          </li>
        </ul>
      </li>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="fa fa-file-o"></i> Pages <i class="fa fa-caret-left pull-right"></i> <span class="caret"></span></a>

        <!-- * sub menu * -->
        <ul class="dropdown-menu">
          <li>
            <a href="#">Billing</a>
          </li>
          <li>
            <a href="comments.html">Comments</a>
          </li>
          <li>
            <a href="clients.html">Clients</a>
          </li>
          <li>
            <a href="faqs.html">FAQs</a>
          </li>
          <li>
            <a href="files.html">Files</a>
          </li>
          <li>
            <a href="planning.html">Planning</a>
          </li>
          <li>
            <a href="#">Social</a>
          </li>
          <li>
            <a href="ticketsupport.html">Ticket Support</a>
          </li>
          <li>
            <a href="timeline.html">Timeline</a>
          </li>
          <li>
            <a href="wiki.html">Wiki</a>
          </li>
        </ul>
      </li>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="fa fa-star-o"></i> UI Elements<i class="fa fa-caret-left pull-right"></i> <span class="caret"></span></a>

        <!-- * sub menu * -->
        <ul class="dropdown-menu">
          <li>
            <a href="buttonsandicons.html">Buttons &amp; Icons</a>
          </li>
          <li>
            <a href="notifications.html">Notifications</a>
          </li>
          <li>
            <a href="dropdownmenu.html">Dropdown &amp; Menu</a>
          </li>
          <li>
            <a href="misc.html">Misc</a>
          </li>
          <li>
            <a href="tabs.html">Tabs</a>
          </li>
          <li>
            <a href="toolbars.html">Toolbars</a>
          </li>
        </ul>
      </li>
      <li class="seperator">
        <!-- * seperator line * -->
      </li>
      <li>
        <a href="media.html"><i class="fa fa-picture-o"></i> Media</a>
      </li>
      <li>
        <a href="modules.html"><i class="fa fa-wrench"></i> Modules</a>
      </li>
      <li>
        <a href="tables.html"><i class="fa fa-table"></i> Tables</a>
      </li>
      <li>
        <a href="pagelayout.html"><i class="fa fa-th"></i> Page Layout</a>
      </li>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="fa fa-warning"></i> Error Pages <i class="fa fa-caret-left pull-right"></i> <span class="caret"></span></a>

        <!-- * sub menu * -->
        <ul class="dropdown-menu">
          <li>
            <a href="400.html">400</a>
          </li>
          <li>
            <a href="401.html">401</a>
          </li>
          <li>
            <a href="403.html">403</a>
          </li>
          <li>
            <a href="404.html">404</a>
          </li>
          <li>
            <a href="500.html">500</a>
          </li>
          <li>
            <a href="503.html">503</a>
          </li>
        </ul>

      </li>
      <li class="menu-label">
        <div class="spacer-20"></div>
        Some group label
        <div class="spacer-10"></div>
      </li>
      <li>
        <a href="maps.html"><i class="fa fa-map-marker"></i> Maps</a>
      </li>
      <li>
        <a href="widgets.html"><i class="fa fa-columns"></i> Widgets</a>
      </li>
      <li>
        <a href="sitemap.html"><i class="fa fa-sitemap"></i> Sitemap</a>
      </li>
    

                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>

基本上你的 html 代码应该看起来像这张图片