• Codeby web-security - Курс "Тестирование Веб-Приложений на проникновение с нуля" от команды codeby. Общая теория, подготовка рабочего окружения, пассивный фаззинг и фингерпринт, Активный фаззинг, Уязвимости, Пост-эксплуатация, Инструментальные средства, Social Engeneering и многое другое. Подробнее ...

  • Мобильный клиент нашего форума для Android гаджетов доступен в Google Play Market по этой ссылке. Клиент можно скачать с нашего форума по этой ссылке. Последняя версия МК в нашем телеграм канале вот здесь

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

Азиз

Well-known member
30.05.2018
86
37
#1
С помощью 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>
 

Lisenok

Well-known member
02.04.2016
118
65
#2
Насколько я помню она по дефолту почти такая же, ну стили немного другие, есть же она на сайте бутстрапа и все описанно там)
 

Sphinx

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

Азиз

Well-known member
30.05.2018
86
37
#8
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>
 
Вверх Снизу