Уроки Bootstrap

#6 - Кнопки и группы кнопок

#6 - Кнопки и группы кнопок

В этом уроке мы с вами научимся работать с кнопками, а также с группами кнопок в Bootstrap. Кнопки в Bootstrap выглядят красиво на всех устройствах и во всех браузерах, поэтому их стоит использовать в своих проектах.

Видеоурок

Исходный код

Работа с кнопками
<!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">

  <!-- 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>
  <style>
    body {
      padding: 30px;
    }
  </style>
</head>
<body>
  <button class="btn btn-default">Стандартная</button>
  <input type="submit" class="btn btn-primary" value="Основная">
  <input type="button" class="btn btn-success" value="Подтвердить">
  <a href="#" class="btn btn-info" role="button">Уведомление</a>
  <button class="btn btn-warning">Внимание</button>
  <button class="btn btn-danger">Отмены</button>
  <button class="btn btn-link">Сслыка</button>
  <br><br>
  <button class="btn btn-default btn-lg">Кнопка</button>
  <button class="btn btn-default btn-md">Кнопка</button>
  <button class="btn btn-default btn-sm">Кнопка</button>
  <button class="btn btn-default btn-xs">Кнопка</button>
  <br><br>
  <button class="btn btn-success btn-md btn-block">Кнопка</button>
  <br><br>
  <button class="btn btn-default btn-lg active">Кнопка</button>
  <button class="btn btn-default btn-lg disabled">Кнопка</button>
  <br><br>
  <div class="btn-group">
    <div class="btn-group btn-group-md" data-toggle="buttons">
      <label class="btn btn-primary">
        <input type="checkbox"> Параметр 1
      </label>
      <label class="btn btn-primary">
        <input type="checkbox"> Параметр 2
      </label>
      <label class="btn btn-primary">
        <input type="checkbox"> Параметр 3
      </label>
    </div>

    <div class="btn-group-vertical btn-group-md" data-toggle="buttons">
      <label class="btn btn-primary">
        <input type="radio"> Параметр 1
      </label>
      <label class="btn btn-primary">
        <input type="radio"> Параметр 2
      </label>
      <label class="btn btn-primary">
        <input type="radio"> Параметр 3
      </label>
    </div>

  </div>
</body>
</html>

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

Загрузка...

Задание к уроку

Создание кнопок
Вашей задачей станет создание группы кнопок. В этой группе должна быть одна кнопка с зеленым фоном, одна с синим и еще одна по умолчанию. Размеры всех кнопок установить как самые маленькие. Кроме того, сделать одну блочную кнопку с красным цветом.
Посмотреть ответ
Вот решение данной задачи:
<div class="btn-group btn-group-xs">
  <button class="btn btn-success">Подтвердить</button>
  <button class="btn btn-primary">Основная</button>
  <a href="#" class="btn btn-default" role="button">Стандартная</a>
  <br><br>
  <button class="btn btn-danger btn-block">Отмена</button>
</div>

Большое задание по курсу

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

Также стоит посмотреть

Современная вёрстка адаптивного веб-сайта
Уроки Python Django / Создание сайта
12 уроков
Вёрстка адаптивного сайта на Bootstrap 4
6 уроков
Создание блога на Ruby On Rails
8 уроков
Видеокурс по PHP, MySQL / Создание динамического сайта