Кнопки в Bootstrap

Рис.1. Типы кнопок в Bootstrap

Bootstrap содержит заготовленные оформления для 7 видов кнопок, а также дополнительные стили для указания размеров и стилей для нажатых кнопок.

Основные виды кнопок и их соответствия классам:

  • Обычная  - btn-default
  • Основная - btn-primary
  • Кнопка Ok - 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">Кнопка Ok</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>

 

Рис.1. Типы кнопок в Bootstrap

Рис.1. Типы кнопок в Bootstrap

 

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

<a class="btn btn-danger" href="#">Attention!</a>

Аналогично для тэгов <input> и <button>.

 

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

Кроме цвета, можно управлять и размером кнопок. В Bootstrap заложено 4 размера кнопок – btn-lg, btn-md, btn-sm, btn-xs:

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

 

Рис.2. Размеры кнопок Bootstrap

Рис.2. Размеры кнопок Bootstrap

 

Задать кнопкам блочные свойства

Кнопки в HTML являются строчными элементами управления. Для того, чтобы кнопка превратилась в блочный элемент, в Bootstrap есть класс .btn-block. Кнопка с классом .btn-block занимает 100% от ширины родительского элемента.

 

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

Для привлечения внимания к кнопке можно сделать ее активной, добавив для нее класс .active, а также можно отключить кнопку с помощью класса .disabled. Для кнопки с   классом .disabled будут отключены нажатия.

Рис.3. Активная и отключенная кнопки

Рис.3. Активная и отключенная кнопки

 


Комментариев нет »

No comments yet.

RSS feed for comments on this post. TrackBack URL

Leave a comment






MarkiMarta.ru. Записки отца-программиста" с 2009 г.
Категория информационной продукции 18+
Яндекс.Метрика