Alerts

Как создать кнопку с иконкой

1 вариант.


<style>
/* CSS */
.btn-rounded {
    border-radius: 19px;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 3px;
}
</style>
...
<!-- HTML -->
<button type="button" class="btn btn-primary btn-rounded"><i class="fas fa-map text-primary rounded-circle bg-white mr-1" style="padding: 7px 6px;"></i> Map</button>

2 вариант.

<style>
/* CSS */
.btn-icon {
    padding-top: 0;
    padding-bottom: 0;
}        
.btn > .icon {
    position: relative;
    left: -.75rem;
    display: inline-block;
    padding: .375rem .75rem;
    background: rgba(0, 0, 0, 0.15);
    border-radius: .25rem 0 0 .25rem;
}
</style>
...
<!-- HTML -->
<button type="button" class="btn btn-secondary btn-icon">
    <span class="icon"><i class="fas fa-download"></i></span>Download
</button>

3 вариант.

<!-- HTML -->
<button type="button" class="btn btn-secondary">
    Download <i class="fas fa-download"></i>
</button>

Bootstrap Checkboxes

Option 1 Option 2 Option 3

Checkboxes are used if you want the user to select any number of options from a list of preset options.

The following example contains three checkboxes. The last option is disabled:

Example

<div class=»checkbox»>  <label><input type=»checkbox» value=»»>Option 1</label></div><div class=»checkbox»>  <label><input type=»checkbox» value=»»>Option 2</label></div><div class=»checkbox disabled»>  <label><input type=»checkbox» value=»» disabled>Option 3</label></div>

Use the class if you want the checkboxes to appear on the same line:

Option 1 Option 2 Option 3

Example

<label class=»checkbox-inline»><input type=»checkbox» value=»»>Option 1</label><label class=»checkbox-inline»><input type=»checkbox» value=»»>Option 2</label><label class=»checkbox-inline»><input type=»checkbox» value=»»>Option 3</label>

Examples

Wrap the dropdown’s toggle (your button or link) and the dropdown menu within , or another element that declares . Dropdowns can be triggered from or elements to better fit your potential needs.

Single button dropdowns

Any single can be turned into a dropdown toggle with some markup changes. Here’s how you can put them to work with either elements:

Dropdown button

And with elements:

Dropdown link

The best part is you can do this with any button variant, too:

Primary

Secondary

Success

Info

Warning

Danger

Split button dropdowns

Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of for proper spacing around the dropdown caret.

We use this extra class to reduce the horizontal on either side of the caret by 25% and remove the that’s added for regular button dropdowns. Those extra changes keep the caret centered in the split button and provide a more appropriately sized hit area next to the main button.


Primary Toggle Dropdown

Secondary Toggle Dropdown

Success Toggle Dropdown

Info Toggle Dropdown

Warning Toggle Dropdown

Danger Toggle Dropdown

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

Используйте классы .btn-outline-* для добавления семантического цвета только к контуру.

<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css»> <button type=»button» class=»btn btn-outline-primary»>Главная</button> <button type=»button» class=»btn btn-outline-secondary»>Вторичная</button> <button type=»button» class=»btn btn-outline-info»>Информация</button> <button type=»button» class=»btn btn-outline-success»>Успех</button> <button type=»button» class=»btn btn-outline-warning»>Предупреждение</button> <button type=»button» class=»btn btn-outline-danger»>Опасность</button> <button type=»button» class=»btn btn-outline-light»>Светлая</button> <button type=»button» class=»btn btn-outline-dark»>Тёмная</button>

Bootstrap 4 против Bootstrap 3

Контурные кнопки являются новыми в Bootstrap 4.

Для кнопок-ссылок нет контура (иными словами, класса .btn-outline-link не существует).

Резюме файла BTN

Расширение файла BTN включает в себя один основных типов файлов и его можно открыть с помощью AutoPlay Media Studio (разработчик — Indigo Rose). В общей сложности с этим форматом связано всего один программное (-ых) обеспечение (-я). Чаще всего они имеют тип формата AutoPlay Media Studio Button File. В большинстве случаев эти файлы относятся к Developer Files.

Расширение файла BTN поддерживается Windows. Данные типы файлов можно найти в основном на настольных компьютерах и некоторых мобильных устройствах. Рейтинг популярности расширения файла BTN составляет «Низкий», что означает, что эти файлы, как правило, не встречаются в большинстве файловых хранилищ пользователя.

Button plugin

Do more with buttons. You can control button states or create groups of buttons for more components like toolbars.

Toggle states

Add to toggle a button’s state. If you’re pre-toggling a button, you must manually add the class and the attribute to the .

