0

Здравствуйте. Подскажите пожалуйста, могу ли я свободно задавать стили для бутстрап меню?

<!DOCTYPE HTML>
<html lang="en-US">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
<link rel="stylesheet" href="style.css">
<title>Zont-SPB</title>
<meta charset="UTF-8">
<head>
<div class="container">
  <div class="row">
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
      <div id="logo">
        <a href="index.html">
          <img src="logo1.png" alt="" />
        </a>
      </div>
    </div>
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
      <div id="contacts">
        <span style="font-size: 16px;" class="glyphicon glyphicon-envelope"></span>E-mail:
        <p>
          <span style="font-size: 16px"; class="glyphicon glyphicon-phone"></span>Телефон:
        </p>
      </div>
    </div>
  </div>
  <div class="navbar ">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="collapse navbar-collapse" id="navbar-collapse">
      <ul class="nav navbar-nav">
        <li>
          <a href="#">Главная</a>
        </li>
        <li>
          <a href="#">Демо-доступ</a>
        </li>
        <li>
          <a href="catalog.html">Каталог</a>
        </li>
        <li>
          <a href="contact.html">Контакты</a>
        </li>
      </ul>
    </div>
  </div>
</div>
</body>
</html>

Мне нужно, чтобы финальный результат был такой как на скрине: введите сюда описание изображения

И если вам не трудно, может быть вы могли бы подсказать, необходимые стили , и + стиль для изменения цвета ссылки в главном меню, когда на неё наводишь курсор. Заранее спасибо, всем удачи.

0

1 ответ 1

2

Во-первых, у вас тэг <head> открытый и не закрывается, также тэг <body>, а точнее </body>, у вас только закрывающийся, нужно переделать в такой формат:

<!DOCTYPE HTML>
<html lang="en-US">
<head> <!--Вот тут открыли-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
<link rel="stylesheet" href="style.css">
title>Zont-SPB</title>
<meta charset="UTF-8">
</head> <!--Вот тут закрыли-->
<body> <!--Вот тут открыли "тело" кода-->

Далее, вот примерный CSS-файл для Вас:

.navbar-collapse {
  background: linear-gradient(to bottom, #a5a5a5, #000);
  border-radius: 10px
}
.navbar-nav>li>a {
  color: white;
}

.navbar-nav>li>a:hover {
  color: green;
}
.navbar-nav>li {
      border-right: 1px solid gray;
}

Для изменения цвета ссылки при наведении - изменяйте цвет в .navbar-nav>li>a:hover (для примера я выставил его зеленым).
Вот пример того, что получится.

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.