ブートストラップを使用した場合の設計上の影響は何ですか？

Question

Bootstrapを使用した場合の設計上の影響は何ですか？

私はフォントファミリと重量に関するその意味に特に関心がありますが、広く一般的な質問についても興味があります。

例：以下のサイトを構築する際に、ブートストラップコードが含まれていると、<p>要素の「質問」クラスと「回答」クラスで目的のスタイリングを与えるCSSが無効になりますブートストラップコードによって。 （私がindex.htmlファイルのBootstrapにコメントアウトするときに、私が戻ってきたいスタイルがあります）

それで、私は!importantのようなものをカスタム、非ブートストラップスタイリング？

WebFontConfig = { 
 
    google: { 
 
    families: ['Open+Sans:300,400,700:latin'] 
 
    } 
 
}; 
 
(function() { 
 
    var wf = document.createElement('script'); 
 
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + 
 
    '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'; 
 
    wf.type = 'text/javascript'; 
 
    wf.async = 'true'; 
 
    var s = document.getElementsByTagName('script')[0]; 
 
    s.parentNode.insertBefore(wf, s); 
 
})();

body { 
 
    overflow: hidden; 
 
} 
 

 
p { 
 
    font-family: "Open Sans", sans-serif; 
 
    font-size: 20px; 
 
} 
 

 
.question { 
 
    font-weight: bold; 
 
} 
 

 
.answer { 
 
    font-weight: normal; 
 
} 
 

 
#header { 
 
    margin: 0px; 
 
} 
 

 
.navbar-brand { 
 
    font-family: "Open Sans", sans-serif; 
 
} 
 

 
.nav { 
 
    font-family: "Open Sans", sans-serif; 
 
} 
 

 
#mainPane { 
 
    margin: 0px; 
 
    padding: 20px; 
 
    height: 100vw; 
 
    background-color: white; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,700' rel='stylesheet' type='text/css'> 
 

 

 

 
<nav id="header" class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
    <!-- Brand and toggle get grouped for better mobile display --> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
 
       <span class="sr-only">Toggle navigation</span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       </button> 
 
     <a class="navbar-brand" href="# ">Brand</a> 
 
    </div> 
 

 
    <!-- Collect the nav links, forms, and other content for toggling --> 
 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Home<span class="sr-only">(current)</span > </a></li> 
 
     <!-- <li><a href="#"> anotherListItem </a></li> --> 
 
     <!-- <li><a href="#"> aThirdListItem </a></li> --> 
 
     </ul> 
 
    </div> 
 
    <!-- /.navbar-collapse --> 
 
    </div> 
 
    <!-- /.container-fluid --> 
 
</nav> 
 

 
<div id="mainPane" class="jumbotron"> 
 
    <p class="question">Q: Question 1</p> 
 
    <p class="answer">A: Answer 1</p> 
 

 
</div>

Answer 1

あなたのセレクタの特異性の問題に実行しているように見えます。最後に独自のカスタムCSSをインポートしている間に、別のセレクタが別のスタイルシートでより具体的な場合、それらのスタイルが優先されてページに表示されます。 CSS-Tricksは具体性がどのように機能するかについてseminal articleであり、コードで何が起こっているのかを理解するのに役立ちます。

私はコードをcodeply projectに変更しました。これを試してみて、セレクタの特異性を変更したときに起こったことをより実感してください。

また、ブラウザで開発ツールを開いて、現在進行中のことを確認することを心配しないでください。これはChromeのツールから取得した画像です。スタイルを見ることができ、最終的にはビューをレンダリングするときに使用されます。この場合に交差するプロパティは、別のルールが優先されている可能性があります。