我正在使用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="http://img.readke.com/220603/0SS05042-0.jpg">
<
/script>
<
script src="http://www.srcmini.com/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="http://www.srcmini.com/<
?php echo get_template_directory_uri();
?>
/css/bootstrap.min.css"rel="stylesheet" type="text/css">
<
link href="http://www.srcmini.com/<
?php echo get_template_directory_uri();
?>
/css/style.css" rel="stylesheet" type="text/css">
<
?php wp_head();
?>
<
/head>
【bootstrap导航栏切换按钮不起作用】使用Bass Jobsen的答案解决了这个问题。谢谢朋友
#1请先阅读http://getbootstrap.com/components/#navbar。你的导航栏需要javascript:
如果禁用了JavaScript并且视口足够窄以至于导航栏折叠, 则将无法展开导航栏并查看.navbar-collapse中的内容。确保在文档中包含bootstrap.js。你忘记上传了吗?
根据你问题中的新信息进行更新:
将所有JavaScript和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' );
#2你应该 :
- 一次加载jQuery和Bootstrap.js, 而不是两次
- 在Bootstrap.js之前加载jQuery
<
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="http://img.readke.com/220603/0SS05042-0.jpg">
<
/script>
<
script src="http://www.srcmini.com/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。
#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="http://img.readke.com/220603/0SS05042-0.jpg">
<
/script>
<
script src="http://www.srcmini.com/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上正常工作!谢谢!!
推荐阅读
- 一个简单的入队/出队不起作用
- 更好的WordPress搜索框
- 向wordpress插件和主题添加自定义许可的最佳方法,这是不可入侵的
- 参数2应该是一个数组(Argument #2 should be an array in)
- 将类属性附加到woocommerce单个产品图像
- 在wordpress短代码内容中允许HTML标签()
- Ajax调用在WordPress中添加当前URL
- 在WordPress中添加多个小部件区域
- 使用自己的自定义脚本将自己的自定义页面添加到WordPress