4.1 KiB
| title | localeTitle |
|---|---|
| Buttons | Кнопки |
Кнопки
Библиотека Bootstrap предоставляет различные варианты для стилизации кнопок. Эти стили помогут вам дать пользователю визуальное представление о том, что каждая кнопка делает.
Как использовать:
Чтобы использовать кнопки из бибилиотеки Bootstrap вы выполняете те же шаги, что и при создании кнопки в HTML, за исключением того, что вам также потребуется применить к кнопке соответствующий CSS класс. Пример кода приведен ниже.
Пример кода:
<button type="button" class="btn btn-primary">Primary</button>
Первичный
Также, вы можете использовать Bootstrap кнопки вместе с элементами <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.