我正在学习关于学习bootstrap的教程，我完全按照视频中的说明进行编码，但不知何故有一个我无法弄清楚的错误。
当我点击从html代码创建的网页上的联系人按钮时，它会显示一个联系表单，允许您输入姓名，电子邮件和消息。
问题在于，在视频中，与网页的其他部分相比，联系表单很明亮，让您点击它并填写信息，但是当我尝试这样做时，联系表单就会褪色/就像网页的其他部分一样变暗，当我尝试点击它时，它会消失并再次向我显示网页。
以下是代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Contact Form tutorial from BootstrapBay.com">
<meta name="author" content="BootstrapBay.com">
<title>BootstrapBay Tutorial</title>
<link href="../bootstrap-3.3.4-dist/css/bootstrap.min.css" rel="stylesheet">
<link href="../bootstrap-3.3.4-dist/css/custom.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
</head>
<body>
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<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>
<a class="navbar-brand" href="#">BootstrapBay</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Themes <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown-header">Admin & Dashboard</li>
<li><a href="#">Admin 1</a></li>
<li><a href="#">Admin 2</a></li>
<li class="divider"></li>
<li class="dropdown-header">Portfolio</li>
<li><a href="#">Portfolio 1</a></li>
<li><a href="#">Portfolio 2</a></li>
</ul>
</li>
<li><a href="#contact" data-toggle="modal">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container">
<div class="jumbotron text-center">
<h1>Bootstrap Themes</h1>
<p>BootstrapBay is your #1 source for premium Bootstrap themes & templates</p>
<a href="#" class="btn btn-primary">Buy Themes</a>
<a href="#" class="btn btn-success">Sell Themes</a>
</div>
<div class="row">
<div class="col-sm-4">
<a href="#" class="thumbnail">
<img src="img/slate.jpg" alt="Slate Bootstrap Admin Theme">
</a>
<h3>Slate</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc suscipit convallis nisl, eget rutrum lectus commodo at. Pellentesque mattis justo vel augue pretium euismod. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce eu turpis eros.</p>
<a href="#" class="btn btn-danger">View</a>
</div>
<div class="col-sm-4">
<a href="#" class="thumbnail">
<img src="img/appi.jpg" alt="Appi Landing Page Template">
</a>
<h3>Appi</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc suscipit convallis nisl, eget rutrum lectus commodo at. Pellentesque mattis justo vel augue pretium euismod. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce eu turpis eros.</p>
<a href="#" class="btn btn-danger">View</a>
</div>
<div class="col-sm-4">
<a href="#" class="thumbnail">
<img src="img/jiggy.jpg" alt="Jiggy Portfolio Theme">
</a>
<h3>Jiggy</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc suscipit convallis nisl, eget rutrum lectus commodo at. Pellentesque mattis justo vel augue pretium euismod. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce eu turpis eros.</p>
<a href="#" class="btn btn-danger">View</a>
</div>
</div>
</div>
<!-- Fixed footer -->
<div class="navbar navbar-inverse navbar-fixed-bottom" role="navigation">
<div class="container">
<div class="navbar-text pull-left">
<p>© 2014 BootstrapBay.</p>
</div>
<div class="navbar-text pull-right">
<a href="#"><i class="fa fa-facebook-square fa-2x"></i></a>
<a href="#"><i class="fa fa-twitter fa-2x"></i></a>
<a href="#"><i class="fa fa-google-plus fa-2x"></i></a>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<div class="modal fade" id="contact" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal" role="form">
<div class="modal-header">
<h4>Contact<h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="contact-name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="contact-name" placeholder="First & Last Name">
</div>
</div>
<div class="form-group">
<label for="contact-email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="contact-email" placeholder="example@domain.com">
</div>
</div>
<div class="form-group">
<label for="contact-message" class="col-sm-2 control-label">Message</label>
<div class="col-sm-10">
<textarea class="form-control" rows="4"></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<a class="btn btn-default" data-dismiss="modal">Close</a>
<button type="submit" class="btn btn-primary">Send</button>
</div>
</form>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
</html>
答案 0 :(得分：0)
您的代码中有相同CSS和JS文件的多个链接。它们中的一些可能会被破坏而不会被加载。使用正确的链接，然后重试。
您的代码很好并正在运行：
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<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>
<a class="navbar-brand" href="#">BootstrapBay</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a>
</li>
<li><a href="#about">About</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Themes <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown-header">Admin & Dashboard</li>
<li><a href="#">Admin 1</a>
</li>
<li><a href="#">Admin 2</a>
</li>
<li class="divider"></li>
<li class="dropdown-header">Portfolio</li>
<li><a href="#">Portfolio 1</a>
</li>
<li><a href="#">Portfolio 2</a>
</li>
</ul>
</li>
<li><a href="#contact" data-toggle="modal">Contact</a>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
<div class="container">
<div class="jumbotron text-center">
<h1>Bootstrap Themes</h1>
<p>BootstrapBay is your #1 source for premium Bootstrap themes & templates</p>
<a href="#" class="btn btn-primary">Buy Themes</a>
<a href="#" class="btn btn-success">Sell Themes</a>
</div>
<div class="row">
<div class="col-sm-4">
<a href="#" class="thumbnail">
<img src="img/slate.jpg" alt="Slate Bootstrap Admin Theme">
</a>
<h3>Slate</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc suscipit convallis nisl, eget rutrum lectus commodo at. Pellentesque mattis justo vel augue pretium euismod. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce eu turpis
eros.
</p>
<a href="#" class="btn btn-danger">View</a>
</div>
<div class="col-sm-4">
<a href="#" class="thumbnail">
<img src="img/appi.jpg" alt="Appi Landing Page Template">
</a>
<h3>Appi</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc suscipit convallis nisl, eget rutrum lectus commodo at. Pellentesque mattis justo vel augue pretium euismod. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce eu turpis
eros.
</p>
<a href="#" class="btn btn-danger">View</a>
</div>
<div class="col-sm-4">
<a href="#" class="thumbnail">
<img src="img/jiggy.jpg" alt="Jiggy Portfolio Theme">
</a>
<h3>Jiggy</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc suscipit convallis nisl, eget rutrum lectus commodo at. Pellentesque mattis justo vel augue pretium euismod. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce eu turpis
eros.
</p>
<a href="#" class="btn btn-danger">View</a>
</div>
</div>
</div>
<!-- Fixed footer -->
<div class="navbar navbar-inverse navbar-fixed-bottom" role="navigation">
<div class="container">
<div class="navbar-text pull-left">
<p>© 2014 BootstrapBay.</p>
</div>
<div class="navbar-text pull-right">
<a href="#"><i class="fa fa-facebook-square fa-2x"></i></a>
<a href="#"><i class="fa fa-twitter fa-2x"></i></a>
<a href="#"><i class="fa fa-google-plus fa-2x"></i></a>
</div>
</div>
</div>
<div class="modal fade" id="contact" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal" role="form">
<div class="modal-header">
<h4>Contact<h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="contact-name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="contact-name" placeholder="First & Last Name">
</div>
</div>
<div class="form-group">
<label for="contact-email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="contact-email" placeholder="example@domain.com">
</div>
</div>
<div class="form-group">
<label for="contact-message" class="col-sm-2 control-label">Message</label>
<div class="col-sm-10">
<textarea class="form-control" rows="4"></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<a class="btn btn-default" data-dismiss="modal">Close</a>
<button type="submit" class="btn btn-primary">Send</button>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
根据结构，我猜测文件末尾的行<script src="js/bootstrap.min.js"></script>实际应为<script src="../bootstrap-3.3.4-dist/js/bootstrap.min.js"></script>。
如果这不起作用，请单独尝试使用MaxCDN链接。