트위터 부트 스트랩의 탐색 모음 색상
Twitter Bootstrap 2.0.2의 탐색 표시 줄의 배경색을 어떻게 변경합니까? 배경색을 반영하기 위해 탐색 모음의 모든 요소의 색상을 변경하려면 어떻게해야합니까?
.navbar-innerbootstrap.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 와 같은 도구를 활용 하고 모든 브라우저에 대해 고유 한 그라디언트 색상을 만들고 원래 색상을 자신의 색상으로 바꿀 수 있습니다.
주석에서 언급했듯이 스타일 시트가 업데이트되면 (현재 버전은 v2.0.2 ) 모든 변경 사항이 손실되므로 bootstrap.css 스타일 시트를 직접 수정하지 않는 것이 좋습니다. bootstrap.css 스타일 시트와 함께 자신의 스타일 시트 내에서 변경 한 내용 그러나 모든 브라우저에서 일관성을 유지하려면 적절한 속성을 모두 덮어 써야합니다.
bootstrap의 주제를 다루는 훌륭한 자료는 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를 원하는 색상으로 설정할 수 있습니다.
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
Once you have done this, then go to the less folder in the directory and then edit the file variables.less and you can change a lot of variables according to what you need including the color of the navigation bar
@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%);
Once you have done this, go to your bootstrap directory and run the command make.
If you are using LESS, you can use Mixins for less code. Here I will add a gradient, border, and border-radius:
.navbar-inner {
#gradient > .vertical(#ffffff, #ECECEC);
border: #E2E2E2;
.border-radius(6px);
}
*If you are using the rails gem, twitter-bootstrap-rails, I do this directly in the file bootstrap_and_overrides.css.less*
that is what i do
.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);
}
it works well for all navigator you can see demo here http://caverne.fr on the top
In bootstrap.css line 4784 we see:
.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);
}
You need to remove all the 'background-image' property declarations to get the desired effect.
Wouldn't occam's razor say to just do this until you need something more complex? It's a bit of a hack, but may suit the needs of someone that wants a quick fix.
.navbar-default .container-fluid{
background-color:#62ADD7; // Change the color
margin: -1px -1px 10px -1px; // Get rid of the border
}
If you are using the LESS or SASS Version of the Bootstrap. The most efficient way is to change the variable name, in the LESS or SASS file.
$navbar-default-color: #FFFFFF !default;
$navbar-default-bg: #36669d !default;
$navbar-default-border: $navbar-default-bg !default;
This by far the most easiest and the most efficient way to change the Bootstraps Navbar. You need not write overrides, and the code remains clean.
You can customize your own version on the Bootstrap official website.
I actually just overwrite anything I want to change in the site.css, you should load the site.css after bootstrap so it will overwrite the classes. What I have done now is just made my own classes with my own little bootstrap theme. Little things like this
.navbar-nav li a{
color: #fff;
font-size: 15px;
margin-top: 9px;
}
.navbar-nav li a:hover{
background-color: #18678E;
height: 61px;
}
I also changed the likes of the validations errors the same way.
참고URL : https://stackoverflow.com/questions/9869610/navbar-color-in-twitter-bootstrap
'development' 카테고리의 다른 글
| Await Promise.all ()과 다중 대기의 차이점은 무엇입니까? (0) | 2020.07.26 |
|---|---|
| switch 문 안에 변수 선언하기 (0) | 2020.07.26 |
| 기본적으로 Vim 구문 강조 표시 사용 (0) | 2020.07.26 |
| app-debug.apk와 app-debug-unaligned.apk의 차이점 (0) | 2020.07.26 |
| ElasticSearch로 단어의 일부를 검색하는 방법 (0) | 2020.07.26 |