使用Bootstrap有什么设计含义？

Question

使用Bootstrap有什么设计含义？

我暂时对字体系列和权重的影响很感兴趣，但我也对更广泛的问题感到好奇。

例如：在构建下面的网站时，我发现当包含引导代码时，css会在<p>的“问题”和“回答”类中为我提供所需的样式。元素由引导代码无效。 （当我在index.html文件中注释掉Bootstrap时，我想要的样式会回来。）

那么，这是否意味着每次我想要应用一些自定义的非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的工具中拍摄的照片。您可以在渲染视图时查看样式以及最终使用的样式。在这种情况下被划掉的属性可能意味着另一条规则占了上风。