gpt4 book ai didi

javascript - 在html中使用Bootstrap和KendoUI时正确的引用顺序和要引用的文件?

转载 作者:行者123 更新时间:2023-11-28 05:23:00 24 4
gpt4 key购买 nike

在html中使用Bootstrap和KendoUI时正确的引用顺序和引用的文件是什么?

现在我有一个 View ,我想你可以调用母版页,并且我引用了 Bootstrap 和 KendoUI,但我注意到在创建网格并为其添加过滤功能时,我得到了两个额外的列,如所示这里.. Screenshot A

但是,当我将代码添加到 KendoUI 的 dojo 中时,它看起来很正常,如此处所示...... Screenshot B

所以我想也许我的引用不正确

这是我的“母版页”

@{
Layout = null;
}

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Test</title>
<script src="~/Scripts/jquery-2.1.0.min.js"></script>
<script src="~/Scripts/Kendo.2016.1.226/kendo.all.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>

@Styles.Render("~/Content/css")

<link href="@Url.Content("~/Content/bootstrap.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/bootstrapValidator.min.css")" rel="stylesheet" type="text/css" />

<!--Kendo style-->
<link href="~/Content/Kendo.2016.1.226/kendo.default.min.css" rel="stylesheet" />
<link href="@Url.Content("~/Content/Kendo.2016.1.226/kendo.common.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/Kendo.2016.1.226/kendo.common-bootstrap.min.css")" rel="stylesheet" type="text/css" />

<link href="@Url.Content("~/Content/Custom/Layout.css")" rel="stylesheet" type="text/css" />

<link href="~/font-awesome-4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<link href="~/Content/Custom/MyTest.css" rel="stylesheet" />
<link href="~/font-awesome-4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<link href="~/Content/Custom/GlobalStyle.css" rel="stylesheet" />

</head>
<body>
<div class="container">
<div class="row">
<header>
<center><img src="~/Images/test-logo-sm.png" /></center>
</header>
</div>
<nav class="v-wrapper">
<ul>
<li class="v-brand">

<center><lh><label style="font-weight:bold; color:white;">Menu</label></lh></center>
</li>
<li>
<span class="glyphicon glyphicon-dashboard" style="color:green;"></span><a href="#" id="dashboard"> Dashboard</a>
</li>
<li>
<span class="fa fa-users" style="color:#003366;">&nbsp;</span><a href="#" id="manageusers">Manage Login Users</a>
</li>
<li>
<span class="fa fa-group" style="color:orange;">&nbsp;</span><a href="#" id="managegroups">Manage Groups</a>
</li>
<li>
<span class="fa fa-gears" style="color:red;">&nbsp;</span><a href="#">Manage VS Equipment</a>
</li>
</ul>
</nav>
</div><!-- End Upper Container -->

<div class="container body-content">
<div class="row">
<div class="col-md-12 col-lg-12">
<h1>Blah</h1>
<p> This is where your main stuff goes</p>
</div>
</div><!-- End Row -->
</div><!-- End Main Container -->
<!-- Scripts -->
@*<footer class="footer"><p align="center">Footer Content Goes here</p></footer>*@

<script>
$(document).ready(function () {
$('#manageusers').click(function () {
$('.body-content').load("../ManageLoginUsers/ManageUsers");
});

$('#managegroups').click(function () {
$('.body-content').load("../ManageGroups/ManageGroups");
});
});
</script>

</body>
</html>

我无法让 Bootstrap 和 KendoUI 很好地协同工作,我认为这可能与我引用所有 CSS 和脚本的顺序有关。

那么正确的顺序是什么?

最佳答案

经过几天的测试引用订购后,我想出了这个订单..

JQuery JS
Bootstrap JS
Bootstrap CSS

KendoAll JS
Kendo Default CSS
Kendo Common Bootstrap CSS

这似乎是正确的,因为我没有再遇到任何问题。当我在问题中查看上面的代码时,我发现它看起来有多么可怕,并且我还在屏幕截图中修复了该问题。该问题来自另一个开发人员 CSS 文件,该文件覆盖了很多内容。

关于javascript - 在html中使用Bootstrap和KendoUI时正确的引用顺序和要引用的文件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40390584/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com