1

まったく新しいプロジェクトにブートストラップ 4 を使用したいのですが、混乱しています。

Q: ソースをダウンロードして、次の場所を指すことはできますか?

<link rel="stylesheet" href="bootstrap-4.0.0-alpha.2/dist/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="bootstrap-4.0.0-alpha.2/dist/js/bootstrap.js"></script>

そして、それは私が心配する必要があるすべてですか？リブート、グリッドのみ、またはフレックスボックスについて心配する必要はありますか? ブートストラップを使いたいだけです。さまざまなオプションや設定についてあまり心配したくありません。

4

1 に答える 1

4

はい、コンパイルされた CSS コードをダウンロードしdist、質問で説明されているようにフォルダーからファイルを指定できます。コンパイルされた CSS の使用は、Bootstrap 3 と変わりません。

独自の変更または拡張バージョンのコンパイルを開始する場合にのみ、Sass コンパイラが必要になり、オートプレフィックスを実行する必要があります。Bootstrap 3 は Less を使用し、Bootstrap 4 は CSS コードのプリコンパイラとして Sass を使用します。Bootstrap v3.2 以降、autoprefixer が必要であることに注意してください。参照: http://bassjobsen.weblogs.fm/prepared-bootstrap-v4/

Bootstrap をコンパイルする最も簡単な方法は、Bootstrap に同梱されているビルド システムを使用することです。

  1. ソースコードをダウンロードして解凍する
  2. bootstrapフォルダに移動します
  3. 走る：npm install
  4. 走る：grunt

上記のように独自のバージョンをコンパイルすると、Bootstrap にはいくつかのエクストラが付属しています。

最初に、コードをコンパイルしてフレックスボックスをサポートします。一部の古いブラウザーはフレックスボックスをサポートしていないことに注意してください。特に IE 8 と IE 9 はそれらをサポートしていません。以下も参照してください: http://caniuse.com/#feat=flexbox フレックスボックス サポートの有効化レイアウトは、単一の Sass 変数 ( $enable-flex: true;) を trueに設定するのと同じくらい簡単です。は、scss/bootstrap-flex.scssこれを行う方法を示しています。この変数をscss/bootstrap.scssファイルに設定して、ビルド システムをそのまま維持することもできます。

次に、Bootstrap 4 では、グリッド (クラス) のみをコンパイルできます。例はscss/bootstrap-grid.scssファイルにあります。このファイルを他の Sass プロジェクトにインポートして、Bootstrap Grid システムを使用できます。グリッドには、 Bootstrap 3 が box-sizing: border-box に切り替わっbox-sizing: border-boxた理由を参照する必要があることに注意してください。、グリッドコードによって設定されていません。

第 3 に、Bootstrap 4 には Reboot が付属しています (box-sizing: border-box前述のように も設定されます)。Reboot はグローバル リセットであり、他のプロジェクトで Reboot を使用できるNormalize.css ( https://github.com/necolas/normalize.css )の拡張機能です。リブートのみをコンパイルするには、scss/bootstrap-reboot.scssファイルをコンパイルできます。

最後にbootstrap.scss、autoprefixer を実行せずに のみをコンパイルすると、コードにベンダー プレフィックスが含まれず、Bootstrap がサポートするすべてのブラウザーで機能しないことに注意してください。デフォルトのビルド システムと同じサポート対象ブラウザーのリストに対して autoprefixer を実行すると、コンパイル済みの CSS が元のコードと同じブラウザーをサポートすることが許可されます。（そして、公式のコンパイル済みバージョンと一致します）

于 2015-12-16T23:02:32.140 に答える