1

一部のスタイルを上書きする Twitter Bootstrap と一緒にカスタム css を使用する場合、カスタム css リンクをブートストラップ応答 css の前または後に配置する方が良いですか?

<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-responsive.min.css">

<!-- Your custom css -->
<link rel="stylesheet" href="css/style.css">

また

<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Your custom css -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/bootstrap-responsive.min.css">

それぞれの長所と短所は何ですか？

次のように、bootstrap-responsive.css の後に本文のパディングを編集すると:

<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-responsive.min.css">

/* Add padding for navbar-top-fixed */
body {
  padding-top: 60px;
  padding-bottom: 40px;
}

次に、グローバル ボディ スタイルを上書きしたため、メディア クエリを使用してレスポンシブ レイアウトも修正する必要があります。

/* Fix to remove top padding for narrow viewports */
@media (max-width: 979px) {
  body {
    padding-top: 0;
  }
}
4

2 に答える 2

7

通常、カスタム CSS は Bootstrap CSS の後に配置することをお勧めします。カスタム CSS で Bootstrap CSS をオーバーライドしたいと考えていると思います。

Bootstraps の後にカスタム スタイルを配置する利点は、Bootstraps CSS で設定されているものと同じセレクターを使用して変更できることです。些細なことを変更するのが非常に簡単になります。同じセレクターを使用すると、ブラウザーは要素に最後に適用されたルールを使用します。

Bootstrap CSS をカスタム CSS の後に配置することの利点は実際にはわかりません。独自のスタイルを記述して Bootstrap で上書きするのはあまり意味がありません...

たとえば、これはブートストラップ CSS ではありませんが、head セクションに次の記述がある場合、同じように機能します。

<link href="framework.css" rel="stylesheet" type="text/css" />
<link href="custom-styles.css" rel="stylesheet" type="text/css" />

次に、framework.css次のものがありました。

div.row {
    border: 1px solid #eee;
    border-radius: 3px;
    margin-bottom: 50px;
    padding: 15px;
}

しかし、その後、赤い背景を追加して (なぜああ、なぜ...)、境界線の半径を変更したいことに気付きましたcustom-styles.css。

div.row {
    background-color: red;
    border-radius: 10px;
}

要素に適用された結果の CSS は次のようになります。

div.row {
    background-color: red;
    border: 1px solid #eee;
    border-radius: 10px;
    margin-bottom: 50px;
    padding: 15px;
}

custom-styles.cssのスタイルが の既存のスタイルをオーバーライドしframework.css、追加のスタイルも適用されるためです。:)

于 2013-01-31T10:33:04.950 に答える
0

style.css を上に置くと、bootstarp スタイルがそれをオーバーライドすると思います。style.css を下に置くと、ブートストラップ スタイルがカスタム スタイルでオーバーライドされます。

于 2013-01-31T10:29:40.333 に答える