175

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

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

4

6 に答える 6

383

Bootstrap 3.x をダウンロードすると、 bootstrap.cssとbootstrap-theme.cssが得られます(これらのファイルの縮小版も存在することは言うまでもありません)。

ブートストラップ.css

bootstrap.css必要に応じて、完全にスタイルが設定され、すぐに使用できます。それはおそらく少し地味ですが、準備ができていて、そこにあります。

必要がなければ、bootstrap-theme.css を使用する必要はありません。問題はありません。

ブートストラップ-theme.css

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

"オプションの 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独自のテーマを作成するときに変更を選択する場合があります。そうすることで、Bootstrap に組み込まれている優れた機能を誤って壊すことなく、スタイリングを簡単に変更できるようになります。

于 2014-05-07T15:40:56.650 に答える
90

CSS スタイルの例については、http: //getbootstrap.com/examples/theme/をご覧ください。

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

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

アップデート

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

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

更新 2

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

于 2014-01-16T22:19:40.363 に答える
14

他の人が述べたように、ファイル名bootstrap-theme.cssは非常に紛らわしいです。私なら、bootstrap-3d.cssやbootstrap-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 テーマのファイルに置き換えてビルドすると、Boola で Bootswatch テーマ用の bootstrap-theme.css ファイルが作成されます。

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

Bootstrap の構築は難しそうに聞こえるかもしれませんが、実際には非常に簡単です。

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

終わり。なるほど、簡単でしたね。

于 2014-10-26T22:30:35.640 に答える