수동 상위 선택기 없이 특정 요소에 부트스트랩 스타일을 적용하는 방법은 무엇입니까?

특정 요소에 CSS 스타일 사용

테이블 기반 레이아웃에서 CSS로 전환하는 과정에서 CSS 스타일을 적용해야 할 수도 있습니다. 웹페이지의 특정 섹션에만 적용됩니다. 이는 지정된 클래스 내에 원하는 요소를 캡슐화하여 달성할 수 있습니다. 예를 들어 다음과 같이 "부트스트랩" 클래스를 사용하여 div에 양식을 래핑할 수 있습니다.

<div>

그러나 페이지의 다른 양식은 현재 스타일을 유지해야 합니다. 모든 Bootstrap CSS 규칙에 상위 선택기를 수동으로 추가하지 않고 이를 달성할 수 있는 더 간단한 방법이 있습니까?

해결책

Bootstrap 3의 경우 LESS를 사용하면 프로세스가 단순화됩니다.

1. Bootstrap 소스 코드를 다운로드하고 다음과 같이 style.less 파일을 만듭니다. 다음과 같습니다.

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

2. LESS 파일을 컴파일합니다. Less.js와 함께 Node.js와 같은 명령줄 도구를 사용하거나 GUI 컴파일러를 탐색할 수 있습니다. 또는 npm을 사용하여 LESS를 설치하고 다음과 같이 파일을 컴파일합니다.

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

위 내용은 수동 상위 선택기 없이 특정 요소에 부트스트랩 스타일을 적용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!