Bootstrap Кнопки
Стили кнопок
Bootstrap предоставляет различные стили кнопок:
Для достижения стилей кнопок выше, Bootstrap имеет следующие классы:
.btn.btn-default.btn-primary.btn-success.btn-info.btn-warning.btn-danger.btn-link
В следующем примере показан код для различных стилей кнопок:
Пример
<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>
Классы кнопок можно использовать для <a> <button> элемента, или <input> элемент:
Пример
<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">
Почему мы ставим # в href атрибут ссылки?
Поскольку у нас нет какой-либо страницы, чтобы связать его, и мы не хотим, чтобы получить "404" сообщение, мы ставим # в качестве ссылки в наших примерах. Это должен быть реальный URL на конкретную страницу.
Размеры кнопок
Bootstrap обеспечивает четыре размера кнопок:
Классы, которые определяют различные размеры:
.btn-lg.btn-md.btn-sm.btn-xs
В следующем примере показан код для различных размеров кнопок:
Пример
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary btn-md">Medium</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary btn-xs">XSmall</button>
Кнопки уровня блока
Кнопка уровня блока охватывает всю ширину родительского элемента.
Добавьте класс .btn-block для создания кнопки уровня блока:
Пример
<button type="button" class="btn btn-primary btn-block">Button 1</button>
Активные/отключенные кнопки
Кнопке может быть присвоено активное (отображаемое нажатие) или отключенное (неинтерактивное) состояние:
Класс .active делает нажатой кнопку, и класс .disabled делает кнопку ненажатой:
Пример
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary disabled">Disabled Primary</button>
Полная справка на кнопки Bootstrap
Для полной ссправки на все классы кнопок, перейдите на наш полный справка на кнопку Bootstrap.
