bootstrapの機能を使う
今回がbootstrapのまとめのラストになります。
今回はタブの切り替えやカルーセルスライダーの実装の仕方について見ていきます。
タブの切替をする
ul要素にclass=”nav nav-tabs”を、li要素の中身のaタグにdate-toggle=”tab”を指定することでタブの切替ができます。
最初に表示するタブはli要素にclass=”active”を指定します。
<ul class="nav nav-tabs"> <li class="active"><a href="#first" date-toggle="tab">最初に表示</a></li> <li><a href="#second" date-toggle="tab">タブで切り替え</a></li> </ul>
これでタブ自体は完成です。
タブの中身をいれるときはコンテンツ全体をclass=”tab-content”で囲い、
それぞれの中身にclass=”tab-pane”とタブのaタグに設定したリンク先のIDを指定します。
<ul class="nav nav-tabs">
<li class="active"><a href="#first" date-toggle="tab">最初に表示</a></li>
<li><a href="#second" date-toggle="tab">タブで切り替え</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="first">最初に表示される内容</div>
<div class="tab-pane" id="second">タブを切り替えて表示される内容</div>
</div>
これだけでタブの実装が完了します。
カルーセルスライダーをつくる
カルーセルスライダーの実装もできます。
ただし、Bootstrapのサイトにアクセシビリティはよくないインターフェイスである書いてあるので、
実装するときはきちんと自分で判断してから使うことが必要です。
BootstrapのサイトのナビゲーションメニューにあるJavascriptをクリックします。
右サイドバーにあるCarouselをクリックするとサンプル画面や説明がでてきます。
一からhtmlを組んでも問題ありませんが、時間短縮をするためにサンプルの下にあるコードをコピーします。
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<ul class="pagination">
<li class="disable"><a href="">«</a></li>
<li class="active"><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">»</a></li>
</ul>
基本的にはこのままで大丈夫ですが、画像の部分だけ変更が必要なのでWrapper for slidesの部分を変更していきます。
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/photo01" alt="photo01">
<div class="carousel-caption">
写真のキャプションを書くことができます。
</div>
</div>
<div class="item">
<img src="images/photo02" alt="photo02">
<div class="carousel-caption">
写真のキャプションを書くことができます。
</div>
</div>
<div class="item">
<img src="images/photo03" alt="photo03">
<div class="carousel-caption">
写真のキャプションを書くことができます。
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
ほぼコピペでカルーセルスライダーの完了します。
今回は以上です。
次回以降はbootstrapを使わずにレスポンシブデザインを作っていく方法について書いていきます。
