itProger Відеокурси Изучение технологии Bootstrap (верстка сайта) #10 - Выпадающее меню и списки

#10 - Выпадающее меню и списки

Начиная с этой лекции мы приступаем к изучению Bootstrap стилей в связке с JavaScript скриптами. Мы изучим создание выпадающих списков, а также меню за счёт заранее подготовленных JavaScript скриптов.

Відеоурок

Підписуйтесь на нашу групу в Телеграмі 🇺🇦

Вихідний код

Шапка с выпадающими списками

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Bootstrap уроки</title>

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body>
  <nav class="navbar navbar-default" 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="#">itProger</a>
      </div>

      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Ссылка</a></li>
          <li><a href="#">Ссылка</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#">Действие</a></li>
              <li><a href="#">Другое действие</a></li>
              <li><a href="#">Что-то еще</a></li>
              <li class="divider"></li>
              <li><a href="#">Отдельная ссылка</a></li>
              <li class="divider"></li>
              <li><a href="#">Еще одна отдельная ссылка</a></li>
            </ul>
          </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-default">Отправить</button>
        </form>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">Ссылка</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#">Действие</a></li>
              <li><a href="#">Другое действие</a></li>
              <li><a href="#">Что-то еще</a></li>
              <li class="divider"></li>
              <li><a href="#">Отдельная ссылка</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="dropdown">
    <button class="btn btn-info dropdown-toggle" data-toggle="dropdown">Список <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li class="dropdown-header">Заголовок 1</li>
      <li><a href="#">CSS</a></li>
      <li class="disabled"><a href="#">HTML</a></li>
      <li><a href="#">jQuery</a></li>
      <li class="divider"></li>
      <li class="dropdown-header">Заголовок 2</li>
      <li><a href="#">Javascript</a></li>
    </ul>
  </div>

  <!-- jQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

Онлайн редактор коду

Завантаження...

Завдання до уроку

Необхідно оформити передплату на проект, щоб отримати доступ до всіх домашніх завдань

Велике завдання за курсом

Вам необхідно оформити передплату на сайті, щоб мати доступ до всіх великих завдань. У завдання входить методика рішення, а також готовий проект з відповіддю до завдання.
PS: подібні завдання доступні при підписці від 1 місяця

Також варто подивитися