web-dev-qa-db-ja.com

Bootstrap 4カスタムビルドジェネレーター/ダウンロード

誰もがアルファ/ベータについて知っていますかbootstrap 4カスタムジェネレーター、bootstrap 3 at カスタマイズおよびダウンロード ？

https://getbootstrap.com/docs/4.0/customize/ まだ利用できません

csstwitter-bootstrapcustomizationbootstrap-4beta
20
Yatko

here で説明したように、Bootstrap 4.のカスタマイザーはありません。これは、自分でビルドツールをセットアップする必要があることを意味します。 NodeJSで）：

  1. npm initを使用して新しいプロジェクトを作成します
  2. インストールBootstrap with npm install bootstrap
  3. ビルドツールをインストールします。これを簡単にし、1つのコマンドのみを使用する必要があるため、scss-powertoolsを使用します（私はその作成者です）。使用したくない場合は、自分でコンパイル、プレフィックス、ミニファイ（およびリント）を設定する必要があります。 Run：npm install scss-powertools --save-dev
  4. scss/name.scssのようなscssフォルダー（プロジェクトのルート内）にSCSSファイルを作成します
  5. SCSSファイルでimport Bootstrap with @import "bootstrap/scss/bootstrap";を使用するか、必要に応じて 個々のコンポーネント をインポートします
  6. 新しいスクリプトをpackage.jsonに追加します："build": "scss-powertools scss/name.scss output/compiled.css"
  7. npm run buildを実行すると、コンパイル済みのCSSがoutput/compiled.css（またはビルドコマンドでオプションとして指定したもの）にあります。

注意！scss-powertoolsはデフォルトでは縮小しません。有効にするには、--productionフラグを使用します。それに関するすべての情報を見つけることができます こちら 。

シンプルなセットアップはこれから見つけることができます Gist 。

以前のワークフロー here を見つけることができます。その中で、コンパイルからリンティングまですべてを手動でセットアップする必要がありました。

13
Klooven

いい質問です！ Bootstrap 3には、ご指摘のとおりカスタマイズページがありました。

次のビルドツールを使用できます： https://bootstrap.build/ 。 BS3カスタマイズページの代わりになるのか、何か新しいものなのかわかりません。素敵なエディターのように見えます。

または、SASSでBootstrap 4のカスタムバージョンをビルドできます。

このリンクは、テーマの作成に関する詳細情報を提供します。 https://getbootstrap.com/docs/4.0/getting-started/theming/

7
Jess

Bootstrapチームはv3のようなカスタマイザーを提供するようには見えません。

他の回答で述べたように、 bootstrap.build が存在し、非常に素晴らしいUIを持ち、ほとんどの変数とオプションにアクセスできます。残念ながら、Bootstrapチームがアップデートをリリースしているのと同じくらい迅速にアップデートされているようには見えません。

pgrade-bootstrap.bootply.com は別のオプションですが、どのv4バージョンが使用されているかを示すものではありません。変数とオプションへのアクセスは制限されています。

bootstrapcustomizer.com は、すべての変数とオプションへのフルアクセスを提供し、v4リリースで最新に保たれます。 bootstrap.buildほどUIが優れているわけではありませんが、機能します。

（開示：bootstrapcustomizer.comを作成しました）

6
johna