Bootstrap + Kendi Stil Sayfası

Question

Web geliştirme konusunda oldukça yeniyim (şu an üzerinde yeni bir dersi alıyorum), ve kendi harici stil sayfamla bağlantılı ve güzel bir web sitesi vardı. nifty javascript in türlü inşa edildi. Ancak sitemi daha da iyi hale getirmeye çalışırken, nav barım için bazı bootstrap tasarımlarını denemeye karar verdim ve orijinal stil sayfamda olanları bootstrap.css içine kopyalayıp yapıştırabileceğimi varsaydım Sayfayı ve bağla, şimdi tüm tarzım gitti. Herkes bunun neden olacağını açıklayabilir mi/eğer bir çeşit çaylak hatası yaparsam? Teşekkürler!

Answer 1

Çok

<!-- 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 dibine kadar gelen css dosyaları okur, çünkü öyle gibi bootstrap.css altında özel stil sayfasını yerleştirmek zorunda. Her zaman bir bootstrap css ile başlayın ve oradan css dosyanızın içine girmeniz gerekir. Dolayısıyla, bir bootstrap nav'i ekliyorsanız, düzeni değiştirmek için özel css'inizde düzenlemeler yapmanız gerekir. Belki de yanlış gidenlere daha spesifik olmak için bir kod ekleyebilirsin. Bir sınıf belirli bir sınıfı tutmak geçersiz kılmak için

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

Özel CSS Ayrıca

/* 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; 
}