Bootstrap ナビゲーションバーについて1

Facebook にシェア
Pocket
LINEで送る
このエントリーを Google ブックマーク に追加

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] ボタンの設置と、ボタン内にアイコンを設置して文字を挿入。

気が向いたら引き続きナビゲーションバーに関して更新していく予定。

Related posts

コメントを残す