个人中心
gpt4 book ai didi

html - 更新 bootstrap 时如何避免网页设计出现问题？

转载 作者：行者123 更新时间：2023-11-28 02:48:11 26 4
gpt4 key购买 nike

今天早上我更新了 Bootstrap CDN，从 4.0.0 alpha 到 beta。

这是网页(仍在 build 中)之前的样子:

Website, with Bootstrap 4.0.0 alpha

现在是这样的:

With Bootstrap 4.0.0 beta

如您所见，该设计几乎已瓦解。为什么会这样？是我更新 Bootstrap 时做错了什么，还是版本之间的差异如此之大以至于我不得不重写部分代码。正如您在第一张图片中看到的，我在使用模态时遇到了一些问题，但那是另一回事。

在我更新 CDN 之前，我从元素中删除了框架以避免潜在的冲突。更新后的 CDN:s 是我在代码中所做的唯一更改。

这是更新前头部的样子:

<!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, shrink-to-fit=no">

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"
        integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
        crossorigin="anonymous"></script>

<!-- BootStrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
      integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"
        integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb"
        crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"
        integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"
        crossorigin="anonymous"></script>

<link rel="stylesheet" type="text/css" href="css/layout.css">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700i,900" rel="stylesheet">

<!-- JS -->
<script src="js/frontend.js"></script>
<script src="js/backend.js"></script>
<title>Continuous integration for GIT repositories</title>
</head>

这是现阶段的实际代码:CIApp.html:

<!DOCTYPE html>
<html lang="en">
<!-- All images included in the project is free for commercial use -->

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- CDN -->

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

    <link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700i,900" rel="stylesheet">

    <!-- JS -->
    <script src="js/frontend.js"></script>
    <script src="js/backend.js"></script>
    <title>Continuous integration for GIT repositories</title>

     </head>

     <body>
     <!-- Kod för navigationsmeny-->
     <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
            aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand mb-0" href="#">Continuous integration</a>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-link" href="#Git">Add Git Repository</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#TestReport">View test results</a>
            </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Logout</button>
        </form>
    </div>
    </nav>

     <div id="upperHalf">
         <div class="row"></div>
         <div class="col-6 .col-md-4">
             <h1 id="headLine">Enter your Git please</h1>
         </div>
     </div>

     <div id="lowerHalf">
         <div class="enterGitContainer">
             <div class="text-left">
                <form class="col-sm-10 form-group-lg">
                    <div class="form-group">
                        <div class="projectNameContainer">
                            <label id="nameLabel" class="from-control-label" for="projectNameInput">Name your project</label>
                        <input type="text" class="form-control form-control-lg" id="projectNameInput">
                    </div>
                </div>
                <div class="form-group">
                    <div class="gitRepoContainer">
                        <label id="gitLabel" class="from-control-label" for="repoInput">Enter you Git repository</label>
                        <input type="text" class="form-control form-control-lg" id="repoInput">
                    </div>
                </div>
                <button class="btn btn-outline-success" id="submitRepo" onclick="storeRepo()" type="submit">
                    Submit
                </button>
            </form>
        </div>
    </div>
     </div>
    </body>
    </html>

layout.css

.navbar {
margin-bottom: 0 !important;
border-radius: 0 !important;
border: 0;
}
#headLine{
font-family: "Abril Fatface";
font-size: 100px;
color: #ffffff;
}

#upperHalf {
background: url('../images/modernView.png') 50% 0 no-repeat;
max-width: 100%;
height: 50Vh;
margin: 0;
padding: 200px 0 260px 0;
background-size: cover;
}

#lowerHalf {
background-color: #ffffff;
width: 100%;
color: #333333;
height: 50Vh;
margin: 0 auto;
overflow: hidden;
align-items: center;
justify-content: space-around;
display: flex;
float: none;
padding: 0 0 2rem;
}

#repoInput, #projectNameInput {
min-width: 600px;
max-width: 33%;
}

前端.js

 $(window).on('load',function(){
     $('#modalForm').modal('show');  
 });

最佳答案

您正在使用 CDN 在线文件。你必须下载 Bootstrap 文件。然后继续努力。

关于html - 更新 bootstrap 时如何避免网页设计出现问题？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46806740/

26 4 0
文章推荐： html - 是否可以在 html 中加载外部 css "specific some lines"？
文章推荐： html - 将相对定位的父 div 的高度扩展到绝对定位的子 div 的高度
文章推荐： html - 使用默认 PDF 查看器从 Chrome IFRAME 打开 PDF 失败
文章推荐： javascript - 如何在 IE 中打印横向多页？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com