Bootstrap’s styles can be applied to other elements, such as s, to provide checkbox or radio style button toggling. You just need to add to a containing those modified buttons to enable toggling in their respective styles.

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

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

Изменения в бета-3

Хотя в бета-2 было много важных изменений в его бета-фазе, однако некоторые недостатки перекочевали в релиз 3. Эти изменения применяются, если вы обновляете бета-2 или более раннюю версию до бета-3.

Разное

  • Удалена неиспользуемая переменная . Это был лишний код.
  • Пак npm больше не включает в себя ничего, кроме исходников и файлов dist. Если ваш проект зависел от них и вы запускали скрипты через , придется реадаптировать ваш проект.

Формы

  • Переписаны обычные, существовавшие по умолчанию, чекбоксы и «радио» кнопки. Сейчас они оба имеют совпадающую HTML-структуру (внешние с «детьми» и ), и одинаковые стили разметки (вертикально по умолчанию, строчно – с классами-модификаторами). Это позволяет стилизовать лейблы, основываясь на состоянии формы ввода, и упрощает поддержку атрибута (которому раньше требовался родительский класс), а также дает возможность оптимизировать поддержку форм валидации.

    В согласии с описанным мы изменили CSS, управляющий множественными в формах чекбокса и кнопках «радио». В предыдущей версии существовал ныне отсутствующий элемент класса , который отвечал за цвет фона, градиент и SVG-иконку. В старых версиях настройка градиента фона означала замещение всех фонов всякий раз, когда вам требовалось изменить лишь один. Сейчас у нас есть для вида заполнения и градиента и , который взаимодействует с иконкой.

    Для создания обычного строчного элемента проверки, добавьте класс .

  • Вместо для задания стиля и поведения, мы используем атрибут для JS, а также новый класс для стилизации.

  • Удален класс в пользу слегка улучшенного . Поэтому классы и легко можно использовать в элементах .

  • Обычные формы загрузки файлов изменились в своей переменной Sass . Это больше не вложенная карта Sass, теперь она управляет лишь кнопкой , поскольку та стала единственным псевдо-элементом, созданным из нашей карты Sass. Текст теперь содержится в классе .

Группы ввода

  • Аддоны групп ввода теперь связаны с их размещением относительно каждого ввода. Мы заменили классы и двумя новыми: и . Теперь вы должны использовать их явно, что упрощает CSS. В дополнение или добавление разместите свои кнопки, как они бы существовали где-либо еще, но оберните текст в .

  • Теперь стали поддерживаться стили валидации, а также формы ввода с возможностью множественного выбора (хотя в них вы можете выбрать и всего одно значение).

  • Классы размеров должны располагаться в родительской группе класса и не должны быть в отдельных элементах форм.

Button Classes

The classes below can be used to style any <a>, <button>, or <input> 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

Выпадающие списки в навигационном меню (navbar)

Добавление выпадающих списков к элементам навигационного меню:

<nav class="navbar navbar-default navbar-static">
  <div class="container-fluid">
    <div class="navbar-header">
      <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".js-navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#" style="padding:15px 15px;">Название проекта</a>
    </div>
    <div class="collapse navbar-collapse js-navbar">
      <ul class="nav navbar-nav">
        <li><a href="#">Главная</a></li>
        <li class="dropdown">
          <a id="drop1" href="#" class="dropdown-toggle" data-toggle="dropdown">
            Меню
            <span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
            <li><a href="#">Текст подпункта</a></li>
            <li><a href="#">Текст подпункта</a></li>
            <li class="divider"></li>
            <li><a href="#">Текст подпункта</a></li>
          </ul>
        </li>
        <li class="dropdown">
          <a id="drop1" href="#" class="dropdown-toggle" data-toggle="dropdown">
            Меню
            <span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
            <li><a href="#">Текст подпункта</a></li>
            <li><a href="#">Текст подпункта</a></li>
            <li class="divider"></li>
            <li><a href="#">Текст подпункта</a></li>
          </ul>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a id="drop1" href="#" class="dropdown-toggle" data-toggle="dropdown">
            Меню
            <span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
            <li><a href="#">Текст подпункта</a></li>
            <li><a href="#">Текст подпункта</a></li>
            <li class="divider"></li>
            <li><a href="#">Текст подпункта</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

Button Styles

Bootstrap provides different styles of buttons:

Basic Default Primary Success Info Warning Danger Link

To achieve the button styles above, Bootstrap has the following classes:

The following example shows the code for the different button styles:

Example


