読者です 読者をやめる 読者になる 読者になる

感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

ページ上部に固定されるナビゲーションバーを作る

<スポンサーリンク>

Bootstrapのコンポーネントの中でも特に便利なのがナビゲーションバーです。
Bootstrapのナビゲーションはすべてレスポンシブで、モバイル環境では折りたたんだり、たたんだりもできます。

タイトルの上部に固定されているというのは、以下のようなイメージです。
f:id:sho322:20140525154424j:plain

この画像を下にスクロールしても・・・・

f:id:sho322:20140525154449j:plain

ナビゲーションメニューはページの上で固定されています。


ナビゲータを設定するには、以下のようにclass="navbar"でナビゲーションとなるものを囲みます。
navbar-fixed-topというのが、ナビゲーションメニューを上に固定する属性です。
navber-inverseとすると、白黒が反転(inverse)します。

<!-- Navbar Start-->
<div class="navbar navbar-inverse navbar-fixed-top">
 <div class="container">
  <a class="navbar-brand text-muted" href="#">MENU</a>
   <ul class="nav navbar-nav navbar-right">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Info</a></li>
    <li><a href="#">Profile</a></li>
   </ul>
 </div>
</div>
<!-- End of Navber -->

navbarの下にcontainerを作り、その下にnavbar-brandというブランド名のようなモノを書きます。
text-mutedというのは色のことで、他にも、
・text-primary
・text-warning
・text-danger
・text-success
・text-info
などがあります。
色のイメージは以下のJSFIDDLEを見ればわかりやすいです。
http://jsfiddle.net/juanmendez/jd3gV/

上のやつに加えて、小さい画面のときにメニューを折りたたんだり(toggle)する設定を記載します。

<!-- Navbar Start-->
<div class="navbar navbar-inverse navbar-fixed-top">
 <div class="container">
 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
 </button>

 ~略~

これを書くことで、ブラウザの幅を狭めたときなど、以下のようにメニューが折りたたみで表示されます。

f:id:sho322:20140525154553j:plain

コード全体は以下のようになります。

<!DOCTYPE html>
<html>
<head>
<title>BootStrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen" >
<link href="css/my-styles.css" rel="stylesheet" media="screen">
</head>
<body>

<!-- Navbar Start-->
<div class="navbar navbar-inverse navbar-fixed-top">
 <div class="container">
 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
 </button>
  <a class="navbar-brand text-muted" href="#">俺のアイコン</a>
   <ul class="nav navbar-nav navbar-right">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Info</a></li>
    <li><a href="#">Profile</a></li>
   </ul>
 </div>
</div>
<!-- End of Navber -->


<div class="container">

<div class="jumbotron">
<h1>これは私の最強のアプリです。</h1>
<p>Twitter Bootstrap is excellent front page programming tool!</p>
<p>
<a class="btn btn-success btn-lg" href="#">私達のアプリをダウンロードする</a>
<a class="btn btn-primary btn-lg" href="#">もっと別のアプリがほしい</a>
</p>
</div>

<div class="row">

<div class="col-md-4 hidden-xs">
<h2>モダンタイムス</h2>
<p>
「子供が寝ている間に、両親が話し合いを続けて、で、離婚が決まってから発表されるってのと一緒だ。国ってのは必要最低限のことしか、国民には教えようとしない」<br>
「けどな、教師たちは何もできないんだよ。『やめなさい』『暴力は駄目です』なんて口で言うだけなんだ。あれで教育できるって言うんだったら、あの教師たちは今すぐ紛争地域に行って、マイクで、『やめなさい』って叫ぶべきだったな」
</p>
</div>

<div class="col-md-4 hidden-xs">
<h2>死神の精度</h2>
<p>
要するに、輝くということは、
ただちょっと偶然に立ち話をしたような他人にも
元気を与えるということだ。
だから人間は輝いてないといけないのだが、
それは簡単ではない。
</p>
</div>

<div class="col-md-4 hidden-xs">
<h2>オー!ファーザー</h2>
<p>
『人間というものは、自分が信じたいと思うものを信じるんだ』
</p>
</div>

</div>

</div>
</body>
</html>


<参考>

実践Webデザイン jQuery+CSSフレームワークでサクサクつくる「動き」と「仕掛け」

実践Webデザイン jQuery+CSSフレームワークでサクサクつくる「動き」と「仕掛け」