回答ありがとうございます！
この方法も知らなかったので、とても参考になりました。
有益な情報頂きありがとうございます
下記のbootstrapをダウンロードし、背景、ナビゲーションバー、ハイライト、文字などの
色を変更したいのですが、cssのどこを変更すれば良いのでしょうか？
回答3件
4
ベストアンサー
こんにちは。
Bootstrapのスタイルは、CSSファイルではなく、lessファイルで変更するようになっています。
lessは、CSSにプログラムの利点を取り入れてコーディングしやすくしたもので、Source code（DLリンク）の lessフォルダにまとめられています。
色や文字のサイズ、フォント、余白などのスタイルを変更したい場合は、スタイルの初期設定ファイルである variables.lessを編集してください。
たとえば、
lang
1//== Colors 2// 3//## Gray and brand colors for use across Bootstrap. 4 5@gray-base: #000; 6@gray-darker: lighten(@gray-base, 13.5%); // #222 7@gray-dark: lighten(@gray-base, 20%); // #333 8@gray: lighten(@gray-base, 33.5%); // #555 9@gray-light: lighten(@gray-base, 46.7%); // #777 10@gray-lighter: lighten(@gray-base, 93.5%); // #eee 11 12@brand-primary: darken(#428bca, 6.5%); // #337ab7 13@brand-success: #5cb85c; 14@brand-info: #5bc0de; 15@brand-warning: #f0ad4e; 16@brand-danger: #d9534f;
上記は、variables.lessの冒頭に記述されている Bootstrap カラーテーマの初期設定です。
背景色や文字の色を変更したい場合には、直後につづく背景色と文字色の初期設定を変更します。
lang
1//== Scaffolding 2// 3//## Settings for some of the most global styles. 4 5//** Background color for `<body>`. 6@body-bg: #fff; //背景色はここで変更します。 7//** Global text color on `<body>`. 8@text-color: @gray-dark;
なお、Customize and download（リンク）のページを使用することで、おなじことを Web上で行うことができます。
変更したい要素ごとに用意されたフィールドの値（参考：下図ページ部分SS）を変更した後、最下段の Compile and Downloadをクリックするだけでカスタマイズされた Bootstrapのファイルセットを入手することが可能です。
![イメージ説明]WIDTH:600
以上、ご参考いただければ幸いです。
投稿2015/02/24 01:40
編集2015/02/24 01:50
総合スコア1922
3
ええと、上手く説明出来るかどうかはわからないですが、トライしてみます！
上のテンプレートは見ていませんが、bootstrapはほとんどが複雑なソースで組まれていると思います。
そこで、私は、Firefoxのアドオン、Firebugを入れてチェックしています。
![イメージ説明]WIDTH:600
このように、チェックしたい場所にマウスを置くと（その前に、グレーのバー左から2番目にある、□に↑のアイコンをクリックしてくださいね）、どのCSSにどんな風に書き込まれているのが反映されているか確認することが出来て、とても便利です。
慣れるまでちょっと時間が掛かるかもしれませんが、やってみてください。
投稿2015/02/23 16:08
総合スコア16
回答へのコメント
1
私は、背景を変えただけですが、別のcssファイルに、
lang
1body{ 2 background-color:#000 ; 3 }
と書いて、読み込ませて対応しました。
bootstrapのcssファイルを書き換えて対応する方法は知らないので、方法があるのなら、私も是非知りたいです。
投稿2015/02/23 13:15
総合スコア782
回答へのコメント
回答ありがとうございます！
カスタムCSSを後から読み込むという方法ですね。
こちらもとても参考になりました。
あなたの回答
tips
プレビュー
関連した質問
Q&A
phpのtextareaでのデータ送信がなぜか出来ず困っています。助けていただけましたら幸いです。
Q&A
htmlで非活性(disabled)にしたのに、リンク先に飛べてしまう。
Q&A
Package "ocramius/proxy-manager" is not installedを解決したい
Q&A
Laravel10でview composerを作成したら、エラーが発生してしまいました。
Q&A
Laravel10でvite使用時、Viewでjavascriptのfunctionを呼び出す時、resources/js/app.jsへの書き方がわかりません
Q&A
Laravel viteにてjavascriptをviewに読み込ませたいが、エラー ($string) must be of type string, array givenが表示される
Q&A
laravelを本番環境にする方法
Q&A
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
2015/02/26 12:22
2015/02/26 23:38