<button type=»button» class=»btn»>Basic</button><button type=»button» class=»btn btn-default»>Default</button><button type=»button» class=»btn btn-primary»>Primary</button><button type=»button» class=»btn btn-success»>Success</button><button type=»button» class=»btn btn-info»>Info</button><button type=»button» class=»btn btn-warning»>Warning</button><button type=»button» class=»btn btn-danger»>Danger</button><button type=»button» class=»btn btn-link»>Link</button>

The button classes can be used on an , , or element:

Example

<a href=»#» class=»btn btn-info» role=»button»>Link Button</a><button type=»button» class=»btn btn-info»>Button</button> <input type=»button» class=»btn btn-info» value=»Input Button»><input type=»submit» class=»btn btn-info» value=»Submit Button»>

Why do we put a # in the href attribute of the link?Since we do not have any page to link it to, and we do not want to get a «404» message, we put # as the link in our examples. It should be a real URL to a specific page.

Button plugin

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

Toggle states

Add to toggle a button’s state. If you’re pre-toggling a button, you must manually add the class and to the .

Single toggle

Checkbox and radio buttons

Bootstrap’s styles can be applied to other elements, such as s, to provide checkbox or radio style button toggling. Add to a containing those modified buttons to enable their toggling behavior via JavaScript and add 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 event on the button. If you use another method to update the input—e.g., with or by manually applying the input’s property—you’ll need to toggle on the manually.

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

Checked

Active Radio Radio

Methods

Method Description
Toggles push state. Gives the button the appearance that it has been activated.
Destroys an element’s button.

Button Outline

Bootstrap 4 provides eight outline/bordered buttons:

Primary Secondary Success Info Warning Danger Dark Light

Example

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

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

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

<!-- Bootstrap 3 -->
<button type="button" class="btn btn-warning btn-lg btn-block">Текст кнопки</button>
<button type="button" class="btn btn-primary btn btn-block">Текст кнопки</button>
<button type="button" class="btn btn-success btn-sm btn-block">Текст кнопки</button>
<button type="button" class="btn btn-danger btn-xs btn-block">Текст кнопки</button>
<!-- Bootstrap 4 -->
<button type="button" class="btn btn-primary btn-lg btn-block">Текст кнопки</button>
<button type="button" class="btn btn-secondary btn-block">Текст кнопки</button>
<button type="button" class="btn btn-success btn-sm btn-block">Текст кнопки</button>

Переключатели и флажки

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

Переключатели

Пощёлкайте по кнопкам, чтобы увидеть эффект переключения.

<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css»> <div class=»btn-group btn-group-toggle» data-toggle=»buttons»> <label class=»btn btn-primary active»> <input type=»checkbox» name=»options» id=»option1″ autocomplete=»off» checked> Ботинки </label> <label class=»btn btn-primary»> <input type=»checkbox» name=»options» id=»option2″ autocomplete=»off»> Обувь </label> <label class=»btn btn-primary»> <input type=»checkbox» name=»options» id=»option3″ autocomplete=»off»> Ноги </label> </div> <script src=»https://code.jquery.com/jquery-3.3.1.slim.min.js»></script> <script src=»https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js»></script>

Флажки

Пощёлкайте по кнопкам, чтобы увидеть эффект переключения.

<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css»> <div class=»btn-group btn-group-toggle» data-toggle=»buttons»> <label class=»btn btn-primary active»> <input type=»radio» name=»options» id=»option1″ autocomplete=»off» checked> Ботинки </label> <label class=»btn btn-primary»> <input type=»radio» name=»options» id=»option2″ autocomplete=»off»> Обувь </label> <label class=»btn btn-primary»> <input type=»radio» name=»options» id=»option3″ autocomplete=»off»> Ноги </label> </div> <script src=»https://code.jquery.com/jquery-3.3.1.slim.min.js»></script> <script src=»https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js»></script>

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

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 class.

Изменения в бета-2

В бета-2 мы не хотели вносить разительных изменений. Однако, планы изменились

Ниже перечислены важнейшие изменения, на которые надо обратить внимание при переходе с бета-1 на бета-2

Изменения

  • Мы удалили переменную и его связь с . Мы используем функцию контраста цвета для взаимодействия с , основанным на , так что переменная стала ненужной.
  • Переназвали функцию как , чтобы избежать серьезного конфликта с нативным фильтром CSS .
  • Переназвали , и как и , чтобы они совпадали с нашими цветовыми схемами, которые используются везде.
  • Отзывчивые таблицы теперь генерируют классы для каждого брейкпойнта сетки. Это коренным образом различается с практикой в бета-1 в том, что класс , который вы используете, стал больше похож на . Теперь вы можете использовать классы или , как удобно.
  • Мы удалили поддержку Bower, т.к. менеджер пакетов устарел (более новые — Yarn or npm). Смотри здесь.
  • BS4 все еще требует jQuery 1.9.1 или выше, но мы советуем использовать версию 3.х, т.к. браузеры, поддерживаемые этими версиями, поддерживаются и BS4; к тому же версии 3.х лучше с т.зр. безопасности.
  • Мы удалили неиспользуемый класс . Если вы использовали его, замените его классом , который вертикально центрировал элемент с его связанными формами ввода в разметке горизонтальных форм ввода.
  • Миксин , который включал свойство , теперь стал функцией, которая возвращает значение, позволяющее вам использовать его как свойство CSS. Например, вместо , используйте .

