분류 javascript

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

컨텐츠 정보

  • 조회 454 (작성일 )

본문

부트스트랩 팝 오버는 빠르고 쉽게 구축 할 수 있습니다. 이것은 부트스트랩을 위한 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 파일을 가져올 수도 있습니다.


https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.12.0/js/bootstrap-tour-standalone.js
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.12.0/js/bootstrap-tour-standalone.min.js
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.12.0/js/bootstrap-tour.js
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.12.0/js/bootstrap-tour.min.js
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.12.0/css/bootstrap-tour-standalone.css
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.12.0/css/bootstrap-tour-standalone.min.css
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.12.0/css/bootstrap-tour.css
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.12.0/css/bootstrap-tour.min.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();