gpt4 book ai didi

javascript - Bootstrap CSS 加载不正确,看起来像一个典型的 HTML/CSS 下拉菜单

转载 作者:行者123 更新时间:2023-11-28 03:10:32 24 4
gpt4 key购买 nike

我在 github 上找到了 Select2 的 Bootstrap 插件 here并且似乎无法在我的网站上正常运行。我将在下面粘贴我的代码。我不知道服务器上是否已经有太多竞争的 CSS,或者我只是把东西放错了地方。我对使用这些东西有点陌生,但我正在努力弄清楚这一切。

  <?php
/*==================================================================================
README:

This global var (`root_dir`) must be set to the relative path
of the root directory.

E.g.
If this page is in "career.clemson.edu/coop/"
then the line should read
$GLOBALS["root_dir"]="../";
or if this page is in "career.clemson.edu/coop/students/";
then the line should read
$GLOBALS["root_dir"]="../../";


The template automatically includes common meta elemtents (keywords, etc),
common CSS files (ours, bootstrap, font-awesome), a fallback fon non-HTML5 compliant
browsers, and some basic javasript files at the end of the page.
Feel free to add any other things as needed on a per page basis!

All includes *should* in %root_dir%/includes


==================================================================================*/
$GLOBALS["root_dir"]="../";
require_once $GLOBALS["root_dir"].'includes.inc';
?>
<!doctype html>
<html lang="en">
<html>
<head>
<meta charset="UTF-8">
<?php
require_once $GLOBALS['include_loc']."common_meta.inc";
require_once $GLOBALS['include_loc']."common_css.inc";
require_once $GLOBALS['include_loc']."html5_shiv.inc";
?>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">

<title>Resumes and Cover Letters</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!-- jQuery library -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <!-- Latest compiled JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>


</head>

<body>
<?php require_once $GLOBALS["include_loc"]."top_menu.inc";?> <!-- Top Menu -->
<div class span="row">
<script type="text/javascript">
$(".js-example-placeholder-multiple").select2({
placeholder: "Select a state"
});
</script>
<select class="js-example-placeholder-multiple">
<option value="AL">Alabama</option>
...
<option value="WY">Wyoming</option>
</select>



<?php require_once $GLOBALS["include_loc"]."footer.inc";?> <!-- Footer -->
<?php require_once $GLOBALS['include_loc']."basic_js.inc"; ?> <!--Include JS Files at the end for speed-->
</body>
</html>

最佳答案

这里有四个错误。

  1. 您还没有包含 Bootstrap JS。

为此,只需包含以下内容:

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<head>标签或 <body>标签。

  1. 您也没有包括 jQuery。 Bootstrap 和 select2 都需要 jQuery。

要包含 jQuery,请插入:

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<head>标签或 <body>标记,但要确保它在 Bootstrap 和 select2 JS 之前。

  1. 你的 <select>有课js-example-basic-single ,但您正在调用类上的 select2 插件 js-example-placeholder-multiple .

解决这个问题,插件应该可以工作了。

  1. (这个比较小)这个 div:<div class span="row">未以 </div> 结尾在你的代码中。另外,<div class span="row">好像不太对。

$(".js-example-basic-single").select2({
placeholder: "Select a state"
});
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">

<title>Resumes and Cover Letters</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
</head>
<body>
<!-- Top Menu -->
<div class span="row">
<select class="js-example-basic-single">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
</select>
</div>
</body>
</html>

关于javascript - Bootstrap CSS 加载不正确,看起来像一个典型的 HTML/CSS 下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45739497/

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