Кнопка Стили
Bootstrap предоставляет семь стилей кнопок:
По об
Для достижения стили кнопок выше, Bootstrap имеет следующие классы:
-
.btn-default -
.btn-primary -
.btn-success -
.btn-info -
.btn-warning -
.btn-danger -
.btn-link
Следующий пример показывает код для различных стилей кнопки:
пример
<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 для создания кнопки на уровне блоков:
Активные / Кнопки для инвалидов
Кнопка может быть установлен активным (появится нажата) или инвалида (unclickable) состояние:
Класс .active делает кнопку появляется нажатой, а класс .disabled делает кнопку unclickable:
пример
<button
type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary disabled">Disabled
Primary</button> Попробуй сам " Проверьте себя с упражнениями!
Упражнение 1 » Упражнение 2» Упражнение 3 » Упражнение 4»
Полная Bootstrap Кнопка Справочник
Для полного ведения всех классов кнопки, перейдите на наш полный Bootstrap Button Reference .