twitter-bootstrap
Twitterのブートストラップスタイルのカスタマイズ

Angular 2 AngularJS ASP.NET asp.net-mvc CSS HTML JavaScript jQuery PHP Ruby on Rails

備考

注目すべきは、メインのbootstrap.cssの後にcustom.cssの名前を記述する必要があることです。そうしないと、custom.cssの値は実際には実装されません。

デフォルトのCSSのオーバーライド

誰もがツイッターのブートストラップが大好きですが、私たちの中にはデフォルトデザインが好きではありません。そこで、ブーストラップのデザインをカスタマイズする方法を簡単に説明します。クローン作成時のTwitterのブーストラップは、デフォルトのCSSファイルのセットを提供しています。

私たちは上書きする必要があるメールCSSファイルがあるboostrap.min.css下のboostrap/dist/cssディレクトリ。

ブーストラップのデフォルトデザインを上書きするには、この2つの簡単なステップに従います。

custom.cssするcustom.css （または名前をcustom.css付けて）、 index.htmlリンクします

<html>
<head>
    <title>Customize Bootstrap</title>

    <link rel="stylesheet" type="text/css" href="path/to/bootstrap.min.css">
    <!-- This mus be declared after the bootstrap.min.css -->
    <link rel="stylesheet" type="text/css" href="path/to/your/custom.css">
</head>
<body>
    <!-- Do something -->
</body>
</html>

カスタマイズを開始します。たとえば、デフォルトのボタンの色を変更したいとします。ブートストラップのデフォルトのボタンスタイルを使用する場合は、 <button class="btn">Sample</button>タグにbtnクラスを追加する必要があり<button class="btn">Sample</button> 。 custom.css次のコードを書いてください。
```
.btn{
    background-color:red;
}
```
上記のコードは、このようなものを生成します。
デフォルト：

カスタム：

この手法は、ブーストラップのコントリビュータによってすでに書かれたボタンスタイル全体を書き直す手間を省きます。これは私のために自分のcssクラスを書くことから私たちを救ってくれました。私はそれほど退屈ではありません。

Modified text is an extract of the original Stack Overflow Documentation

ライセンスを受けた CC BY-SA 3.0

所属していない Stack Overflow