Authentication




Cancel OK
B!コメントする  2013-06-05 15:30:00 by old

Bootstrapのnavbarを常に上に表示する

Bootstrapはとっても素晴らしいんですが
たまにかゆいところに手が届かないことがあります。

レスポンシブなのでスマホにも便利なんですがヘッダーやフッターはスクロールせずに表示させたいときってあるじゃないですか。
縦長のサイトでわざわざボタン押すために上までまたスクロールするのも面倒だし。

なのでnavbarをスクロールしても上に表示されるようにCSSを付け足してやります。
まず適当なCSSファイルを作成します。

common.css


とか。
そしてその中に以下のものを放り込みます。

.headerArea
{
position: fixed !important;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100px;
z-index: 1000;
opacity: 0.9;
}
.footerArea
{
position: fixed !important;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}


※opacityはオマケです。要らない人は消してください

そしてこのnavbarを表示するファイルでCSSを読み込むようにheadタグあたりに追加します。

<link href="common.css" rel="stylesheet">


次にnavbarにクラス名を付け足します。

修正前
<div class="navbar navbar-inverse navbar-fixed-top">
修正後
<div class="navbar navbar-inverse navbar-fixed-top headerArea">


こうすることでnavbarは常に上に表示されるように固定されます。
大したことじゃないですけど。
フッターも同じように固定することが出来ます。

<footer class="footerArea">
<p>&copy; Company 2013</p>
</footer>


これでスマホで見てもメニューが常に表示されるように固定化されます。
もちろんbootstrapのnavbarだけじゃなく他にもいろいろ使えますけど。


Bootstrap  

  • コメント
  • コメントはまだありません