114

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

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

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

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

よろしくお願いします。

4

9 に答える 9

133

最善の方法はです。

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

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

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

ブートストラップをアップグレードする必要がある場合（そしてそれを行う必要がある場合）、それはあなたの人生を複雑にするでしょう。

3.独自のcssファイルを作成し、元のブートストラップのものが必要な場合はいつでも上書きします

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

于 2011-12-29T19:48:17.333 に答える
42

ブートストラップ5（2021年更新）

Bootstrapのドキュメントで説明されているように、既存の「テーマ」の色の変更はSASSを使用して行われます。以前のバージョンと同様に、の後に続くCSSルールを追加してbootstrap.css、正しいCSSの特異性を使用することにより、ブートストラップCSSをオーバーライドすることもできます。

Bootstrap5-テーマの色を変更する

ブートストラップ4

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

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

カスタマイズする1つの方法は、CSSを使用してブートストラップ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）

ここに画像の説明を入力してください

後（with custom.css）

ここに画像の説明を入力してください

カスタマイズを行うときは、CSSの特異性を理解する必要があります。custom.cssと同じ（またはより具体的な）セレクターを使用する必要性をオーバーライドしbootstrap.cssます。

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

2.SASSを使用してカスタマイズします

SASSに精通している場合（そしてこの方法を使用する必要がある場合）、独自のでBootstrapをカスタマイズできますcustom.scss。Bootstrapのドキュメントには、これを説明するセクションがありますが、ドキュメントでは、で既存の変数を利用する方法については説明していませんcustom.scss。たとえば、ボディの背景色を#eeeeeeに変更し、青色のコンテキストカラーをブートストラップの変数に変更/オーバーライドしてみましょう...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";

これは、新しいカスタムクラスを作成する場合にも機能します。たとえば、ここでは、、、、、などのすべてのCSSpurpleを作成するテーマの色を追加します。btn-purpletext-purplebg-purplealert-purple

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

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

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

カスタムブートストラップデモ（SASS）

注：3.xとは異なり、Bootstrap4.xは公式のカスタマイザーツールを提供していません。ただし、グリッドのみのCSSをダウンロードするか、別の4.xカスタムビルドツールを使用して、必要に応じてBootstrap4CSSを再ビルドできます。

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

于 2018-05-18T11:47:48.753 に答える
20

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

Bootstrapのドキュメントから、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を静的にコンパイルする場合（実稼働環境の場合）：

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

$ lessc ./less/bootstrap.less > bootstrap.css
于 2012-08-19T20:36:11.163 に答える
10

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

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

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

于 2012-04-16T00:36:03.903 に答える
5

からのブートストラップテンプレートを使用できます

http://www.initializr.com/

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

于 2012-02-20T16:11:21.657 に答える
3

私の意見では、bootstrap.less、カスタムvariables.lessファイル、および独自のルールを含むカスタムLESSファイルをコンパイルするのが最善のオプションです。

  1. ルートフォルダにブートストラップを複製します。git clone https://github.com/twbs/bootstrap.git
  2. 名前を「bootstrap」に変更します
  3. package.jsonファイルを作成します：https ：//gist.github.com/jide/8440609
  4. Gruntfile.jsを作成します：https ：//gist.github.com/jide/8440502
  5. 「less」フォルダを作成します
  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ファイルのブートストラップルールをオーバーライドできます。また、いつかブートストラップを更新したい場合は、ブートストラップフォルダー全体を置き換えることができます。

編集：私はこのテクニックを使用してブートストラップボイラープレートを作成しました：https ：//github.com/jide/bootstrap-boilerplate

于 2014-01-15T17:42:18.160 に答える
3

私は最近、ここ数年Udacityでそれをどのように行ってきたかについて投稿しました。この方法は、マージの競合や作業の破棄などを行わずに、必要なときにいつでもBootstrapを更新できることを意味します。

投稿は例でより深くなりますが、基本的な考え方は次のとおりです。

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

これは、LESSを使用し、クライアントに出荷する前にCSSにコンパイルすることを意味します（クライアント側のLESSは気難しい場合は、通常は避けます）が、保守性/アップグレード性には非常に優れており、LESSコンパイルの取得は非常に簡単です。 。リンクされたgithubコードには、gruntを使用した例がありますが、これを実現する方法はたくさんあります。それがあなたのものであれば、GUIもそうです。

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

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

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

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

githubのコード例はこちらです。

于 2015-01-03T23:10:29.110 に答える
0

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

LESSの使用方法に関するブートストラップドキュメントは次のとおりです

（以前の回答から移動しています）

于 2012-12-18T01:15:39.120 に答える
0

このツールhttps://themestr.app/themeから始めて、scss変数がどのように上書きされるかを確認すると、どの変数が何に影響を与えるかがわかります。それは私が思う最も簡単な方法です。

scss生成の例：

@import url(https://fonts.googleapis.com/css?family=Montserrat:200,300,400,700);
$font-family-base:Montserrat;
@import url(https://fonts.googleapis.com/css?family=Open+Sans:200,300,400,700);
$headings-font-family:Open Sans;

$enable-grid-classes:false;
$primary:#222222;
$secondary:#666666;
$success:#333333;
$danger:#434343;
$info:#515151;
$warning:#5f5f5f;
$light:#eceeec;
$dark:#111111;
@import "bootstrap";
于 2020-08-25T08:21:19.787 に答える