bootstrapWizard 這個(gè)插件古怪的用法，看不懂求解?

問(wèn)題描述

找了一個(gè)老外寫(xiě)的關(guān)于bootstrapWizard的向?qū)Р寮a，他這個(gè)用法看不懂，一臉懵逼。百度別人寫(xiě)的都能看懂，他這個(gè)用法，怎么理解運(yùn)行原理。求大神解答一下。

問(wèn)題出現(xiàn)的環(huán)境背景及自己嘗試過(guò)哪些方法

找到范例網(wǎng)站。http://vinceg.github.io/twitt... 沒(méi)有類似代碼。
我百度關(guān)鍵字 ”bootstrapWizard data-option“，也沒(méi)有這種用法。

相關(guān)代碼

// 請(qǐng)把代碼文本粘貼到下方（請(qǐng)勿用圖片代替代碼）
<form id="form" data-plugin="parsley" data-option="{}">

      <div id="rootwizard" data-plugin="bootstrapWizard" data-option="{
        nextSelector: '.button-next',
        previousSelector: '.button-previous',
        firstSelector: '.button-first',
        lastSelector: '.button-last',
        onTabClick: function(tab, navigation, index) {
          return false;
        },
        onNext: function(tab, navigation, index) {
          var instance = $('#form').parsley();
          instance.validate();
          if(!instance.isValid()) {
            return false;
          }
        }
      }">
        <ul class="nav nav-pills mb-3">
          <li class="nav-item"><a class="nav-link" href="#tab1" data-toggle="tab">First</a></li>
          <li class="nav-item"><a class="nav-link" href="#tab2" data-toggle="tab">Second</a></li>
          <li class="nav-item"><a class="nav-link" href="#tab3" data-toggle="tab">Third</a></li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane active" id="tab1">
              <div class="form-group">
                <label>Username</label>
                <input type="text" class="form-control" required>                        
              </div>
              <div class="form-group">
                <label>Email</label>
                <input type="email" class="form-control" required>                        
              </div>
              <div class="row m-b">
                <div class="col-sm-6">
                  <label>Enter password</label>
                  <input type="password" class="form-control" required id="pwd">   
                </div>
                <div class="col-sm-6">
                  <label>Confirm password</label>
                  <input type="password" class="form-control" data-parsley-equalto="#pwd" required>      
                </div>   
              </div>
              <div class="form-group">
                <label>Phone</label>
                <input type="number" class="form-control" placeholder="XXX XXXX XXX" required>
              </div>
              <div class="checkbox">
                <label class="ui-check">
                  <input type="checkbox" name="check" checked required="true"><i></i> I agree to the <a href="#" class="text-info">Terms of Service</a>
                </label>
              </div>
            </div>
            <div class="tab-pane" id="tab2">
              <div class="form-group">
                <label>URL</label>
                <input type="url" class="form-control">
              </div>
            </div>
            <div class="tab-pane" id="tab3">
              <div class="form-group">
                <p>Finished</p>
              </div>
            </div>
            <div class="row py-3">
              <div class="col-6">
                <a href="#" class="btn white button-next">First</a>
                <a href="#" class="btn white button-previous">Previous</a>
              </div>
              <div class="col-6">
                <div class="d-flex justify-content-end">
                  <a href="#" class="btn white button-next">Next</a>
                  <a href="#" class="btn white button-last">Last</a>
                </div>
              </div>
            </div>
        </div>  
      </div>
    </form>

<!-- build:js scripts/app.min.js -->
<!-- jQuery -->
<script src="../libs/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="../libs/popper.js/dist/umd/popper.min.js"></script>
<script src="../libs/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- core -->
<script src="../libs/pace-progress/pace.min.js"></script>
<script src="../libs/pjax/pjax.js"></script>

<script src="scripts/lazyload.config.js"></script>
<script src="scripts/lazyload.js"></script>
<script src="scripts/plugin.js"></script>
<script src="scripts/nav.js"></script>
<script src="scripts/scrollto.js"></script>
<script src="scripts/toggleclass.js"></script>
<script src="scripts/theme.js"></script>
<script src="scripts/ajax.js"></script>
<script src="scripts/app.js"></script>
<!-- endbuild -->
<script src="../libs/parsleyjs/dist/parsley.min.js"></script>
<script src="../libs/twitter-bootstrap-wizard/jquery.bootstrap.wizard.min.js"></script>

你期待的結(jié)果是什么？實(shí)際看到的錯(cuò)誤信息又是什么？

<div id="rootwizard" data-plugin="bootstrapWizard" data-option ...
為啥在這個(gè)div屬性里面要放個(gè)data-option，data-option 下面還一堆js代碼，怎么js寫(xiě)到這里了，還沒(méi)有用js的<script></script>包住運(yùn)行。咋個(gè)運(yùn)行原理，我用F12，沒(méi)法給這個(gè)js代碼，調(diào)試定位，沒(méi)法跟蹤。希望大神給我灌輸灌輸、教育教育我。