CSSコードでブートストラップを上書きする


私たちはすべてのブートストラップの生活を容易に知っている.しかし、カスタムCSSで上書きする必要がある場合もあります.その問題を克服するには、シンプルで基本的なトリックです.このブログでは、このトリックを共有するつもりです.
HTML、コードの順序に完全に従う言語.我々は非常に効果的にこれを活用することができます.カスタムスタイルが動作していない場合は、ヘッダーのリンクタグの順序を変更してください.
CSSスタイルは、HTMLコードでリンクされている順序で適用されます.
したがって、2つのスタイルシートがスタイル1を言う場合.CSSとスタイル2 .同じ要素をターゲットにするCSS.
スタイル1CSS
body {
background-color: red;
}

スタイル2.CSS
body {
background-color: blue;
}

あなたのHTMLコードの先頭セクションの中に
<link rel="stylesheet" href="styles1.css">
<link rel="stylesheet" href="styles2.css">

その後、結果ページは青い色になります.
しかし、あなたがこのようにあなたのリンクを記載するならば:
<link rel="stylesheet" href="styles2.css">
<link rel="stylesheet" href="styles1.css">

結果のページは赤になります.
基本的に両方のスタイルが適用されているが、最後に表示されるものは最後に適用されるものです.
したがって、そのロジックに従って、カスタムスタイルがブートストラップスタイルをオーバーライドしていない場合は、ブートストラップのCDNリンクの後の行にカスタムスタイルシートへのリンクを移動する必要があります
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">

これは、最初にデフォルトのブートストラップスタイルを読み込み、独自のカスタムCSSを使用してこれらのコンポーネントの一部を上書きすることができます.
ちょうどHTMLがコードの順序に従う1つのものを覚えていてください.
それはラップ友達です.この小さなブログがあなたのウェブ開発コーディング旅行を通してあなたを助けてください.いくつかの素晴らしいコンテンツの私に従ってください.