ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ
×

Bootstrap 4 Tutorial

BS4 HOME BS4 Get Started BS4 Grid Basic BS4 Typography BS4 Colors BS4 Tables BS4 Images BS4 Jumbotron BS4 Alerts BS4 Buttons BS4 Button Groups BS4 Badges BS4 Progress Bars BS4 Pagination BS4 List Groups BS4 Cards BS4 Dropdowns BS4 Collapse BS4 Navs BS4 Navbar BS4 Forms BS4 Inputs BS4 Carousel BS4 Modal BS4 Tooltip BS4 Popover BS4 Scrollspy BS4 Utilities BS4 Flex BS4 Media Objects BS4 Filters

Bootstrap 4 Grid

BS4 Grid System BS4 Stacked/Horizontal BS4 Grid XSmall BS4 Grid Small BS4 Grid Medium BS4 Grid Large BS4 Grid XLarge BS4 Grid Examples

Bootstrap 4 Theme

BS4 Basic Template

Bootstrap 4 Ref

All Classes JS Alert JS Button JS Carousel JS Collapse JS Dropdown JS Modal JS Popover JS Scrollspy JS Tab JS Tooltip

Bootstrap 4 Buttons


Стили кнопок

Bootstrap 4 предоставляет различные стили кнопок:

Пример

<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</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-dark">Dark</button>
<button type="button" class="btn btn-light">Light</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 4 предоставляет восемь контурных/обрамленных кнопок:

Пример

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<button type="button" class="btn btn-outline-light text-dark">Light</button>


Размеры кнопок

Bootstrap 4 предоставляет различные размеры кнопок:

Пример

<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Default</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>

Кнопки уровня блока

Добавьте класс, .btn-block чтобы создать кнопку уровня блока, охватывающую всю ширину родительского элемента.

Пример

<button type="button" class="btn btn-primary btn-block">Button 1</button>

Активные/отключенные кнопки

Кнопке может быть присвоено активное (отображаемое нажатие) или отключенное (неинтерактивное) состояние:

Класс .active делает нажатой кнопку, и disabled атрибут делает кнопку ненажатой. Обратите внимание, что элементы < a > не поддерживают отключенный атрибут и поэтому должны использовать .disabled класс, чтобы сделать его визуально видимым отключенным.

Пример

<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary" disabled>Disabled Primary</button>
<a href="#" class="btn btn-primary disabled">Disabled Link</a>