Заявление
Кнопки
Стандартные кнопки
Стиль кнопки может быть применен к любому элементу с классом .btn. Но скорее всего Вы будете применить его к элементам <a> и <button>, для наилучшего результата.
| Кнопка | Класс | Описание |
|---|---|---|
btn |
Стандартная серая кнопка | |
btn btn-primary |
Синяя сильно заметная и выделяющаяся кнопка, используется для обозначения основного действия | |
btn btn-info |
Используйте как альтернативу кнопке по умолчанию | |
btn btn-success |
Обозначает позитивное действие или успешное выполнение | |
btn btn-warning |
Обозначает какое-либо предупреждение | |
btn btn-danger |
Обозначает негативное действие или какую-либо ошибку | |
btn btn-inverse |
Альтернативная темно-серая кнопка | |
btn btn-link |
Позволяет обратить кнопку в ссылку по стилю, при этом сохраняя весь функционал элемента button |
Совместимость с браузерами
IE9 не подгоняет градиенты к элементам и закругленным углам, так что мы убрали их. Еще IE9 делает недоступным применение стилей к элементам button, текст становится серым и добавляется ужасная тень, которую невозможно исправить.
Различные размеры
Нужны большие и маленькие кнопки? Добавьте классы .btn-large, .btn-small, или .btn-mini для дополнительных размеров.
<p> <button class="btn btn-large btn-primary" type="button">Large button</button> <button class="btn btn-large" type="button">Large button</button> </p> <p> <button class="btn btn-primary" type="button">Default button</button> <button class="btn" type="button">Default button</button> </p> <p> <button class="btn btn-small btn-primary" type="button">Small button</button> <button class="btn btn-small" type="button">Small button</button> </p> <p> <button class="btn btn-mini btn-primary" type="button">Mini button</button> <button class="btn btn-mini" type="button">Mini button</button> </p>
Нужна кнопка размер которой совпадает с шириной родительского элемента? — Добавьте класс .btn-block к нопке или любому элементу с классом .btn.
<button class="btn btn-large btn-block btn-primary" type="button">Block level button</button> <button class="btn btn-large btn-block" type="button">Block level button</button>
Отключенное состояние
Дополнительные стили кнопок, позволяют понять что они не кликабельные или отключены.
Элемент Anchor Ссылка
Для отключения ссылок со стилем кнопок добавьте класс .disabled.
<a href="#" class="btn btn-large btn-primary disabled">Primary link</a> <a href="#" class="btn btn-large disabled">Link</a>
Внимание! Используйте .disabled как дополнительный класс, так же как и класс .active, без префиксов. И имейте ввиду что для элемента >a< - это только применения стиля, Вы должны использовать JavaScript для полноценного отключения ссылок.
Элемент Button Кнопка
Добавьте атрибут disabled к элементу <button> для отключения кнопки.
<button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button> <button type="button" class="btn btn-large" disabled>Button</button>
Один класс, несколько тегов
Используйте класс .btn для элементов <a>, <button>, или <input>.
<a class="btn" href="/">Link</a> <button class="btn" type="submit">Button</button> <input class="btn" type="button" value="Input"> <input class="btn" type="submit" value="Submit">
Для наилучшей совместимости с браузерами, используйте элементы корректно обрабатываемые во всех браузерах. Например input, используйте как кнопку <input type="submit">.
Как и цвет текста контекстных классов, легко устанавливать фон элемента к любому контекстному классу. Якорные компоненты будут темнеть при наведении, как и текстовые классы.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>
Hello, world!
This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.
Buttons
Thumbnails
Dropdown menus
Navbars
Alerts
Progress bars
List groups
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
List group item heading
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
List group item heading
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
List group item heading
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Panels
Panel title
Panel title
Panel title
Panel title
Panel title
Panel title
Wells
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.
