Руководство Bootstrap Buttons
1- Bootstrap Button
Bootstrap построил некоторые классы Css, чтобы создать Button, с некоторыми стилями (style) для разных целей контекста. При этом главным классом является .btn, и некоторые дополнительные классы для настройки цвета, размера, статуса...<button class="btn">Simple Button</button>
Есть некоторые дополнительные классы Css для настройки цвета Button, или сделать чтобы Button отображался как Link. Вы можете использовать его в разных контекстах.
- btn-primary
- btn-secondary
- btn-success
- btn-danger
- btn-warning
- btn-info
- btn-light
- btn-dark
- btn-link
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Button Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-3">
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-light">Light</button>
<button class="btn btn-dark">Dark</button>
<button class="btn btn-link">Link</button>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>
Классы .btn, .btn-* смоделированы для тегов (tag) <button>, но вы можете использовать их для тегов <a>, <input>, <div>, <span>. Несмотря на то, что они могут быть отображены по разному на разныз браузерах.Примечание: Если вы хотите создать Button с другими тегами помимо <button>, вам стоит использовать еще один атрибут role="button", данный атрибут (attribute) является полезной подсказкой для таких устройств как Screen Reader (Устройство чтения экрана для людей с ограниченными возможностями зрения).
<a class="btn btn-primary m-1" href="#" role="button">Button (A tag)</a>
<button class="btn btn-primary m-1" type="submit">Button (Button tag)</button>
<div class="btn btn-primary m-1" role="button">Button (Div tag)</div>
<span class="btn btn-primary m-1" role="button">Button (Span tag)</span>
2- Outline buttons
В Bootstrap, по умолчанию все Button имеют фоновый цвет. Если вы хотите иметь простой Button, без фонового цвета, используйте классы .btn-outline-*.<button class="btn btn-outline-primary">Primary</button>
<button class="btn btn-outline-secondary">Secondary</button>
<button class="btn btn-outline-success">Success</button>
<button class="btn btn-outline-danger">Danger</button>
<button class="btn btn-outline-warning">Warning</button>
<button class="btn btn-outline-info">Info</button>
<button class="btn btn-outline-light">Light</button>
<button class="btn btn-outline-dark">Dark</button>
3- Размер Button
По умолчанию Button в Bootstrap имеют средний размер (Medium). Используйте класс .btn-sm если вы хотите получить Button с меньшим размером, используйте класс .btn-lg если вы хотите получить Button с большим размером.<button class="btn btn-sm">Small Size .btn-sm</button>
<button class="btn btn-md">Medium Size .btn-md (Default)</button>
<button class="btn">(Default)</button>
<button class="btn btn-lg">Large Size .btn-lg</button>
<button class="btn btn-primary btn-block">.btn-block</button>
<button class="btn btn-block btn-warning">.btn-block</button>
4- Статус active & disabled
.active
Используйте класс .active чтобы Button имел статус, как будто он активен (active). Для Bootstrap один Button в статусе "active" будет иметь цвет темнее, по сравнению с самим собой в нормальном статусе.Вы можете посмотреть изображение ниже, чтобы увидеть разницу между Button в активном статусе и им же в нормальном статусе:<button class="btn btn-primary active">.btn-primary .active</button>
<button class="btn btn-primary">.btn-primary</button>
<br>
<button class="btn btn-outline-primary active">.btn-outline-primary .active</button>
<button class="btn btn-outline-primary">.btn-outline-primary</button>
<br>
<button class="btn btn-success active">.btn-succes .active</button>
<button class="btn btn-success">.btn-succes</button>
<br>
<button class="btn btn-outline-success active">.btn-outline-success .active</button>
<button class="btn btn-outline-success">.btn-outline-success</button>
.disabled
Использовать класс .disabled чтобы отключить Button, пользователь не сможет взаимодействовать с данным Button.<button class="btn btn-primary disabled">.btn-primary .disabled</button>
<button class="btn btn-primary">.btn-primary</button>
<br>
<button class="btn btn-outline-primary disabled">.btn-outline-primary .disabled</button>
<button class="btn btn-outline-primary">.btn-outline-primary</button>
<br>
<button class="btn btn-success disabled">.btn-succes .disabled</button>
<button class="btn btn-success">.btn-succes</button>
<br>
<button class="btn btn-outline-success disabled">.btn-outline-success .disabled</button>
<button class="btn btn-outline-success">.btn-outline-success</button>
Ссылка для скачивания доступна только авторизованным пользователям, пожалуйста пройдите регистрацию.
Это займёт не более минуты. Не волнуйтесь, мы не спамим!
У данной публикации нет комментариев.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Облако тегов
bootstrap Bootstrap css CSS CSS3 DLE dle fruit farm html html шаблон html5 HTML5 Payeer PNG PSD wap Wordpress Скрипт удвоителя адаптивный адаптивный шаблон бонусник дизайн игровой хостинг иконки лендинг модуль панель портфолио сайт скрипт скрипт фермы текстура удвоитель удвоитель Payeer ферма фон фруктовая ферма хак шаблон экономическая игра
Оцените сайт