好吧，对于这些问题中的每一个，我已经经历了大约 20 个不同的 stackexchange 答案，但我仍然无法解决它，所以现在是我问的时候了，希望有人能指出我走出这些困境:
我正在制作一个简单的网站，我想制作一个包含加载/进度条的覆盖屏幕，并且在它消失并显示网站之前最多只进行 3 秒的过程。我还想在栏正上方的中间添加一个 Logo 。我看了一些阿拉伯语的视频，但有点失控了，我不知道他在说什么，但我想我可以试试他的代码并修改它，但这也没有用。
此外，我在称为“jumbotronTwo”的代码中有一个超大屏幕，基本上它应该做的是当您单击菜单图标并出现下拉菜单时，您单击其中一个选项，然后菜单应该向后滚动并且应该出现超大屏幕。到目前为止，我已经能够制作 jumbotron 本身并为其着色、调整其大小、用文本填充它等，我尝试使用一些 javascript 和 jquery 使其出现和消失“onclick”，但似乎都没有用，我开始想这可能与我拥有的图书馆有关吗？ 我不知道有什么可以胜过它，所以我需要有人看一下代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Twenty Eight Interiors</title>
<meta name="description" content="Wiredwiki App">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
</head>
我认为这里的这些很重要，以防我忘记了一些图书馆或其他东西，所以你可以指出来。我也有一些 CSS，但把它剪掉了，如果你也需要看，我可以展示它。这是“肉和土 bean ”:
<body>
<!-- jumbotron-->
<div class="jumbotron" id="jumbotronOne">
<div class="container text-center">
<img src="Untitled.png">
</div>
</div>
<!-- Navbar -->
<nav class="navbar navbar-inverse" id="my-navbar" style="font-family:Webdings;">
<div class="container">
<div class="navbar-header" id="oneDiv">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse" id="iconButton">
<span class="glyphicon glyphicon-menu-hamburger"></span>
</button>
<a href="" class="navbar-brand"><font color="white">MENU</font></a>
</div><!-- Navbar Header -->
<div class="collapse navbar-collapse" id="navbar-collapse" align="center">
<ul class="nav navbar-nav" id="firstOne">
<li><a href="#" id="designProcess" role="button">Design Process</a></li>
<li><a href="#" id="profile">Profile</a></li>
<li><a href="#" id="contactInfo">Contact Info</a></li>
</ul>
<ul class="list-inline" id="secondOne">
<li><a href="#" class="socialicon"><img src="facebook.png" hspace="30"></a></li>
<li><a href="#" class="socialicon"><img src="twitter.png" hspace="30"></a></li>
<li><a href="#" class="socialicon"><img src="instagram.png" hspace="30"></a></li>
</ul>
</div>
</div><!-- End Container img src="twitter.png"-->
</nav><!-- End navbar -->
<div class="jumbotron" id="jumbotronTwo">
<div class="container">
<h2>Headline goes here in one, two or three lines like this</h1>
<p>...</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</body>
</html>
我什至在让 javascript 为 glyphicon 工作时遇到了问题，我希望它在我点击它时改变，然后再一次；我不知道我做错了什么，尝试了很多来自 stackexchange 的潜在解决方案，但这似乎也表明这是另外一回事。
提前致谢
最佳答案
如果它只是一个初始页面，那么在你的正文顶部添加一个 div 并将你现有的页面包装在一个带有 display:none 的 div 中......
<body>
<div id="loader">
<h4>Logo and progress bar here...</h4>
</div>
<div id="your-page" style="display:none">
<!--Your existing content here...-->
</div>
然后添加一点jquery...
jQuery(document).ready(function(){
$( "#loader" ).delay(800).fadeOut(400, function(){
$( "#your-page" ).fadeIn(400);
});
});
参见工作示例 here .
如果你想让进度条的动画变得简单，那么我推荐 this plugin .
对于字形使用以下 js...
$( "#iconButton" ).click(function(){
$(this).html('<span class="glyphicon glyphicon-menu-cheeseburger"></span>');
});
显然用您想要使用的任何图标替换芝士汉堡!见 fiddle here对于这一点(没有实际的图标，但你应该明白了)。
关于javascript - Bootstrap : overlay loading screen + toggle jumbotron，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28797509/