Bootstrap ナビゲーションバーについて1
Bootstrapといったらナビゲーションバーと思っているのは私だけでしょうか。
[amazonjs asin="4844364898″ locale="JP" title="これからのWebサイト設計の新しい教科書 CSSフレームワークでつくるマルチデバイス対応サイトの考え方と実装〈Bootstrap・コンテンツファースト・コンポーネント設計〉"]
シンプルなナビゲーションバーを設置する
以下の様なソースコードでナビゲーションバーを設置できる。
[html]
<!– ナビゲーションバー –>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!– ヘッダ情報 –>
<div class="navbar-header">
<a class="navbar-brand">ナビゲーションバー</a>
</div>
<!– リストの配置 –>
<ul class="nav navbar-nav">
<li class="active">
<a href="#">
リスト1
</a>
</li>
<li>
<a href="#">
リスト2
</a>
</li>
<li>
<a href="#">
リスト3
</a>
</li>
</ul>
<!– お問い合わせボタン –>
<div class="pull-right">
<button type="button" class="btn btn-success navbar-btn">
<span class="glyphicon glyphicon-envelope">
お問い合わせ
</span>
</button>
</div>
</div>
</nav>
[/html]
大雑把な解説
[html]
<nav class="navbar navbar-default">
[/html]
ナビゲーションバーを使うことの宣言。
[html]
<div class="container-fluid">
[/html]
ウィンドウサイズに応じてナビゲーションバーのサイズを流動的に変えたい場合の宣言。
固定にしたい場合は class="container" とすればいい。
[html]
<div class="navbar-header">
<a class="navbar-brand">ナビゲーションバー</a>
</div>
[/html]
タイトル部分にしたいときに記述する。
[html]
<ul class="nav navbar-nav">
<li class="active">
<a href="#">
リスト1
</a>
</li>
<li>
<a href="#">
リスト2
</a>
</li>
<li>
<a href="#">
リスト3
</a>
</li>
</ul>
[/html]
ナビゲーションバー上にリンクを横並びに載せたいときに記述。
liタグで追加していく。
[html]
<div class="pull-right">
[/html]
右寄せにしたい部分に指定。
[html]
<button type="button" class="btn btn-success navbar-btn">
<span class="glyphicon glyphicon-envelope">
お問い合わせ
</span>
</button>
[/html]
ボタンの設置と、ボタン内にアイコンを設置して文字を挿入。
気が向いたら引き続きナビゲーションバーに関して更新していく予定。