Подсветка

Мы ввели новое использование pointer-events на модальных элементах. Внешний .modal-dialog итерируется по событиям со свойством pointer-events: none для обычной обработки клика (и делает возможным отслеживание и обработку кликов на элементе класса .modal-backdrop), и затем передает их активному на тот момент элементу класса .modal-content с pointer-events: auto.

Добавление выпадающих меню с помощью JavaScript

Вы также можете добавить выпадающие списки к элементам веб-страницы с помощью JavaScript. Для этого Вам необходимо вызвать для ссылки или кнопки, используя её идентификатор () или имя класса (), метод Bootstrap .

Примечание: Использование атрибута является необходимым условием для добавления к компоненту выпадающего списка, независимо от того, вызываете ли вы dropdown (выпадающий список) через JavaScript или data-api (data attributes).

<script type="text/javascript">
$(document).ready(function(){
  $(".dropdown-toggle-js").dropdown();
});  
</script>

<div class="dropdown">
  <a href="#" class="dropdown-toggle-js" data-toggle="dropdown">
    Ссылка с выпадающим меню 
    <b class="caret"></b>
  </a>
  <ul class="dropdown-menu">
    <li><a href="#">Пункт 1</a></li>
    <li><a href="#">Пункт 2</a></li>
    <li class="divider"></li>
    <li><a href="#">Пункт 3</a></li>
  </ul>
</div>

Параметры и методы плагина dropdowns

Плагин dropdowns (выпадающий список) не имеет параметров, но зато имеет следующий метод:

Этот метод показывает или скрывает (т.е. переключает из одного состояния в другое) выпадающее меню для указанного с помощью селектора (идентификатора или класса) элемента веб-страницы. Демонстрация этого метода рассмотрена в вышеприведенном примере.

События плагина dropdowns

Все события связанные с выпадающими списками выполняются на уровне родительского элемента (элемента, который управляет отображением или скрытием выпадающего меню). События и их описания представлены в следующей таблице:

Событие Описание
show.bs.dropdown Это событие срабатывает сразу после вызова метода show (показать). Элемент , который управляет отображением или скрытием выпадающего списка для этого события, доступен через свойство .
shown.bs.dropdown Это событие срабатывает, когда выпадающий список становится видимым для пользователя (т.е. когда выполнены все CSS стили, необходимые для отображения выпадающего списка).
hide.bs.dropdown Данное событие срабатывает сразу же после вызова метода hide (скрыть). Элемент , который управляет отображением или скрытием выпадающего списка для этого события, доступен через свойство
hidden.bs.dropdown Это событие срабатывает, когда выпадающий список был окончательно скрыт от пользователя (т.е. когда выполнены все CSS стили, необходимые для скрытия выпадающего списка).
<script type="text/javascript">
$(document).ready(function(){
    $(".dropdown-events").on("show.bs.dropdown", function(e){
        // Присвоить переменной textMenuItem текст ссылки
        var textMenuItem = $(e.relatedTarget).text();
        alert("Нажмите на OK для просмотра выпадающего меню для пункта: " + textMenuItem);
    });
});
</script>

<ul class="nav nav-pills">
  <li class="active"><a href="#">Пункт 1</a></li>
  <li><a href="#">Пункт 2</a></li>
  <li class="dropdown dropdown-events">
    <a href="#" data-toggle="dropdown" class="dropdown-toggle">
      Пункт 3 
      <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      <li><a href="#">Подпункт 1</a></li>
      <li><a href="#">Подпункт 2</a></li>
      <li class="divider"></li>
      <li><a href="#">Подпункт 3</a></li>
    </ul>
  </li>
  <li class="dropdown pull-right dropdown-events">
    <a href="#" data-toggle="dropdown" class="dropdown-toggle">
      Пункт 4 
      <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      <li><a href="#">Подпункт 1</a></li>
      <li><a href="#">Подпункт 2</a></li>
      <li class="divider"></li>
      <li><a href="#">Подпункт 3</a></li>
    </ul>
  </li>
