내 자신의 부트 스트랩 btn 클래스 만들기

Question

less을 사용하여 모든 요소에 btn btn-large btn-red 등을 추가하는 대신 자체 버튼 클래스를 만들고 싶습니다.

어떻게하면 적게 할 수 있습니까? 내가 시도한 여러 가지 사실은 적은 파일을 전혀 구문 분석하지 못하게 만든다. 같은

뭔가 :

.my-button { 
    .btn; 
    .btn-large; 
} 

내가하려고 다양한 스타일이 문제가 및 사용자 정의하고 새로운 클래스로 결합하는 것 같다. 내가 두 번

Answer 1

이것은 오래된 스레드이지만 오늘은이 방법을 사용하는 것이 더 좋습니다. 다른 사람들을 위해 문서화 된 상태로두고 싶습니다.

LESS 1.5에서는 참조 가져 오기가 도입되었으므로 전체 부트 스트랩 소스를 참조하고 부트 스트랩 자체의 출력없이 원하는대로 사용할 수 있습니다.

@import (reference) 'less/bootstrap.less'; 

.my-button { 
    .btn; 
    .btn-lg; 
} 

".my-button"만 출력되므로 여전히 CDN에서 부트 스트랩을 참조하고 사용자 정의가있는 CSS 만 사용할 수 있습니다.

Answer 2

은 적은 비용으로 컴파일 내 buttons.less 파일에

.my-button { 
.btn; 
.btn-large; 
} 

를 추가하여 코드를 확인하고, 새로운 CSS 파일을 업로드했습니다. 그런 다음 테스트 링크를 추가했습니다.

<a class="my-button" href="#">test button</a> 

모든 것이 좋았습니다. 파일을 직접 적게 사용하지 않는 기본 부트 스트랩을 편집하는 것이 반드시 좋은 생각은 아니지만 몇 가지 문제를 신속하게 배제하는 데 도움이된다는 것을 알고 있습니다.

어떻게 덜 사용자 설정을 하시겠습니까?

Answer 3

사용자 지정 단추 클래스의 정의를 그대로 사용해야합니다. 따라서 여기에 오류가있는 몇 가지 힌트가 있습니다.

• 부트 스트랩 클래스는 사용자 정의 클래스 뒤에 컴파일됩니다. 따라서, 덜 가져 오기 계층 구조를 확인하십시오.
• 부트 스트랩 클래스 정의는 덜 일반적인 파일의 일부가 아닙니다. 즉, 더 적은 컴파일러로 인수로 전달한 주 덜 파일로 가져올 수 없습니다.

두 번째 단계는 어떻게 구성 할 수 있었는지 간단히 요약 한 것입니다.

styles.less (이것은 기본 파일 임). (가) [...] 다른 모든 부트 스트랩 수입 (https://github.com/twitter/bootstrap/blob/master/less/bootstrap.less에서 주 부트 스트랩 적은 파일을 참조)를 의미하는 것이

// bootstrap base imports (v2.2.2) 
@import "plugins/bootstrap/reset.less"; 
@import "plugins/bootstrap/variables.less"; // Modify this for custom colors, font-sizes, etc 
@import "plugins/bootstrap/mixins.less"; 
// [...] 

@import "layouts.less"; 

참고. 이미 쓴

그리고 당신의 layouts.less은 사용자 정의 버튼 클래스를 정의

당신의 적은 컴파일러에서

.my-button { 
    .btn; 
    .btn-large; 
} 

, 당신은 당신이 실제 필요한 것

lessc styles.less > styles.css 

참고도 실행 끝낼 것 plugins/bootstrap/ 폴더에있는 부트 스트랩 파일이 적습니다.

희망이 도움이됩니다.