Twitter Bootstrap カスタマイズのベストプラクティス [closed] 質問する

私の解決策は jstam の解決策と似ていますが、可能な限りソース ファイルの変更は避けています。bootstrap の変更は頻繁に行われるため、最新のソースをダウンロードして、変更内容を別のファイルに保存することで変更を最小限に抑えられるようにしたいと考えています。もちろん、完全に安全というわけではありません。

1. bootstrap.less と variables.less を親ディレクトリにコピーします。bootstrap.less の名前を theme.less など任意の名前に変更します。ディレクトリ構造は次のようになります。

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

2. theme.less 内のすべての参照を更新して、bootstrap サブディレクトリを指すようにします。variables.less が次のように bootstrap ディレクトリではなく親から参照されていることを確認します。

   ...
   // 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. theme.less ファイルに CSS オーバーライドが含まれている場所の直後に追加します。

   ...
   // 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 にリンクします。