Question

我是Bootstrap Tour的新手，我正在一个简单的网站上学习如何使用Bootstrap Tour。但是，有一个错误导致一些混乱。每次我尝试运行此代码时，控制台都会给出错误“未捕获的参考错误：未定义游览”。有谁能帮我解释一下这个问题？

<!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 -->
    <title>Bootstrap Tour Test</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

    <!-- Bootstrap Tour CSS -->
    <link href="../TestFolder/bootstrap-tour/build/css/bootstrap-tour.min.css" rel="stylesheet">

    <script>
            var tour = new Tour({
              steps: [
                {
                  element: "#content",
                  title: "Title of my step",
                  content: "Content of my step",
                },
                {
                  element: "#content1",
                  title: "Title of my step",
                  content: "Content of my step",
                }
              ]
            });
    </script>

</head>

<body>

    <div id="content">
      Hello, World!
    </div>
    <br>
    <br>
    <br>
    <div id="content1">
      Another Hello, World!
    </div>

    <!-- <script>
        var tour = new Tour();

        // Add your steps. Not too many, you don't really want to get your users sleepy
        tour.addSteps([{
          element: "#content", // string (jQuery selector) - html element next to which the step popover should be shown
          title: "Title of my step", // string - title of the popover
          content: "Content of my step" // string - content of the popover
        }, {
          element: "#content1",
          title: "Title of my step",
          content: "Content of my step"
        }]);

        // Initialize the tour
        tour.init();

        // Start the tour
        tour.start();
    </script> -->

    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

    <!-- Poopper.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>

    <!-- Bootstrap Javascript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

    <!-- Boostrap Tour Javascript -->
    <script src="../TestFolder/bootstrap-tour/build/js/bootstrap-tour.min.js"></script>

</body>
</html>

Answer 1

加载Bootstrap Tour文件后移动脚本。

    <!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 -->
    	<title>Bootstrap Tour Test</title>

    	<!-- Bootstrap CSS -->
    	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

    	<!-- Bootstrap Tour CSS -->
    	<link href="../TestFolder/bootstrap-tour/build/css/bootstrap-tour.min.css" rel="stylesheet">

    </head>
   	
   	<body>

   		<div id="content">
		  Hello, World!
		</div>
		<br>
		<br>
		<br>
		<div id="content1">
		  Another Hello, World!
		</div>

		<!-- <script>
			var tour = new Tour();

			// Add your steps. Not too many, you don't really want to get your users sleepy
			tour.addSteps([{
			  element: "#content", // string (jQuery selector) - html element next to which the step popover should be shown
			  title: "Title of my step", // string - title of the popover
			  content: "Content of my step" // string - content of the popover
			}, {
			  element: "#content1",
			  title: "Title of my step",
			  content: "Content of my step"
			}]);

			// Initialize the tour
			tour.init();

			// Start the tour
			tour.start();
		</script> -->

   		<!-- jQuery -->
   		<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

   		<!-- Poopper.js -->
		<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>

		<!-- Bootstrap Javascript -->
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

		<!-- Boostrap Tour Javascript -->
		<script src="../TestFolder/bootstrap-tour/build/js/bootstrap-tour.min.js"></script>
    
        	<script>
    			var tour = new Tour({
				  steps: [
				    {
				      element: "#content",
				      title: "Title of my step",
				      content: "Content of my step",
				    },
				    {
				      element: "#content1",
				      title: "Title of my step",
				      content: "Content of my step",
				    }
				  ]
				});
		</script>

    </body>
    </html>

Answer 2

如果您正在使用Angular 2+（和bootstrap 4），则需要将js和css添加到您的angular.json文件中。安装库后（例如通过npm）。更新angular.json文件。

"styles": [..
           ..
          "node_modules/bootstrap-tour/build/css/bootstrap-tour.min.css"
          ],
"scripts": [..
            ..
          "node_modules/bootstrap-tour/build/js/bootstrap-tour.min.js"
        ]
      },

Bootstrap之旅“游览未定义”

2 个答案: