Btn warning какой цвет

Buttons

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Examples

Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.

Primary Secondary Success Danger Warning Info Light Dark Link

 type="button" class="btn btn-primary">Primary  type="button" class="btn btn-secondary">Secondary  type="button" class="btn btn-success">Success  type="button" class="btn btn-danger">Danger  type="button" class="btn btn-warning">Warning  type="button" class="btn btn-info">Info  type="button" class="btn btn-light">Light  type="button" class="btn btn-dark">Dark  type="button" class="btn btn-link">Link 

Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .sr-only class.

Button tags

The .btn classes are designed to be used with the element. However, you can also use these classes on or elements (though some browsers may apply a slightly different rendering).

 class="btn btn-primary" href="#" role="button">Link  class="btn btn-primary" type="submit">Button  class="btn btn-primary" type="button" value="Input">  class="btn btn-primary" type="submit" value="Submit">  class="btn btn-primary" type="reset" value="Reset">

Outline buttons

In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the .btn-outline-* ones to remove all background images and colors on any button.

Primary Secondary Success Danger Warning Info Light Dark

 type="button" class="btn btn-outline-primary">Primary  type="button" class="btn btn-outline-secondary">Secondary  type="button" class="btn btn-outline-success">Success  type="button" class="btn btn-outline-danger">Danger  type="button" class="btn btn-outline-warning">Warning  type="button" class="btn btn-outline-info">Info  type="button" class="btn btn-outline-light">Light  type="button" class="btn btn-outline-dark">Dark 

Sizes

Fancy larger or smaller buttons? Add .btn-lg or .btn-sm for additional sizes.

Large button Large button

 type="button" class="btn btn-primary btn-lg">Large button  type="button" class="btn btn-secondary btn-lg">Large button 

Small button Small button

 type="button" class="btn btn-primary btn-sm">Small button  type="button" class="btn btn-secondary btn-sm">Small button 

Create block level buttons—those that span the full width of a parent—by adding .btn-block .

Block level button Block level button

 type="button" class="btn btn-primary btn-lg btn-block">Block level button  type="button" class="btn btn-secondary btn-lg btn-block">Block level button 

Active state

Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. There’s no need to add a class to s as they use a pseudo-class. However, you can still force the same active appearance with .active (and include the aria-pressed=»true» attribute) should you need to replicate the state programmatically.

 href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link  href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link 

Disabled state

Make buttons look inactive by adding the disabled boolean attribute to any element.

Primary button Button

 type="button" class="btn btn-lg btn-primary" disabled>Primary button  type="button" class="btn btn-secondary btn-lg" disabled>Button 

 href="#" class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link  href="#" class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link 

Link functionality caveat

Button plugin

Do more with buttons. Control button states or create groups of buttons for more components like toolbars.

Toggle states

Add data-toggle=»button» to toggle a button’s active state. If you’re pre-toggling a button, you must manually add the .active class and aria-pressed=»true» to the .

Single toggle

 type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off"> Single toggle 

Checkbox and radio buttons

Bootstrap’s .button styles can be applied to other elements, such as s, to provide checkbox or radio style button toggling. Add data-toggle=»buttons» to a .btn-group containing those modified buttons to enable their toggling behavior via JavaScript and add .btn-group-toggle to style the s within your buttons. Note that you can create single input-powered buttons or groups of them.

The checked state for these buttons is only updated via click event on the button. If you use another method to update the input—e.g., with or by manually applying the input’s checked property—you’ll need to toggle .active on the manually.

Note that pre-checked buttons require you to manually add the .active class to the input’s .

 class="btn-group-toggle" data-toggle="buttons">  class="btn btn-secondary active">  type="checkbox" checked autocomplete="off"> Checked 

Active Radio Radio

 class="btn-group btn-group-toggle" data-toggle="buttons">  class="btn btn-secondary active">  type="radio" name="options" id="option1" autocomplete="off" checked> Active  class="btn btn-secondary">  type="radio" name="options" id="option2" autocomplete="off"> Radio  class="btn btn-secondary">  type="radio" name="options" id="option3" autocomplete="off"> Radio 

Methods

Method	Description
$().button(‘toggle’)	Toggles push state. Gives the button the appearance that it has been activated.
$().button(‘dispose’)	Destroys an element’s button.

Кнопки

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

Примеры

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

Главный Вторичный Успех Опасность Предупреждение Инфо Светлый Темный Линк

 type="button" class="btn btn-primary">Главный  type="button" class="btn btn-secondary">Вторичный  type="button" class="btn btn-success">Успех  type="button" class="btn btn-danger">Опасность  type="button" class="btn btn-warning">Предупреждение  type="button" class="btn btn-info">Инфо  type="button" class="btn btn-light">Светлый  type="button" class="btn btn-dark">Темный  type="button" class="btn btn-link">Линк 

Использование вспомогательных технологий

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

Тэг «кнопка»

Классы .btn созданы для использования с элементом . Однако их также можно использовать внутри или (хотя из-за этого некоторые браузеры могут рендерить это немного иначе).

 class="btn btn-primary" href="#" role="button">Link  class="btn btn-primary" type="submit">Button  class="btn btn-primary" type="button" value="Input">  class="btn btn-primary" type="submit" value="Submit">  class="btn btn-primary" type="reset" value="Reset">

Контурные кнопки (без фона)

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

Главный Вторичный Успех Опасность Предупреждение Инфо Светлый Темный

 type="button" class="btn btn-outline-primary">Главный  type="button" class="btn btn-outline-secondary">Вторичный  type="button" class="btn btn-outline-success">Успех  type="button" class="btn btn-outline-danger">Опасность  type="button" class="btn btn-outline-warning">Предупреждение  type="button" class="btn btn-outline-info">Инфо  type="button" class="btn btn-outline-light">Светлый  type="button" class="btn btn-outline-dark">Темный 

Размеры

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

Большая кнопка Большая кнопка

 type="button" class="btn btn-primary btn-lg">Большая кнопка  type="button" class="btn btn-secondary btn-lg">Большая кнопка 

Маленькая кнопка Маленькая кнопка

 type="button" class="btn btn-primary btn-sm">Маленькая кнопка  type="button" class="btn btn-secondary btn-sm">Маленькая кнопка 

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

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

 type="button" class="btn btn-primary btn-lg btn-block">Кнопка блочного уровня  type="button" class="btn btn-secondary btn-lg btn-block">Кнопка блочного уровня 

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

Когда кнопки нажимают, появляется более темный фон, границы и внутренняя тень. В BS4 нет необходимости добавлять класс в , т.к. тут используется псевдо-класс. Однако вы можете вызвать «активное» поведение и соответствующий внешний вид, добавив класс .active (и включив атрибут aria-pressed=»true» ) , когда необходимо прямо объявить такое поведение.

 href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Главная ссылка  href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Ссылка 

«Отключенние» кнопки

Заставьте кнопки выглядеть «неактивными» добавлением булеанова атрибута disabled к любому элементу .

Главная кнопка Кнопка

 type="button" class="btn btn-lg btn-primary" disabled>Главная кнопка  type="button" class="btn btn-secondary btn-lg" disabled>Кнопка 

«Отключенные» кнопки, созданные из элемента , ведут себя немного иначе:

• Элемент не поддерживает атрибут disabled , так что для соответствующих свойств вместо него надо добавлять класс .disabled ;
• Некоторые future-friendly стили, которые поддерживаются не всеми юзер-агентами, (т.е. «возможно будут поддерживаться в будущем») включены в для отключения всех событий pointer-events на кнопках-якорях. В браузерах, которые поддерживают это свойство, вы вовсе не увидите деактивированный курсор.
• Отключенные кнопки должны содержать атрибут aria-disabled=»true» для указания вспомогательным технологиям состояния элемента.

 href="#" class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Главный линк  href="#" class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Линк 

Оговорка о некоторых аспектах функциональности ссылок

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

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

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

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

Одиночный переключатель

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

Переключатели («галочки») и «кнопки радио»

Стили классов .button могут применяться к прочим элементам, таким как , для создания переключателей («галочек») или «кнопок радио». Добавьте data-toggle=»buttons» к классу .btn-group , содержащему эти измененные кнопки, для включения «переключателей» в их соответствующих стилях.

Состояние выбора (т.е. когда ставится «галочка») обновляется лишь событием клика click по кнопке. Если вы используете другой метод для обновления ввода – например или вручную применяя свойство ввода checked – вам потребуется вручную применить класс .active к .

Заметьте, что кнопки с предустановленным выбором требуют вручную добавить класс .active к элементу ввода .

 class="btn-group-toggle" data-toggle="buttons">  class="btn btn-secondary active">  type="checkbox" checked autocomplete="off"> Checked 

Active Radio Radio

 class="btn-group btn-group-toggle" data-toggle="buttons">  class="btn btn-secondary active">  type="radio" name="options" id="option1" autocomplete="off" checked> Active  class="btn btn-secondary">  type="radio" name="options" id="option2" autocomplete="off"> Radio  class="btn btn-secondary">  type="radio" name="options" id="option3" autocomplete="off"> Radio 

Методы

