Question

我目前正在使用Bootstrap创建一个网站。我选择了这个模板（http://getbootstrap.com/examples/carousel/）并将源代码复制到我的文本编辑器中。我正在使用本地主机在Xamp上运行源代码，但是没有显示carousel元素。

注意：如果您通过file：// URL查看此页面，那么＆＃34; next＆＃34;和＆＃34;之前＆＃34;由于Web浏览器安全规则，左侧和右侧的Glyphicon按钮可能无法正确加载/显示。

我该怎么办？

这是我在头部的代码：

<!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">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Carousel Template for Bootstrap</title>

 <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

<!-- Optional theme -->
<link href="css/bootstrap-theme.min.css" rel="stylesheet">

<!-- Latest compiled and minified JavaScript -->
<script src="js/bootstrap.min.js"></script>


    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="../../assets/js/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- Custom styles for this template -->
    <link href="carousel.css" rel="stylesheet">
  </head>

Answer 1

请确保您的代码中包含以下正确的链接

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

因为如果不会显示任何内容，因为无法访问相关文件。

Answer 2

您应该致电$('.carousel').carousel() 请参阅：http://getbootstrap.com/javascript/#carousel

Answer 3

您可以在导出样式表后导入bootstrap-glyphicons.css。

HTML：

\d

这是我自定义主题的问题。他们使用原始的bootstrap链接作为glyphicons：

CSS：bootstrap-theme.min.css

[0-2]

因此，您可以在项目中导入所有这些文件并重新链接它们或仅使用我的第一个解决方案

Answer 4

您可以在导入样式表之后简单地导入bootstrap-glyphicons.css。

HTML：

<!--Your stylesheet -->
<link rel="stylesheet" type="text/css" href="css/style.css">

<!--To Add GlyphIcon -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

您可以通过以下链接进行操作： https://getbootstrap.com/docs/4.4/getting-started/introduction/

Bootstrap模板无法正常工作

4 个答案: