web-dev-qa-db-ja.com

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

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

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

htmlcsstwitter-bootstrap-3
174
Yuvaraj P

Bootstrap 3.xをダウンロードすると、bootstrap.cssおよびbootstrap-theme.cssとなります（これらのファイルの縮小版はもちろんのこと）。

bootstrap.css

bootstrap.cssは完全にスタイル設定されていて、使用する準備が整っています。それはおそらくちょっとわかりやすいですが準備はできています。

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

bootstrap-theme.css

bootstrap-theme.cssはまさにそのファイルの名前が提案しようとしているものです：それは創造的に 'ブートストラップテーマ'と考えられているブートストラップのためのテーマです。ベースのbootstrap.cssには既にスタイルが適用されていて、私はそのようなスタイルがデフォルトであるとみなすので、ファイルの名前は物事を少しだけ混乱させます。しかし、このbootstrap-theme.cssファイルに関するBootstrapのドキュメントの例のセクションで述べられていることを考慮すると、その結論は明らかに正しくありません。

「視覚的に向上したエクスペリエンスのためのオプションのBootstrapテーマをロードします。」

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

BootSwatch.comでのテーマ

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

カスタムテーマ

独自のカスタムテーマについて：独自のテーマを作成するときにbootstrap-theme.cssを変更することを選択するかもしれません。そうすることで、内蔵のBootstrapの長所を誤って損なうことなく、スタイルを変更しやすくなります。

380
witttness

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

サンプルがな​​しでになっている様子を確認したい場合は、ブラウザの開発者ツールを開き、サンプルの<head>からリンクを削除してください。 。

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

更新

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

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

アップデート2

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

90
joshhunt

まず、bootstrap-theme.cssはBootstrap 3のBootstrap 2.xスタイルに他ならないものです。本当に使いたい場合は、bootstrap.cssを付けてALONGを追加するだけです（縮小版でも動作します）。

72
androphone

Bootstrap-theme.cssは追加のCSSファイルです。これはオプションです。ボタンやその他の要素に3D効果を与えます。

31
Jowen

他の人が述べているように、ファイル名bootstrap-theme.cssはとても混乱します。私はbootstrap-3d.cssまたはbootstrap-fancy.cssのようなものを選択したでしょう。世界が「ブートストラップテーマ」と見なしているのは、まったく異なる獣である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. ブートストラップのソースコードをダウンロードする
  2. NodeJSをダウンロードしてインストールする
  3. コマンドプロンプトを開き、ブートストラップソースフォルダに移動します。 「npm install」と入力します。これで "node_modules"フォルダがプロジェクトに追加され、あなたが必要とする全てのNodeのものがダウンロードされます。
  4. 「npm install -g grunt-cli」と入力して、gruntをグローバルにインストールします（-gオプション）。
  5. 「dist」フォルダの名前を「dist-orig」に変更し、「grunt dist」と入力して再構築します。カスタムBootstrapビルドを使用するために必要なものがすべて含まれた新しい "dist"フォルダがあることを確認してください。

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

14
ThisGuy

私はこの記事がちょっと古いと知っていますが...

「証人」が指摘したように。

独自のカスタムテーマについて 独自のテーマを作成するときにbootstrap-theme.cssを変更することを選択するかもしれません。そうすることで、内蔵のBootstrapの長所を誤って損なうことなく、スタイルを変更しやすくなります。

Bootstrapが長年にわたり、誰もがコアスタイルとは少し違ったものを望んでいると見てきたようです。あなたはbootstrap.cssを修正することができますがそれは事を壊すかもしれず、そしてそれは新しいバージョンへの更新を本当に苦痛と時間がかかるようにするかもしれません。 「テーマ」サイトからダウンロードするには、待つ必要があります。 もし 作成者がそのテーマを更新している、大きい もし たまには？

独自の 'custom.css'ファイルを作成しても問題ありませんが、 'bootstrap-theme.css'を使用すれば、たくさんのものがすでに作成されているので、 'bootstrapのコアを'混乱させることなく '自分のテーマを早くロールバックできます。 .css私は、3Dボタンやグラデーションはあまり好きではないので、bootstrap-theme.cssを使って変更します。余白や余白を追加し、ボタンの半径を変更します。 等々...

2
user1946683