Twitter Bootstrap의 navbar 색상

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 및 부트 스트랩 사용에 대한 링크 :

• 적은 비용으로 부트 스트랩 사용
• Lessc.org

"덜"배우거나 제대로 할 시간이 없다면 여기 더러운 해킹이 있습니다.

부트 스트랩 내비게이션 바 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를 원하는 색상으로 설정할 수 있습니다.

http://twitter.github.com/bootstrap/customize.html

저는 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 파일에서 직접 수행합니다. *

그게 내가하는 일이야

.navbar-inverse .navbar-inner {
  background-color: #E27403; /* it's flat*/
 background-image: none;
}

.navbar-inverse .navbar-inner {
  background-image: -ms-linear-gradient(top, #E27403, #E49037);
  background-image: -webkit-linear-gradient(top, #E27403, #E49037);
  background-image: linear-gradient(to bottom, #E27403, #E49037);
}

모든 탐색기에서 잘 작동합니다. 여기 에서 데모를 볼 수 있습니다. http://caverne.fr

bootstrap.css 라인 4784에서 다음을 볼 수 있습니다.

.navbar-inverse .navbar-inner {
  background-color: #FFFFFFF;
  background-image: -moz-linear-gradient(top, #222222, #111111);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#222222), to(#111111));
  background-image: -webkit-linear-gradient(top, #222222, #111111);
  background-image: -o-linear-gradient(top, #222222, #111111);
  background-image: linear-gradient(to bottom, #222222, #111111);
  background-repeat: repeat-x;
  border-color: #252525;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff222222', endColorstr='#ff111111', GradientType=0);
}

원하는 효과를 얻으려면 모든 'background-image'속성 선언을 제거해야합니다.

occam의 면도칼은 더 복잡한 것이 필요할 때까지 이렇게하도록 말하지 않습니까? 약간의 해킹이지만 빠른 수정을 원하는 사람의 요구에 적합 할 수 있습니다.

.navbar-default .container-fluid{
    background-color:#62ADD7; // Change the color
    margin: -1px -1px 10px -1px; // Get rid of the border
}

LESS 또는 SASS 버전의 부트 스트랩을 사용하는 경우. 가장 효율적인 방법은 LESS 또는 SASS 파일에서 변수 이름을 변경하는 것입니다.

$navbar-default-color:              #FFFFFF !default;
$navbar-default-bg:                 #36669d !default;
$navbar-default-border:             $navbar-default-bg !default;

이것은 Bootstraps Navbar를 변경하는 가장 쉽고 효율적인 방법입니다. 재정의를 작성할 필요가 없으며 코드는 깨끗하게 유지됩니다.

Bootstrap 공식 웹 사이트 에서 자신의 버전을 사용자 정의 할 수 있습니다 .

실제로 site.css에서 변경하려는 모든 것을 덮어 씁니다. 부트 스트랩 후에 site.css를로드해야 클래스를 덮어 씁니다. 내가 지금 한 일은 내 자신의 작은 부트 스트랩 테마로 내 자신의 수업을 만드는 것입니다. 이런 작은 것들

.navbar-nav li a{
    color: #fff;
    font-size: 15px;
    margin-top: 9px;
}
.navbar-nav li a:hover{

    background-color: #18678E;
    height: 61px;
}

또한 같은 방식으로 유효성 검사 오류를 변경했습니다.