webdevqa.jp.net

Bootstrap 4フレックスグリッドシステムのみ

したがって、bootstrap3には「カスタマイズしてダウンロード」オプションがあり、必要なものだけをダウンロードできました。 bootstrap 4はflexboxをサポートしているので、bootstrap 4のフレックスグリッドシステムをダウンロードするだけで、そのオプションが表示されなくなります。方法はありません。この ?

12
Manishoo

更新(2019年7月)

v4 のリリースでは、単にbootstrap-grid.cssまたはbootstrap-grid.min.cssを使用できます。これには グリッドシステム および フレックスユーティリティ のみが含まれます=

SS


古い答え:

このアルファ段階では、flexboxを使用するためのtrue/falseを切り替えることができます(CSSプリプロセッサを使用する場合) bootstrap V4 Alpha docs

FlexboxのサポートがついにBootstrapに加わりました。変数のフリックまたはスタイルシートの入れ替えにより、新しいCSSレイアウトスタイルにオプトインします。

仕組み:

Sass(またはその他のCSSプリプロセッサ)での変数の変更に慣れている場合は、すぐにflexboxモードに移動できます。

  1. _variables.scssファイルを開き、$enable-flex変数を見つけます。
  2. falseからtrueに変更します。
  3. 再コンパイルして完了です!

または、ソースのSassファイルが必要ない場合は、デフォルトのBootstrapコンパイル済みCSSをコンパイル済みのflexboxバリエーションと交換できます。 詳細については、ダウンロードページにアクセスしてください

14
dippas

この質問に答えるときに、コンパイルされた.Zipをダウンロードすると、 ここ がダウンロードされ、3つのスタイルシートを持つcssフォルダーが付属します。

  • bootstrap-grid.css
  • bootstrap-normalize.css
  • bootstrap.css

bootstrap-gridファイルにはグリッドCSSのみがあり、それ以外は何もありません。

6
Jacob Raccuia

フレックスグリッドを使いたいだけなら。私はお勧め

https://www.flexible-grid.com

https://github.com/kenangundogan/flexible-grid

flexible-grid/
    ├── scss
        ├── flexible-grid.scss
        ├── _variables.scss
        ├── _definitions.scss
        ├── _wrapper.scss
        ├── _array-list.scss
        ├── _attribute.scss
        ├── _grid.scss
        └── _normalize.scss
1

2019年更新、Bootstrap 4.3 +

グリッドのみ --Bootstrap 4ダウンロードに含まれるbootstrap-grid.cssを使用して取得できます。 http://getbootstrap.com/docs/4.1/getting-started/contents/#css-files

これには、グリッド、flexbox、表示ユーティリティが含まれますが、境界線、間隔などのすべてのユーティリティは含まれません。さらに[カスタマイズしてダウンロード]オプションが必要な場合は、再構築する必要がありますBootstrap SASSを使用するか、または themestr.app などのサードパーティツールを使用する


元の回答、Bootstrap 4アルファ(オプションのフレックスボックス)

将来的にカスタマイズ可能なダウンロードが行われる可能性がありますが、現在の唯一の方法は$enable-flex変数を有効にすることです。 SASSを使用した例を次に示します。

$enable-flex:true;

http://codeply.com/go/JbGGN4Ok3A

Bootstrap 4 alpha 6以降、flexboxがデフォルトになりました http://www.codeply.com/go/p/bootstrap_4.0.alpha.6

0
Zim