[twitter-bootstrap] 스타일이 충돌하지 않도록 Twitter Bootstrap의 네임 스페이스를 지정하는 방법

Twitter Bootstrap을 사용하고 싶지만 특정 요소에만 적용하므로 모든 Twitter Bootstrap 클래스에 내 접두사를 접두사로 붙이거나 더 적은 믹스 인을 사용하는 방법을 찾아야합니다. 나는 이것에 대해 아직 경험이 없어서 이것을하는 방법을 잘 이해하지 못합니다. 스타일링하려는 HTML의 예는 다음과 같습니다.

<div class="normal-styles">
  <h1>dont style this with bootstrap</h1>
  <div class="bootstrap-styles">
    <h1>use bootstrap</h1>
  </div>
</div>

이 예에서 Twitter Bootstrap은 모두 h1s 스타일을 일반화 하지만 Twitter Bootstrap 스타일을 적용하는 영역에 대해 더 선택적으로 적용하고 싶습니다.

답변

이것은 생각보다 쉬웠습니다. Less와 Sass는 모두 네임 스페이스를 지원합니다 (동일한 구문 사용). 부트 스트랩을 포함하면 선택기 내에서이를 네임 스페이스화할 수 있습니다.

.bootstrap-styles {
  @import 'bootstrap';
}

업데이트 : LESS 최신 버전의 경우 방법은 다음과 같습니다.

.bootstrap-styles {
  @import (less) url("bootstrap.css");
}

비슷한 질문이 여기에 답변되었습니다.

답변

@Andrew 좋은 대답. 부트 스트랩은 주로 글꼴을 추가하기 위해 본문 {}을 수정합니다. 따라서 LESS / SASS를 통해 네임 스페이스를 지정하면 출력 css 파일은 다음과 같습니다. (부트 스트랩 3에서)

.bootstrap-styles body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.428571429;
    color: #333333;
    background-color: white;
}

그러나 분명히 div 내부에는 body 태그가 없으므로 부트 스트랩 콘텐츠에는 부트 스트랩 글꼴이 없습니다 (모든 부트 스트랩은 부모로부터 글꼴을 상속하기 때문에)

수정하려면 답은 다음과 같아야합니다.

.bootstrap-styles {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.428571429;
    color: #333333;
    background-color: white;

    @import 'bootstrap';
}

답변

@Andrew, @Kevin 및 @adamj의 답변 (및 몇 가지 다른 스타일 포함)을 합치면 “bootstrap-namespaced.less”라는 파일에 다음을 포함하면 간단히 ‘bootstrap-namespaced.less’를 더 적게 가져올 수 있습니다. 파일:

// bootstrap-namespaced.less

// This less file is intended to be imported from other less files. 
// Example usage:
// my-custom-namespace {
//  import 'bootstrap-namespaced.less';
// }

// Import bootstrap.css (but treat it as a less file) to avoid problems 
// with the way Bootstrap is using the parent operator (&).
@import (less) 'bootstrap.css';

// Manually include styles using selectors that will not work when namespaced.

@import 'variables.less';

& {
    // From normalize.less

    // Previously inside "html {"
    // font-family: sans-serif; // Overridden below
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;

    // Previously inside "body {"
    margin: 0;

    // From scaffolding.less

    // Previously inside "html {"
    // font-size: 10px; // Overridden below
    -webkit-tap-highlight-color: rgba(0,0,0,0);

    // Previously inside "body {"
    font-family: @font-family-base;
    font-size: @font-size-base;
    line-height: @line-height-base;
    color: @text-color;
    background-color: @body-bg;
}

답변

부트 스트랩 CSS에 네임 스페이스를 추가하면 부트 스트랩이 본문에 ‘modal-backdrop’클래스를 직접 추가하므로 모달 기능이 중단됩니다. 해결 방법은 모달을 연 후이 요소를 이동하는 것입니다. 예 :

$('#myModal').modal();
var modalHolder = $('<div class="your-namespace"></div>');
$('body').append(modalHolder);
$('.modal-backdrop').first().appendTo(modalHolder);

‘hide.bs.modal’이벤트에 대한 처리기에서 요소를 제거 할 수 있습니다.

답변

.less 버전의 파일을 사용하십시오. 필요한 파일이 더 적은지 확인한 다음 해당 .less 파일을 다음으로 래핑합니다.

.bootstrap-styles {

    h1 { }

}

그러면 다음과 같은 결과가 표시됩니다.

.bootstrap-styles h1 { }

답변

.bootstrap-wrapper https://gist.github.com/onigetoc/20c4c3933cabd8672e3e 라는 클래스 내부에서 Bootstrap 3으로 GIST를 수행했습니다.

이 도구로 시작했습니다 : http://www.css-prefix.com/
나머지는 검색으로 수정하고 PHPstorm에서 교체합니다. 모든 글꼴 @ font-face는 maxcdn에서 호스팅됩니다.

첫 번째 줄 예

.bootstrap-wrapper {font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}

답변

네임 스페이스는 항상 <body> 태그에 직접 추가되어 스타일이 적용된 네임 스페이스 요소를 우회하기 때문에 모달 플러그인의 배경 div를 중단합니다.

$body배경을 표시하기 전에 플러그인의 참조를로 변경하여이 문제를 해결할 수 있습니다 .

myDialog.modal({
    show: false
});

myDialog.data("bs.modal").$body = $(myNamespacingElement);

myDialog.modal("show");

$body의 배경이 추가 될 위치 속성을 결정합니다.