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