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

108

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

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

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

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

事前に入力いただきありがとうございます。

css twitter-bootstrap bootswatch

— アン
ソース

こんにちは@Pabluez、はい、あなたは答えました、以下を見てください。返信が遅れて申し訳ありません-私は休暇中です。

— アン・

この記事は、prideparrot.com

— blog /

1

このスレッドは有益であるstackoverflow.com/questions/10451317/...

— Zimを

127

最善の方法は、

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

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

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

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

3.独自のcssファイルを作成し、元のブートストラップのものを必要なときに上書きする

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

— パブルーズ
ソース

15

+1良い答え。3つ目のポイントに追加するだけです。古いクラスに加えて適用する新しいクラスを作成するか、変更するプロパティを上書き/追加するだけです。

— Wex

それがmycustomcssで私が意味していたことです...ゼブラストライプ（ブートストラップクラス）のほかにmycustomclassに編集します

— Pabluez

1

これを「新しい」less / sass方法で行う方法に関して、これに追加できるものはありますか？つまり、「ブートストラップ」スタイルをサブクラス化するにはどうすればよいでしょうか。すべての+拡張を継承します。これがミックスインであり、拡張であるか、それとも?? 馬鹿になってごめんなさい。

— Alex Grey

1

+1回答ありがとうございます。私はこれを行ってきましたが、うまくいきますが、それは最も持続可能な答えのようには思えません。更新されたbootstrap.cssファイルを取得した場合、カスタムオーバーライドクラスを変更して、変更に適応する必要がある場合があります。@alexgrayのように、lessまたはmixinでこれを行う方法を理解したいと思います。または、ブートストラップを適用せずにサンドボックスを作成して、ブートストラップをオーバーライドせずに自分のスタイルを使用できるようにするためのより良い方法です。誰かが良いチュートリアルを持っている場合は、それを渡します

— Anne

2

独自のCSSファイルに変更を加えるだけの場合、Bootstrapをフォークする意味は何ですか？

31

2019年更新-Bootstrap 4

SASSを使用するようになりました、4.xのこのBootstrapカスタマイズ質問を再訪しますにより、LESSではなく使用されるようになりました。一般に、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）

後（とcustom.css）

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

Bootstrap Utilityクラスの!important 1つをオーバーライドしない限り、カスタムCSSで使用する必要はありません。CSSの特定性は常に、あるCSSクラスが別のCSSクラスをオーバーライドするように機能します。

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

SASSに精通している場合（そしてこの方法を使用する必要がある場合）、独自のBootstrapをカスタマイズできますcustom.scss。Bootstrapのドキュメントには、これを説明するセクションがありますが、ドキュメントではの既存の変数を利用する方法については説明していませんcustom.scss。たとえば、本体のbackground-colorを#eeeeeeに変更し、青いprimaryコンテキストカラーをBootstrapの$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作成したテーマカラーに、すべてのCSSをbtn-purple、text-purple、bg-purple、alert-purple、等...

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

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

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

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

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

— ジム
ソース

Noice-新しいカスタムボタンの背景、境界線、フォントのカスタム色を設定するのはどうですか？

— 掘り出し物

生成されたCSSファイルが約160 Kb（圧縮130Kb）であるのは正常ですか？たとえば、原色を上書きすることは可能ですか？

— エフゲニー

@ジム私はあなたが作成したテーマビルダーに感謝します！

— カリームエイロウディ

注：コンパイル後は必ずAutoprefixerを使用してください

— kanlukasz

20

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

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

最新のLess.jsをダウンロードし、そのパス（およびBootstrap）をに含めます<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

— 対称
ソース

これが

— 推奨さ

10

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

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

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

— mdashx
ソース

これを使用する最良の方法について詳しく説明していただけますか。私はbootswatchをダウンロードし、grunt swatch：themeを使用してcssをビルドしましたが、どのファイルをどこに配置すればよいのか迷っています。ブートストラップまたはブートウォッチテーマの更新バージョンをダウンロードして使用できるが、カスタマイズした変数を使用できる状況にしようとしています。（違いが出る場合は、VisualStudio2013 Proで作業しています）。コンパイルにJavaScriptを使用したくありません。今のところ、ビルドコマンドを実行しても問題ありません。後で、自動化に適した方法を見つけてみます。ありがとうMark

— mark1234 2014年

5

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

http://www.initializr.com/

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

— トム
ソース

3

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

ルートフォルダにブートストラップをクローンします： git clone https://github.com/twbs/bootstrap.git
「bootstrap」という名前に変更します
package.jsonファイルを作成します：https : //gist.github.com/jide/8440609
Gruntfile.jsを作成します：https ://gist.github.com/jide/8440502
「少ない」フォルダを作成する
bootstrap / less / variables.lessを「less」フォルダーにコピーします
フォントパスを変更します。 @icon-font-path: "../bootstrap/fonts/";
「少ない」フォルダ内のカスタムstyle.lessファイルを作成した輸入bootstrap.lessとカスタムvariables.lessファイル：https://gist.github.com/jide/8440619
走る npm install
走る grunt watch

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

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

— ジデ
ソース

3

私は最近、Udacityで過去2年間どのようにそれを行ってきたかについての投稿を書きました。この方法により、マージの競合や作業の破棄などを行わずに、いつでもBootstrapを更新できました。

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

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

これは、LESSを使用し、クライアントに出荷する前にCSSにコンパイルすることを意味します（細心の注意を払って、クライアント側のLESSであり、通常は回避します）が、保守性/アップグレード性に非常に優れており、LESSコンパイルの取得は本当に簡単です。リンクされたgithubコードにはgruntを使用した例がありますが、これを実現する方法はたくさんあります。

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

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

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

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

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

— Betaorbust
ソース

0

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

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

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

— Twelve24
ソース

3

ドキュメントが移動した場合は、それを反映するように他の回答を編集します

— DeadChex

皮肉なことに、この回答のリンクは機能していません。

— zacharydl 2014年