BootStrap панелька навигации

Азиз

Green Team
30.05.2018
224
74
BIT
0
С помощью BooStrapa`a буквально за несколько минут, создал офигенную адаптивную навигацию, если бы делал чисто на сss ушло бы немало времени)
Снимок экрана от 2018-07-27 21-49-42.png

Кому надо, вот код панельки (код будет фигово работать если у вас не подключен фреймворк BootStrap
HTML:
<nav class="navbar navbar-inverse bg-dark " role="navigation">

<div class="container-fluid">

  <div class="navbar-header">
<a href="#" class='navbar-brand'>CoolSite</a>
</div>

<div class="">
  <ul class="nav navbar-nav">
    <li> <a href="#" class="active">Главная</a> </li>
  <li><a href="#">О нас</a></li>
  <li><a href="#">Контакты</a></li>
  </ul>
</div>
<form class="navbar-form navbar-right" action="index.html" method="post">
<div class='form-group'>
<input type='text' placeholder="Search" class="form-control">


</div>
<button type="submit" class="btn btn-primary" >Отправить</button>
</form>
</div>

</nav>
 
  • Нравится
Реакции: Define и andromeda412

Lisenok

Green Team
02.04.2016
133
75
BIT
1
Насколько я помню она по дефолту почти такая же, ну стили немного другие, есть же она на сайте бутстрапа и все описанно там)
 
S

Sphinx

Лел, а я думать что моя навигация быть оригинал(
Так в чём же дело, милейший?
Bootstrap — инструмент, который, можно сказать, даёт неограниченные возможности. К тому же, если имеются достаточные знания по классам стилей и HTML, то соорудить собственную, как Вы обмолвились, оригинальную, а главное уникальную в своём роде, навигацию, не составит, поверьте, никакого труда (при сопутствии рвения и желания творить, разумеется).
С уважением.
 

Lisenok

Green Team
02.04.2016
133
75
BIT
1
Бутстрап клевая тема) я тоже когда только освоил немного хотел об этом всем рассказать)))особенно про тему с колонками)))
 
  • Нравится
Реакции: Азиз и Sphinx

Азиз

Green Team
30.05.2018
224
74
BIT
0
Upgrade панельки :D
HTML:
  <nav class="navbar navbar-inverse" role="navigation">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
              <span class="sr-only">Навигация</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
        <a class="navbar-brand" href="#">CartSite</a>
      </div>

      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li> <a href="#">Главная</a></li>
          <li> <a href="#">О нас</a></li>
          <li> <a href="#">Обратная связь</a></li>
        </ul>
        <form class="navbar-form navbar-left" role="search">
          <div class="form-group">
            <input type="text" class="form-control" placeholder="Поиск">
          </div>
          <button type="submit" class="btn btn-primary">Отправить</button>
        </form>

      </div>
    </div>
  </nav>
 
Мы в соцсетях:

Обучение наступательной кибербезопасности в игровой форме. Начать игру!