ブートストラップ+自分のスタイルシート

Question

私はかなり新しいWeb開発です（私は今、クラスを取り入れています）、私は自分の外部スタイルシートをリンクしてきれいなスタイルのウェブサイトを持っていました。 nifty javascriptが組み込まれています。しかし、私のサイトをもっと見栄えようとしているうちに、私はnav barのためのいくつかのブートストラップデザインを試してみました。そして、オリジナルのスタイルシートのものをコピーしてbootstrap.cssシートとリンク、そして今はすべての私のスタイルがなくなった。誰かがなぜこれが起こるかを説明することはできますか？もし私がルーキーミスをしているのであれば？ありがとう！

Answer 1

あなたがそう

<!-- Bootstrap Core CSS --> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.css" rel="stylesheet"> 

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

HTMLが下までのCSSファイルを読み込むので、それがあるようbootstrap.cssの下にカスタムスタイルシートを配置する必要があります。常にブートストラップのCSSから始め、そこからあなたのCSSファイルの中を調整する必要があります。したがって、ブートストラップナビを追加する場合は、カスタムCSSでレイアウトを変更する必要があります。おそらく、何が起こっているのかをより具体的にするためのコードを追加することができます。 bootstrap.cssへの微調整の

例：クラスをオーバーライドするときナビゲーションバーの

HTML

<nav 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> 

    </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><a href="index.html">HOME</a></li> 

     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">PORTFOLIO<span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
      <li><a href="Wedding.html">WEDDING</a></li> 
      <li><a href="Love.html">LOVE</a></li> 
      </ul> 
     </li> 

     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">ABOUT<span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
      <li><a href="AboutUs.html">US</a></li> 
      </ul> 
     </li> 

     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">BLOG<span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
      <li><a href="NewBlogPage3.html">STORIES</a></li> 
      <li><a href="Archive.html">ARCHIVE</a></li> 
      </ul> 
     </li> 

     <li><a href="Contact.html">CONTACT</a></li> 

     </ul> 

    </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 
</nav> 

カスタムCSSはまた

/* BOOTSTRAP TWEAKS */ 

.navbar-default { 
background: none; 
border: none; 
} 


.navbar-default .navbar-nav li a { 
    color: #9c9c9c; 
} 

.caret { 
    border-top-color: #9c9c9c; 
border-bottom-color: #9c9c9c; 
} 

.navbar .navbar-nav { 
    display: inline-block; 
    float: none; 
    vertical-align: top; 
} 

.navbar .navbar-collapse { 
    text-align: center; 
    } 

.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { 
    color: black; 
    text-decoration: underline #9c9c9c; 
    background: none; 
    } 

.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { 
    color: #555555; 
    background: none; 
    } 

.dropdown-menu { 
    list-style: none; 
    background: none; 
    border: none; 
    -webkit-box-shadow:none; 
    box-shadow: none; 
}