스타일이 충돌하지 않도록 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;
}
Adding a namespace to bootstrap CSS will break modal functionality as the bootstrap adds a 'modal-backdrop' class directly to the body. A workaround is to move this element after opening the modal, e.g.:
$('#myModal').modal();
var modalHolder = $('<div class="your-namespace"></div>');
$('body').append(modalHolder);
$('.modal-backdrop').first().appendTo(modalHolder);
You can remove the element in a handler for the 'hide.bs.modal' event.
Use the .less version of the files. Determine which less files you require, then wrap those .less files with:
.bootstrap-styles {
h1 { }
}
This will give you the output of:
.bootstrap-styles h1 { }
I did a GIST with Bootstrap 3 all inside a class named .bootstrap-wrapper https://gist.github.com/onigetoc/20c4c3933cabd8672e3e
I started with this tool: http://www.css-prefix.com/ And fix the rest with search and replace in PHPstorm. All fonts @font-face are hosted on maxcdn.
First line example
.bootstrap-wrapper {font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
To explain better all the steps what Andrew was talking about for those who don't know what Less is. Here is a link that explain pretty well how it is done step by step How to isolate Bootstrap or other CSS libraries
Namespacing breaks the Modal plugin's backdrop div, since that is always added directly to the <body> tag, bypassing your namespacing element which has the styles applied to it.
You can fix this by changing the plugin's reference to $body before it shows the backdrop:
myDialog.modal({
show: false
});
myDialog.data("bs.modal").$body = $(myNamespacingElement);
myDialog.modal("show");
The $body property decides where the backdrop will be added.
I faced the same issue and method proposed by @Andrew unfortunately didn't help in my specific case. Bootstrap classes collided with classes from another framework. This is how this project has been incepted https://github.com/sneas/bootstrap-sass-namespace. Feel free to use.
Most simple solution - start to use custom build isolated css classes for Bootstrap.
For example, for Bootstrap 4.1 download files from css4.1 directory -
https://github.com/cryptoapi/Isolate-Bootstrap-4.1-CSS-Themes
and wrap your HTML in a div with the class bootstrapiso :
<div class="bootstrapiso">
<!-- Any HTML here will be styled with Bootstrap CSS -->
</div>
Page template with isolated bootstrap 4 will be
<!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>
As a further note for everyone. To get modals working with a backdrop you can simply copy these styles from bootstrap3
.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;
}
'program story' 카테고리의 다른 글
| 'break'에 해당하는 VB 키워드 (0) | 2020.08.19 |
|---|---|
| Twig 경로에 둘 이상의 매개 변수 추가 (0) | 2020.08.19 |
| 파일 경로에서 유니 코드 이스케이프에 대해 SyntaxError가 발생하는 이유는 무엇입니까? (0) | 2020.08.19 |
| sync.WaitGroup의 예가 맞습니까? (0) | 2020.08.19 |
| PostgreSQL이 정확히 알려주는 것은 무엇입니까? (0) | 2020.08.19 |