Bootstro.jsのサンプル


bootstroクラスを設定した要素を1つずつハイライトしていきます。
サンプル1ボタンをクリックするとチュートリアルが起動します。
サンプル1


ハイライトする要素の順番は自分で決められます。
サンプル2ボタンをクリックするとチュートリアルが起動します。
サンプル2

step1

  • ステップ表示したい要素にbootstroクラスを設定
  • step2

  • ステップ表示中に、カーソルキーでも動かせる。
  • escキーで終了出来る。
  • step3

  • オーバーレイの表示位置を変えられる

  • step3

  • ステップ表示したい要素にbootstroクラスを設定
  • step1

  • ステップ表示中に、カーソルキーでも動かせる。
  • escキーで終了出来る。
  • step2

  • オーバーレイの表示位置を変えられる

  • bootstro.start();を使うことでチュートリアルが起動します。クリックイベントと合わせて使います。
  • 背面クリック、エスケープキーの無効も出来る。bootstro.start('.bootstro', {stopOnBackdropClick : false, stopOnEsc:false});
  • サンプル3 escキー、背面無効サンプル「わかった!終了!」を押すまで終わらない。
  • サンプル4「次へ、戻る」を消すサンプル。カーソルキーで移動