米泥棒: Bootstrapでヘッダのナビゲーションを画面上部に固定するには

2013年4月13日土曜日

Bootstrapでヘッダのナビゲーションを画面上部に固定するには

画面上部にナビゲーション領域を固定したり、デスクトップとスマホ用のコンテンツを一つのHTMLで表現したりするためによく使うテンプレートをここにコピペしておきます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8" />
    <link rel="stylesheet" href="/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/css/bootstrap-responsive.min.css" />
<title>Welcome!</title>

<link rel="icon" type="image/x-icon" href="/favicon.ico" />
</head>
<body>
<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <a class="btn btn-navbar pull-left" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            </a>
            <a class="brand" href="#">Your Brand</a>
            <div class="nav-collapse">
                <ul class="nav">
                  <li class="active"><a href="#">Home</a></li>
                </ul>
            </div><!--/.nav-collapse -->
        </div>
    </div>
</div>
<div class="container">

</div>
<script src="/app_dev.php/js/jquery.min.js"></script>
<script src="/app_dev.php/js/bootstrap.min.js"></script>
</body>
</html>

米泥棒

2013年4月13日土曜日

Bootstrapでヘッダのナビゲーションを画面上部に固定するには

0 件のコメント:

コメントを投稿