특정 요소에만 CSS 스타일 적용

특정 요소에만 CSS 스타일 적용

---

CSS로 점차 전환하려는 테이블이있는 오래된 페이지와 양식이 많이있는 기존 웹 사이트가 있습니다. Twitter Bootstrap 스타일 시트 (특히 양식 스타일)를 사용하고 싶지만 명시 적으로 요청한 페이지 섹션에서만 사용하고 싶습니다. 예를 들어 다음과 같이 div에서 전체 양식을 둘러 쌀 수 있습니다.

<div class="bootstrap">
 <!-- everything in here should have the Bootstrap CSS applied -->
 <form>
   <p><label for="text_input">Label</label><input type="text" id="text_input" /></p>
 </form>
</div>

다른 모든 양식을 지금과 동일하게 유지하고 싶습니다. 동시에 모두 변경할 수 없기 때문입니다. 이를 수행하는 간단한 방법이 있습니까? Bootstrap CSS의 모든 단일 스타일을 살펴보고 부모 선택기를 추가 할 수 있지만 (예 : 'p'는 'div.bootstrap p'가 됨) 시간이 오래 걸리고 스타일을 놓치기 쉽습니다.

편집 : 그런 일이 불가능하다면, 파일에서 모든 스타일을 추출하고 접두사를 추가 한 다음 다시 저장할 수있는 무료 도구가 있습니까?

---

Bootstrap 3의 경우 다음을 사용하는 것이 더 쉽습니다 less.

부트 스트랩 소스 코드를 다운로드하고 다음과 style.less같은 파일을 만듭니다 .

.bootstrap {
    @import "/path-to-bootstrap-less.less";
    @import "/path-to-bootstrap-responsive-less.less";
}

마지막으로 적은 파일을 컴파일해야합니다. 많은 대안이 있습니다

https://github.com/cloudhead/less.js/wiki/Command-Line-use-of-LESS https://github.com/cloudhead/less.js/wiki/GUI-compilers-that-use-LESS .js

또는을 사용 npm하여 설치 less한 다음 style.less파일을 다음으로 컴파일하십시오 style.css.

npm install -g less
lessc style.less style.css

---

마지막 수정은 SASS (오프 사이트 사용자가 권장) 를 사용하는 것이 었습니다. 이렇게하면 요소를 중첩 한 다음 최종 CSS를 자동으로 생성 할 수 있습니다. 단계별 프로세스는 다음과 같습니다.

1. 두 개의 부트 스트랩 파일 ( bootstrap.css및 bootstrap-responsive.css)을 bootstrap-all.css.
2. 새로운 SASS 파일을 만들고 bootstrap-all.scss내용으로, div.bootstrap {.
3. 에 추가 bootstrap-all.css합니다 bootstrap-all.scss.
4. 닫기 div.bootstrap추가하여 선택을 }에 bootstrap-all.scss.
5. SASS를 실행 bootstrap-all.scss하여 최종 CSS 파일을 생성합니다.
6. 최종 파일에서 YUI Compressor 를 실행 하여 최소화 된 버전을 생성합니다.
7. 헤드 요소에 최소화 된 버전을 추가하고 스타일을 적용 할 모든 것을 <div class="bootstrap"></div>.

---

작업 / 기타 이유로 인해 LESS / SASS를 사용할 수없는 경우 CSS 솔루션을 생각해 냈습니다.

1. 이 사이트 http://www.css-prefix.com/을 사용 하고 거기에 bootstrap.min.css를 복사 / 붙여 넣기했습니다. 접두사 = '. bootstrap'과 spacer = ''를 설정했습니다. 완벽하지 않은 경우를 제외하고 모든 접두사에 .bootstrap이 붙습니다.
2. '.bootstrap @media'에 대해 grep을 수행하면 여는 괄호 오른쪽의 첫 번째 클래스에 .bootstrap이 부모로 포함되어 있지 않음을 알 수 있습니다. 이 모든 사건에 .bootstrap을 추가하십시오.
3. 그런 다음 모든 '.bootstrap @media'를 '@media'로 바꿉니다.
4. 마지막 단계는 모든 '.bootstrap @'을 '@'로 바꾸는 것입니다 (약 5 회 발생).

예:

.bootstrap @media (min-width:768px){.lead{font-size:21px}}

교체해야합니다

@media (min-width:768px){.bootstrap .lead{font-size:21px}}

일종의 무차별 대입 방법이므로 먼저 위의 LESS / SASS 방법을 시도하십시오.

<div>
  No Bootstrap
</div>
<div class="bootstrap">
  Yes Bootstrap
</div>

---

I wasn't satisfied with any of these answers. Using Less to scope the rules created all sorts of defects. Clearfix, for example was all messed up. And rules like button.close became button.bootstrap close instead of what I really wanted: .bootstrap button.close.

I took a different approach. I'm using PostCSS to process the out-of-the-box CSS that is delivered with Bootstrap. I'm using the Scopify plugin to scope every rule with .bootstrap.

This mostly gets there. Of course, there are the html and body rules that become .bootstrap html and .bootstrap body which become non-sensical. No worries... I can just write a PostCSS transform to clean them up:

var elevateGlobalsPlugin = postcss.plugin('elevateGlobals', function(opts) {
    return function(css, result) {
        css.walkRules(function(rule) {
            rule.selector = rule.selector.replace('.bootstrap html', '.bootstrap');
            rule.selector = rule.selector.replace('.bootstrap body', '.bootstrap');
        });
    }
});

Now, I can isolate all Bootstrap styling by adding a class="bootstrap" at the top level.

---

That's tough. You can't Apply different css stylesheet for different parts of the same web page.

I suspect the only way to do this is to make a separate file for your content to take the bootstrap styles, and i-frame it into the page like this:

<iframe src="/content-to-take-bootstrap-styles.html" ></iframe>

then in content-to-take-bootstrap-styles.html reference the bootstrap style-sheet in the header. But then you have all the complications of iframes -- e.g.: the iframe element won't grow to accommodate the length of your content.

---

I have an easy solution.

1. Copy bootstrap css content to this (http://css2sass.herokuapp.com/) online css to scss/sass converter.

2. Add your tag information (e.g. div.bootstrap{ ) to the start of scss content and close the tag at the end.

3. Copy the whole scss content to this scss to css converter (https://www.sassmeister.com/) and convert it :)

---

You can use ready to use isolated css for Bootstrap 4.1 (compiled with LESS) -

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

It have isolated css for themes -

• bootstrapcustom.min.css - default bootstrap 4.1 isolated style
• https://bootswatch.com/cerulean/ darkly.min.css - isolated css
• https://bootswatch.com/darkly/ flatly.min.css - isolated css
• https://bootswatch.com/flatly/ litera.min.css - isolated css
• https://bootswatch.com/litera/ lux.min.css - isolated css
• https://bootswatch.com/lux/ minty.min.css - isolated css
• ...

To use Bootstrap CSS, simply wrap your HTML in a div with the class bootstrapiso, like so:

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

And use any css style from folder css4.1 like so:

<head>
<link rel="stylesheet" href="css4.1/bootstrapcustom.min.css" crossorigin="anonymous">
...
</head>

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

Done!

참고URL : https://stackoverflow.com/questions/11831346/applying-css-styles-only-to-certain-elements