web-dev-qa-db-ja.com

Bootstrap CSSテンプレートのカスタマイズ

TwitterからBootstrapを始めたばかりで、カスタマイズの「ベストプラクティス」とは何ですか。 cssテンプレート（Bootstrapまたはその他）のすべてのパワーを活用し、完全に（そして簡単に）変更可能で、持続可能（つまり、次のバージョンのBootstrapがTwitterからリリースされました。最初からやり直す必要はありません。

たとえば、トップナビゲーションに背景画像を追加します。これには次の3つの方法があるようです。

  1. Bootstrap.cssの.topbarクラスを変更します。たくさんの.topbarアイテムがあり、それらをすべて同じように変更する必要はないため、私はこれが特に好きではありません。
  2. 背景画像で新しいクラスを作成し、両方のスタイルを適用します（新しい要素とbootstrapを要素に適用します）。これにより、スタイルの競合が発生する可能性があります。これは、.topbarクラスを別のクラスに削除し、カスタムクラスによって踏まれていない部分のみを使用することで回避できます。繰り返しますが、これには必要以上に多くの作業が必要であり、柔軟性はありますが、Twitterが次の記事をリリースするときにbootstrap.cssを簡単に更新することはできません。
  3. .LESSの変数を使用して、カスタマイズを実現します。これは良いアプローチのように思えますが、.LESSを使用していないため、クライアントでCSSをコンパイルすることとコードの持続可能性について懸念があります。

私はBootstrapを使用していますが、この質問はどのCSSテンプレートにも一般化できます。

入力してくれてありがとう。

csstwitter-bootstrapbootswatch
102
Anne

最善のことはです。

1。githubからTwitter-bootstrapをフォークし、ローカルでクローンします。

ライブラリ/フレームワークは非常に急速に変化しています（内部で分岐します。ライブラリを好む人もいます。ページにロードするときからレイアウトを変更するため、フレームワークだと思います）。まあ...フォーク/クローンを作成すると、新しいバージョンを簡単に取得できます。

2。bootstrap.cssファイルを変更しないでください

bootstrapをアップグレードする必要がある場合（そしてそれを行う必要がある場合）、あなたの人生は複雑になります。

。独自のcssファイルを作成し、元のbootstrap stuffが必要なときに上書きします

彼らがcolor: black;でトップバーを設定したが、それを白くしたい場合、このトップバー用の新しい非常に特定のセレクターを作成し、特定のトップバーでこのルールを使用します。たとえば、テーブルの場合、<table class="zebra-striped mycustomclass">になります。 bootstrap.cssの後にcssファイルを宣言すると、これは必要なものを上書きします。

126
Pabluez

公式に推奨される方法はLessを使用し、bootstrap.cssを動的にオーバーライド（less.jsを使用）するか、bootstrap.cssを再コンパイル（NodeまたはLessコンパイラを使用）することだと思います。

Bootstrap docs から、bootstrap.cssスタイルを動的にオーバーライドする方法は次のとおりです。

最新のLess.jsをダウンロードし、<head>にそのパス（およびブートストラップ）を含めます。

 <link rel="stylesheet/less" href="/path/to/bootstrap.less">
    <script src="/path/to/less.js"></script>

.lessファイルを再コンパイルするには、それらを保存してページをリロードするだけです。 Less.jsはそれらをコンパイルし、ローカルストレージに保存します。

または、カスタムスタイルを使用して新しいbootstrap.cssを静的にコンパイルする場合（運用環境用）：

Nodeを介してLESSコマンドラインツールをインストールし、次のコマンドを実行します。

$ lessc ./less/bootstrap.less > bootstrap.css
20
Symmetric

2019を更新-Bootstrap 4

4.xのこのBootstrapカスタマイズの質問を再検討しています。これは、LESSの代わりに SASS を利用するようになりました。一般に、Bootstrapをカスタマイズするには2つの方法があります...

1。単純なCSSオーバーライド

カスタマイズする1つの方法は、CSSを使用してBootstrap CSSをオーバーライドすることです。保守性のために、CSSのカスタマイズは別のcustom.cssファイルに配置されるため、bootstrap.cssは変更されません。 custom.cssへの参照は、オーバーライドが機能するためにbootstrap.cssの後にが続きます...

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">

カスタムCSSに必要な変更を追加するだけです。例えば...

    /* remove rounding from cards, buttons and inputs */
    .card, .btn, .form-control {
        border-radius: 0;
    }

前（bootstrap.css）

enter image description here

後（custom.cssを使用）

enter image description here

カスタマイズを行うときは、 CSS特異性 を理解する必要があります。 custom.cssのオーバーライドは、bootstrap.cssと同じくらい固有のセレクターを使用する必要があります。

Bootstrap Utility classes のいずれかをオーバーライドしない限り、カスタムCSSで!importantを使用する必要がないことに注意してください。 CSS特異性 は、あるCSSクラスが別のCSSクラスを常にオーバーライドするように機能します。

2。 SASSを使用してカスタマイズする

SASS に精通している場合（このメソッドを使用する必要があります）、独自のcustom.scssでBootstrapをカスタマイズできます。これを説明する Bootstrap docsのセクション がありますが、ドキュメントは説明しませんあなたのcustom.scss。たとえば、本文の背景色を#eeeeeeに変更し、change/override青いprimaryコンテキスト色を-に変更します。 ブートストラップの$purple変数 ...

/* custom.scss */    

/* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";

/* -------begin customization-------- */   

