댓글 검색 목록

[javascript] Bootstrap Tour - Bootstrap Tour를 통해 자체 무료 투어 구현을 제공합니다.

페이지 정보

작성자 운영자 작성일 20-04-03 15:48 조회 888 댓글 0

부트스트랩 팝 오버는 빠르고 쉽게 구축 할 수 있습니다. 이것은 부트스트랩을 위한 jQuery 기반 플러그인이며 DOM 및 JavaScript 구성의 강력한 기능을 사용하여 둘러보기를 빌드합니다.

JS 및 CSS 파일을 포함하는 것만 큼 간단하고 자세한 문서를 제공합니다.

1*S3q5j81hLTtxl-Ri6ABqDw.gif

https://bootstraptour.com/

설치하는 방법

부트 스트랩의 CSS 및 JS 파일을 간단히 사용할 수 있습니다.

<link href="bootstrap.min.css" rel="stylesheet">
<link href="bootstrap-tour.min.css" rel="stylesheet">
...
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-tour.min.js"></script>

또는 독립형 CSS 또는 JavaScript 파일을 사용하십시오.

<link href="bootstrap-tour-standalone.min.css" rel="stylesheet">
...
<script src="jquery.min.js"></script>
<script src="bootstrap-tour-standalone.min.js"></script>

CDN에서 JS 및 CSS 파일을 가져올 수도 있습니다.

사용하는 방법

초기 설정 후 둘러보기 인스턴스를 작성하고 다음과 같이 요소 세부 사항으로 단계를 추가 할 수 있습니다.

// Instantiate the tour
var tour = new Tour({
  steps: [
  {
    element: "#my-element",
    title: "Title of my step",
    content: "Content of my step"
  },
  {
    element: "#my-other-element",
    title: "Title of my step",
    content: "Content of my step"
  }
]});

// Initialize the tour
tour.init();

// Start the tour
tour.start();