navbar 상단의 Twitter-Bootstrap-2 로고 이미지
누군가가 탐색 모음 상단에 로고 이미지를 배치하는 방법을 제안 할 수 있습니까? 내 마크 업 :
<body>
<a href="index.html"> <img src="images/57x57x300.jpg"></a>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
57x57x300.jpg가 navbar 아래에 표시되므로 작동하지 않습니다.
또한 이미지 a컨테이너에 "navbar-brand"클래스를 추가 해야하며 다음 .navbar-inner과 같이 컨테이너 안에 포함해야합니다 .
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="navbar-brand" href="index.html"> <img src="images/57x57x300.jpg"></a>
</div>
</div>
</div>
아래와 같이 bootstrap.css 또는 새 CSS 파일에서 브랜드 클래스를 덮어 씁니다.
.brand
{
background: url(images/logo.png) no-repeat left center;
height: 20px;
width: 100px;
}
HTML은 다음과 같아야합니다.
<div class="container-fluid">
<a class="brand" href="index.html"></a>
</div>
navbar-fixed-top클래스 를 제거해야합니다. 그렇지 않으면 navbar가 로고를 원하는 페이지 상단에 고정되어 있습니다.
navbar 안에 로고를 배치하려면 :
Navbar 높이 ( @navbarHeightLESS 변수로 설정 )는 40px기본적으로입니다. 로고가 안쪽에 맞아야합니다. 그렇지 않으면 먼저 navbar를 더 높게 만들어야합니다.
그런 다음 brand클래스를 사용하십시오 .
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a href="/" class="brand"><img alt="" src="/logo.gif" /></a>
</div>
</div>
</div>
로고가보다 높으면 20px스타일 시트도 수정해야합니다.
LESS에서 그렇게하는 경우 :
.navbar .brand {
@elementHeight: 32px;
padding: ((@navbarHeight - @elementHeight) / 2 - 2) 20px ((@navbarHeight - @elementHeight) / 2 + 2);
}
@elementHeight 이미지 높이로 설정해야합니다.
패딩 계산은 Twitter Bootstrap LESS에서 가져옵니다-https: //github.com/twitter/bootstrap/blob/v2.0.4/less/navbar.less#L51-52
또는 패딩 값을 직접 계산하고 순수 CSS를 사용할 수 있습니다.
이것은 Twitter Bootstrap 버전 2.0.x에서 작동하며 2.1에서도 작동해야하지만 패딩 계산이 약간 변경되었습니다 : https://github.com/twitter/bootstrap/blob/v2.1.0/less/navbar.less#L50
이 코드를 부트 스트랩 3.2.0의 navbar에 사용합니다. 이미지의 높이는 최대 50px이어야합니다. 그렇지 않으면 표준 bs navbar가 블리드됩니다.
이미지에 패딩을 도입하므로 의도적으로 class = 'navbar-brand'를 사용하지 않습니다.
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<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="" href="/"><img src='img/anyWidthx50.png'/></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Active Link</a></li>
<li><a href="#">More Links</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</div>
If you do not increase the height of navbar..
.navbar .brand {
position: fixed;
overflow: visible;
padding-left: 0;
padding-top: 0;
}
see http://jsfiddle.net/petrfox/S84wP/
참고URL : https://stackoverflow.com/questions/9893723/twitter-bootstrap-2-logo-image-on-top-of-navbar
'Nice programing' 카테고리의 다른 글
| AngularJS의 요소에 대한 지시문 템플릿 고유 ID (0) | 2020.11.10 |
|---|---|
| Firefox와 Opera가 디스플레이 내부의 최대 너비를 무시하는 이유 : 테이블 셀? (0) | 2020.11.10 |
| C ++의 효율적인 스레드로부터 안전한 싱글 톤 (0) | 2020.11.10 |
| 바로 가기 키로 Chrome 콘솔을 지우는 방법은 무엇입니까? (0) | 2020.11.10 |
| catch 및 finally에서 return 문 동작 (0) | 2020.11.10 |