Bootstrap + собственный листок стиля

Question

Я довольно новичок в веб-разработке (довольно новым, я имею в виду, что сейчас занимаюсь классом), и у меня был красиво оформленный веб-сайт с моей собственной внешней таблицей стилей, связанной и все но при попытке сделать мой сайт еще лучше, я решил попробовать некоторые шаблоны бутстрапов для своего навигационного бара и предположил, что могу просто скопировать и вставить то, что у меня было в моей первоначальной таблице стилей, в bootstrap.css лист и ссылку, и теперь весь мой стиль ушел. Может ли кто-нибудь объяснить, почему это произойдет/если я просто делаю какую-то ошибку новобранец? Благодаря!

Answer 1

Вы должны поместить свою собственную таблицу стилей под bootstrap.css как так

<!-- 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 от до дна. Всегда начинайте с бутстрапа 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; 
}