web-dev-qa-db-ja.com

Bootstrapにヘッダーを追加する

私はBootstrapにかなり慣れており、ナビゲーションバーの上にヘッダーを配置するのに問題があります。同時に、現在のWebサイトのヘッダーの高さが70ピクセル以上である必要があります。携帯電話で見たときに応答性が機能することを確認する必要があります。現在のコードは

<div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="brand" href="#index.html"><img src="img/navigationlogo.png" alt="Home"/></a>

          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="active">
                <a href="#index.html"><img src="img/Home_Button.png" width="24" height="21" alt="Home"/></a>
              </li>
</ul>
          </div>
        </div>
      </div>
    </div>

私ができると思っていたのは追加することです

<header></header>

ナビゲーションバーの上に私のロゴを配置します。

誰かが私にこれをどのように達成できるかについてのCSS付きのサンプルコードを提供してくれますか？モバイルデバイスから見た場合に応答性の高いナビゲーションが機能するように、最小限のパディングを維持する必要があると聞きました。

html5css3twitter-bootstraphtml5boilerplate
8
Justin Russo

ヘッダータグを追加し、"page-header"クラス。これはあなたのウェブサイトに素敵な小さなヘッダーを与えます。

14
user2426014

Bootstrapの標準ヘッダーについて疑問がある場合は、サブヘッドを追加する方法にも注意する必要があります。

<div class="page-header">
  <h1>Your mother was a hamster 
      <small>and your father smelt of elderberries</small>
  </h1>
</div>

結果：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="page-header">
  <h1>Your mother was a hamster
    <small>and your father smelt of elderberries</small>
  </h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>
2
Jon Crowell

画像の幅が1000pxであると想定して、次の方法でdivまたはhtml5ヘッダーブロックをナビゲーションバーの上に配置できます。

<header>
<img src="http://placehold.it/1000x70"/> 
</header>

上記のコードの後に​​ナビゲーションバーを配置できます。

あなたはjsfiddleを見ることができます デモ

1
Shail