Welche Auswirkungen hat die Verwendung von Bootstrap auf das Design?

Question

Welche Auswirkungen hat die Verwendung von Bootstrap auf das Design?

Ich interessiere mich momentan speziell für deren Auswirkungen auf Schriftfamilien und -gewichte, bin aber auch generell neugierig auf die weitergehende Frage.

Zum Beispiel: unten die Seite in Aufbau, ich finde, dass, wenn der Bootstrap-Code enthalten ist, die die CSS sonst mir das gewünschte Styling geben würden, auf der „Frage“ und „Antwort“ Klassen von <p> Elementen zunichte gemacht durch den Bootstrap-Code. (Wenn ich den Bootstrap in der Datei index.html auskommentiere, kommen die Styles, die ich zurückkommen möchte.)

Also, bedeutet das, dass ich etwas wie !important jedes Mal verwenden muss, wenn ich etwas Gewohnheit anwenden möchte, Nicht-Bootstrap-Stylings?

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

Sie scheinen in ein Problem mit Ihren Wählern Spezifität zu laufen. Während Sie Ihre eigene benutzerdefinierte CSS-Datei zuletzt importieren, wenn ein anderer Selektor in einem anderen Stylesheet spezifischer ist, werden diese Stile auf der Seite gerendert und gerendert. CSS-Tricks hat eine seminal article über, wie Spezifität funktioniert und wäre eine gute Referenz, um zu verstehen, was mit Ihrem Code passiert.

Ich habe Ihren Code in eine codeply project umgewandelt, mit der Sie experimentieren können und ein besseres Verständnis davon bekommen, was passiert, wenn Sie die Spezifität Ihrer Selektoren ändern.

Haben Sie auch keine Angst, die Entwicklerwerkzeuge in Ihrem Browser zu öffnen, um zu sehen, was vor sich geht. Dies ist ein Bild aus den Tools von Chrome. Sie können die Stile sehen, die letztendlich beim Rendern der Ansicht verwendet werden. Eigenschaften, die in diesem Fall durchgestrichen sind, könnten bedeuten, dass eine andere Regel vorherrscht.