부트스트랩 CSS가 충돌합니까?

Bootstrap은 웹에서 가장 인기 있는 CSS 프레임워크입니다. 아름답고 반응이 빠른 디자인을 매우 쉽게 만들 수 있습니다. 그러나 전체 웹사이트에서 Bootstrap을 사용하고 싶지 않고 Bootstrap CSS의 일부만 사용해야 하는 경우도 있습니다. Bootstrap CSS를 헤드에 직접 추가하면 다른 CSS와 충돌하여 스타일이 혼란스러울 수 있습니다.

Bootstrap CSS를 특정 클래스로 분리할 수 있다면 문제가 해결됩니다! LESS를 사용하여 모든 Bootstrap CSS에 클래스 이름을 추가하기만 하면 됩니다.

LESS는 CSS로 컴파일하기 전에 변수를 변경할 수 있는 CSS 프로세서입니다. 이를 통해 하나의 변수(예: 기본 글꼴 크기)를 변경할 수 있으며 LESS는 이에 의존하는 모든 스타일(예: 줄 높이, 제목 등)을 자동으로 조정합니다.

다음은 LESS를 사용하여 부트스트랩 CSS를 사용자 정의한 다음 bootstrap-iso 클래스를 사용하여 모든 부트스트랩 스타일에 접두사를 추가하는 방법을 보여줍니다.

관련 권장사항: "Bootstrap 시작 튜토리얼"

처리 단계:

1. 헤드 태그에서 가져온 부트스트랩 CSS 파일

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />

을

<link rel="stylesheet" href="https://formden.com/static/assets/demos/bootstrap-iso/bootstrap-iso/bootstrap-iso.css" />

2로 바꿉니다. iso div, 아래와 같이:

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

위 내용은 부트스트랩 CSS가 충돌합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!