부트스트랩 3 Navbar(로고 포함)
텍스트 브랜딩 대신 이미지 로고가 있는 부트스트랩 3 기본 탐색바를 사용하고 싶습니다.다른 화면 크기에 문제를 일으키지 않고 이 작업을 수행할 수 있는 적절한 방법은 무엇입니까?일반적으로 요구되는 사항이라고 생각하지만, 아직 좋은 코드 샘플을 보지 못했습니다.모든 화면 크기에 허용 가능한 디스플레이를 갖추는 것 이외에 가장 중요한 요구 사항은 작은 화면의 메뉴 접기 가능성입니다.
navbar-brand 클래스가 있는 A 태그에 IMG 태그를 넣으려고 했는데 안드로이드 폰에서 메뉴가 제대로 작동하지 않았습니다.나는 navbar 수업의 높낮이도 늘려보았지만, 그것이 더 엉망이 되었습니다.
그런데 제 로고 이미지가 navbar의 높이보다 큽니다.
왜 다들 힘들게 하려고 하는 거지?물론, 이러한 접근 방식 중 일부는 효과가 있겠지만, 필요 이상으로 복잡합니다.
네, 먼저 탐색 막대에 맞는 이미지가 필요합니다.CSS 높이 속성을 통해 이미지를 조정하거나(폭을 축척할 수 있음), 적절한 크기의 이미지를 사용할 수 있습니다.여러분이 무엇을 하기로 결정하든 - 이것이 어떻게 보이는가는 여러분의 이미지 크기를 얼마나 잘 맞추느냐에 달려있습니다.
닻에 닻, 닻, 닻, 닻 등의 이미지를 붙이기를 .navbar-brand필요하지 . , 는 는 navbar-brand 스타일뿐만 에지트을다은합니다도 합니다.navbar-left클래스(풀-레프트와 동일하지만 탐색 막대에서 사용).당신이 정말로 필요한 것은 추가하는 것입니다.navbar-left.
<a href="#" class="navbar-left"><img src="/path/to/image.png"></a>
이미지 오른쪽에 표시되는 navbar 브랜드 항목을 사용하여 이 항목을 따를 수도 있습니다.
<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="Buy Sell Rent Everyting">
<img style="max-width:100px; margin-top: -7px;"
src="/img/transparent-white-logo.png">
</a>
</div>
많은 예를 들어 데모 완성
중요 업데이트: 12/21/15
현재 Mozilla에서 발견한 버그가 있습니다. 이 페이지의 많은 데모로 특정 브라우저 폭에서 navbar를 깨트리는 것입니다.기본적으로 모질라 버그는 navbar 브랜드 링크에 왼쪽과 오른쪽 패딩을 이미지 폭의 일부로 포함하고 있습니다.하지만 이 문제는 쉽게 해결할 수 있으며 테스트를 해보았는데 이 페이지에서 가장 안정적인 작업 사례라고 확신합니다.자동으로 크기가 조정되며 모든 브라우저에서 작동합니다.
를 사용하면 을 CSS에 하고 navbar 하면 를 하면 을 하고 .img-responsive의 로고가 . 로고가 자동으로 들어맞습니다.
.navbar-brand {
padding: 0px; /* firefox bug fix */
}
.navbar-brand>img {
height: 100%;
padding: 15px; /* firefox bug fix */
width: auto;
}
또 다른 옵션은 배경 이미지를 사용하는 것입니다.원하는 크기의 이미지를 사용한 다음 원하는 너비만 설정합니다.
.navbar-brand {
background: url(http://disputebills.com/site/uploads/2015/10/dispute.png) center / contain no-repeat;
width: 200px;
}
아래의 원본 답변(참고용)
사람들은 물건에 맞는 것에 대해 많이 잊어버리는 것 같습니다.개인적으로 이미지가 메뉴 크기에 맞춰 자동으로 조정되기 때문에 작업하기 가장 쉬운 것 같습니다.이미지에 객체 맞춤만 사용하면 메뉴 높이로 자동 크기가 조정됩니다.
.navbar-brand > img {
max-height: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
IE에서는 아직 이것이 작동하지 않는다고 지적했습니다.폴리필이 있지만, 다른 용도로 사용할 계획이 없다면 과도할 수 있습니다.IE의 향후 출시를 위해 객체 맞춤이 계획되고 있는 것처럼 보이기 때문에, 그런 일이 발생하면 모든 브라우저에서 작동할 것입니다.
그러나 부트스트랩의 .img-response 클래스가 표시되면 max-width는 이러한 이미지를 열에 넣거나 명시적 집합이 있는 것으로 가정합니다.즉, 100%는 구체적으로 부모 요소의 폭 100%를 의미합니다.
.img-responsive
max-width: 100%;
height: auto;
}
navbar와 함께 사용할 수 없는 이유는 parent(.navbar-brand)의 높이가 50px로 고정되어 있는데 폭이 설정되어 있지 않기 때문입니다.
우리가 그 논리를 취해 키를 기준으로 반응성 있게 뒤집으면 .navbar 브랜드의 높이로 확장되고 폭을 추가 및 자동 설정함으로써 비율에 따라 조정되는 반응성 이미지를 얻을 수 있습니다.
max-height: 100%;
width: auto;
보통 우리는 추가해야 할 것입니다.display:block;left가 이미 때문에, navbar-brand는 :left로 float:left로 , navbar-brand는 float:left로 되어 .
당신의 로고가 너무 작은 드문 상황에 직면할 수도 있습니다.고려하지 는.img-response근은를지만다할게는할다e는근s,은l만gmehsmeg-o "이 "키"을 "키"으로써 "키"에에 .navbar-brand > img당신은 그것이 축소될 뿐만 아니라 확장될 것이라고 확신할 수 있습니다.
max-height: 100%;
height: 100%;
width: auto;
그래서 이를 완성하기 위해 두 가지를 모두 합쳤는데 모든 브라우저에서 완벽하게 작동하는 것 같습니다.
<style type="text/css">
.navbar-brand>img {
max-height: 100%;
height: 100%;
width: auto;
margin: 0 auto;
/* probably not needed anymore, but doesn't hurt */
-o-object-fit: contain;
object-fit: contain;
}
</style>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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" href="http://disputebills.com"><img src="http://disputebills.com/site/uploads/2015/10/dispute.png" alt="Dispute Bills"></a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
데모 http://codepen.io/bootstrapped/pen/KwYGwq
당신의 질문이 흥미롭긴 하지만 그것에 대한 답이 하나 있을 것이라고는 기대하지 않습니다.질문이 너무 넓은지도 모르겠네요.해결 방법은 탐색 모음의 다른 컨텐츠(항목 수), 로고 크기, 로고가 반응하는지 여부 등에 따라 달라집니다.a(navbar 브랜드 포함)에 로고를 추가하는 것은 좋은 출발점인 것 같습니다.navbar 브랜드 클래스를 사용해야 하는데 이렇게 하면 15픽셀의 패딩(위/아래)이 추가되기 때문입니다.
저는 이 설정을 300x150 픽셀의 로고로 http://getbootstrap.com/examples/navbar/ 에서 테스트합니다.
전체 화면 > 1200:
768 ~ 992 픽셀(메뉴가 접히지 않음):
<768 (메뉴가 접힘)
저는 미적인 측면 외에 기술적인 문제를 발견하지 못했습니다.작은 화면에서는 큰 로고가 겹쳐지거나 뷰포트가 끊어질 수 있습니다.768에서 992 픽셀 사이의 화면도 콘텐츠가 한 줄에 들어가지 않을 때 다른 문제가 발생합니다. 예를 들어 https://github.com/bassjobsen/jamedo-bootstrap-start-theme/issues/18 을 참조하십시오.
기본 navbar는 기본 navbar 예제는 하단 마진을 30px로 추가하여 navbar의 내용이 페이지의 내용과 겹치지 않도록 합니다.(navbar의 높이가 달라지는 경우 고정된 navbar에 문제가 발생합니다.)
다양한 화면 크기에서 navbar를 필요에 맞게 조정하려면 CSS 및 미디어 쿼리가 필요합니다.질문의 범위를 좁히려고 노력해보세요. 즉, 안드로이드에서 발견한 문제에 대해 설명해주세요.
update는 http://bootply.com/77512 을 참조하십시오.
전화기와 같은 작은 화면에서는 축소된 메뉴가 로고 위에 나타납니다.
코드에 있는 버튼과 로고, 먼저 로고를 바꿔치기(float 설정: 로고에 왼쪽)
메뉴 항목을 상단 외에는 정렬할 방법이 없습니다.
을 margin-top위해서.navbar-collapse ul높이를 뺀 높이 - 높이/ 합니다. 로고 높이에서 navbar 높이를 뺀 값을 사용하여 아래쪽 또는 (로고 높이 - navbar 높이) / 2에서 가운데로 정렬합니다.
기본 높이(50px)보다 큰 로고가 있는 부트스트랩 탐색바를 만드는 방법:
로고 100px x 100px, 표준 CSS 예:
로고의 높이 및 (위쪽 추가 + 아래쪽 추가)를 계산합니다.여기 120px (높이 100px + 패딩 상의(10px) + 패딩 하의(10px))
부트스트랩/사용자 지정으로 이동합니다.navbar 높이 50px > 120px (50 + 70), navbar - collapse - max - height를 340px ~ 410px (340 + 70)로 대신 설정합니다.CSS 다운로드.
이 예제에서는 이 navbar를 사용합니다.navbar 브랜드에서:
<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 {padding: 10px; }
다른 사이즈에 적합합니다.
마침내 이와 같은 문제가 해결되었습니다. 해결 방법은 다음과 같습니다. 저는 세 가지 주요 브라우저 모두에서 제 사이트에서 테스트했습니다.Chrome, Firefox, Internet Explorer.
우선 텍스트 기반 로고를 사용하지 않는 경우 "navbar-brand"를 완전히 제거하십시오. 이 특정 클래스가 붕괴된 nav menu를 두 배로 증가시키는 주요 원인임을 알게 되었기 때문입니다.
나를 올바른 방향으로 인도해 준 것에 대해 user317032에게 소리칩니다.
맞춤형 반응형 이미지 컨테이너를 만들어야 해요, 제가 '로고'라고 불렀거든요.
부트스트랩 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 부분에서 제 면도기 구문을 꼭 삭제해주시기 바랍니다.당신의 문제가 해결되면 저에게 알려주세요.
편집: 죄송합니다. navbar 높이 문제를 놓쳤습니다.몇 가지 방법이 있습니다. 개인적으로 부트스트랩 LESS를 적절한 navbar 높이로 컴파일합니다. 목적상 70px를 사용하고 이미지 높이는 68px입니다.두 번째 방법은 bootstrap.css 파일 자체에서 ".navbar"를 검색하고 min-height:를 로고 높이로 변경하는 것입니다.
제 해결책은 img 태그에 cs "display: inline-block"을 추가하는 것입니다.
<img style="display: inline-block; height: 30px; margin-top: -5px">
데모: jsfiddle
한 다음 img-response 를 를 합니다 한 합니다에 합니다.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%;
}
코드는 다음과 같이 사용해야 합니다.
<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="logo" rel="home" href="#" title="Buy Sell Rent Everyting">
<img style=""
src="/img/transparent-white-logo.png">
</a>
</div>
태그의 클래스는 navbar 브랜드가 아닌 "logo"여야 합니다.
로고의 높이에 따라 달라집니다.
<a>이므로 navbar를 하면 20m³입니다. 그래서 당신이 지정한다면.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>
Quick Fix : 사용할 클래스를 만듭니다.logo그리고 설정합니다.height28px에서 잘 합니다. 이 기능은 모든 장치에서 탐색바와 잘 작동합니다."WELL이라고 말한 을 주목하세요. "WELL" "Well"이라고요.
.logo {
display:block;
height:28px;
}
제 접근 방식은 전화기, 태블릿, 데스크탑, 대형 데스크탑용으로 크기가 다른 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 스프라이트 기술을 사용하면 페이지를 인쇄할 때 로고가 인쇄되지 않을 가능성이 있고 위의 코드가 더 우수해질 가능성이 있습니다.
부트스트랩3에서는 CSS를 추가할 필요가 없습니다.추가하고 싶지 않다면요이것은 로고를 왼쪽에 놓고 오른쪽에 링크하는 제 코드입니다.이 내비게이션은 반응이 좋습니다.적합하다고 판단되는 대로 변경합니다.
HTML:
<nav class="navbar navbar-expand-lg navbar-light fixed-top" style="background-color:white;">
<div class="container">
<a class="navbar-brand" href="#"><img style=" width: 150px;" src="image.jpg" alt="Image text"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">Projects</a></li>
<li class="nav-item"><a class="nav-link" href="#">Blog</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
저는 CSS 배경 속성을 통해서도 구현합니다.너비 값에 상관없이 건강하게 작동합니다.
.navbar-brand{
float:left;
height:50px;
padding:15px 15px;
font-size:18px;
line-height:20px;
background-image: url("../images/logo.png");
background-repeat: no-repeat;
background-position: left center
}
또 다른 접근 방식은 Bootstrap의 내장 클래스를 다음을 구현하는 것입니다..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높이가 이미 설정되어 있기 때문에 폭.
저도 같은 문제가 있었습니다.이렇게 풀었어요.
<a href="#" class="btn btn-link navbar-btn">
<img class="img-responsive" src="#">
</a>
navbar 브랜드 클래스가 없습니다.결과물은 navbar에 맞는 로고 사진처럼 보이며 링크처럼 작동합니다.또한 메뉴 항목은 navbar-right 클래스를 사용하여 로고 아래로 넘어가지 않도록 하는 것을 추천합니다.
<div class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav" role="navigation">
<li><a href="#">Item1</a></li>
<li><a href="#">Item2</a></li>
</ul>
</div>
을 합니다에 다음 합니다..navbar-brand급
.navbar-brand
{
padding: 0px; // this allows the image to occupy all the padding space of the navbar--brand
}
.navbar-brand > img
{
height: 100%; // set height to occupy full height space on the navbar-brand
width: auto; // width should be auto to allow img to scale accordingly
max-height: 100%; // optional
margin: 0 auto; // optional
}
이건 너무 단순한 것 같은데, 제가 navbar 브랜드 라인을 베껴서 이미지와 텍스트 두 가지가 있습니다.
<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>
그리고 navbar(높이의 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;
}
이 코드는 툴바에 자동 너비와 함께 브랜드 중심을 표시해야 할 경우 완벽하게 작동합니다.이미지 파일을 올바른 경로에서 가져오는 Wordpress 기능이 포함되어 있습니다.
<a class="navbar-brand page-scroll" rel="home"
href="#page-top" title="Title">
<img style="height: 100%; width: auto;"
src="<?php echo get_template_directory_uri();?>/img/logo.png">
나의 작동 코드 - 부트스트랩 3.0.3. navbar-limined, hidden-limined original 로고 이미지.
<a class="navbar-brand hidden-xs" href="<?=$g4['path']?>/">
<img src="<?=$g4[path]?>/images/logo_opencode.gif" align=absmiddle alt="brand logo">
</a>
<a class="navbar-brand navbar-toggle" href="<?=$g4['path']?>/" style="border:0;margin-bottom:0;">
<img src="<?=$g4[path]?>/images/logo_opencode.gif" alt="brand logo" style="width:120px;">
</a>
아래와 같은 @media 쿼리를 사용해 볼 수 있습니다.
먼저 로고 클래스를 추가한 다음 @media를 사용하여 장치 크기당 로고 높이와 너비를 지정합니다.아래 예에서 최대 너비가 320px인 기기를 대상으로 하고 있습니다(아이폰). 최적의 핏을 찾을 때까지 가지고 놀 수 있습니다.테스트하기 쉬운 방법:검사 요소와 함께 크롬 또는 파이어폭스를 사용합니다.브라우저를 최대한 축소합니다.지정한 @media max width를 기준으로 로고 크기 변경을 관찰합니다.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>
제 경우에는 다른 답변을 하지 못했고(아마 지능 테스트를 통과하지 못했을 것입니다), 몇 가지 실험 후에는 이것이 제가 사용하고 있는 것입니다(부트스트랩 기본값에 매우 가깝다고 생각합니다).
<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>꼬리표. 거기에.@Html.ActionLink(...)적절한 것으로 교체하기만 하면 됩니다.<a>꼬리표. 똑같은 위치에서@Url.Action(...)적절한 URL로 바꿉니다(아니오).<a>태그(tag)를 입력합니다.
이것은 의미론적인 것이 아니라 그냥 기존의 것을 사용합니다.a요소, 배경 이미지를 설정한 다음 @2x 해상도, 화면 크기 감소 등을 위해 여러 가지 변형을 만듭니다.
그러면, 당신은 사용할 수 있습니다..text-hide예전 방식으로 페이지에 글을 좀 볼 수 있는 수업.이미지를 적절하게 사용하지는 않지만 단순하고 효과적입니다.
다음은 텍스트 교체를 위한 도우미 클래스 링크입니다.
http://getbootstrap.com/css/ #http-graphics
이 질문에 대한 가장 쉽고 좋은 답은 로고에 따라 최대 너비와 높이를 설정하는 것입니다. 이미지의 높이는 최대 50px이지만 200px 이하가 됩니다.
<a href="index.html">
<img src="imgs/brand-w.png" style="max-height:50px;max-width:200px;">
</a>
이것은 당신의 로고 사이즈와 당신이 가지고 있는 nav bar 아이템에 따라 다릅니다.
<header class="navbar navbar-inverse header-outer" role="banner">
<div class="container form-inline">
<img src="@Url.Content(" ~/Content/img/Logo-Sample.png ")" alt="Image" id="logo" class="img-responsive pull-left" />
<div class="pull-right padding-top">
<form class="hidden-xs" role="form">
<div class="form-group" style="padding-left:10px">
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Username">
</div>
<div class="form-group">
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
</div>
<div class="form-group navbar-remember">
<label class="white-font">
<input type="checkbox" class="white-font"> Remember me
</label>
</div>
<button type="button" class="btn btn-primary form-group" title="Sign In">Sign In</button>
</form>
</div>
</div>
</header>
코드를 스스로 이해해주세요 :D 이것은 제 초안 코드이고 이미 작동중입니다 :) 여기 스크린샷입니다.
텍스트 브랜딩 대신 아래 코드와 같이 두 줄로 나누어 줬습니다.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;
}
내 암호가 당신 문제를 해결해준다면, 난 기뻐요...
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<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>
<a class="navbar-brand" href="Default.aspx"> <span> <img alt="Logo" src="Images/shopify-bag.png"height="35" width="40"/></span> Shopping GO</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right"></ul>
//코드 앞에 부트스트랩을 추가하는 것을 잊지 마십시오.
언급URL : https://stackoverflow.com/questions/18474564/bootstrap-3-navbar-with-logo
'programing' 카테고리의 다른 글
| json 또는 html 파일을 사용하여 jQuery ajax를 사용하여 테이블 자동 새로 고침/업데이트 (0) | 2023.09.10 |
|---|---|
| MySql 경고 트래핑 (0) | 2023.09.10 |
| 필드를 증가시킬 때 MySQL 데이터베이스에 레이스 조건이 없는지 확인하는 방법은 무엇입니까? (0) | 2023.09.10 |
| 모든 개발자가 데이터베이스에 대해 알아야 할 사항은 무엇입니까? (0) | 2023.09.10 |
| 셀러리로 이미 실행 중인 작업을 취소하시겠습니까? (0) | 2023.09.10 |