Бутони

Bootstrap предоставя 7 вида бутони и в списъка по-долу може да се види точно как изглеждат:

Следните класове възпроизвеждат горепосочения ефект:

  • .btn-default
  • .btn-primary
  • .btn-success
  • .btn-info
  • .btn-warning
  • .btn-danger
  • .btn-link

Следният пример показва кода за различните стилове на бутоните:

Опитайте сами »

Тези класове могат да се ползват при HTML елементите <a>, <button>, или <input>.

Опитайте сами »

Защо поставяме в атрибута href на връзката знака #? Тъй като нямаме страница, с която да го свързваме и не искаме да попаднем на страница „404“, ние поставяме # като връзка в примерите ни. Иначе трябва да е реален URL адрес на конкретна страница.

Размери на бутоните

Bootstrap предоставя четири различни размера на бутоните: Голям, среден, малък и много малък. Класовете които определят различните размери са както следва: .btn-lg .btn-md .btn-sm .btn-xs

Опитайте сами »

Блокови бутони

Бутон във вид на блок обхваща цялата ширина на родителския елемент. Добавете класа .btn-block, за да създадете бутон на ниво блок:

Опитайте сами »

Активни / деактивирани бутони

Бутонът може да бъде настроен на състояние активно (се появява натиснато) или деактивирано (неклиматично):

Активни и забранени бутони. Класа active прави един бутон активен тоест може да се „натиска“ докато класа disabled прави бутона неактивен, тоест дори и да кликаме по него няма да се случва нищо – същия ефект както ако кликаме по фона на уебстраницата.

Опитайте сами »

Групиране на бутони

Bootstrap ви позволява да групирате серия от бутони заедно (на един ред):

Използвайте елемента div с класа .btn-group за да създадете група бутони:

Опитайте сами »

Съвет: Вместо да задавате размери на всеки бутон в групата, използвайте класа .btn-group-lg | sm | xs, за да оразмерите всички бутони в групата:

Опитайте сами »

Вертикално групиране на бутони

Използвайте клас .btn-group-vertical, за да създадете вертикална група:

Опитайте сами »

Подравнени към двете страни

За да обхванете цялата ширина на екрана, използвайте клас .btn-group-justified:

Опитайте сами »

Забележка: За елементите button трябва да обградите всеки от тях в друг елемент с клас .btn-group:

Опитайте сами »

Вложени бутони и падащи менюта

Опитайте сами »

Разделяне на бутоните един от друг

Опитайте сами »