【Twitter Bootstrap】変形版タブメニュー [Twitter Bootstrap]
今回はタブメニューの変形版です。通常タブは上部にきますが、上下左右どこにでも配置できます。早速ソース。
<div class="tabbable tabs-below">
<div class="tab-content">
<div class="tab-pane active" id="tab1">中身はここよん</div>
<div class="tab-pane" id="tab2">中身はここだってば</div>
<div class="tab-pane" id="tab3">中身はここだから</div>
</div>
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Menu1</a></li>
<li><a href="#tab2" data-toggle="tab">Menu1</a></li>
<li><a href="#tab3" data-toggle="tab">Menu1</a></li>
</ul>
</div>
基本構成は上部タブメニューと一緒です。大枠はDIV要素にtabbableクラス、中にコンテンツを表すDIV要素とメニューを表すUL要素。それぞれ、tab-contentクラスとnav nav-tabsクラスを設定。
タブの位置を替えるには、一箇所だけ変更します。大枠のDIV要素に指定しているクラスにtabs-belowを追加します。実はこれだけです。キャプチャをどうぞ。
タブが下部に移動しているのがわかります。同様に左の時はtabs-leftクラス、右の時はtabs-rightクラスを指定します。こちらもキャプチャをどうぞ。
これだけで上下左右好きなところにタブを持ってくることができます。お手軽ですね。
今回はこれでおしまい。次回はナビバーについてやります。
【Twitter Bootstrap】アイコン付きナビリスト [Twitter Bootstrap]
今回は、アイコン付きナビリストです。前回のナビリストにちょこっと付け足すだけでアイコン付きのメニューになります。
<ul class="nav nav-list"> <li class="active"> <a href="#">Home</a> </li> <li><i class="icon-book"></i><a href="#tab1" data-toggle="tab">MENU1</a></li> <li><i class="icon-stop"></i><a href="#tab2" data-toggle="tab">MENU2</a></li> <li><i class="icon-tags"></i><a href="#tab2" data-toggle="tab">MENU3</a></li> <li><i class="icon-heart"></i><a href="#tab2" data-toggle="tab">MENU4</a></li> <li><i class="icon-align-center"></i><a href="#tab2" data-toggle="tab">MENU5</a></li> <li><i class="icon-cog"></i><a href="#tab2" data-toggle="tab">MENU6</a></li> </ul>
ポイント
- <i>タグでアイコンを挿入
- アイコンの種類はクラスで指定
- どんなアイコンがあるかは、Twitter Bootstrapをダウンロードすると含まれているドキュメントからBaseCSSの最下部で確認
以上です。表示は以下のようになります。
メニューの左にアイコンが出ているのがわかりますね。 <i>タグだけで表示できます。
※ダウンロードしたTwitter Bootstrap内にアイコン画像が含まれています。フォルダツリーを変えると表示されませんので、注意です。
以上でアイコン付きナビリストはおしまい。次回は、タブメニューの変形版についてやります。
【Twitter Bootstrap】ナビリスト [Twitter Bootstrap]
はい、今回のTwitter Bootstrapはナビリストです。
まず、ソース。
-↓ソース------------------------------------------------------------------------
<ul class="nav nav-list">
<li class="nav-header">
List header
</li>
<li class="active">
<a href="#">Home</a>
</li>
<li>
<a href="#">MENU1</a>
</li>
<li>
<a href="#">MENU2</a>
</li>
<li>
<a href="#">MENU3</a>
</li>
<li>
<a href="#">MENU4</a>
</li>
</ul>
</div>
-------------------------------------------------------------------------
■ポイント
・全体を、navクラス、nav-listクラスを設定したUL要素で囲う
・ヘッダ(リストのタイトル)はnav-headerクラスを設定
・あとはLIで要素を書く
これだけでデザインされたナビリストができます。
表示は以下のよう。
メニューによっては区切り線を入れたい場合もありますよね。
その場合は以下のようにdividerクラスを設定したLI要素を追加します。
そうすると以下のようになります。
お手軽ですね。
以上で、今回のナビリストは終了です。
次回はアイコン付きのナビリストをやります。
【Twitter Bootstrap】ドロップダウン付きタブメニュー [Twitter Bootstrap]
Twitter Bootstrap、今回はドロップダウンとタブの合わせ技です。
早速ソース。
-↓ソース-------------------------------------------------------------------------------
<ul class="nav nav-tabs">
<li class="active"><a href="#">HOME</a></li>
<li><a href="#">MENU0</a></li>
<li class="dropdown">
<a class="dropdown-toggle"
data-toggle="dropdown"
href="#">
Dropdown
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<!-- links -->
<li>MENU1</li>
<li>MENU2</li>
<li>MENU3</li>
</ul>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>内容はここだよーん</p>
</div>
<div class="tab-pane" id="tab2">
<p>ここですよー。</p>
</div>
<div class="tab-pane" id="tab3">
<p>ここだってばよ。</p>
</div>
</div>
----------------------------------------------------------------------
基本的な構成はタブメニューと同じですね。↓(タブメニューの回)
http://webmaster-road.blog.so-net.ne.jp/2012-07-15-1
さて、ドロップダウンをつけたいので、 LI要素内のA要素に、dropdown-toggleクラスを設定します。
また、 data-toggle="dropdown"の記述を追加します。
あとはdropdown-menuクラスをつけたUL要素内にリストを書くだけです。
表示は以下のようになります。
タブメニューにドロップダウンが追加されているのがわかります。
これもtab-pillsクラスに変えると、以下のように変わります。
これでドロップダウン付きタブメニューはおしまいです。
次回は、 ナビリストをやります。
【Twitter Bootstrap】スタッカブルタブメニュー [Twitter Bootstrap]
Twitter Bootstrap、今回はスタッカブルタブメニューです。
-↓ソース----------------------------------------------------------------
<ul class="nav nav-tabs nav-stacked">
<li class="active">
<a href="#">Home</a>
</li>
<li><a href="#tab1" data-toggle="tab">MENU1</a></li>
<li><a href="#tab2" data-toggle="tab">MENU2</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>内容はここだよーん</p>
</div>
<div class="tab-pane" id="tab2">
<p>ここですよー。</p>
</div>
<div class="tab-pane" id="tab3">
<p>ここだってばよ。</p>
</div>
</div>
-----------------------------------------------------------------
前回のタブメニューのソースと比較してみてください。↓
http://webmaster-road.blog.so-net.ne.jp/2012-07-15-1
実はUL要素にnav-stackedクラスを追加しただけです。
ちなみにstackとは積み重ねるという意味です。
タブメニューを縦に積み重ねるということですね。
表示は以下のようになります。
また、前回同様、nav-pillsクラスに変更すると以下のように変わります。
以上がスタッカブルタブメニューです。
次回は、ドロップダウン付きタブメニューです。
【Twitter Bootstrap】タブメニュー [Twitter Bootstrap]
【Twitter Bootstrap】ドロップダウンボタン [Twitter Bootstrap]
【Twitter Bootstrap001】グリッドレイアウト [Twitter Bootstrap]
バージョン2.0がオープンになったTwitter Bootstrapについて見ていきたいと思います。
第1回はグリッドレイアウトについてです。
maru さん
-
nice! 13
記事 204
テーマ パソコン・インターネット
プロフィール
ブログを紹介する
