Bootstrap Tour. Делаем красивый тур на сайте

Bootstrap Tour - Это плагин, который при загрузке страницы выделяет определенные элементы вашего сайта, тем самым заставляет обратить внимание на выделенный элемент в первую очередь.Данный плагин отлично подходит для страницы регистрации либо публикации новостей.

Рассмотрим пример установки и эксплуатации на простой bootstrap странице.
(Так же можно установить и на DLE шаблон)


1. Первым делом нам нужно скачать и подготовить bootstrap страничку. Качаем boostrap и создаем файл index.html. 
Я набросал простую страницу с несколькими панельками, на которые я буду привязывать тот самый Тур.

<!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">
    <title>Bootstrap 101 Template</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
    <h1>Hello, world!</h1>
      <div class="row">
        <div class="col-md-6">
          <div class="panel panel-default">
            <div class="panel-heading">Первая панель</div>
            <div class="panel-body">
              Panel content
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="panel panel-default">
            <div class="panel-heading">Вторая панель</div>
            <div class="panel-body">
              Panel content
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="panel panel-default">
            <div class="panel-heading">Третья панель</div>
            <div class="panel-body">
              Panel content
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

2. Теперь нам необходимо подключить плагин bootstrap-tour.
Для этого кидаем файлы по папкам и в index.html перед </head> добавляем:

<link href="css/bootstrap-tour.css" rel="stylesheet">

Перед </body>

<script src="js/bootstrap-tour.js"></script>

3. Инициализируем плагин, перед </body>вставляем:

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

Остается добавить идентификатор к панелям.
В нашем index.html ищем div панелей и добавляем id прописанный в коде инициализации, должно получиться так:

<div class="panel panel-default" id="1panel">

Вот и всё, теперь после загрузки страницы, у панели будут свои всплывающие окна с информацией.
Вот так всё это дело выглядит.
У этого плагина куча настроек, на официальном сайте вы можете найти их все и настроить под себя.
К Dle шаблону подключается все точно так же. Прописываем все в файл main.tpl.