Содержание

Кнопки · Bootstrap на русском

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

Используйте Bootstrap пользовательские стили кнопок для действий в формы, диалоговые окна и многое другое. Включает поддержку для нескольких контекстуальных вариаций, размеров, состояния и более.

Содержание

  • Содержание
  • Примеры
  • Кнопка теги
  • Контур кнопки
  • Размеры
  • Активное состояние
  • Неактивное состояние
  • Плагин кнопки
    • Тумблер состояния
    • Флажки и радиокнопки
    • Методы

Примеры

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

<!-- Обеспечивает дополнительный визуальный вес и определяет основное действие в кнопки -->
<button type="button">Primary</button>
<!-- Вторичное, кнопка контур -->
<button type="button">Secondary</button>
<!-- Указывает на успешное или позитивное действие -->
<button type="button">Success</button>
<!-- Контекстную кнопку на информационные сообщения -->
<button type="button">Info</button>
<!-- Указывает, следует проявлять осторожность с этим действием -->
<button type="button">Warning</button>
<!-- Указывает на опасное или потенциально негативное действие -->
<button type="button">Danger</button>
<!-- Кнопки соединяются, делая его похожим на ссылку сохраняя поведение кнопки -->
<button type="button">Link</button>
Передать смысл для ассистивных технологий

Используя цвет, чтобы добавить смысл только обеспечивает визуальную индикацию, которая не будет доведена до пользователей ассистивных технологий, таких как экранные дикторы. Убедитесь, что информация обозначается цвет либо очевидно из самого содержимого (например, текст), или включен с помощью альтернативных средств, таких как дополнительный текст, скрытый с .sr-only класс.

Кнопка теги

В .btn классы предназначены для использования с <button> элемент. Однако, вы также можете использовать эти классы на

<a> или <input> элементов (хотя некоторые браузеры могут применять несколько разных перевода).

При нажатии кнопки-классы на <a> элементов, которые используются для запуска в разделе функции (например, сворачивание содержимого), а не ссылок на новые страницы или разделы в рамках текущей страницы, эти ссылки следует давать role="button", чтобы правильно донести свои цели для вспомогательных технологий, таких как программы чтения с экрана.

Link

<a href="#" role="button">Link</a>
<button type="submit">Button</button>
<input type="button" value="Input">
<input type="submit" value="Submit">
<input type="reset" value="Reset">

Контурные кнопки

Нужна кнопка, но не дюже цвета фона они приносят? Заменить по умолчанию модификатор классов с . btn-outline-*, чтобы удалить все фоновые изображения и цвета на любую кнопку.

<button type="button">Primary</button>
<button type="button">Secondary</button>
<button type="button">Success</button>
<button type="button">Info</button>
<button type="button">Warning</button>
<button type="button">Danger</button>

Размеры

Необычные большие или меньшие кнопки? Добавить .btn-lg или .btn-sm дополнительные размеры.

<button type="button">Large button</button>
<button type="button">Large button</button>
<button type="button">Small button</button>
<button type="button">Small button</button>

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

<button type="button">Block level button</button>
<button type="button">Block level button</button>

Кнопок будет нажата (на темном фоне, темные границы, и вставка тень) когда активный. Там нет необходимости, чтобы добавить класс в <button>, так как они используют псевдо-класса. Тем не менее, вы все равно можете заставить же активное появление с .active (и включают в себя aria-pressed="true" атрибут) если Вам необходимо скопировать состояние программно.

Primary link Link

<a href="#" role="button" aria-pressed="true">Primary link</a>
<a href="#" role="button" aria-pressed="true">Link</a>

Сделайте кнопки которые выглядят не активно, добавив disabled логический атрибут к любому <button> элементу.

Внимание! IE9 и ниже отрисовка кнопок отключен с серым, тени текста, который мы не можем обойти.

<button type="button" disabled>Primary button</button>
<button type="button" disabled>Button</button>

Кнопки отключить с помощью <a> элемент вести себя немного по-другому:

  • <a> не поддерживают disabled атрибут, так что вы должны добавить
    . disabled     класса, чтобы сделать его визуально отключены.
  • Некоторые будущие чистые стили, чтобы отключить все pointer-events на кнопки якорь. В браузерах, которые поддерживают это свойство, Вы не увидите курсор отключен вообще.
  • Кнопок отключен должен содержать aria-disabled="true" атрибут указать состояние элемента для вспомогательных технологий.

Primary link Link

<a href="#" role="button" aria-disabled="true">Primary link</a>
<a href="#" role="button" aria-disabled="true">Link</a>
Ссылка функционального пояснения

