2018-10-12 20:00:59 +00:00
---
title: Buttons
localeTitle: Кнопки
---
## Кнопки
2018-11-03 20:53:17 +00:00
Библиотека Bootstrap предоставляет различные варианты для стилизации кнопок. Эти стили помогут вам дать пользователю визуальное представление о том, что каждая кнопка делает.
2018-10-12 20:00:59 +00:00
#### Как использовать:
2018-11-03 20:53:17 +00:00
Чтобы использовать кнопки из бибилиотеки Bootstrap вы выполняете те же шаги, что и при создании кнопки в HTML, за исключением того, что вам также потребуется применить к кнопке соответствующий CSS класс. Пример кода приведен ниже.
2018-10-12 20:00:59 +00:00
2018-11-13 17:07:18 +00:00
**Пример кода:**
2018-10-12 20:00:59 +00:00
2018-11-13 17:07:18 +00:00
```html
< button type = "button" class = "btn btn-primary" > Primary< / button >
```
2018-11-03 20:53:17 +00:00
Также, вы можете использовать Bootstrap кнопки вместе с элементами `<a>` и `<input>` , как показано в приведенных ниже примерах.
2018-10-12 20:00:59 +00:00
2018-11-13 17:07:18 +00:00
```html
< a class = "btn btn-primary" href = "#" role = "button" > This button is a link< / a >
```
2018-10-12 20:00:59 +00:00
[Эта кнопка является ссылкой ](# )
2018-11-13 17:07:18 +00:00
```html
< input class = "btn btn-primary" type = "submit" value = "Submit" >
```
2018-10-12 20:00:59 +00:00
#### Bootstrap Button Список классов:
2018-10-28 17:16:13 +00:00
Это список классов CSS, которые бутстрап предусматривает для кнопок:
2018-10-12 20:00:59 +00:00
`.btn` Это базовая кнопка бутстрапа.
основной
2018-10-28 17:16:13 +00:00
`.btn-default` Это кнопка по умолчанию в бутстрапе.
2018-10-12 20:00:59 +00:00
По умолчанию
`.btn-primary` Это основная кнопка бутстрапа.
первичный
`.btn-success` Это кнопка успеха бутстрапа.
успех
2018-10-28 17:16:13 +00:00
`.btn-info` Это информационная кнопка бутстрапа.
2018-10-12 20:00:59 +00:00
Информация
`.btn-warning` Это кнопка предупреждения бутстрапа.
Предупреждение
`.btn-danger` Это кнопка опасности бутстрапа.
Опасность
`.btn-link` Это кнопка ссылки для загрузки.
Ссылка на сайт
`.btn-light` Это световая кнопка бутстрапа.
Свет
#### Размер кнопки загрузки:
2018-10-28 17:16:13 +00:00
Это список классов CSS для кнопок разного размера:
2018-10-12 20:00:59 +00:00
`.btn-lg` Это большая кнопка бутстрапа.
большой
`.btn-sm` Это маленькая кнопка бутстрапа.
Маленький
`.btn-xs` Это дополнительная маленькая кнопка бутстрапа.
Очень маленький
2018-10-28 17:16:13 +00:00
#### Бутстрап Очерченые кнопки:
2018-10-12 20:00:59 +00:00
2018-10-28 17:16:13 +00:00
Можно также очертить кнопки, а не полностью окрашивать их. Это достигается путем размещения `outline` в середину класса кнопки, которую вы хотите использовать. Пример использования будет следующим:
2018-10-12 20:00:59 +00:00
2018-11-13 17:07:18 +00:00
```html
< button type = "button" class = "btn btn-outline-primary" > Primary< / button >
```
2018-10-12 20:00:59 +00:00
2018-10-28 17:16:13 +00:00
Очерченые кнопки являются частью Bootstrap с версии 4, пожалуйста, убедитесь, что вы используете правильную версию, если вы не можете заставить их работать.
2018-10-12 20:00:59 +00:00
_Пр име ча ние . Н е включайте точку в атрибуте класса HTML, ссылаясь на классы с точкой, используется только при настройке классов в CSS._
#### Дополнительная информация:
* [Документация по кнопкам Bootstrap ](https://getbootstrap.com/docs/4.0/components/buttons/ )
* [Бутстрап Кнопка Групповая документация ](http://getbootstrap.com/docs/4.0/components/button-group/ )
2018-10-28 17:16:13 +00:00
* [Начальная загрузка ](/articles/bootstrap/bootstrap-get-started )