Ответ 1
Хорошо, поскольку я всегда говорил, что он быстрее, проще и, особенно, чище, НЕ использовать boostrap, когда вы хотите перевести свой дизайн в Интернет. Bootstrap - это инструмент, позволяющий быстро адаптировать веб-страницы под собственным дизайном Twitter. Это хорошо, но не чудесно. ЕСЛИ вы хотите, чтобы ваши собственные проекты на веб-сайтах вам НЕОБХОДИМО знать css, независимо от модифицированного бутстрапа или делать это с нуля (и если вы знаете css, то вы слишком сильно используете бутстрап).
Я начну с нуля.
Это проще, когда вы начинаете с вашего макета html без добавления ключевых элементов:
<header>
<div class="container-menu-top">
<div class="menu-top">
<div class="menu-top-center">
<div class="icons-left">
</div>
<div class="container-login">
<div class="logo">
</div>
<div class="login">
</div>
</div>
</div>
<div class="menu-top-right">
<div class="social">
</div>
<div class="links">
</div>
</div>
</div>
</div>
<div class="container-menu-bot">
<div class="menu-bot">
</div>
</div>
</header>
И затем вы добавляете csss, чтобы правильно расположить макет (и лучше, если вы используете цвета, чтобы упростить проверку, все в порядке):
body {margin:0; padding:0;}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.container-menu-top {
width:100%;
background-color: aqua;
height:160px;
}
.container-menu-bot {
width:100%;
background-color: aqua;
height:60px;
margin-top:40px;
}
.menu-top, .menu-bot {
max-width:970px;
width:100%;
height:100%;
background-color: green;
margin:0 auto;
text-align:center;
position:relative;
}
.menu-top-center {
display:inline-block;
background-color: red;
width:50%;
height:100%;
}
.menu-top-right {
display:inline-block;
float:right;
height:100%;
background-color: violet;
width:150px;
}
.icons-left {
width:10%;
float:left;
background-color: blue;
height:100%;
}
.container-login {
width:90%;
float:left;
background-color: brown;
height:100%;
text-align:left;
}
.logo {
height:20%;
background-color: orange;
}
.login {
height:80%;
background-color: yellow;
}
@media only screen and (max-width: 600px) {
.menu-top-center {width: calc(100% - 150px);}
}
Как вы можете видеть в этом FIDDLE, все имеет смысл и реагирует просто добавлением одного line media queries. Социальная панель не изменит ширину так, чтобы ширина 600px (вы можете установить ширину разрыва желания), я изменил menú-top-center, чтобы получить всю родительскую ширину, но социальный контейнер. Обратите внимание, что я также сделал основной контейнер с максимальной шириной 970 пикселей (как в вашем примере).
Кроме того, я установил несколько высот, чтобы проверить макет, позже я удалю многие свойства, поскольку содержимое установит правильную высоту.
Теперь пришло время разместить элементы внутри своих контейнеров html.
Значки слева от вашего логина, добавляющего изображения в html и css. Правильно, они находятся на контейнере, реагируя, чтобы изображения внутри изменяли их ширину при изменении размера окна. Если вы хотите фиксированный размер, то дайте контейнеру ширину на px и до container-login ширину с, снова width:calc(100% - yourwidthpx);:
.icons-left img {
width:100%;
display:block;
padding:5px;
}
Ваше изображение "логотипа" в html с вашим желаемым размером (удаление теперь высоты его родителя):
.logo img {
height:40px;
width:253px;
max-width:90%;
display:inline-block;
}
Ваш логин inputs внутри логина div (удалив теперь высоту его родителя) и медиазапись, чтобы сделать его resposnive:
.login input, .login button {
display:inline-block;
}
.login input {width:35%;}
@media only screen and (max-width: 600px) {
.login input {width:100%;}
}
Ваши социальные иконки (рекомендую вам вставить их в список в html):
.social {}
.social ul {list-style:none;margin:0;}
.social li {
height:30px;
width:30px;
float:right;
background-color: blue;
margin-left:4px;
margin-top:4px;
background-repeat:no-repeat;
background-size:cover;
}
.social1 {background-image: url(http://the-route-to-your-image.com);}
.social2 {background-image: url(http://the-route-to-your-image.com);}
.social3 {background-image: url(http://the-route-to-your-image.com);}
Ваши ссылки:
.links {
clear:both;
text-align:left;
margin-top:4px;
}
.links a {
display:inline-block;
}
Затем удалите высоты и фоновые цвета, и вот что: FIDDLE
Конечно, по-прежнему есть вещи, которые нужно сделать, чтобы создать свой проект, ведь это макет, я оставлю для вас работу:)
Если у меня будет время позже, я смогу завершить свое меню, пытаясь объяснить, как сделать его релевантным с помощью значка "burger".
Поверьте мне, все это намного проще и быстрее, чем переопределение и изменение вашего бутстрапа, чтобы он выглядел так, как вы хотите.
Отредактировано ( "burger" menú):
Теперь давайте сделаем главное меню (основание на вашем изображении). Html легко:
<div class="container-menu-bot">
<div class="menu-bot">
<ul id="">
<li><a href="#">Item1</a></li>
<li><a href="#">Item2</a></li>
<li><a href="#">Item3</a></li>
<li><a href="#">Item4</a></li>
<li><a href="#">Item5</a></li>
<li><a href="#">Item6</a></li>
<li><a href="#">Item7</a></li>
<li><a href="#">Item8</a></li>
</ul>
<div class="burger"></div>
</div>
</div>
Где burger - значок. Мы даем position:absolute этому контейнеру, и мы его скрываем с помощью display:none. Затем с помощью mediaqueries мы показываем значок, пока мы скрываем наш список. Нам также нужно изменить li’s от display:inline-block до display:block и, наконец, установить минимальную высоту в основной контейнер, поэтому, пока список скрыт, вы все еще имеете "зеленый" menú nav:
.menu-bot {position:relative;}
.menu-bot a {color:#fff;}
.menu-bot ul {list-style:none; margin:0;}
.menu-bot li {
display:inline-block;
padding:10px 20px;
border-left:1px solid #fff;
}
.menu-bot li:last-child {
border-right:1px solid #fff;
}
.burger {
width:25px;
height:25px;
background-color: red;
position:absolute;
top:7px;
right:7px;
display:none;
}
@media only screen and (max-width: 720px) {
.burger {display:block;}
.menu-bot ul {display:none;}
.menu-bot li {display:block; border:0;}
}
Мы также добавим наш последний класс:
.menu-bot .visible {display:block;}
visible просто изменит отображение вашего списка, как только вы нажмете на значок гамбургера. Для этого вам просто нужен очень простой код jquery:
$(document).ready(function () {
$('.burger').click(function () {
$('.menu-bot ul').toggleClass("visible");
});
});
Это можно сделать только с помощью css и с помощью наведения с помощью hover, но я считаю, что это намного лучше, чем событие click, и ваши будущие пользователи, вероятно, будут иметь лучший опыт Вот и все. Довольно просто, легко понять и всего несколько строк css.
Финал FIDDLE. Удачи вам в вашем проекте
