サビリピソース解析の2回目。サビリピのコンテンツヘッダー部にあるBootstrapグローバルナビゲーションについて説明していきます。
前回の記事
1.サビリピのHTMLヘッダー部について
アプリURL
サビリピ – Youtube動画で大好きな曲のサビを無限
BootstrapグローバルナビゲーションのHTMLソースと画像(青枠)
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="/sabi-repeat.php" class="navbar-brand">
<span class="text-primary"><?php echo $site_name ?
></span>
</a>
</div>
<div class="navbar-collapse collapse" id="navbar-main">
<ul class="nav navbar-nav navbar-right">
<li><a href="http://dev.ls-al.info/webroot/article">ITモード</a></li>
</ul>
</div>
</div>
</div>
4行目〜8行目:
上記赤枠のハンバガーメニュー部分です。レスポンシブ対応用でスマホなどで表示した場合、上記のように表示されます。3行目の「navbar-header」クラス内に「button」タグで記載します。
9〜12行目:
上記画面左のサイトタイトル「サビリピ」と表示されている部分です。aタグ内にPHPの変数を設定します。$site_name変数にはサイト名(サビリピ)が設定されています。(変数の設定部分については前回の記事参照)
aタグのhrefにはサビリピのトップページURLを設定します。
<span class="text-primary">
でサイトタイトルを青色表示にしています。
15行目〜17行目
上記画像右側の「ITモード」と表示されている部分です。aタグ内には当サイトへのリンクを入れています。「navbar-right」クラスを指定し、右寄せで表示しています。
以上がサビリピのbootstrapグローバルナビゲーションです。
次回はヘッダー画像について解説します。
コメントを残す