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

Класс Описание
btnКнопка по умолчанию / Стандартная.
btn-primaryОбеспечивает дополнительный визуальный вес и определяет основное действие в наборе кнопок.
btn-successУказывает на успешное или позитивное действие.
btn-infoКонтекстная кнопка для информационных предупреждающих сообщений.
btn-warningУказывает, что с этим действием следует проявлять осторожность.
btn-dangerУказывает на опасное или потенциально негативное действие.
btn-linkДеформируйте кнопку, сделав ее похожей на ссылку, сохраняя при этом поведение кнопки.

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

<!-- 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-lgЭто делает размер кнопки большим.
.btn-smЭто делает размер кнопки маленьким.
.btn-xsЭто делает размер кнопки слишком маленьким.
.btn-blockЭто создает кнопки уровня блока - те, которые охватывают всю ширину родителя.

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

<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 предоставляет классы, которые позволяют изменять состояние кнопок как активных, отключенных и т. Д., Каждый из которых обсуждается в следующих разделах.

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

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

Элемент Класс
Элемент кнопкиИспользуйте активный класс, чтобы показать, что он активирован.
Анкерный элементИспользуйте активный класс для кнопок 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.

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

<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, чтобы избежать проблем с несогласованностью между браузерами.

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

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

Посмотреть результат


Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!



Cookies make it easier for us to provide you with our services. With the usage of our services you permit us to use cookies.
Ok