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

106

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 스타일을 적용하는 영역에 대해 더 선택적으로 적용하고 싶습니다.

twitter-bootstrap  less 
— 앤드류
소스
— Sherbrow
이는 "충돌 방지하는 방법을 분리 부트 스트랩 CSS에"도움이 될 formden.com/blog/isolate-bootstrap
— 사무엘 에버스

답변:

131

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

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

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

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

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

— 앤드류
소스
이봐, 나는 이것을 따르려고 노력하고 있지만 조금 혼란스러워. Angular와 함께 일하고 있습니다. CDN을 사용하여 bootstrap.min.js, less.min.js 및 bootstrap.min.css 파일을 참조했습니다. 그래도 내 응용 프로그램에서 네임 스페이스를 어디에서 수행해야할지 잘 모르겠습니다.
— Batman
이렇게 한 후 내 모달도 사용하므로 작동하지 않습니다. 이것이 예상됩니까?
— Batman
2
@Batman 기본적으로 접두사를 포함하도록 모든 부트 스트랩을 다시 작성하기 때문에 CDN을 사용하고 싶지 않습니다. @import원래 부트 스트랩에 SASS와 같은 전처리기를 사용해야합니다 . 모달에도 문제가 있었는데, 부트 스트랩이 특정 클래스를 최상위 바디 태그에 적용하기 때문이라고 생각합니다. 해결책을 찾았는지 기억이 나지 않습니다. 결국, 내 자신의 모달 대체물을 작성하게 된 것 같습니다.
— Andrew
4
버전 3 이후에는 더 이상 작동하지 않습니다 ( hereswhatidid.com/2014/02/… )
— adamj
2
누군가이 수입 명세서가 어디로 가야하는지 설명해 주시겠습니까? 별도의 .less 파일처럼 보입니다. 나는 그것을하고 부트 스트랩이 적은 폴더에 넣었지만 네임 스페이스로 컴파일되지 않습니다. 내가 뭔가 놓친 것 같아요
— fehays
35

@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';
}
— 케빈
소스
당신은 잊었margin: 0;
— kolobok
1
주의! 이유는 모르겠지만 일부 장소에서는 .my-prefix .my-prefix ...와 같은 CSS가 적게 생성되므로 검색 및 교체도 필요합니다.
— kolobok
10

@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;
}
— 특이
소스
1
감사. 정말 최고의 솔루션입니다.
— kolobok
완벽하게 작동합니다!
— Kévin Berthommier
8

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

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

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

— 사용자 3567343
소스
ngbootstrap과 함께 angular를 사용하는 경우 특정 컨테이너 내에서 모달을 열도록 선택할 수 있습니다. this.modalService.open('myModal', {container: '#modalgoeshere'})
— Ena
3

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

.bootstrap-styles {

    h1 { }

}

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

.bootstrap-styles h1 { }
— 스콧 심슨
소스
2

.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%}
— 지노
소스
2

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

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

myDialog.modal({
    show: false
});

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

myDialog.modal("show");

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

— 더니
소스
1

가장 간단한 솔루션-부트 스트랩에 대해 사용자 지정 빌드 격리 된 CSS 클래스를 사용하기 시작합니다.

예를 들어 Bootstrap 4.1의 경우 css4.1 디렉토리에서 파일을 다운로드합니다.

https://github.com/cryptoapi/Isolate-Bootstrap-4.1-CSS-Themes

클래스 bootstrapiso를 사용하여 HTML을 div에 래핑합니다.

<div class="bootstrapiso">
<!-- Any HTML here will be styled with Bootstrap CSS -->
</div>

격리 된 부트 스트랩 4가있는 페이지 템플릿은

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <title>Page1</title>

    <!-- Isolated Bootstrap4 CSS - -->
    <link rel="stylesheet" href="css4.1/bootstrapcustom.min.css" crossorigin="anonymous">   

    <!-- JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" crossorigin="anonymous"></script>
    <script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" crossorigin="anonymous"></script>

  </head>

  <body>

  <div class="bootstrapiso">
  <!-- Any HTML here will be styled with Bootstrap CSS -->
  </div>

  </body>
</html>
— 사용자 3879851
소스
0

나는 @Andrew가 제안한 동일한 문제와 방법에 직면했지만 불행히도 특정 경우에는 도움이되지 않았습니다. 부트 스트랩 클래스가 다른 프레임 워크의 클래스와 충돌했습니다. 이것이이 프로젝트가 https://github.com/sneas/bootstrap-sass-namespace를 받아들이는 방법 입니다. 자유롭게 사용하십시오.

— sneas
소스
0

모두를위한 추가 메모입니다. 배경으로 작동하는 모달을 얻으려면 부트 스트랩 3에서 이러한 스타일을 복사하면됩니다.

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  background-color: #000;
}
.modal-backdrop.fade {
  filter: alpha(opacity=0);
  opacity: 0;
}
.modal-backdrop.in {
  filter: alpha(opacity=50);
  opacity: .5;
}
— 매튜 커 클리
소스
0

github의 첫 번째 클론 부트 스트랩 :

git clone https://github.com/twbs/bootstrap.git

설치 요구 사항 :

npm install

scss / bootstrap.scss를 열고 네임 스페이스를 추가합니다.

.your-namespace {
    @import "functions";
    ...
    @import "utilities/api";
}

부트 스트랩 컴파일 :

npm run dist

및 태그 dist/css/bootstrap.css에서 네임 스페이스를 열고 제거합니다 .htmlbody

그런 다음 dist 폴더의 내용을 프로젝트에 복사하면 모든 설정이 완료됩니다.

즐기세요!

— 토비아스 에른스트
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.