Twitter bootstrap 无法调用引导模式
我完全遵循了YouTube教程(关于modals),但我的浏览器中没有显示任何内容。是因为我的脚本/链接吗?请帮忙 这是我的密码Twitter bootstrap 无法调用引导模式,twitter-bootstrap,Twitter Bootstrap,我完全遵循了YouTube教程(关于modals),但我的浏览器中没有显示任何内容。是因为我的脚本/链接吗?请帮忙 这是我的密码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="viewport" content="width=device-width, initial-scale=1" />
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Modal example</title>
<link href="bootstrap-3.2.0-dist/css/bootstrap.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<body>
<div class="modal" id="myModal" aria-hidden="true">
<div class="modal-header">
<h1>hi</h1>
</div>
<div class="modal-body">
<form>
<label>Email</label>
<input type="email" class="span4" /> <br />
<label>Password</label>
<input type="password" class="span4" /> <br /><br />
<button type="submit" class="btn btn-success">Login</button>
</form>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</body>
</html>
模态示例
你好
电子邮件
密码
登录
接近
您的HTML是正确的,但是您需要一种在页面上显示模式的方法,因为模式本身具有aria hidden=“true”。您可以在JavaScript中通过jQuery调用.modal(“show”)/.modal(“hide”),或者使用一个链接,将其数据目标设置为您的modal的id值来实现这一点
我已经包括了你可以用来打开HTML的链接作为一个例子。在示例中,在body标记的正下方插入链接
data toggle=“modal”&data target=“#myModal”正在告诉引导程序,您希望此链接切换ID为“myModal”的模式
编辑:此外,Bootstrap的JavaScript需要jQuery。我建议将脚本标记和链接标记更改为以下内容,以使用推荐的用于引导和jQuery的CDN简化设置。如果您不使用CDN,则需要下载这些文件,并将其包含在相应的分区中
首先,您应该访问此站点“”
然后单击屏幕中央的下载按钮。然后解压缩zip文件并将其复制到项目文件中*重点*
根据HTML代码复制此代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title></title>
<link rel='stylesheet' type='text/css' href='css/bootstrap.min.css' >
<body>
</body>
<script src='js/bootstrap.min.js' type='text/javascript'></script>
</html>
感谢您的回复。我把那行代码直接放在我的body标签下面。现在,当我打开html时,它显示了“open modal”字样,但当我单击它时,该模式仍然没有出现:/我很抱歉花了这么长时间才想到这一点,但是Bootstrap的JavaScript组件也需要jQuery。在标记中包含引导文件之前,先包含这些脚本标记。我对原始答案进行了编辑,将其也包括在内。干杯令人惊叹的!我强烈建议阅读引导示例,因为它们详细说明了哪些效果可以应用于JavaScript组件。另外,如果你能把这个作为答案,那就太棒了。快乐编码!(引导文档:)这里是业余程序员。。这是我的作业。是的,我会读更多的。需要的不仅仅是这个基本的。再次感谢你^^