Учебники

Bootstrap — кнопки

Октябрь 26, 2018

В этой главе описаны примеры использования кнопки Bootstrap. Все, что имеет класс .btn, будет наследовать вид по умолчанию серой кнопки с закругленными углами. Тем не менее, Bootstrap предоставляет несколько вариантов стилей кнопок, которые приведены в следующей таблице:

Учебный класс Описание
БТН Кнопка по умолчанию / Стандартная.
БТН-первичный Обеспечивает дополнительный визуальный вес и определяет основные действия в наборе кнопок.
БТН-успех Указывает на успешное или положительное действие.
БТН-инфо Контекстная кнопка для информационных предупреждающих сообщений.
БТН-предупреждение Указывает, что с этим действием следует быть осторожным.
БТН-опасность Указывает на опасное или потенциально негативное действие.
БТН-ссылка Уменьшите значение кнопки, сделав ее похожей на ссылку, сохраняя при этом поведение кнопки.

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

<!-- Standard button -->
<button type = "button" class = "btn btn-default">Default Button</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type = "button" class = "btn btn-primary">Primary Button</button>

<!-- Indicates a successful or positive action -->
<button type = "button" class = "btn btn-success">Success Button</button>

<!-- Contextual button for informational alert messages -->
<button type = "button" class = "btn btn-info">Info Button</button>

<!-- Indicates caution should be taken with this action -->
<button type = "button" class = "btn btn-warning">Warning Button</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type = "button" class = "btn btn-danger">Danger Button</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type = "button" class = "btn btn-link">Link Button</button>

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

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

Учебный класс Описание
.btn-Л.Г. Это делает размер кнопки большим.
.btn-см Это делает размер кнопки маленьким.
.btn-хз Это делает размер кнопки очень маленьким.
.btn-блок Это создает кнопки уровня блока — те, которые охватывают всю ширину родительского элемента.

Следующий пример демонстрирует это — 

<p>
   <button type = "button" class = "btn btn-primary btn-lg">
      Large Primary button
   </button>
   
   <button type = "button" class = "btn btn-default btn-lg">
      Large button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary">
      Default size Primary button
   </button>
   
   <button type = "button" class = "btn btn-default">
      Default size button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary btn-sm">
      Small Primary button
   </button>
   
   <button type = "button" class = "btn btn-default btn-sm">
      Small button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary btn-xs">
      Extra small Primary button
   </button>
   
   <button type = "button" class = "btn btn-default btn-xs">
      Extra small button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary btn-lg btn-block">
      Block level Primary button
   </button>
   
   <button type = "button" class = "btn btn-default btn-lg btn-block">
      Block level button
   </button>
</p>

Состояние кнопки

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

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

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

Элемент Учебный класс
Элемент кнопки Используйте класс .active, чтобы показать, что он активирован.
Якорный элемент Используйте класс .active для кнопок <a>, чтобы показать, что он активирован.

Следующий пример демонстрирует это — 

<p>
   <button type = "button" class = "btn btn-default btn-lg ">
      Default Button
   </button>
   
   <button type = "button" class = "btn btn-default btn-lg active">
      Active Button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary btn-lg">
      Primary button
   </button>
   
   <button type = "button" class = "btn btn-primary btn-lg active">
      Active Primary button
   </button>
</p>

Государство с ограниченными возможностями

Когда вы отключите кнопку, она исчезнет в цвете на 50% и потеряет градиент.

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

Элемент Учебный класс
Элемент кнопки Добавьте отключенный атрибут к кнопкам <button>.
Якорный элемент

Добавьте отключенный класс к кнопкам <a>.

Примечание. Этот класс будет изменять только внешний вид <a>, но не его функциональность. Вам нужно использовать пользовательский JavaScript, чтобы отключить ссылки здесь.

Добавьте отключенный класс к кнопкам <a>.

Примечание. Этот класс будет изменять только внешний вид <a>, но не его функциональность. Вам нужно использовать пользовательский JavaScript, чтобы отключить ссылки здесь.

Следующий пример демонстрирует это — 

<p>
   <button type = "button" class = "btn btn-default btn-lg">
      Default Button
   </button>
   
   <button type = "button" class = "btn btn-default btn-lg" disabled = "disabled">
      Disabled Button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary btn-lg">
      Primary button
   </button>
   
   <button type = "button" class = "btn btn-primary btn-lg" disabled = "disabled">
      Disabled Primary button
   </button>
</p>

<p>
   <a href = "#" class = "btn btn-default btn-lg" role = "button">
      Link
   </a>
   
   <a href = "#" class = "btn btn-default btn-lg disabled" role = "button">
      Disabled Link
   </a>
</p>

<p>
   <a href = "#" class = "btn btn-primary btn-lg" role = "button">
      Primary link
   </a>
   
   <a href = "#" class = "btn btn-primary btn-lg disabled" role = "button">
      Disabled Primary link
   </a>
</p>

Теги кнопок

Вы можете использовать классы кнопок с элементом <a>, <button> или <input>. Но рекомендуется использовать его с элементами <button> главным образом во избежание проблем с несовместимостью между браузерами.

Следующий пример демонстрирует это —

59
Share: