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

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

Стиль кнопок

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

Вид кнопки	Класс
	btn btn-default
	btn btn-primary
	btn btn-info
	btn btn-success
	btn btn-warning
	btn btn-danger
	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>

Результат:

- Вертикально (поменяйте класс «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>

Результат:

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

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

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

Результат:

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

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

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

Нажмите, чтобы отменить ответ.

Имя (required)

Mail (will not be published) (required)

Сайт

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

Метки: Bootstrap, основы