knopki-

Пример постраничной навигации

• «
• 1
• 2
• 3
• 4
• 5
• »

Пример кодa постраничной навигации

<ul class="pagination">
 <li><a href="#">«</a></li>
 <li><a href="#">1</a></li>
 <li><a href="#">2</a></li>
 <li><a href="#">3</a></li>
 <li><a href="#">4</a></li>
 <li><a href="#">5</a></li>
 <li><a href="#">»</a></li>
</ul>

Кнопки

Пример код кнопки

<button type="button" class="btn btn-default">Кнопка</button>
<button type="button" class="btn btn-primary">Основная</button>
<button type="button" class="btn btn-success">Успех</button>
<button type="button" class="btn btn-info">Информация</button>
<button type="button" class="btn btn-warning">Внимание</button>
<button type="button" class="btn btn-danger">Ошибка</button>
<button type="button" class="btn btn-link">Ссылка</button>

Типы элементов

Стили кнопок в Bootstrap могут применяться к элементам<button> и <input type="button">, а также к ссылкам<a>Кнопке нужно присвоить класс .btnи один из классов, чтобы добавить ей стиль. Для примера возьмем.btn-default.

<a class="btn btn-default" href="#" role="button">Кнопка</a>
<button class="btn btn-default" type="submit">Кнопка</button>
<input class="btn btn-default" type="button" value="Кнопка">

В результате мы получим три одинаково выглядящих элемента.

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

Код кнопок

<button type="button" class="btn btn-primary btn-lg">Большая</button>
<button type="button" class="btn btn-primary btn-md">Средняя</button>
<button type="button" class="btn btn-primary btn-sm">Маленькая</button>
<button type="button" class="btn btn-primary btn-xs">Еще меньше</button>

.btn-lg

Большая

.btn-md

Средняя

.btn-sm

Маленькая

.btn-xs

Еще меньше

Блочные кнопки

Вы можете превратить строчные кнопки в блочные элементы. Для этого присвойте им класс .btn-block.

<button type="button" class="btn btn-primary btn-lg btn-block">Блочная кнопка</button>
<button type="button" class="btn btn-default btn-lg btn-block">Блочная кнопка</button>

Активные и заблокированные кнопки

Кнопке можно назначить активный (нажатый) вид, а также заблокированное состояние. Класс .activeотображает, как кнопка выглядит во время нажатия, а класс .disabled делает ее неактивной.

Полная справка по кнопкам в Bootstrap

Класс	Описание
.btn	Добавляет базовое оформление к кнопке
.btn-default	Стандартный вид кнопки
.btn-primary	Основная кнопка
.btn-success	Подтверждение
.btn-info	Кнопка для информационных сообщений
.btn-warning	Кнопка для предупреждающих сообщений
.btn-danger	Кнопка отмены, очистки формы
.btn-link	Кнопка, которая выглядит как ссылка
.btn-lg	Большой размер кнопки
.btn-sm	Маленькая размер
.btn-xs	Еще меньший размер
.btn-block	Блочный вид кнопки (она занимает всю ширину родительского элемента)
.active	Кнопка выглядит нажатой
.disabled	Неактивная кнопка