.disabled класса pointer-events: none попробовать отключить функциональность ссылке из <a>, но что CSS собственность еще не стандартизировано. Кроме того, даже в браузерах, которые поддерживают pointer-events: none, навигация с помощью клавиатуры остается в силе, это означает, что зрячие пользователи клавиатуры и пользователи технологий будут по-прежнему сможете активировать эти ссылки. Так, чтобы быть безопасным, добавить

tabindex="-1" атрибут по этим ссылкам, (чтобы предотвратить их от получать фокус клавиатуры) и использовать настраиваемые JavaScript отключить их функциональность.

Плагин кнопки

Делать больше с кнопками. Кнопки управления состояния или создавайте группы кнопок дополнительные компоненты, такие как панели инструментов.

Тумблер состояния

Добавить data-toggle="button" для включения кнопки active состояние. Если вы заранее переключить кнопку, Вы должны вручную добавить .active класс и aria-pressed="true" на <button>.

 
<button type="button" data-toggle="button" aria-pressed="false" autocomplete="off">
  Single toggle
</button>

Флажки и радиокнопки

Bootstrap .button стили могут быть применены и другие элементы, такие как <label>, чтобы обеспечить флажок или радио стиль кнопки переключения. Добавить data-toggle="buttons" на .btn-group, содержащая измененные кнопки для включения переключения в соответствующих стилях.

Проверенные состояние этих кнопок обновлять только через click событие на кнопку. Если вы используете другой метод обновления входного сигнала, например, с

<input type="reset"> или вручную, применяя входа checked собственность—вы нужно переключить .active на <label> вручную.

Обратите внимание, что предварительно проверил кнопки необходимо вручную добавить .active класс к входа <label>.

Checkbox 1 (pre-checked) Checkbox 2 Checkbox 3

<div data-toggle="buttons">
  <label>
    <input type="checkbox" checked autocomplete="off"> Checkbox 1 (pre-checked)
  </label>
  <label>
    <input type="checkbox" autocomplete="off"> Checkbox 2
  </label>
  <label>
    <input type="checkbox" autocomplete="off"> Checkbox 3
  </label>
</div>

Radio 1 (preselected) Radio 2 Radio 3

<div data-toggle="buttons">
  <label>
    <input type="radio" name="options" autocomplete="off" checked> Radio 1 (preselected)
  </label>
  <label>
    <input type="radio" name="options" autocomplete="off"> Radio 2
  </label>
  <label>
    <input type="radio" name="options" autocomplete="off"> Radio 3
  </label>
</div>

Методы

СпособОписание
$(). button('toggle')Переключение нажимаем состояние. Дает кнопка видимость того, что он был активирован.

Кнопки · Bootstrap v4.5

Посмотреть на GitHub Оригинал

Используйте настраиваемые стили кнопок Bootstrap для действий в формах, диалоговых окнах и т.д. с поддержкой нескольких размеров, состояний и т.д.

Примеры

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

<button type="button">Primary</button>
<button type="button">Secondary</button>
<button type="button">Success</button>
<button type="button">Danger</button>
<button type="button">Warning</button>
<button type="button">Info</button>
<button type="button">Light</button>
<button type="button">Dark</button>
<button type="button">Ссылка</button>
Передача смысла вспомогательным технологиям

Использование цвета для добавления смысла обеспечивает только визуальную индикацию, которая не будет передана пользователям вспомогательных технологий, таких как программы чтения с экрана. Убедитесь, что информация, обозначенная цветом, либо очевидна из самого содержимого (например, видимый текст), либо включена с помощью альтернативных средств, таких как дополнительный текст, скрытый с помощью класса .sr-only.

Отключить перенос текста

Если Вы не хотите, чтобы текст кнопки переносился, Вы можете добавить к кнопке класс .text-nowrap. В Sass Вы можете установить $btn-white-space: nowrap, чтобы отключить перенос текста для каждой кнопки.

Кнопки-теги

Классы .btn предназначены для использования с элементом <button>. Однако Вы также можете использовать эти классы для элементов <a> или <input> (хотя некоторые браузеры могут применять несколько иной рендеринг).

При использовании классов кнопок в элементах <a>, которые используются для запуска функциональности на странице (например, сворачивания содержимого), вместо того, чтобы ссылаться на новые страницы или разделы на текущей странице, этим ссылкам следует присвоить кнопку role="button", чтобы должным образом донести свою цель до вспомогательных технологий, таких как программы чтения с экрана.

Ссылка

<a href="#" role="button">Ссылка</a>
<button type="submit">Кнопка</button>
<input type="button" value="Ввод">
<input type="submit" value="Отправить">
<input type="reset" value="Сбросить">

