ブートストラップ3の完全なパックをhttp://getbootstrap.comからダウンロードした後、テーマ用の別のcssファイルがあることに気付きました。それをどのように利用するのですか?説明してください?
bootstrap-theme.css
既存のブートストラッププロジェクトに含めましたが、出力に違いはありません。
ブートストラップ3の完全なパックをhttp://getbootstrap.comからダウンロードした後、テーマ用の別のcssファイルがあることに気付きました。それをどのように利用するのですか?説明してください?
bootstrap-theme.css
既存のブートストラッププロジェクトに含めましたが、出力に違いはありません。
回答:
Bootstrap 3.xをダウンロードすると、bootstrap.cssとbootstrap-theme.cssが表示されます(これらのファイルの縮小版はもちろん存在します)。
bootstrap.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のテーマについて:これらのテーマはのように実装されていませんbootstrap-theme.css
。BootSwatchテーマは、元のの修正バージョンですbootstrap.css
。したがって、BootSwatchのテーマとbootstrap-theme.css
ファイルを同時に使用しないでください。
独自のカスタムテーマについて:bootstrap-theme.css
独自のテーマを作成するときに変更することを選択できます。そうすることで、組み込みのブートストラップの良さを誤って壊すことなく、スタイルの変更を簡単に行うことができます。
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のオンとオフを切り替えることができます。
bootstrap.css
サイトの言うように、Bootswatch.comのテーマでコンテンツを置き換えるだけbootstrap-theme.css
で、Bottswatchテーマでも使用できるのではないかと思っていました。
bootstrap-theme
と、Bootswatchで使用するようには見えません。それはとにかく私のサイトの混乱を作りました。
1つ目bootstrap-theme.css
は、Bootstrap 3のBootstrap 2.xスタイルに相当するものだけです。本当に使いたい場合は、ALONGを追加してくださいbootstrap.css
(縮小バージョンも機能します)。
他の人が述べたように、ファイル名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ソースのvariables.lessファイルをBootswatchテーマのファイルで置き換え、ビルドして、Bootswatchテーマのbootstrap-theme.cssファイルを作成します。
Bootstrapの作成は困難に聞こえるかもしれませんが、実際には非常に簡単です。
できました。ほら、それは簡単でしたね。
この投稿は少し古いですが...
「目撃者」が指摘したように。
独自のカスタムテーマについて独自のテーマを作成するときに、bootstrap-theme.cssを変更することを選択できます。そうすることで、組み込みのブートストラップの良さを誤って壊すことなく、スタイルの変更を簡単に行うことができます。
Bootstrapが長年にわたって誰もがコアスタイルとは少し異なる何かを望んでいることを見てきたように、私はそれを理解しています。bootstrap.cssを変更することはできますが、問題が発生する可能性があり、新しいバージョンへの更新が非常に面倒で時間がかかる可能性があります。あなたが待たなければならない手段「テーマ」のサイトからダウンロードする場合は、その作成者の更新をテーマに、大きなことであれば、時には、右は?
独自の「custom.css」ファイルを作成する人もいますが、「bootstrap-theme.css」を使用すると、多くのものがすでに構築されているため、ブートストラップのコアを中断することなく、独自のテーマをより速く展開できます。 .css。私は3Dボタンとグラデーションがほとんどの場合好きではないので、bootstrap-theme.cssを使用してそれらを変更します。、マージンやパディングを追加するには、ボタンに半径を変更する、ようにと ...