4.1 KiB
title | localeTitle |
---|---|
Buttons | Кнопки |
Кнопки
Структура 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
Это информационная кнопка бутстрапа.
Информация
.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.