我正在使用Bootstrap v3.0.2开发响应式wordpress主题。
在手机/平板电脑浏览器而不是整个菜单中,我需要显示Bootstrap切换按钮。我的按钮显示,但是当我点击它时没有发生任何事情。这是我在header.php
中写的代码:
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
我在function.php
写的那个:
function wpt_register_js() {
wp_register_script(
'jquery.bootstrap.min',
get_template_directory_uri() . '/js/bootstrap.min.js',
'jquery'
);
wp_enqueue_script('jquery.bootstrap.min');
}
add_action( 'init', 'wpt_register_js' );
function wpt_register_css() {
wp_register_style(
'bootstrap.min',
get_template_directory_uri() . '/css/bootstrap.min.css'
);
wp_enqueue_style( 'bootstrap.min' );
}
add_action( 'wp_enqueue_scripts', 'wpt_register_css' );
footer.php代码包含:
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<?php wp_footer();?>
</body>
header.php包含:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php wp_title('|', true, 'right'); ?></title>
<link href="<?php echo get_template_directory_uri(); ?>/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="<?php echo get_template_directory_uri(); ?>/css/style.css" rel="stylesheet" type="text/css">
<?php wp_head(); ?>
</head>
使用Bass Jobsen的答案解决了这个问题。谢谢朋友
答案 0 :(得分:7)
请先阅读http://getbootstrap.com/components/#navbar。您的导航栏需要javascript:
如果JavaScript被禁用且视口足够窄,那么 导航栏崩溃,将无法扩展导航栏和视图 .navbar-collapse中的内容。
确保在文档中包含bootstrap.js.你忘了上传这个吗?
根据您问题中的新信息更新:
将所有javascripts和css排入functions.php并将其从header.php和footer.php中删除
的javascript:
function skematik_jquery_js(){
wp_enqueue_script('jquery');
}
function wpt_register_js() {
wp_register_script(
'jquery.bootstrap.min',
get_template_directory_uri() . '/js/bootstrap.min.js',
'jquery'
);
wp_enqueue_script('jquery.bootstrap.min');
}
/* Load Scripts */
add_action( 'wp_enqueue_scripts', 'skematik_jquery_js' );
add_action( 'wp_enqueue_scripts', 'wpt_register_js' );
的CSS:
function wpt_register_css() {
wp_register_style(
'bootstrap.min',
get_template_directory_uri() . '/css/bootstrap.min.css'
);
wp_enqueue_style( 'bootstrap.min' );
}
add_action( 'wp_enqueue_scripts', 'wpt_register_css' );
答案 1 :(得分:3)
目前,您已经:
<head>
<script type="text/javascript" src="http://www.drjulians.com/wp-content/themes/new_responsive/js/bootstrap.min.js?ver=3.6"></script>
</head>
<body>
...
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://www.drjulians.com/wp-includes/js/jquery/jquery.js?ver=1.10.2"></script>
</body>
控制台输出确认了我们可以猜到的内容:
未捕获错误:Bootstrap需要jQuery
当你加载Bootstrap.js时,仍然没有加载jQuery。
答案 2 :(得分:-2)
<head>
<script type="text/javascript" src="http://www.drjulians.com/wp-content/themes/new_responsive/js/bootstrap.min.js?ver=3.6"></script>
</head>
<body>
...
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://www.drjulians.com/wp-includes/js/jquery/jquery.js?ver=1.10.2"></script>
</body>
我已将上述代码添加到我的HTML中,并且它在IE上工作就好了!!谢谢!!