libro
www.tuyano.com
初心者のためのBootstrap入門

ナビゲーションのコンポーネント (5/5)

作成:2017-03-11 08:30
更新:2017-03-11 08:30

■ナビゲーションバー（Navbar）

この種のリンク移動のためのもので、もっとも複雑なインターフェイスが、ナビゲーションバーでしょう。

ナビゲーションバーそのものは、多くのアプリケーションやWebサイトで使われています。これは、Bootstrapでは<nav>タグと<div>、そして<a>タグを組み合わせて作成します。
<nav class="navbar navbar-default" role="navigation">
    <div class="container">
        <a class="navbar-brand" href="#">リンク名</a>
        ……略……
    </div>
</nav>

これが、ナビゲーションバーの基本形です。<nav>タグがベースとなります。これには、class="navbar"というクラスと、ナビゲーションバーのスタイルを指定するクラスを用意します。デフォルトは、"navbar-default"というクラスになります。この他、role="navigation"という属性を用意しておきます。

この中には、class="container"を指定した<div>タグを用意します。そしてこの中に、<a>タグでリンクを作成していきます。これで、簡単にツールバーが作成されます。

このナビゲーションバーには、表示に関するクラスが幾つか用意されています。重要なものを整理しておきましょう。

navbar-fixed-top――これを付けると、ナビゲーションバーがブラウザの最上部に固定されて表示されます。
navbar-fixed-bottom――こちらは、ブラウザの最下部に固定し表示されます。
navbar-inverse――これは、反転表示です。黒字に白い文字でバーが表示されます。

非常に面白いのは、navbar-fixed-topとnavbar-fixed-bottomです。これらはブラウザの一番上と一番下に固定されますが、Webページがスクロールするような長い表示であっても、常に上下に固定され表示されるようになっています（スクロールして消えたりはしません）。

では、下に利用例を挙げておきましょう。２つのナビゲーションバーを作成し、一番上と一番下に表示しています。

※プログラムリストが表示されない場合

AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。

●プログラム・リスト●

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Bootstrap</title>

    <script src="./js/jquery-3.1.1.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/bootstrap-theme.min.css">

</head>
<body >
    
<div class="container">
            
<div class="row">
    <div class="col-md-12">

        <div class="page-header">
            <h1 style="margin:75px 0px 0px 0px;">コンテンツの表示</h1>
            <h2 >NavBar</h2>
        </div>
        <p>this is content.</p>
        <p>this is content.</p>
        <p>this is content.</p>
        <p>this is content.</p>
        <p>this is content.</p>
        <p>this is content.</p>
        <p>this is content.</p>
        <p>this is content.</p>
        <p>this is content.</p>
        <p>this is content.</p>

         <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <div class="container-fluid">
                <a class="navbar-brand" href="#">One</a>
                <a class="navbar-brand" href="#">Two</a>
                <a class="navbar-brand" href="#">Three</a>
            </div>
        </nav>
       <nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
            <div class="container-fluid">
                <a class="navbar-brand" href="#">One</a>
                <a class="navbar-brand" href="#">Two</a>
                <a class="navbar-brand" href="#">Three</a>
            </div>
        </nav>
        
    </div>
</div>
    
</div>

</body>
</html>
※関連コンテンツ

「初心者のためのBootstrap入門」に戻る