Метод	Описание
$().button(‘toggle’)	Задействует состояние «нажатия». Дает кнопке вид активированной (нажатой) кнопки.
$().button(‘dispose’)	Уничтожает кнопку элемента (в элементе).

Using Bootstrap in LibGuides

LibGuides is built upon Bootstrap, a framework of CSS, JavaScript, and HTML. Librarians can increase the usability and functionality of their guides with Bootstrap’s components without the need of extensive web development experience.

• Home
• Accessibility Notes
• The Grid
• Navigation Bar
• Tables
• Panels
• Collapsing ElementsToggle Dropdown
  • Collapsing Using a Link/Button
  • Collapsing Using Panel Accordion
  • Page Navigation
  • Introduction
  • Button Colors
  • Button Sizing
  • Button Groups
  • Other Classes
  • Accessible Button Colors (Not Hover/Focus)
  • For Further Information

  Head of Research & Access

  

  Schedule Appointment
  Contact:
  West Texas A&M University
  Cornette Library
  Room 154A
  WTAMU Box 60748
  Canyon, TX 79016
  (806) 651-2228
  Social: LinkedIn Page

  Introduction

  Buttons provide you an ability to make a clickable link or form button. To format buttons, its all a matter of adding classes to the button or a tag.

  Note: To ensure you see the default colors, please see the Bootstrap Buttons page.

  Button Colors

  Color	Button Example	Code
  Default	Default	Default
  Blue	Primary	Primary
  Green	Success	Success
  Light Blue	Info	Info
  Orange	Warning	Warning
  Red	Danger	Danger

  LibGuides have applied some of their own styling to the base of bootstrap. As a result, you will need to add CSS markup for any further customization of button coloring (e.g. accessible hover and focus CSS).

  Button Sizing

  Button Groups

  You can place a series of buttons into a «button group» which formats the buttons together.

  Code

  Color
  Sizing
  Button Groups
  Other Options

  Other Classes

  There are other neat things you can do with buttons but, to keep this page brief, I will link to their relevant sections within the Bootstrap documentation

  Button Toolbar Helps create more complex button groupings. Button Dropdowns Make a button that triggers a dropdown. Vertical Button Group Makes the button group stacked vertically. Justified Button Groups Makes equal sized buttons. Button Block Button fills parent element.

  Accessible Button Colors (Not Hover/Focus)

  Stock Button	Fix to Full AA	Fix to Full AAA
  Default	N/A	N/A
  Primary	N/A	N/A
  Info	.btn-info	.btn-info
  Success	.btn-success	.btn-success
  Danger	.btn-danger	.btn-danger

  For Further Information

  For further information and options concerning buttons and button groups, please see the following websites:

  Buttons

  • Bootstrap Buttons
  • w3cschools Buttons

  Button Groups

  • Bootstrap Button Groups
  • w3cschools Button Groups

  Bootstrap CSS Buttons Reference

  The classes below can be used to style any , , or element:

  Class	Description	Example
  .btn	Adds basic styling to any button	Try it
  .btn-default	Indicates a default/standard button	Try it
  .btn-primary	Provides extra visual weight and identifies the primary action in a set of buttons	Try it
  .btn-success	Indicates a successful or positive action	Try it
  .btn-info	Contextual button for informational alert messages	Try it
  .btn-warning	Indicates caution should be taken with this action	Try it
  .btn-danger	Indicates a dangerous or potentially negative action	Try it
  .btn-link	Makes a button look like a link (will still have button behavior)	Try it
  .btn-lg	Makes a large button	Try it
  .btn-sm	Makes a small button	Try it
  .btn-xs	Makes an extra small button	Try it
  .btn-block	Makes a block-level button (spans the full width of the parent element)	Try it
  .active	Makes the button appear pressed	Try it
  .disabled	Makes the button disabled	Try it
  .navbar-btn	Vertically aligns a button inside a navbar	Try it

  Button Group Classes

  The classes below can be used to style any , , or element:

  Class	Description	Example
  .btn-group	Groups buttons together on a single line	Try it
  .btn-group-justified	Makes a group of buttons span the entire width of the screen	Try it
  .btn-group-lg	Large button group (makes all buttons in a button group larger — increased font-size and padding)	Try it
  .btn-group-sm	Small button group (makes all buttons in a button group smaller)	Try it
  .btn-group-xs	Extra small button group (makes all buttons in a button group extra small)	Try it
  .btn-group-vertical	Makes a button group appear vertically stacked	Try it

  Похожие публикации:

  1. Niche scraper как работать
  2. Как использовать другой класс в c
  3. Как переустановить endless os
  4. Почему трещит микрофон