Twitter Bootstrap 2.0.2의 navbar 배경색을 어떻게 변경할 수 있습니까? 배경색을 반영하기 위해 navbar의 모든 요소의 색상을 어떻게 변경할 수 있습니까?
답변
다음 .navbar-inner과 같이 bootstrap.css 스타일 시트를 수정하는 대신 자체 스타일 시트에서 대상 을 지정하여 클래스를 포함한 부트 스트랩 색상을 덮어 쓸 수 있습니다 .
.navbar-inner {
background-color: #2c2c2c; /* fallback color, place your own */
/* Gradients for modern browsers, replace as you see fit */
background-image: -moz-linear-gradient(top, #333333, #222222);
background-image: -ms-linear-gradient(top, #333333, #222222);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333333), to(#222222));
background-image: -webkit-linear-gradient(top, #333333, #222222);
background-image: -o-linear-gradient(top, #333333, #222222);
background-image: linear-gradient(top, #333333, #222222);
background-repeat: repeat-x;
/* IE8-9 gradient filter */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);
}모든 스타일을 자신의 스타일로 수정하면 예를 들어 다음과 같이 선택됩니다. 모든 그라디언트 효과를 제거하고 단색 검정색 배경색을 설정합니다.
.navbar-inner {
background-color: #000; /* background color will be black for all browsers */
background-image: none;
background-repeat: no-repeat;
filter: none;
}Colorzilla Gradient Editor 와 같은 도구를 활용 하고 모든 브라우저에 대해 자신 만의 그라디언트 색상을 만들고 원래 색상을 자신의 색상으로 바꿀 수 있습니다.
그리고 주석에서 언급했듯이 스타일 시트가 업데이트되면 모든 변경 사항이 손실되므로 bootstrap.css 스타일 시트를 직접 수정하지 않는 것이 좋습니다 (현재 버전은 v2.0.2 ) 따라서 모든 항목을 포함하는 것이 좋습니다. 자신의 스타일 시트 내에서 변경 사항을 bootstrap.css 스타일 시트와 함께 사용합니다. 그러나 브라우저간에 일관성을 유지하려면 적절한 속성을 모두 덮어 써야합니다.
답변
테마 부트 스트랩 방법을 볼 수있는 훌륭한 리소스는 bootswatch.com 입니다. 멋진 예제와 코드도 보여줍니다. 간단히 말해 lessc를 사용하여 bootstrap.css를 새 color-theme.css로 다시 컴파일합니다. 그들의 접근 방식의 좋은 점은 부트 스트랩 위에 빌드하는 것이므로 부트 스트랩이 업데이트되면 다시 컴파일하면됩니다.
lessc 및 부트 스트랩 사용에 대한 링크 :
답변
“덜”배우거나 제대로 할 시간이 없다면 여기 더러운 해킹이 있습니다.
부트 스트랩 내비게이션 바 HTML을 렌더링하는 곳에 이것을 추가하세요. 필요에 따라 색상을 업데이트하세요.
<style type="text/css">
.navbar-inner {
background-color: red;
background-image: linear-gradient(to bottom, blue, green);
background-repeat: repeat-x;
border: 1px solid yellow;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
min-height: 40px;
padding-left: 20px;
padding-right: 20px;
}
.dropdown-menu {
background-clip: padding-box;
background-color: red;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 6px 6px 6px 6px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
display: none;
float: left;
left: 0;
list-style: none outside none;
margin: 2px 0 0;
min-width: 160px;
padding: 5px 0;
position: absolute;
top: 100%;
z-index: 1000;
}
.btn-group.open .btn.dropdown-toggle {
background-color: red;
}
.btn-group.open .btn.dropdown-toggle {
background-color:lime;
}
.navbar .nav li.dropdown.open > .dropdown-toggle,
.navbar .nav li.dropdown.active > .dropdown-toggle,
.navbar .nav li.dropdown.open.active > .dropdown-toggle {
color:white;
background-color:Teal;
}
.navbar .nav > li > a {
color: white;
float: none;
padding: 10px 15px;
text-decoration: none;
text-shadow: 0 0px 0 #ffffff;
}
.navbar .brand {
display: block;
float: left;
padding: 10px 20px 10px;
margin-left: -20px;
font-size: 20px;
font-weight: 200;
color: white;
text-shadow: 0 0px 0 #ffffff;
}
.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover {
color: white;
text-decoration: none;
background-color: transparent;
}
.navbar-text {
margin-bottom: 0;
line-height: 40px;
color: white;
}
.dropdown-menu li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 20px;
color: white;
white-space: nowrap;
}
.navbar-link {
color: white;
}
.navbar-link:hover {
color: white;
}
</style>답변
사용자 지정 버전의 부트 스트랩을 다운로드하고 @navbarBackground를 원하는 색상으로 설정할 수 있습니다.
답변
저는 Bootstrap 버전 3.2.0을 사용하고 있는데 .navbar-inner가 더 이상 존재하지 않는 것처럼 보입니다.
.navbar-inner 재정의를 제안하는 솔루션은 저에게 효과가 없었습니다. 색상은 동일하게 유지되었습니다.
색상은 아래와 같이 .navbar를 덮어 쓸 때만 변경되었습니다.
.navbar {
background-color: #A4C8EC;
background-image: none;
}답변
현재 동일한 작업을 수행하는 가장 좋은 방법은 다음을 사용하여 LESS 명령 줄 컴파일러를 설치하는 것입니다.
$ npm install -g less jshint recess uglify-js이 작업을 마치면 디렉토리의 less 폴더로 이동 한 다음 variables.less 파일을 편집하고 탐색 모음의 색상을 포함하여 필요한 항목에 따라 많은 변수를 변경할 수 있습니다.
@navbarCollapseWidth: 979px;
@navbarHeight: 40px;
@navbarBackgroundHighlight: #ffffff;
@navbarBackground: darken(@navbarBackgroundHighlight, 5%);
@navbarBorder: darken(@navbarBackground, 12%);
@navbarText: #777;
@navbarLinkColor: #777;
@navbarLinkColorHover: @grayDark;
@navbarLinkColorActive: @gray;
@navbarLinkBackgroundHover: transparent;
@navbarLinkBackgroundActive: darken(@navbarBackground, 5%);이 작업을 마치면 부트 스트랩 디렉토리로 이동하여 make 명령을 실행합니다.
답변
LESS를 사용하는 경우 더 적은 코드로 Mixins를 사용할 수 있습니다. 여기에 그라디언트, 테두리 및 테두리 반경을 추가합니다.
.navbar-inner {
#gradient > .vertical(#ffffff, #ECECEC);
border: #E2E2E2;
.border-radius(6px);
}* rails gem, twitter-bootstrap-rails를 사용하는 경우 bootstrap_and_overrides.css.less 파일에서 직접 수행합니다. *
