Сегодня я позволил солнцу встать раньше, чем я (Г. Лихтенберг).

Bootstrap — Кнопки

3 мин для чтения

Главное меню » Учебное пособие по framework Bootstrap » Bootstrap — Кнопки

(1 оценок, среднее: 5,00 из 5)

Загрузка...

18.05.2017

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

Рабочее состояние

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

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

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

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

Элемент

Класс

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

Добавьте атрибут disabled для кнопки <button>.

Элемент Якорь

Добавьте класс disabled к <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">

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.