Bootstrap 3 の既定の navbar を、テキスト ブランドの代わりにイメージ ロゴと共に使用したいと考えています。さまざまな画面サイズで問題を引き起こさずにこれを行う適切な方法は何ですか? これは一般的な要件だと思いますが、適切なコード サンプルはまだ見たことがありません。すべての画面サイズで許容可能な表示を行うこと以外の重要な要件は、小さな画面でのメニューの折りたたみ可能性です。
navbar-brand クラスを持つ A タグ内に IMG タグを挿入しようとしましたが、Android フォンでメニューが正しく機能しませんでした。また、navbar クラスの高さを上げようとしましたが、それはさらにうまくいきませんでした。
ちなみに私のロゴ画像はナビゲーションバーの高さよりも大きいです。
なぜ誰もが難しい方法でそれをやろうとしているのでしょうか? 確かに、これらのアプローチのいくつかは機能しますが、必要以上に複雑です。
OK、まず、ナビゲーションバーに収まる画像が必要です。css の高さ属性を使用して画像を調整するか (幅をスケーリングできるようにする)、または適切なサイズの画像を使用することができます。何をするにしても、これがどのように見えるかは、画像のサイズをどれだけうまく調整するかによって異なります。
何らかの理由で、誰もが でアンカー内に画像を貼り付けたいと考えていますがnavbar-brand、これは必要ありません。 navbar-brand画像やクラスに必要のないテキスト スタイルを適用しますnavbar-left(プルレフトと同様ですが、ナビゲーション バーで使用します)。本当に必要なのは、追加することだけnavbar-leftです。
<a href="#" class="navbar-left"><img src="/path/to/image.png"></a>
これに続いて、画像の右側に表示される navbar-brand アイテムを使用することもできます。
ロゴ 100px x 100px、標準 CSS の例:
ロゴの高さと (上部パディング + 下部パディング) を計算します。ここでは120px (高さ 100px + 上部パディング (10px) + 下部パディング (10px))
ブートストラップ/カスタマイズに移動します。navbar の高さ50px > 120px (50 + 70) とnavbar-collapse-max-heightの代わりに 340px から410px (340 + 70) に設定します。cssダウンロード.
この例では、このnavbarを使用します。navbar -brand :
<div class="navbar-header">
...
</button>
<a class="navbar-brand myLogo" href="#">
<img src="yourLogo.jpg" />
</a>
</div>...
myLogoなどのクラスとimg (ロゴ) を追加します。
<a class="navbar-brand myLogo" href="#"><img src="yourLogo.jpg" /></a>.
CSSを追加
.myLogo { パディング: 10px; }
他のサイズに適しています。
これが私の解決策であり、Chrome、Firefox、および Internet Explorer の 3 つの主要なブラウザーすべてで自分のサイトでテストしました。
まず、テキスト ベースのロゴを使用していない場合は、「navbar-brand」を完全に削除します。この特定のクラスが、折りたたまれたナビゲーション メニューが 2 倍になる主な原因であることがわかったからです。
私を正しい方向に導いてくれたuser3137032に叫びます。
カスタムのレスポンシブ イメージ コンテナを作成する必要があります。私は「ロゴ」と呼んでいます。
ブートストラップ HTML マークアップは次のとおりです。
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="@Url.Action(" Index ", "Home ")" class="logo"><img src="~/resources/images/Logo_Concept.png" /></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
<a href="@Url.Action(" About ", "Home ")">
<i class="glyphicon glyphicon-info-sign"></i> About
</a>
</li>
<li>
<a href="@Url.Action(" Contact ", "Home ")">
<i class="glyphicon glyphicon-phone"></i> Contact
</a>
</li>
<li>
<a href="@Url.Action(" Index ", "Products ")">
<i class="glyphicon glyphicon-tag"></i> Products
</a>
</li>
</ul>
</div>
</div>
</div>
そしてCSSコード：
.logo img {
width: 100% \9; /*Force IE10 and below to size SVG images correctly*/
max-width: 100%;
}
@media (max-width:480px) {
.logo img {
width: 70% \9; /*Force IE10 and below to size SVG images correctly*/
max-width: 70% !important;
}
}
@media (max-width:400px) {
.logo img {
width: 75% \9; /*Force IE10 and below to size SVG images correctly*/
max-width: 75%;
}
}
@media (max-width:385px) {
.logo img {
width: 70% \9; /*Force IE10 and below to size SVG images correctly*/
max-width: 70%;
}
}
@media (max-width:345px) {
.logo img {
width: 65% \9; /*Force IE10 and below to size SVG images correctly*/
max-width: 65%;
}
}
@media (max-width:335px) {
.logo img {
width: 60% \9; /*Force IE10 and below to size SVG images correctly*/
max-width: 60%;
}
}
@media (max-width:325px) {
.logo img {
width: 55% \9; /*Force IE10 and below to size SVG images correctly*/
max-width: 55%;
}
}
@media (max-width:315px) {
.logo img {
width: 50% \9; /*Force IE10 and below to size SVG images correctly*/
max-width: 50%;
}
}
@media (max-width: x) の値は、ロゴ画像の幅によって異なる場合があります。私の場合は 368px です。ロゴのサイズによっては、パーセンテージも変更する必要がある場合があります。最初の @media クエリはしきい値で、私のものは画像の幅 (368px) + 折りたたまれたボタンのサイズ (44px) + 約 60px で、レスポンシブ画像のスケーリングを開始する場所である 480px になりました。
HTML 部分からかみそりの構文を必ず削除してください。それがあなたの問題を解決するかどうか私に知らせてください、それは私のものを修正しました。
編集：申し訳ありませんが、ナビゲーションバーの高さの問題を見逃しました. これにはいくつかの方法があります。個人的には、Bootstrap LESS を適切な navbar の高さでコンパイルします。私の目的では 70px を使用し、画像の高さは 68 px です。2 つ目の方法は、bootstrap.css ファイル自体で「.navbar」を検索し、min-height: をロゴの高さに変更することです。
img-responsive クラスを使用してから、a要素に最大幅を設定します。このような：
<nav class="navbar">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img class="img-responsive" src="mylogo.png">
</a>
</div>
</nav>
そしてCSS：
.navbar-brand {
max-width: 50%;
}
ロゴの高さによって異なります。
navbarのデフォルトの<a>高さは 20px なのでheight: 20px、ロゴで指定するとうまく配置されます。
ただし、ロゴとしては小さいので、私が選んだのは次のとおりです。
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" rel="home" href="#" title="Brand">
<img style="height: 30px; margin-top: -5px;"
src="/img/brand.png">
</a>
</div>
これにより、画像の高さが 30px になり、上部に負のマージンを追加して画像を垂直方向に揃えます (5px は、a のパディングと画像のサイズの差の半分です)。
<a>または、要素のパディングを変更することもできます。たとえば、次のようになります。
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" rel="home" href="#" title="Brand" style="padding-top: 10px; padding-bottom: 10px">
<img style="height: 30px;"
src="/img/transparent-white-logo.png">
</a>
</div>
私のアプローチは、次のように、電話、タブレット、デスクトップ、大型デスクトップ用に異なるサイズの 4 つの異なる画像を含めることですが、ブートストラップのレスポンシブ ユーティリティ クラスを使用して 1 つだけを表示することです。
<!--<a class="navbar-brand" href="<?php echo home_url(); ?>/"><?php bloginfo('name'); ?></a>-->
<a class="navbar-brand visible-xs" href="<?php echo home_url(); ?>/"><img src="/assets/logo-phone.png" alt="<?php bloginfo('name'); ?> Logo" /></a>
<a class="navbar-brand visible-sm" href="<?php echo home_url(); ?>/"><img src="/assets/logo-tablet.png" alt="<?php bloginfo('name'); ?> Logo" /></a>
<a class="navbar-brand visible-md" href="<?php echo home_url(); ?>/"><img src="/assets/logo-desktop.png" alt="<?php bloginfo('name'); ?> Logo" /></a>
<a class="navbar-brand visible-lg" href="<?php echo home_url(); ?>/"><img src="/assets/logo-large.png" alt="<?php bloginfo('name'); ?> Logo" /></a>
注: コメント行を提供されたコードに置き換えることができます。ワードプレスを使用していない場合は、php コードを置き換えます。
編集注 2: はい、これにより、ページをロードするときにサーバーにリクエストが追加され、少し遅くなる可能性がありますが、バックグラウンド CSS スプライト手法を使用すると、ページを印刷するときにロゴが印刷されず、上記のコードが取得される可能性がありますより良いSEO。
もう 1 つの方法は、Bootstrap の組み込み.text-hideクラスを と一緒に実装.navbar-brandして、ブランドのテキスト/コンテンツを背景画像に置き換えることです。
CSS:
.navbar-brand{
background: url(http://example.com/your-logo-here.png) center / contain no-repeat;
width: 200px;
}
HTML:
<a class="navbar-brand text-hide" href="#">Navbar Brand</a>
これは非常に一貫した方法であり、画像を中央に保ちます。画像のサイズを調整するには.navbar-brand、高さが既に設定されているため、幅を調整するだけです。
これは単純すぎるかもしれませんが、navbar-brand 行をコピーしただけなので、画像とテキストの 2 つがあります。
<a class="navbar-brand" href="index.php"><img class="img-responsive" src="images/my-icon.png" width="30" height="25" alt=" "></a>
<a class="navbar-brand" href="index.php">My Brand</a>
そして、ナビゲーションバーの内側に収まる画像を作成しました (高さの約 1/2)。
LESSを使用している場合、これは機能します：
@navbar-height: 150px;
@navbar-brand-vpadding: 10px;
.navbar-brand img {
height: @navbar-height - @navbar-brand-vpadding * 2;
position: absolute;
top: @navbar-brand-vpadding;
}
この質問に対する最も簡単で最良の答えは、ロゴに応じて最大幅と高さを設定することです。画像の高さは最大 50 ピクセルですが、長さは 200 ピクセルを超えません。
<a href="index.html">
<img src="imgs/brand-w.png" style="max-height:50px;max-width:200px;">
</a>
これは、ロゴのサイズとナビゲーション バーの項目によって異なります。
テキストブランディングを置き換える代わりに、以下のコードのように 2 つの行に分割しimg-responsive、画像にクラスを与えました......
<div class="collapse navbar-collapse navbar-ex1-collapse" style="background: #efefef; height:auto;">
<div class="container" style="margin-bottom:-1px;">
<div class="row">
<div class="col-md-3">
<div id="menubar-logo">
<a href="index.html"><img src="img/tl_logo.png" class="img-responsive" alt="Triple Luck IT Service Logo"></a>
</div>
</div>
<div class=" col-md-offset-3 col-md-6">
<ul class="nav navbar-nav">
<li><a href="index.php" class="active">Home</a></li>
<li><a href="about_us.php">About Us</a></li>
<li><a href="contact_us.php">Contact Us</a></li>
</ul>
</div>
</div>
<!-- end of "row" -->
</div>
<!-- end of "container" -->
</div>
<!-- end of "collapse" -->
さらに、次の css コードを追加しました.......
#menubar-logo img {
margin-top: 10px;
margin-bottom: 20px;
margin-right: 10px;
}
私のコードがあなたの問題を解決するなら、それは私の喜びです.....
以下のような @media クエリを使用してみてください。
最初にロゴ クラスを追加してから、@media を使用してデバイス サイズごとにロゴの高さと幅を指定します。以下の例では、最大幅が 320 ピクセル (iPhone) のデバイスをターゲットにしています。最適なサイズが見つかるまで、これをいじってみてください。テストする簡単な方法: chrome または Firefox を inspect 要素で使用します。ブラウザを可能な限り縮小します。指定した @media 最大幅に基づいて、ロゴのサイズが変化することを確認します。iPhone、Android デバイス、iPad などでテストして、目的の結果を取得します。
.logo {
height: 42px;
width: 140px;
}
@media (max-width:320px) {
.logo {
height: 33px;
width: 110px;
}
}
次のコードを試してください:
<style>
.navbar a.navbar-brand {padding: 9px 15px 8px; }
</style>
<a class="navbar-brand" href="#">
<img src="http://placehold.it/140x34/000000/ffffff/&text=LOGO" alt="">
</a>
私の場合、他の答えのいずれかを機能させることができず（おそらく知能テストに合格しなかった）、いくつかの実験の後、これが私が使用しているものです（これはBootstrapのデフォルトに非常に近いと思います）：
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-logo">
<a class="navbar-brand" rel="home" href="@Url.Action("Index", "Home")" title="Home">
<img src="~/Images/logo.png" class="img-responsive">
</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("Coaching", "Coaching", "Home")</li>
<li>@Html.ActionLink("Resources", "Resources", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
<li>@Html.ActionLink("Blog", "Blog", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
</ul>
</div>
</div>
</div>
そして、CSS ファイルに以下を追加しました。
.navbar-brand {
padding-top: 5px;
}
.navbar-collapse {
float: left;
}
.navbar-logo {
float: left;
}
タグ@Html.ActionLink()の Razor 構文であることに注意してください。適切なタグに置き換えて<a>ください。同様に、適切な URL に置き換えます (その場合はタグなし)。@Html.ActionLink(...)<a>@Url.Action(...)<a>
これはセマンティックではありませんが、既存のa要素を使用し、背景画像を設定してから、@ 2x 解像度、より小さい画面サイズなどの複数のバリエーションを作成します。
次に、このクラスを使用して.text-hide、昔ながらの方法でページ上のテキストを取得できます。画像の適切な使用法ではありませんが、シンプルで効果的です。
テキスト置換のヘルパー クラスへのリンクは次のとおりです。