Кнопки бутстрап

Как быстро вставлять кнопки используя CSS-классы бутстрапа.

Бесспорно, в применении кнопки из CSS стилей в много-много раз лучше кнопок сделанных из изображений. При загрузке браузером страницы сайта, они не создают дополнительных запросов к серверу, а вес кнопок более чем в тысячу раз легче самой маленькой по размеру картинки кнопки.

Стандартные кнопки

Чтобы создать кнопку, нам нам необходимо применить к элементу стиль с классом .btn. Применять данный стиль можно к любому элементу, но чаще всего стиль кнопки натягивают на ссылку, то есть элементы тега <a>

Кнопки

Главный Вторичный Успех Опасность Предупреждение Инфо Светлый Темный Кнопка ссылка

HTML-код кнопок с классами Bootstrap

<button type="button" class="btn btn-primary">Главный</button>
<button type="button" class="btn btn-secondary">Вторичный</button>
<button type="button" class="btn btn-success">Успех</button>
<button type="button" class="btn btn-danger">Опасность</button>
<button type="button" class="btn btn-warning">Предупреждение</button>
<button type="button" class="btn btn-info">Инфо</button>
<button type="button" class="btn btn-light">Светлый</button>
<button type="button" class="btn btn-dark">Темный</button>
<button type="button" class="btn btn-link">Кнопка ссылка</button>

Кнопки из разных элементов

Ссылка Кнопка

<a class="btn btn-primary" href="#" role="button">Ссылка</a>
<button class="btn btn-primary" type="submit">Кнопка</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">

Кнопки без фона (контурные)

Главный Вторичный Успех Опасность Предупреждение Инфо Светлый Темный

HTML-код:

<button type="button" class="btn btn-outline-primary">Главный</button>
<button type="button" class="btn btn-outline-secondary">Вторичный</button>
<button type="button" class="btn btn-outline-success">Успех</button>
<button type="button" class="btn btn-outline-danger">Опасность</button>
<button type="button" class="btn btn-outline-warning">Предупреждение</button>
<button type="button" class="btn btn-outline-info">Инфо</button>
<button type="button" class="btn btn-outline-light">Светлый</button>
<button type="button" class="btn btn-outline-dark">Темный</button>

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

Если нужно изменить размер кнопки, ей добавляют классы .btn-lg или .btn-sm

Большая кнопка Большая кнопка

<button type="button" class="btn btn-primary btn-lg">Большая кнопка</button>
<button type="button" class="btn btn-secondary btn-lg">Большая кнопка</button>

Маленькая кнопка Маленькая кнопка

<button type="button" class="btn btn-primary btn-sm">Маленькая кнопка</button>
<button type="button" class="btn btn-secondary btn-sm">Маленькая кнопка</button>

Чтобы кнопка была размером на всю ширину блока, ей добавляют класс .btn-block

Блочная кнопка Блочная кнопка

<button type="button" class="btn btn-primary btn-lg btn-block">Блочная кнопка</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Блочная кнопка</button>