Кнопки начальной загрузки
Стили кнопок
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-sm.btn-xs
В следующем примере показан код для разных размеров кнопок:
Пример
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Normal</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 .