Вход / Регистрация

Создайте сайт прямо сейчас!

Зарегистрируйтесь по ссылкам и получите дополнительные бонусы при создании сайта



  • Персональный перечень способов заработка на сайте именно вашей тематики
  • Аудит юзабилити сайта бесплатно $20
  • Набор скриптов на сумму $40 для увеличения продаж
  • Аудит юзабилити интернет магазина бесплатно $60

Как получить бонусы?


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

После оплаты одного из пакетов, отправьте запрос на info@ucozmagazines.ru с указанием адреса созданного сайта.

Кнопки в Bootstrap

Кнопки в Bootstrap используется чаще всего. Одинаковые и контекстные кнопки для сайта позволяют правильно расставить приоритеты для пользователя.

Сергей    24.01.2017    461    5.0 из 5.0 (4)

Оцените материал:

Цель урока

Получить ключевую информацию для применения кнопок на сайте. Знакомство с HTML тегами, которые используются для кнопок.

Обзор возможностей по оформлению кнопок: размер, цвет, состояние.

Кнопка или ссылка?

В классическом понимании web'а, кнопки — управляющий элемент интерфейса, который меняет состояние содержимого на сайте. Когда элемент меняет адрес страницы, он является ссылкой, ведь ссылки для этого и предназначены.

Ссылка и кнопка — не одно и то же.

Однако, привычной стала практика, когда для придания ссылкам акцента, их оформляют как кнопки. Или другой пример, когда отправка формы ведет к смене адреса страницы. С другой стороны, некоторые веб-мастера злоупотребляют оформлением кнопок, считая что таким образом может выглядеть заголовок блока или важная мысль.

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

Теги кнопок

Как кнопки могут быть оформлены следующие HTML-теги: <a>, <button> или <input>.

Ссылка

<a class="btn btn-default" href="#" role="button">Ссылка</a>
<button class="btn btn-default" type="submit">Кнопка</button>
<input class="btn btn-default" type="button" value="Кнопка">
<input class="btn btn-default" type="submit" value="Отправка">

Обратите внимание кнопка имеет два класса .btn и .btn-default, они указываются через пробел. Чуть позже в этом уроке, вы поймете, почему так.

Стилизация кнопок

Для стилизации кнопок, используются CSS классы. Так .btn-default в предыдущем примере оформляет кнопку «по умолчанию». Модель кнопок в Bootstrap имеет поведенческий фактор, т.е. цвет кнопке назначается в зависимости от того, какое событие она вызывает. Отсюда и названия классов. Пример:


<!-- Обычная кнопка -->
<button type="button" class="btn btn-default">Default</button>

<!-- Обозначает ключевое действие -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Обеспечивает успешное или положительное действие -->
<button type="button" class="btn btn-success">Success</button>

<!-- Кнопка с контекстом информационного сообщения -->
<button type="button" class="btn btn-info">Info</button>

<!-- Кнопка, нажатие которое требует осторожности -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Опасное или негативное действие -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Обычная ссылка -->
<button type="button" class="btn btn-link">Link</button>

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

Размеры кнопок

Размер кнопки может быть задан за счет добавления CSS класса: .btn-lg, .btn-sm или .btn-xs.

Пример:

Исходный код:

<p>
 <button type="button" class="btn btn-primary btn-lg">Большая кнопка</button>
 <button type="button" class="btn btn-default btn-lg">Большая кнопка</button>
</p>
<p>
 <button type="button" class="btn btn-primary">Обычная кнопка</button>
 <button type="button" class="btn btn-default">Обычная кнопка</button>
</p>
<p>
 <button type="button" class="btn btn-primary btn-sm">Маленькая кнопка</button>
 <button type="button" class="btn btn-default btn-sm">Маленькая кнопка</button>
</p>
<p>
 <button type="button" class="btn btn-primary btn-xs">Очень маленькая кнопка</button>
 <button type="button" class="btn btn-default btn-xs">Очень маленькая кнопка</button>
</p>

Обратите внимание, ширина кнопок устанавливается в соответствии с их содержимым (текстом). Когда нужна кнопка на всю доступную ширину, можно использовать класс .btn-block:

Исходный код:

<button type="button" class="btn btn-primary btn-lg btn-block">Кнопка на всю ширину</button>
<button type="button" class="btn btn-default btn-lg btn-block">Кнопка на всю ширину</button>

Состояния кнопок

После нажатия кнопка меняет свое состояние на активное, для этого в CSS есть даже специальный псевдо-класс ::active. Чтобы сделать кнопку активной принудительно, можно добавить к ней класс .active:


<button type="button" class="btn btn-default btn-lg active">Активная кнопка</button>
<button type="button" class="btn btn-default btn-lg">Обычная кнопка</button>

Еще одно состояние — выключенная кнопка:

Этого можно добиться за счет класса .disabled или атрибута кнопки disabled="disabled". Последний, кстати, не работает для <a>:

<button type="button" class="btn btn-default btn-lg disabled" >Кнопка выключена</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Кнопка выключена</button>
<button type="button" class="btn btn-default btn-lg">Обычная кнопка</button>

На этом урок окончен. Вы еще не раз вернетесь к нему, когда будете работать непосредственно с шаблоном сайта. Поэтому рекомендую добавить урок в закладки.

Упражнения

  1. Добавьте кнопку на сайт с помощью различных HTML-тегов. Поменяйте текст кнопки, проверьте как она работает.
  2. Разберитесь с контекстуальным оформлением кнопок. Так ваши пользователи быстро начнут понимать, чего ждать от той или иной кнопки.
  3. Попробуйте изменить размер кнопок. Большие кнопки уместны для оформления ключевых блоков страницы. Маленькие — отлично подойдут для форм, например, при управлении заказами.
  4. Важно, чтобы вы знали, что существует возможность менять состояние кнопок за счет CSS классов. Это поможет в дальнейшем при более глубокой проработке шаблона.
  5. Посмотрите исходный код кнопки добавления в корзину $2BASKET$ и попробуйте заменить ее на свою.


Оцените материал:


Расскажите друзьям и коллегам о полезной статье:

Обсуждение

Всего комментариев: 0

Кнопки в Bootstrap
Кнопки в Bootstrap