2012-10-15 4 views
7

twitter-bootstrap .navbar-inverse을 추가하여 탐색 표시기를 수정할 수 있습니다.twitter-bootstrap에서 navbar-inverse의 CSS를 적용하는 방법

<div class="navbar navbar-inverse"> 
    ... 
</div> 

내가하려는 일은 웹 사이트의 테마를 변경하는 간단한 js 모듈입니다.
내 스크립트는 클래스를 본문 선택자에 추가 할 수 있으며 모든 것이 적은 파일로 이루어진다.

$('body').addClass('theme-dark'); 

js 코드를 사용하면 결과를 매우 쉽게 얻을 수 있습니다.

$('.navbar').addClass('navbar-inverse'); 

하지만 내 질문은 다르다 : 단지 적은 파일을 변경, 네비게이션 바에-역을 적용하는 신체 선택에 newTheme 클래스를 추가하여
이 가능 것인가?
그렇다면 적은 규칙을 어떻게 작성해야합니까?

나는 이런 식으로 뭔가를하고 싶습니다 :

.theme-dark { 
    .navbar { 
     // a function which makes 
     // the style of navbar-inverse 

요구 사항 : 내가 CSS, JQuery와 덜 사용하고 강조하고

.

+0

왜 그냥 다른 스타일 시트를 사용하지 않는 문제가 해결? 귀하의 의견에 감사드립니다. @ cimmanon – cimmanon

+3

대체 스타일 시트는 무엇을 의미합니까? 예를 들어 주시겠습니까? 감사합니다 –

+0

@cimmanon, 제게 '대체 스타일 시트'를 사용하라는 제안은 제 목적에 맞지 않는 것 같습니다. 1) bootstrap은 이미 navbar-inverse에 대한 스타일을 제공합니다 ... 그래서 다른 CSS 파일을 첨부해야합니까? 어쩌면 나는 '대체 스타일 시트'를 이해하지 못했을 것이다. 나를 명확히 해줘서 고마워. –

답변

5

LESS는 이전에 정의 된 클래스를 다른 컨텍스트의 mixins로 사용할 수있는 기능을 제공합니다. 이 시도 :

.theme-dark { 
    .navbar { 
     .navbar-inverse; 
    } 
} 
+0

+1 감사합니다. 이것이 제가 찾고 있던 것입니다. –

0

.navbar div의 {패딩 : 0.2em를} 이

관련 문제