Bootstrapグローバルナビゲーション（グローバルナビ Navbar）：サビリピ

Tweet

Pocket

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

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

Tweet

Pocket

Related posts:

サビリピのHTMLヘッダー部について サビリピ – YouTube Player APIでWEBアプリケーションを作成しました。 横幅フルのヘッダー画像。サビリピのソース解説 1.PHPの書き方とサビリピのPHPのソースサンプル 2.変数とは？PHPとサビリピの変数設定