/* simply assign the value */ 
$body-bg: #eeeeee;

/* use a variable to override primary */
$theme-colors: (
  primary: $purple
);
/* -------end customization-------- */  

/* finally, import Bootstrap to set the changes! */
@import "bootstrap";

これは、新しいカスタムクラスを作成するためにも機能します。たとえば、ここでpurpleをテーマの色に追加して、btn-purple、text-purple、bg-purpleのCSSを作成するall 、alert-purpleなど...

/* add a new purple custom color */
$theme-colors: (
  purple: $purple
);

https://www.codeply.com/go/7XonykXFvP

SASSでは、@ import bootstrapafterカスタマイゼーションの後に動作させる必要があります！ SASSがCSSにコンパイルされたら（SASSコンパイラーnode-sass、gulp-sass、npm webpackなどを使用して実行する必要があります。）、結果のCSSは、カスタマイズされたブートストラップです。 SASSに慣れていない場合、次のようなツールを使用してBootstrapをカスタマイズできます テーマビルダー 私が作成しました。

カスタムBootstrap Demo（SASS）

注：3.xとは異なり、Bootstrap 4.xはofficialカスタマイザーツールを提供しません。ただし、 grid onlyCSS をダウンロードするか、別の 4.xカスタムビルドツール を使用できます。必要に応じてBootstrap 4 CSSを再構築します。

関連する：
SASSでBootstrap 4を拡張/変更（カスタマイズ）する方法
bootstrap原色の変更方法
sassを使用してBootstrap 4にカラースタイルの新しいセットを作成する方法
ブートストラップのカスタマイズ方法

17
Zim

12月にPabluezが回答したので、Bootstrapをカスタマイズするより良い方法があります。

使用： Bootswatch でbootstrap.cssを生成します

Bootswatchは、通常のTwitter Bootstrapを最新バージョン（bootstrapディレクトリにインストールしたもの）から構築しますが、カスタマイズもインポートします。これにより、カスタムCSSを維持しながら、HTMLについて何も変更することなく、最新バージョンのBootstrapを簡単に使用できます。 boostrap.cssファイルを簡単に変更できます。

10
mdashx

bootstrapテンプレートを使用できます

http://www.initializr.com/

これには、すべてのbootstrap .lessファイルが含まれます。その後、必要に応じて変数を変更したり、少ないファイルを更新したりすると、cssが自動的にコンパイルされます。デプロイするとき、lessファイルをcssにコンパイルします。

5
Tom

私は最近 post を、過去数年間 dacity でどのように行ってきたかについて書きました。この方法により、マージの競合や作業の破棄などをせずに、必要なときにいつでもBootstrapを更新できるようになりました。

投稿では例により詳しく説明していますが、基本的な考え方は次のとおりです。

  • bootstrapの元のコピーを保持し、外部で上書きします。
  • 1つのファイル（ブートストラップのvariables.less）を変更して、独自の変数を含めます。
  • サイトファイルを@include bootstrap.lessにしてから、オーバーライドします。

これは、LESSを使用し、クライアントに出荷する前にCSSにコンパイルすることを意味します（扱いにくい場合はクライアント側のLESS、一般的には避けます）が、保守性/アップグレード性に非常に優れており、LESSのコンパイルは本当に簡単です。リンクされたgithubコードにはgruntを使用した例がありますが、これを達成する方法はたくさんあります。

このソリューションを使用すると、問題の例は次のようになります。

  • Variables.lessで@ navbar-inverse-bgを使用してナビゲーションバーの色を変更します（ブートストラップではありません）
  • 独自のナビゲーションバースタイルをbootstrap_overrides.lessに追加し、必要に応じて必要なものを上書きします。
  • 幸福。

ブートストラップをアップグレードするときが来たら、元のbootstrapコピーを交換するだけで、すべてが引き続き機能します（bootstrapが重大な変更を行う場合、オーバーライドを更新する必要があります。とにかくあなたはそれをしなければなりません）

ウォークスルー付きのブログ投稿は here です。

Githubのコード例は here です。

3
betaorbust

私の意見では、最良のオプションは、bootstrap.less、カスタムvariables.lessファイル、独自のルールを含むカスタムLESSファイルをコンパイルすることです：

  1. ルートフォルダーにbootstrapを複製します：git clone https://github.com/twbs/bootstrap.git
  2. 名前を「ブートストラップ」に変更します
  3. Package.jsonファイルを作成します： https://Gist.github.com/jide/8440609
  4. Gruntfile.jsを作成します： https://Gist.github.com/jide/8440502
  5. 「少ない」フォルダーを作成する
  6. Bootstrap/less/variables.lessを「less」フォルダーにコピーします
  7. フォントパスを変更します。@icon-font-path: "../bootstrap/fonts/";
  8. Bootstrap.lessとカスタムvariables.lessファイルをインポートする「less」フォルダーにカスタムstyle.lessファイルを作成します。 https://Gist.github.com/jide/8440619
  9. npm installを実行します
  10. grunt watchを実行します

これで、任意の方法で変数を変更し、カスタムstyle.lessファイルのbootstrapルールをオーバーライドできます。また、いつかブートストラップを更新する場合は、bootstrap全体を置き換えることができます。フォルダー！

編集：私はこの手法を使用してBootstrapボイラープレートを作成しました： https://github.com/jide/bootstrap-boilerplate

3
Jide

ブートストラップでLESSを使用...

LESSの使用方法に関するBootstrapドキュメントがあります

（以前の回答から移動しました）

0
Twelve24