Контурная кнопка

Нужна кнопка, но не богатые цвета фона, которые они приносят? Замените классы модификаторов по умолчанию на классы .btn-outline-*, чтобы удалить все фоновые изображения и цвета на любой кнопке.

<button type="button">Primary</button>
<button type="button">Secondary</button>
<button type="button">Success</button>
<button type="button">Danger</button>
<button type="button">Warning</button>
<button type="button">Info</button>
<button type="button">Light</button>
<button type="button">Dark</button>

В некоторых стилях кнопок используется относительно светлый цвет переднего плана, и их следует использовать только на темном фоне, чтобы обеспечить достаточный контраст.

Размеры

Хотите кнопки большего или меньшего размера? Добавьте .btn-lg или .btn-sm для дополнительных размеров.

<button type="button">Большая кнопка</button>
<button type="button">Большая кнопка</button>
<button type="button">Маленькая кнопка</button>
<button type="button">Маленькая кнопка</button>

Создайте кнопки уровня блока — те, которые охватывают всю ширину родительского элемента — путем добавления .btn-block.

<button type="button">Кнопка блочного уровня</button>
<button type="button">Кнопка блочного уровня</button>

Активное состояние

Когда они активны, кнопки будут казаться нажатыми (с более темным фоном, более темной рамкой и вставкой тени). Нет необходимости добавлять класс в <button>, поскольку они используют псевдокласс. Тем не менее, Вы все равно можете принудительно использовать тот же активный внешний вид с помощью .active (и включить атрибут aria-pressed=“true”) если Вам потребуется программно воспроизвести состояние.

Первичная ссылка Ссылка

<a href="#" role="button" aria-pressed="true">Первичная ссылка</a>
<a href="#" role="button" aria-pressed="true">Ссылка</a>

Отключенное состояние

Сделайте кнопки неактивными, добавив логический атрибут disabled к любому элементу <button>.

<button type="button" disabled>Первичная кнопка</button>
<button type="button" disabled>Кнопка</button>

Отключенные кнопки, использующие элемент <a>, ведут себя немного иначе:

  • <a> не поддерживают атрибут disabled, поэтому Вы должны добавить класс .disabled, чтобы он визуально выглядел отключенным.
  • Включены некоторые ориентированные на будущее стили для отключения всех pointer-events на кнопках привязки. В браузерах, которые поддерживают это свойство, Вы вообще не увидите отключенный курсор.
  • Отключенные кнопки должны включать атрибут aria-disabled="true", чтобы указать состояние элемента для вспомогательных технологий.

Первичная ссылка Ссылка

<a href="#" tabindex="-1" role="button" aria-disabled="true">Первичная ссылка</a>
<a href="#" tabindex="-1" role="button" aria-disabled="true">Ссылка</a>
Предупреждение о функциональности ссылок

Класс .disabled использует pointer-events: none, чтобы попытаться отключить функциональность ссылок для <a>, но это свойство CSS еще не стандартизировано. Кроме того, даже в браузерах, которые поддерживают pointer-events: none, навигация с помощью клавиатуры остается неизменной, а это означает, что зрячие пользователи клавиатуры и пользователи вспомогательных технологий по-прежнему смогут активировать эти ссылки. Чтобы быть в безопасности, добавьте к этим ссылкам атрибут tabindex="-1" (чтобы они не получали фокус клавиатуры) и используйте специальный JavaScript, чтобы отключить их функциональность.

Плагин кнопки

Делайте больше с помощью кнопок. Управляйте состояниями кнопок или создавайте группы кнопок для дополнительных компонентов, таких как панели инструментов.

Переключатель состояния

Добавьте data-toggle="button" для переключения состояния кнопки active. Если Вы предварительно переключаете кнопку, Вы должны вручную добавить класс .active и aria-pressed="true" к <button>.

<button type="button" data-toggle="button" aria-pressed="false">
  Одиночный переключатель
</button>

Кнопки флажки и переключатели

Стили Bootstrap .button могут применяться к другим элементам, таким как <label>, для обеспечения переключения флажков или переключателей стилей. Добавьте data-toggle="buttons" к .btn-group, содержащий эти измененные кнопки, чтобы включить их поведение переключения через JavaScript, и добавьте .btn-group-toggle для стилизации <input> внутри Вашей кнопки. Обратите внимание, что Вы можете создавать кнопки с питанием от одного входа или их группы.

Проверенное состояние для этих кнопок обновляется только через событие click на кнопке. Если Вы используете другой метод для обновления ввода — например, с помощью <input type="reset"> или вручную применяя свойство ввода checked, Вам нужно переключить .active на <label> вручную.

