back
ナビゲーションのコンポーネント (5/5)
■ナビゲーションバー（Navbar）
この種のリンク移動のためのもので、もっとも複雑なインターフェイスが、ナビゲーションバーでしょう。
ナビゲーションバーそのものは、多くのアプリケーションやWebサイトで使われています。これは、Bootstrapでは<nav>タグと<div>、そして<a>タグを組み合わせて作成します。
これが、ナビゲーションバーの基本形です。<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ページがスクロールするような長い表示であっても、常に上下に固定され表示されるようになっています（スクロールして消えたりはしません）。
では、下に利用例を挙げておきましょう。２つのナビゲーションバーを作成し、一番上と一番下に表示しています。
ナビゲーションバーそのものは、多くのアプリケーションや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ページがスクロールするような長い表示であっても、常に上下に固定され表示されるようになっています（スクロールして消えたりはしません）。
では、下に利用例を挙げておきましょう。２つのナビゲーションバーを作成し、一番上と一番下に表示しています。
(by. SYODA-Tuyano.)
※リストが表示されない場合
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>
| << 前へ |