Опубликовано от — Оставить комментарий

Bootstrap кнопки

Bootstrap кнопки
Bootstrap кнопки

Bootstrap кнопки — это оформленные в едином стиле HTML-элементы a,button,input. Указанным элементам назначаются классы .btn и .btn-default (.btn-success или другие). Кнопки могут быть окрашены в классы, с названиями похожими на классы покраски строк таблицы.  .btn-primary (синий), .btn-success (зелёный), .btn-info (голубой) , .btn-warning (оранжевый), .btn-danger (красный), .btn-link (просто оформление ссылки).

Bootstrap кнопки

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

<a class="btn btn-default" href="#">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input" />
<input class="btn btn-default" type="submit" value="Submit" />

Заблокированное состояние кнопки создается классом .disabled. Примечание: при этом IE9 и ниже не вполне правильно применяют CSS-стили.

Содержание класса .btn:

.btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}

Содержание класса .btn-default:

.btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}

То есть при желании мы можем расширить количество цветов кнопок или добавить другие стили.

Добавить комментарий