Bootstrap 4 alphaが発表されましたが、その特長の１つとしてレイアウトシステムにcss3のFlexboxが選択できるオプションが加わったことが挙げられます。
早速試してみたいと思います。
まずは、「Bootstrap 4 alpha」の公式サイトからソースコードをダウンロード。node.jsで必要なファイルをインストール
ソースコードは、「Getting Started」ページの「Download Source」からダウンロードできます。
ソースコードをダウンロードし終えたら、次にGruntでソースコードをビルドできるようにします。
「Build Tools」のページに行くと、ビルド方法が掲載されています。
- Node.jsがインストールされていない方は、インストールします。
- Macのターミナル等、コマンドラインでgrunt-cliをインストールします。
下記のコマンドを実行します。npm install -g grunt-cli - Bootstrap 4のソースコードをダウンロードしたディレクトリに行き、下記のコマンドを実行し依存関係のあるファイルをインストールします。
npm install
ここまでくれば、CSSとJSがビルド可能になります。
次は、FlexboxモードになるようにSASSファイルを修正します。
Bootstrapをダウンロードしたディレクトリ配下の「/scss/_variables.scss」のファイルを開き、
46行目付近の
$enable-flex:false !default;
を$enable-flex:true !default;
に変更します。
最後にビルドします。
コマンドラインでBoostrapのディレクトリ直下に移動し書き出し用のコマンドgrunt dist;などを実行します。
これで/dist/ディレクトリにCSSとJSが書き出されます。
書きだされたCSSを読み込んで実際に表示を確認してみます。
Flexbox用に用意されているクラス、「row-xs-top,row-xs-center,row-xs-bottom」などを試してみます。
下記はシンプルなグリッドレイアウトのソースコードです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
<div class="container"> <div class="sample"> <p class="h3">天地を上揃えにした場合</p> <div class="row row-xs-top"> <div class="col-xs-4"><p class="bg-primary"> ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。</p> </div> <div class="col-xs-4"><p class="bg-primary">ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。</p> </div> <div class="col-xs-4"><p class="bg-primary"> ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。</p> </div> </div> <!-- sample--></div> <hr> <div class="sample"> <p class="h3">天地を中央にした場合</p> <div class="row row-xs-center"> <div class="col-xs-4"><p class="bg-primary"> ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。</p> </div> <div class="col-xs-4"><p class="bg-primary">ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。</p> </div> <div class="col-xs-4"><p class="bg-primary"> ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。</p> </div> </div> <!-- sample--></div> <hr> <div class="sample"> <p class="h3">天地を下揃え</p> <div class="row row-xs-bottom"> <div class="col-xs-4"><p class="bg-primary"> ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。</p> </div> <div class="col-xs-4"><p class="bg-primary">ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。</p> </div> <div class="col-xs-4"><p class="bg-primary"> ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。</p> </div> </div> <!-- sample--></div> <hr> <div class="sample"> <p class="h3">真ん中の要素だけ中央揃え</p> <div class="row row-xs-top"> <div class="col-xs-4"><p class="bg-primary"> ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。</p> </div> <div class="col-xs-4 col-xs-center"><p class="bg-primary"> ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。</p></div> <div class="col-xs-4"><p class="bg-primary"> ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。</p> </div> </div> <!-- sample--></div> </div> |
表示すると下記のようになります。天地中央揃えや下揃えがきちんと表現されていますね。
Flexbox用のユーティリティクラスはまだまだ少ない気がしますが、一般的に閲覧されるブラウザがIE10以上になれば、よりフレキシブルなレイアウトが可能になりそうです。
Flexbox含め、Bootstrap 4の今後が楽しみですね。
※Flexboxモードで書きだしたCSSはこちら
