引导:覆盖加载屏幕+切换jumbotron

Bootstrap: overlay loading screen + toggle jumbotron

本文关键字：切换 jumbotron 屏幕 加载 覆盖 引导      更新时间：2023-09-26

好吧，我已经为每一个问题找到了20个不同的堆叠交换答案，但我仍然无法解决，所以是时候问了，希望有人能帮我走出困境：

我正在制作一个简单的网站，我想制作一个包含加载/进度条的覆盖屏幕，在它消失并显示网站之前，最多只需要3秒的时间。我还想在它的中间添加一个标志，就在酒吧的上方。我看了一些阿拉伯语的视频，但它有点失控了，我不知道他在说什么，但我想我可以尝试他的代码并修改它，但这也不起作用。

此外，我在代码中有一个jumbotron，我称之为"jumbotronTwo"，基本上它应该做的是，当你点击菜单图标并出现下拉菜单时，你点击其中一个选项，然后菜单应该向后滚动，jumbotron。到目前为止，我只能够制作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，但把它删掉，如果你也需要看的话，我可以展示它。这是"肉和土豆"：

    <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。。。

<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);
    });  
});

请参阅此处的工作示例。

如果你想让你的进度条动画很容易，那么我推荐这个插件。

对于字形图标，请使用以下js。。。

$( "#iconButton" ).click(function(){
    $(this).html('<span class="glyphicon glyphicon-menu-cheeseburger"></span>');
});

很明显，用你想用的任何图标来代替奶酪汉堡！请看这里的fiddle（没有实际的图标，但你应该明白这个想法）。

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

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

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