Bootstrap включає оформлення для семи видів кнопок:

Для того, щоб кнопка відібражалась в потрібному вам стилі, надайте їй відповідний клас:

  • .btn-default (Стандартна);
  • .btn-primary (Основна);
  • .btn-success (Підтвердити);
  • .btn-info (Повідомлення);
  • .btn-warning (Увага);
  • .btn-danger (Скасування);
  • .btn-link (Посилання).

Код для кнопок з прикладу:

<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="Кнопка">

В результаті отримаємо три однакових елемента:

Розміри кнопок

Bootstrap дозволяє змінювати розмір кнопки за допомогою додаткового класу. За замовчуванням ви можете обирати з-поміж чотирьох розмірів кнопки:

Код кнопок з прикладу:

<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 Неактивна кнопка

Наступний урок (Урок №4: Верстання шаблонів, мобільне верстання)

Перелік усіх уроків


 Похожие публикации
2016-05-31 • Просмотров [ 47 ]