Bootstrap：叠加加载屏幕 + 切换超大屏幕

Question

好的，我已经针对这些问题中的每一个解决了大约 20 个不同的 stackexchange 答案，但我仍然无法解决它，所以现在是我问的时候了，希望有人能指出我走出这些困境：

我正在制作一个简单的网站，我想制作一个包含 loading/progress 栏的覆盖屏幕，并且在它消失并显示网站之前最多只进行 3 秒.我还想在栏正上方的中间添加一个徽标。我看了一些阿拉伯语的视频，但有点失控了，我不知道他在说什么，但我想我可以试试他的代码并修改它，但这也没有用。

此外，我在调用 "jumbotronTwo" 的代码中有一个超大屏幕，基本上它应该做的是当您单击菜单图标并出现下拉菜单时，您单击一个的选项，然后菜单应该向后滚动并且应该出现 jumbotron。到目前为止，我已经能够制作超大屏幕本身并为其着色、调整其大小、用文本填充它等，我尝试使用一些 javascript 和 jquery 使其出现和消失 "onclick"，但 none 似乎有效，我开始认为这可能与我拥有的库有关？我不知道有什么可以胜过它，所以我需要有人看一下代码。

    <!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 但剪掉了，如果你也需要看，我可以给你看。这是 "meat and potatoes":

    <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 为字形图标工作时遇到了问题，我希望它在我单击它时发生变化，然后再一次；我不知道我做错了什么，尝试了很多来自 stackexchange 的潜在解决方案，但这似乎也表明它是另外一回事。

提前致谢

Answer 1

如果它只是一个初始页面，那么在你的正文顶部添加一个 div 并将你现有的页面包装在一个 div 和 display:none...

<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（没有实际图标，但您应该明白）。

Answer 2

我看到您正在加载 jQuery 1.11.2 和 2.1.3，这也增加了额外的加载时间。这当然不好，我建议只使用 3.1.1

在这种情况下，@DevFox 第二个代码需要更新如下，因为 (document).ready 不再受支持。

$(function(){
    $( "#loader" ).delay(800).fadeOut(400, function(){
        $( "#your-page" ).fadeIn(400);
    });  
});

Bootstrap：叠加加载屏幕 + 切换超大屏幕

Bootstrap: overlay loading screen + toggle jumbotron

html

javascript

css

overlay

loading