Обратите внимание, что предварительно отмеченные кнопки требуют, чтобы Вы вручную добавили класс .active к ввводу <label>.

Выбрано

<div data-toggle="buttons">
  <label>
    <input type="checkbox" checked> Выбрано
  </label>
</div>

Активная Переключатель Переключатель

<div data-toggle="buttons">
  <label>
    <input type="radio" name="options" checked> Активная
  </label>
  <label>
    <input type="radio" name="options"> Переключатель
  </label>
  <label>
    <input type="radio" name="options"> Переключатель
  </label>
</div>

Методы

МетодОписание
$(). button('toggle')Переключает состояние push. Придает кнопке вид, что она была активирована.
$().button('dispose')Уничтожает кнопку элемента.

Bootstrap 4 кнопки

❮ Предыдущая Далее ❯

Стили кнопок

Bootstrap 4 предоставляет различные стили кнопок:

Пример










Попробуйте сами »

Классы кнопок можно использовать на ,

Попробуйте сами »

Почему мы помещаем # в атрибут href связь?

С у нас нет страницы, на которую можно было бы связать, и мы не хотим получить «404» сообщение, ставим # как ссылку. В реальной жизни это, конечно, должен быть настоящий URL-адрес страницы «Поиск».

Контур кнопки

Bootstrap 4 предоставляет восемь кнопок с контуром/границей:

Пример




<тип кнопки ="button">Информация




Попробуйте сами »

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

Используйте класс .btn-lg для больших кнопок или класс .btn-sm для маленьких кнопок:

Пример




Попробуйте сами »

Кнопки уровня блока

Добавить класс . btn-block для создания кнопки блочного уровня который охватывает всю ширину родительского элемента.

Пример

Попробуйте сами »

Кнопки Active/Disabled

Кнопка может быть установлена ​​в активное (кажется нажатым) или отключенное (неактивное) состояние:

Класс .active создает кнопка появляется нажата, а атрибут отключен делает кнопку ненажимаемой. Обратите внимание, что элементы не поддерживают отключенный атрибут и поэтому должен использовать .disabled класс , чтобы он отображался визуально неполноценный.

Пример



Отключенная ссылка

Попробуйте сами »

Кнопки Spinner

Вы также можете добавить «spinners» к кнопке, о чем вы узнаете больше в нашем Учебнике по Spinners BS4:

Пример

<кнопка>
 


Попробуйте сами »

❮ Назад Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебник по HTML
Учебник по CSS
Учебник по JavaScript
Учебник How To
Учебник по SQL
Учебник по Python
Учебник по W3.CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery
9000 3

Основные каталожные номера
Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3. CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

ФОРУМ | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Кнопки начальной загрузки

❮ Предыдущая Далее ❯

Стили кнопок

Bootstrap предоставляет различные стили кнопок:

Для достижения описанных выше стилей кнопок Bootstrap имеет следующие классы:

  • .btn
  • .btn-по умолчанию
  • .btn-первичный
  • . btn-успех
  • .btn-info
  • .btn-предупреждение
  • .btn-опасность
  • .btn-ссылка

В следующем примере показан код для различных стилей кнопок:

Пример








Попробуйте сами »

Классы кнопок можно использовать на ,

Попробуйте сами »

Почему мы помещаем # в атрибут href связь?

С у нас нет страницы, на которую можно было бы связать, и мы не хотим получить «404» сообщение, мы ставим # как ссылку в наших примерах. Это должен быть реальный URL-адрес конкретная страница.

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

Bootstrap предлагает четыре размера кнопок:

Классы, определяющие различные размеры:

  • .btn-lg
  • .бтн-см
  • .btn-xs

В следующем примере показан код для разных размеров кнопок:

Пример





Попробуйте сами »

Кнопки уровня блока

Кнопка уровня блока занимает всю ширину родительского элемента.

Добавьте класс .btn-block для создания кнопки уровня блока:

Пример

Попробуйте сами »

Active/Disable г Кнопки

Кнопка может быть установлена ​​в активное (кажется нажатым) или отключенное (ненажимаемое) состояние:

Класс . active заставляет кнопку казаться нажатой, а класс .отключено делает кнопку недоступной для нажатия:

Пример


Попробуйте сами »

Проверьте себя с помощью упражнений

Упражнение:

Добавьте класс Bootstrap, чтобы правильно оформить кнопку как «опасную».

Начать упражнение

Полный справочник кнопок начальной загрузки

Полный справочник всех классов кнопок см. в нашем полном Справочник по кнопкам начальной загрузки.

❮ Предыдущий Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Основные ссылки
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.

No related posts.