Bootstrap 3.3-导航栏无法在移动设备上工作
Bootstrap 3.3 - Navbar not working on mobile
我试图在jquery引导脚本之前加载jquery源脚本,方法是更改它们在"head"元素内的顺序,但没有成功,而且,我确保链接引导CSS文件。
我看了一个引导程序默认导航栏的例子,似乎一切都是对的,但仍然不起作用?
最后,我使用的是JSF-2.2框架,我不知道它是否与这个问题有关?这是的完整代码
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:jsf="http://xmlns.jcp.org/jsf"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
ng-app="indexApp">
<head jsf:id="head">
<meta charset="utf-8"></meta>
<meta http-equiv="X-UA-Compatible" content="IE=edge"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
<meta name="description" content=""></meta>
<meta name="author" content=""></meta>
<title>website</title>
<!-- AngularJs-Module !-->
<script jsf:target="body" jsf:name="index/js/indexAppModule.js"></script>
<!--jQuery-->
<script jsf:target="body" jsf:name="lib/jquery/jquery-2.1.3.min.js"></script>
<!--Bootstrap Core JavaScript-->
<script jsf:target="body" jsf:name="lib/bootstrap-3.3.2-dist/js/bootstrap.min.js"></script>
<!-- Parallax !-->
<script jsf:target="body" jsf:name="lib/stellar/jquery.stellar.js"></script>
<!-- Parallax !-->
<script jsf:target="body" jsf:name="index/js/parallax.js"></script>
<!-- Bootstrap Core CSS -->
<link jsf:library="lib/bootstrap-3.3.2-dist/css" jsf:name="bootstrap.min.css"
href="lib/bootstrap-3.3.2-dist/css/bootstrap.min.css" type="text/css" rel="stylesheet">
</link>
<!-- Custom CSS -->
<link jsf:library="index/css" jsf:name="landing-page.css"
href="index/css/landing-page.css" type="text/css" rel="stylesheet">
</link>
<!-- Custom Fonts -->
<link jsf:library="index/css/font-awesome/css" jsf:name="font-awesome.min.css"
href="index/css/font-awesome/css/font-awesome.min.css" type="text/css" rel="stylesheet">
</link>
<!-- form Style -->
<link jsf:library="index/form/css" jsf:name="formstyle.css"
href="index/form/css/formstyle.css" type="text/css" rel="stylesheet">
</link>
<!-- fonts !-->
<link href="http://fonts.googleapis.com/css? family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css"></link>
<!--Index Style -->
<link jsf:library="index/css" jsf:name="index.css"
href="index/css/index.css" type="text/css" rel="stylesheet">
</link>
</head>
<body jsf:id="body">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
<div class="container topnav" id="navfluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigationbar">
<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 topnav" href="#">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navigationbar">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#home">Home</a>
</li>
<li>
<a href="#features">Features</a>
</li>
<li>
<a href="#technologies">Technologies</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div class="section" id="home" data-stellar-background-ratio="0.5">
<div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="intro">
<h1>Website</h1>
<h3>website</h3>
<hr class="intro-divider"></hr>
<form>
<input name="name" placeholder="Username" class="name" required="true"></input>
<input type="password" name="name" placeholder="Password" class="name" required="true"></input>
<input name="submit" class="btn-login" type="submit" value="LogIn"></input>
<input name="submit" class="btn-login" type="submit" value="SignUp"></input>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section" id="features" data-stellar-background-ratio="0.5">
</div>
<div class="section" id="technologies" data-stellar-background- ratio="0.5">
</div>
<div class="section" id="contact" data-stellar-background-ratio="0.5">
</div>
</body>
使用"src"属性而不是"library"answers"name"jsf的属性解决了问题
我发现原因是因为我在脚本标记中使用了(jsf:libray="和jsf:name=")
生成的HTML文件具有无效的javascript文件URL,这意味着没有脚本在工作。
相关文章:
- 链接don'由于Javascript悬停效果,无法在移动设备上工作
- Phonegap地理定位无法在移动设备上工作
- Jquery.focusout无法在移动设备上工作(slicknav)
- 移动/平板设备定向部分工作
- 当我移动引用three.js的html文件时,three.js停止工作
- AngularJS代码在一个代码笔中工作,但在移动时会中断
- 我将此代码移动到一个单独的函数中,它停止工作,为什么
- 下拉在移动设备上工作很奇怪
- Foundation 5和内容可编辑(移动)不工作
- Bootstrap 3.3-导航栏无法在移动设备上工作
- 我可以'我似乎没有得到我的网站'移动导航开始工作
- 使用jQuery在焦点上选择文本框是't在移动浏览器中工作
- 针对移动设备的JQuery下拉列表没有以应有的方式工作
- 上的jQuery.on('已结束')无法在移动设备上工作
- 如何将img维度从html移动到css并保持此滑块工作
- jQuery 移动按钮无法按预期工作
- window.open()没有'无法在添加到主屏幕的移动Safari web应用程序中工作
- 如何使此应用程序与移动浏览器协同工作
- .stop()不是't使用我的悬停,使快速移动工作-jQuery
- 是否英特尔xdk / Jquery移动工作与Parse.com