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 месяца

Bootstrap

HTML5