BloGGood.ru

Блог Костаневича Степана

WordPress, PHP, HTML, CSS, Windows

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Bootstrap » Основы bootstrap 3 для начинающих. Кнопки (12-й урок)

Основы bootstrap 3 для начинающих. Кнопки (12-й урок)

2017-12-12 / Вр:09:44 / просмотров: 4240

В сегодняшнем уроке я расскажу, как на bootstrap 3 сделать кнопки.
В bootstrap 3 есть готовые CSS стили для кнопок, которые будут неплохо смотреться на сайте, плюс ко всему, что есть возможность сделать кнопку адаптивной. Стили кнопок можно применять к таким элементам как <a>, <input>, <button>.
Да чего там рассказывать? Смотрим, повторяем и наслаждаемся результатами.

Стиль кнопок

Таблица №1. Различные стили кнопок, доступные в Bootstrap 3.

Вид кнопки Класс
btn-default btn btn-default
btn-primary btn btn-primary
btn-info btn btn-info
btn-success btn btn-success
btn-warning btn btn-warning
btn-danger btn btn-danger
btn-link btn btn-link

Как использовать готовые классы кнопок Bootstrap 3?
Сейчас попробуем применить класс «btn btn-danger» для тега «button»:

<button ENGINE="button" class="btn btn-danger">Danger</button>

Теперь для тега «a»:

<a href="#" class="btn btn-danger">Danger</a>

Теперь для тега «input»:

<input type="button" class="btn btn-danger">Danger</input >

Увидели в коде, как и где я прописал класс «btn btn-danger»? Попробуйте по этим же трем примерам прописать и остальные классы, взятые из таблицы, естественно вместо класса «btn btn-danger».

Проверяйте себя.

Для тега «button»:

<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-success">Success</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>

Для тега «a»:

<a href="#" class="btn btn-default">Default</a>
<a href="#" class="btn btn-primary">Primary</a>
<a href="#" class="btn btn-info">Info</a>
<a href="#" class="btn btn-success">Success</a>
<a href="#" class="btn btn-warning">Warning</a>
<a href="#" class="btn btn-danger">Danger</a>
<a href="#" class="btn btn-link">Link</a>

Для тега «input»:

<input type="button" class="btn btn-default" value="кнопка"/>
<input type="button" class="btn btn-primary" value="кнопка"/>
<input type="button" class="btn btn-info" value="кнопка"/>
<input type="button" class="btn btn-success" value="кнопка"/>
<input type="button" class="btn btn-warning" value="кнопка"/>
<input type="button" class="btn btn-danger" value="кнопка"/>
<input type="button" class="btn btn-link" value="кнопка"/>

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

Чтобы задать размер кнопкам, существуют три класса «btn-lg», «btn-sm», «btn-xs»:

  • btn-lg - большая кнопка
  • btn-sm - маленькая кнопка
  • btn-xs - очень маленькая кнопка

Пример:

<button type="button" class="btn btn-success btn-xs">Очень маленькая кнопка</button>
<button type="button" class="btn btn-success btn-sm">Маленькая кнопка</button>
<button type="button" class="btn btn-success">Кнопка обычного размера</button>
<button type="button" class="btn btn-success btn-lg">Большая кнопка</button>

Кнопку можно сделать адаптивной, то есть, растянуть ее на всю ширину сайта, естественно, при открытии на мобильных устройствах, она уменьшится.
Итак, для адаптивности кнопки используйте класс «btn-block»:

<button type="button" class="btn btn-success btn-block">Большая адаптивная кнопка</button>

Кнопка в неактивном состоянии

Чтобы сделать кнопку неактивной, можно воспользоваться классом «disabled». Такой трюк можно применить, например, пока форма не заполнена (значит, кнопка неактивна). А как только будут заполнены все поля, кнопка становится активной.

<button type="button" class="btn btn-danger btn-lg disabled">Неактивная кнопка</button>

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

Состояние кнопки можно изменить с обычного состояния на нажатое.
Добавьте к тегу <button>, <a> или  <input> атрибут data-toggle со значением button:

<button type="button" class="btn btn-info" data-toggle="button">Информация</button>

Создание группы кнопок

Так же вы можете  сгруппировать несколько кнопок вместе в одну линию по вертикали либо по горизонтали.
Чтобы создать группу кнопок, обхватите кнопки  тегом <div> с классом «btn-group»:

- Горизонтально:

<div class="btn-group">
<button type="button" class="btn btn-primary">Левая</button>
<button type="button" class="btn btn-primary">Средняя</button>
<button type="button" class="btn btn-primary">Правая</button>
</div>

Результат:

Основы bootstrap 3 для начинающих. Кнопки (12-й урок)

- Вертикально (поменяйте класс «btn-group» на «btn-group-vertical»):

<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Верхняя</button>
<button type="button" class="btn btn-primary">Средняя</button>
<button type="button" class="btn btn-primary">Нижняя</button>
</div>

Результат:

Основы bootstrap 3 для начинающих. Кнопки (12-й урок)

Иконка в кнопке

Классно смотрятся кнопки, когда внутри их еще есть и иконки. Тему иконок мы уже проходили.

<button type="button" class="btn btn-success btn-lg">
<span class="glyphicon glyphicon-phone"></span> Мобильная версия
</button>

Результат:

Иконка в кнопке

Вот и все, я думаю, тему кнопок мы разобрали, и вы все отлично поняли.
Пробуйте.

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: ,

Мои цели на 2018-2019:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Создать портфолио и мини интернет-магазин шаблонов

4). Довести количество статей до 800

5). Добиться посещаемости 3000 человек/сутки

6). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 810
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4716