Twitter bootstrap 无法调用引导模式

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" />

我完全遵循了YouTube教程(关于modals),但我的浏览器中没有显示任何内容。是因为我的脚本/链接吗?请帮忙

这是我的密码

<!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组件。另外,如果你能把这个作为答案,那就太棒了。快乐编码!(引导文档:)这里是业余程序员。。这是我的作业。是的,我会读更多的。需要的不仅仅是这个基本的。再次感谢你^^