[twitter-bootstrap] 트위터 부트 스트랩 사용자 지정 모범 사례 [닫기]

내 솔루션은 jstam과 비슷하지만 가능하면 소스 파일을 변경하지 마십시오. 부트 스트랩에 대한 변경 사항이 자주 발생할 수 있으므로 최신 소스를 풀고 수정 사항을 별도의 파일로 유지하여 최소한의 변경을 할 수 있기를 원합니다. 물론, 완전히 방탄은 아닙니다.

1. bootstrap.less 및 variables.less를 상위 디렉토리로 복사하십시오. bootstrap.less의 이름을 theme.less 또는 원하는대로 바꾸십시오. 디렉토리 디렉토리 구조는 다음과 같아야합니다.

   /Website            
        theme.less
        variables.less
        /Bootstrap
        ...
   

2. 부트 스트랩 서브 디렉토리를 가리 키도록 theme.less의 모든 참조를 업데이트하십시오. variables.less가 부트 스트랩 디렉토리가 아닌 상위에서 참조되는지 확인하십시오.

   ...
   // CSS Reset
   @import "bootstrap/reset.less";
   
   // Core variables and mixins
   @import "variables.less"; // Modify this for custom colors, font-sizes, etc
   @import "bootstrap/mixins.less";
   
   // Grid system and page structure
   @import "bootstrap/scaffolding.less";
   @import "bootstrap/grid.less";
   @import "bootstrap/layouts.less";
   

   …

3. CSS 대체를 theme.less 파일에 포함 된 직후에 추가하십시오.

   ...
   // Components: Nav
   @import "bootstrap/navs.less";
   @import "bootstrap/navbar.less";
   
   // overrides
   .navbar-fixed-top .navbar-inner, .navbar-fixed-bottom .navbar-inner {
       border-radius: 0 0 0 0;
       padding: 10px;
   }
   
   .nav-tabs, .nav-pills {
       text-transform: uppercase;
   }
   
   .navbar .nav > li > a {
       text-shadow: none;
   }
   
   ...
   

4. HTML 페이지에서 bootstrap.less 대신 theme.less에 링크하십시오.

새 버전이 나올 때마다 변경 사항이 안전해야합니다. 새 버전이 나올 때마다 사용자 정의 부트 스트랩 파일간에 차이가 있어야합니다. 변수 및 가져 오기가 변경 될 수 있습니다.

답변

...

// CSS Reset
@import "reset.less";

// Core variables and mixins
@import "variables.less"; // Modify this for custom colors, font-sizes, etc
@import "mixins.less";

// Custom Addons
@import "addon-file.less"; // <--- My custom LESS addon

// Grid system and page structure
@import "scaffolding.less";

...

@import "path/to/my/bootstrap.less";  
@linkColor: #MyAwesomeColor;  

@import "bootstrap/less/bootstrap.less";
@import "swatch/variables.less";
@import "swatch/bootswatch.less";
@import "bootstrap/less/utilities.less";