Bootstrapグローバルナビゲーション(グローバルナビ Navbar):サビリピ

サビリピソース解析の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://it-ti.work">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グローバルナビゲーションです。

次回はヘッダー画像について解説します。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です