</ul>

Элементы кнопок

Стили кнопок Bootstrap 4 ориентированы на использование с элементом <button>, но их также можно применять к элементам <input> и <a>. Вы также можете применять стили кнопок к элементу <label> при работе с переключателями и флажками (подробнее об этом ниже).

<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css»> <a class=»btn btn-primary» href=»#» role=»button»>Ссылка</a> <button class=»btn btn-primary» type=»submit»>Кнопка</button> <input class=»btn btn-primary» type=»button» value=»Ввести»> <input class=»btn btn-primary» type=»submit» value=»Отправить»>

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

Рекомендуется использовать элемент <button> при возможности, так как он лучше всего согласован во всех браузерах.

Документация

Наша документация также обновилась по всем направлениям. Вот свод:

  • Мы все еще используем Jekyll, но в сочетании с плагинами:
    • используется для создания списка записей на нашей странице поиска багов в разных браузерах.
    • стандартный «форк» плагина по умолчанию , который позволяет облегчать создание блоков примеров код.
    • стандартный «форк» одноименного плагина, но созданный для вызовов наших специальных документов.
    • jekyll-toc используется для создания таблиц с содержимым.
  • Все содержимое документации было переписано в «Markdown» (вместо HTML) для более легкого редактирования.
  • Страницы реорганизованы в связи с упрощением их содержимого и представлены в более понятной иерархии.
  • BS4 перешел с CSS на SCSS, что позволяет полностью использовать преимущества бутстрапа — переменные, миксины и т.д.

Отзывчивые утилиты

Все переменные удалены из BS4. Используйте вместо них Sass миксины , или или карты Sass .

Большинство наших отзывчивых классов – утилит удалено, на их место пришли утилиты .

  • Классы и удалены, т.к. они конфликтовали с методами jQuery и . Вместо них используйте изменение атрибута или используйте вложенные стили, такие как и .
  • Все классы удалены ради утилит печати, которые также были переименованы.
    • Удалено из вер. 3:
    • Удалено из альфа-версий 4:
  • Утилиты печати больше не начинаются с или , а начинаются с .
    • Старые названия: , , ,
    • Новые классы: , , ,

Для того, чтобы сделать элемент видимым, лучше просто не прятать его на данном размере экрана, а не использовать классы . Можно сочетать один класс с одним , чтобы показать элемент лишь на данном интервале размеров экрана (например, покажет элемент только на больших и средних девайсах).

Заметим, что изменения в брейкпойнтах сеток в версии 4 привели к тому, что теперь необходимо применять бОльший брейкпойнт (т.е. следующий в сторону увеличения от фактического нужного) для достижения тех же результатов. Новые отзывчивые классы-утилиты не работают в менее обычных случаях, например, когда видимость элемента не может быть выражена одиночным набором размеров области видимости, в таких случаях используйте обычный CSS.

Отключенные кнопки

Bootstrap предлагает определённые стили для состояния disabled (а также для других состояний, например, active). Если нужно отключить кнопку, которая использует элемент <a>, вы можете добавить класс .disabled.

Не нужно делать это на кнопках, сделанных через элементы <button> и <input>. Чтобы отключить такие кнопки воспользуйтесь стандартным атрибутом disabled в HTML.

<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css»> <p><a href=»#» class=»btn btn-primary btn-lg disabled» role=»button»>Элемент a</a></p> <p><button type=»button» class=»btn btn-lg btn-primary» disabled=»disabled»>Элемент button</button></p> <p><input type=»button» class=»btn btn-lg btn-primary» disabled=»disabled» value=»Элемент input»></p>

Bootstrap использует pointer-events: none для отключения кнопок-ссылок (таких кнопок, которые созданы с помощью элемента <a>). Это работает в большинстве случаев, но не во всех. Следовательно, вы также должны использовать JavaScript, чтобы отключить функциональность кнопок-ссылок (или при возможности просто воспользоваться элементом <button>).

Типы файлов BTN

Ассоциация основного файла BTN

.BTN

Формат файла: .btn
Тип файла: AutoPlay Media Studio Button File

Файл BTN является кнопкой файл в первую очередь ассоциируется с AutoPlay Media Studio, программное обеспечение, используемое для создания мультимедийных приложений, игр и меню CD. Он действует как хранилище для стилей кнопок программного обеспечения.

Создатель: Indigo Rose
Категория файла: Файлы разработчика
Ключ реестра: HKEY_CLASSES_ROOT\.btn

Программные обеспечения, открывающие AutoPlay Media Studio Button File:

AutoPlay Media Studio, разработчик — Indigo Rose

Совместимый с:

Windows

С этим читают