Компьютерапия

Бутстрап - Кнопки

Категория: Bootstrap 3
Просмотров: 2758

Содержание:

В этой статье описывается использование кнопок в 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">

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




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

Новые статьи

Предыдущие статьи

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok