bootstrap-theme.cssをbootstrap 3で使用する方法


174

ブートストラップ3の完全なパックをhttp://getbootstrap.comからダウンロードした後、テーマ用の別のcssファイルがあることに気付きました。それをどのように利用するのですか?説明してください?

bootstrap-theme.css既存のブートストラッププロジェクトに含めましたが、出力に違いはありません。

回答:


382

Bootstrap 3.xをダウンロードすると、bootstrap.cssbootstrap-theme.cssが表示されます(これらのファイルの縮小版はもちろん存在します)。

bootstrap.css

bootstrap.css完全にスタイルが設定されており、使用する準備ができている場合は、そのようにします。それはおそらく少し明白ですが、それは準備ができており、そこにあります。

使用したくない場合はbootstrap-theme.cssを使用する必要はなく、問題はありません。

bootstrap-theme.css

bootstrap-theme.cssこれは、ファイル名が示唆しようとしているものです。これは、ブートストラップのテーマであり、創造的に「THEブートストラップテーマ」と見なされています。ベースにはbootstrap.css既にスタイリングが適用されており、私は1つにはこれらのスタイルをデフォルトと見なすため、ファイルの名前は少し混乱します。しかし、その結論は、このbootstrap-theme.cssファイルに関してBootstrapのドキュメントのサンプルセクションで述べられていることを考慮すると、明らかに正しくありません。

「視覚的に強化されたエクスペリエンスのために、オプションのブートストラップテーマをロードします。」

上記の引用は、このサンプルページhttp://getbootstrap.com/examples/theme/にリンクするサムネイルのhttp://getbootstrap.com/getting-started/#examplesにあります。考えはあるbootstrap-theme.cssあるブートストラップのテーマ、それはオプションです。

BootSwatch.comのテーマ

BootSwatch.comのテーマについて:これらのテーマはのように実装されていませんbootstrap-theme.css。BootSwatchテーマは、元のの修正バージョンですbootstrap.css。したがって、BootSwatchのテーマとbootstrap-theme.cssファイルを同時に使用しないでください。

カスタムテーマ

独自のカスタムテーマについて:bootstrap-theme.css独自のテーマを作成するときに変更することを選択できます。そうすることで、組み込みのブートストラップの良さを誤って壊すことなく、スタイルの変更を簡単に行うことができます。


68
これが選択された答えです。
Patrick Cullen

11
Bootswatch.comに関する通知は非常に役立ちます。ありがとう。
Daniel Kmak

@Daniel ...しかし、twbs / bootstrapの新しい方向に従ってリファクタリングして、テーマクライアントに安定した一貫した機能を提供する必要があります
Luca G. Soave

bootstrap-theme.cssファイルはオーバーライドの詳細ではありません。つまり、bootstrap.cssは、関連するすべてのスタイルでbootstrapを使用できるように設定します。Bootstrap-theme.cssは、基本のcssファイルを変更せずにスタイルを上書きするためのものです。ここで重要なのは、ブートストラップXXにアップグレードする場合、ベースのcssファイルを置き換えるため、すべてのカスタマイズが失われることを心配する必要がないということです。テーマファイルを微調整する必要があるかもしれませんが、それはそれほど問題ではありません。おそらくあなたが言っていたこと。
ジャック

2
これについて最も混乱しているのは、ブートストラップサイト(getbootstrap.com/customize)でカスタマイズ機能を使用すると、カスタマイズがテーマファイルではなくbootstrap.cssに配置されることです。そのページには、テーマ(tm)に関連するものを変更するためのオプションも含まれていません。私が見る限り、テーマファイルはグラデーションと影の束を全体に追加するだけで、他にはほとんど何もしません。
C.List 2016年

90

cssスタイルの例については、http//getbootstrap.com/examples/theme/を参照してください。

bootstrap-theme.cssファイルなしで例がどのように見えるかを確認したい場合は、ブラウザー開発者ツールを開いて、例の<head>からリンクを削除してから、それを比較できます。

私はこれが古い質問であることを知っていますが、誰かが私がどのように見えるかの例を探している人のためにそれを投稿しました。

更新

bootstrap.css =メインCSSフレームワーク(グリッド、基本スタイルなど)

bootstrap-theme.css=拡張スタイル(3Dボタン、グラデーションなど)。このファイルはオプションであり、ブートストラップの機能にはまったく影響せず、外観を向上させるだけです。

アップデート2

v3.2.0のリリースで、BootstrapはドキュメントページでテーマのCSSを表示するオプションを追加しました。いずれかのドキュメントページ(csscomponentsjavascript)に移動すると、サイドナビゲーションの下部に[テーマのプレビュー]リンクが表示され、テーマのcssのオンとオフを切り替えることができます。


あなたの答えが最も理にかなっているので、これについてフォローしてくれてありがとう。bootstrap.cssサイトの言うように、Bootswatch.comのテーマでコンテンツを置き換えるだけbootstrap-theme.cssで、Bottswatchテーマでも使用できるのではないかと思っていました。
パラディンが

3
bootstrap.css =メインのcssフレームワーク(グリッド、基本スタイルなど)bootstrap-theme.css =拡張スタイリング(3Dボタンなど)使用したことはありませんが、見ただけでBootswatchがbootstrap.cssファイルを編集しているようです自分のニーズに合わせて。それを使用するには、Bootswatchからbootstrap.cssファイルをダウンロードして使用するだけです。bootstrap-theme.cssは使用しないでください。Bootswatchのcssと競合する可能性があります。
joshhunt 2014年

おかげで、答えを感謝します!それが私が気づいたのは、ここに戻っていないことです。変更を加えないbootstrap-themeと、Bootswatchで使用するようには見えません。それはとにかく私のサイトの混乱を作りました。
パラディンが14

72

1つ目bootstrap-theme.cssは、Bootstrap 3のBootstrap 2.xスタイルに相当するものだけです。本当に使いたい場合は、ALONGを追加してくださいbootstrap.css(縮小バージョンも機能します)。


4
サードパーティのブートストラップテーマのcssファイルを使用する場合は、公式のbootstrap-theme.cssをコメントアウトすることをお勧めします。
Cheung

163
なぜこれが受け入れられた答えなのか。それも答えではありません。ごめんなさい。これが言っているのは、Bootstrap 2のファイルに相当するものであり、Bootstrap 2に慣れていない人は、このファイルの機能を見つけるために別の回答を検索する必要があります。
Mario Awad 2014年

4
しかし、私が知りたいのはそれだけです。
ウラジミール2014年

9
@MarioAwadに同意してください、これは答えではありません。また、それは古いBootstrap cssのサポートにすぎないと思っていたので混乱しています。
Yannis Dran 2014

1
BS 3.2では、テーマCSSを含めることで、ボタンなどに3Dシェードを追加することで実際にルックアンドフィールを変更します。詳細はjoshhuntの回答を参照してください。
RajV 2014

31

Bootstrap-theme.cssは追加のCSSファイルであり、使用するかどうかはオプションです。ボタンやその他の要素に3D効果を与えます。


14

他の人が述べたように、ファイル名bootstrap-theme.cssは非常に混乱します。bootstrap-3d.cssbootstrap-fancy.cssのようなものを選択したのですが、実際にはそれが何をしているのかがわかりやすくなっています。世界が「Bootstrapテーマ」と見なしているのは、まったく異なる獣であるBootSwatchから入手できるものです。

そうは言っても、グラデーションやシャドウなどの効果は非常に優れています。残念ながら、このファイルはBootSwatchテーマに大混乱をもたらすので、私はそれらがうまく機能するために何が必要かを掘り下げることにしました。

もっと少なく

Bootstrap-theme.cssは、Bootstrapソースのtheme.lessファイルから生成されます。影響を受ける要素は次のとおりです(Bootstrap v3.2.0以降)。

  • リストアイテム
  • ボタン
  • 画像
  • ドロップダウン
  • ナビゲーションバー
  • アラート
  • 進行状況バー
  • グループのリスト
  • パネル
  • ウェルズ

theme.lessファイルは以下に依存します。

@import "variables.less";
@import "mixins.less";

コードは、たとえば次のように、variables.lessで定義された色をいくつかの場所で使用します。

// Give the progress background some depth
.progress {
    #gradient > .vertical(@start-color: darken(@progress-bg, 4%); @end-color: @progress-bg)
}

このため、bootstrap-theme.cssはBootSwatchテーマを完全に破壊します。良いニュースは、BootSwatchテーマもvariables.lessファイルから作成されるため、BootSwatchテーマ用のbootstrap-theme.cssを簡単に作成できることです。

bootstrap-theme.cssの構築

これを行う正しい方法は、テーマのビルドプロセスを更新することですが、ここにすばやく簡単な方法があります。Bootstrapソースのvariables.lessファイルをBootswatchテーマのファイルで置き換え、ビルドして、Bootswatchテーマのbootstrap-theme.cssファイルを作成します。

ブートストラップ自体の構築

Bootstrapの作成は困難に聞こえるかもしれませんが、実際には非常に簡単です。

  1. Bootstrapソースコードをダウンロードする
  2. NodeJSをダウンロードしてインストールする
  3. コマンドプロンプトを開き、ブートストラップソースフォルダーに移動します。「npm install」と入力します。これにより、プロジェクトに "node_modules"フォルダーが追加され、必要なすべてのノードがダウンロードされます。
  4. 「npm install -g grunt-cli」と入力して、グローバルにgruntをインストールします(-gオプション)。
  5. 「dist」フォルダの名前を「dist-orig」に変更し、「grunt dist」と入力して再構築します。次に、カスタムBootstrapビルドを使用するために必要なすべてを含む新しい「dist」フォルダーがあることを確認します。

できました。ほら、それは簡単でしたね。


2

この投稿は少し古いですが...

  「目撃者」が指摘したように。

独自のカスタムテーマについて独自のテーマを作成するときに、bootstrap-theme.cssを変更することを選択できます。そうすることで、組み込みのブートストラップの良さを誤って壊すことなく、スタイルの変更を簡単に行うことができます。

  Bootstrapが長年にわたって誰もがコアスタイルとは少し異なる何かを望んでいることを見てきたように、私はそれを理解しています。bootstrap.cssを変更することはできますが、問題が発生する可能性があり、新しいバージョンへの更新が非常に面倒で時間がかかる可能性があります。あなたが待たなければならない手段「テーマ」のサイトからダウンロードする場合は、その作成者の更新をテーマに、大きなことであれば、時には、右は?

  独自の「custom.css」ファイルを作成する人もいますが、「bootstrap-theme.css」を使用すると、多くのものがすでに構築されているため、ブートストラップのコアを中断することなく、独自のテーマをより速く展開できます。 .css。私は3Dボタンとグラデーションがほとんどの場合好きではないので、bootstrap-theme.cssを使用してそれらを変更します。、マージンやパディングを追加するには、ボタンに半径を変更する、ようにと ...

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.