Twitter Bootstrap v3.xのグリッドシステムのカラム数を変更する
Twitter Bootstrap v3.0.0のグリッドシステムのカラム数を可変対応させたのでメモしておきます。
Twitter Bootstrapでは、12カラムのグリッドシステムが採択されていますが、この対応により、任意の数に変更できるようになります。一般的なCSSフレームワークでは、12, 16, 18, 24カラムのグリッドシステムが採択されることが多いようです。僕は24カラムに変更して使っています。
カラムを24個使うことは、まずないのですが、細やかな調整ができるようになるので便利です。例えば、1行12カラムの時に、3.5幅のカラムを作りたいという需要が、1行24カラムであれば、7幅のカラムで実現できると言ったところです。
使い方
使い方は簡単で、以下のリポジトリから less/grid.lessを取得して、手元の less/grid.lessと差し替えてください。あとは less/variables.lessの @grid-columnsを任意の数値に変更すればOKです。
コンパイルして使うなり、 less.jsでレンダーするなりしてください。
Bootstrap variable grid system – GitHub
注意点
コンパイルしてみると分かると思いますが、出力結果が、標準のものとやや違ってきます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | // カンマ区切りでセレクタが記述され、一気に定義されている .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, ... .col-lg-10, .col-lg-11, .col-lg-12 { position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | // 4つのセレクタしか記述できていない .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; } ... .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1 { position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; } |
その結果、若干ではありますが、ファイル容量が大きくなってしまいます。
この辺は、僕のLESS力のなさが起因していますので、皆様からのPull Requestをお待ちしております。
標準のものと同等の結果を出力するもので、24カラムでよければ、以下のリポジトリにありますので、ご利用ください。
Bootstrap Grid system changed to 24. – GitHub
以上です。
公式対応の予定について
2013年9月19日12時追記
Bootstrapのカスタマイズページ（Sustomize and Download – Bootstrap
）のソースコードを読んでいたら、以下のコメントアウトを発見しました。どうやら、v3.1で公式対応する予定のようですね。
646 647 648 649 650 651 652 653 | <!-- Temporarily removed until mixins are restored in v3.1 <div class="col-xs-6 col-sm-4"> <label>@grid-columns</label> <input type="text" class="form-control" placeholder="12" data-var="@grid-columns"> <p class="help-block">Number of columns in the grid.</p> </div> --> |
