3.HTMLに必要なカスタムデータ属性を記述する
実装の準備ができたので、index.htmlに必要なカスタムデータ属性を記述します。
<body>を下記のように変更します。
■元のソースコード（index.htmlの一部）
<body>
■変更後ソースコード（index.htmlの一部、赤い部分が追記した箇所）
<body data-spy="scroll" data-target=".navbar-default">
「.navbar-example」には適用させたいナビゲーションのclass名を指定します。今回は「.navbar-default」を適用します。class名の指定なので、「.（ドット）」が入っていることに注意してください。
このままではナビバーの「howtouse」の箇所だけ変更されません。該当の箇所が両方floatしているため、親要素の高さが0になっているので飛ばされてしまっているのですね。theme.lessの「.howtouse」に「.clearfix();」を追加して解決します。
■元のソースコード（theme.lessの一部）
.howtouse{
.worker,.client{
width: 50%;
float: left;
padding: 20px;
color: #5E8061;
font-size: 15px;
}
■変更後ソースコード（theme.lessの一部、赤い部分が追記した箇所）
.howtouse{
.clearfix();
.worker,.client{
width: 50%;
float: left;
padding: 20px;
color: #5E8061;
font-size: 15px;
}
これで完成です！ ね、簡単でしょう？
スクロールスパイを実装したPROBONO PAPRIKA
スクロールしていくと、activeが自動的にスクロールと同期しているのが分かります。スクロールスパイ側で「.active」を勝手に付与してくれますので、HTMLのナビゲーション部分に付与していたclass名「active」は削除してしまってかまいません。
■元のソースコード（index.htmlの一部）
<ul class="nav navbar-nav">
<li class=”active”><a href="#about">about</a></li>
<li><a href="#howtouse">how to use</a></li>
<li><a href="#entry">entry</a></li>
</ul>
■変更後ソースコード（index.htmlの一部、赤い部分が変更した箇所）
<ul class="nav navbar-nav">
<li><a href="#about">about</a></li>
<li><a href="#howtouse">how to use</a></li>
<li><a href="#entry">entry</a></li>
</ul>
※ ※ ※
次回はBootstrapでは提供されていないインターフェイスを、jQueryプラグインで実装する方法を紹介します。
