ОСНОВНОЕ

WORDPRESS

Операционные системы

Базы данных

Фреймворк Bootstrap

Задержаться в литературе удается немногим, но остаться — почти никому (К.И. Чуковский).

Bootstrap – Входные группы

FavoriteLoadingДобавить в избранное
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)
Загрузка...
Bootstrap - входные группы
В этой главе рассказывается о еще одной функции Bootstrap, как входные группы. Входные группы это продолжение Форм. Используя входные группы, вы можете легко предварять и добавить текст или кнопки для текстовых входов.

Добавляя содержимое в поле ввода, вы можете добавить общие элементы пользовательского ввода. Например, вы можете добавить символ доллара, @ для имени пользователя Twitter, или что-нибудь другое, что может быть общим для интерфейса приложения.

Для того, чтобы добавить элементы в .form-control:

  • Заверните его <div> в класс .input-group
  • В качестве следующего шага, в том же <div>, разместите дополнительный контент внутри <span> с классом .input-group-addon.
  • Теперь поместите этот <span> либо до, либо после элемента <input>.

Для перекрестной совместимости браузера, избегайте использования здесь элементов <select>, поскольку они не могут быть полностью оформлены в WebKit браузерах. Также не применяются классы входных групп непосредственно для формирования группы. Группа входов является изолированным компонентом.

Основные группы входов

Следующий пример демонстрирует основную входную группу:

 

Размер входной группы

Вы можете изменить размер входных групп, путем добавления относительных классов формы, как .input-group-lg, input-group-sm, input-group-xs к .input-group. Содержимое внутри будет автоматически изменять размер.

Продемонстрируем пример:

 

Дополнительные флажки и радио

Вы можете заранее добавить радио кнопки и флажки вместо текста, как показано в следующем примере:

 

Дополнительная кнопка

Вы даже можете добавлять кнопки во входных группах. Вместо класса .input-group-addon, вам нужно использовать класс .input-group-btn, чтобы завернуть кнопки. Это необходимо из-за стилей браузера по умолчанию, которые не могут быть переопределены. Этот пример демонстрирует это:

 

Кнопки с выпадающим списком

Добавление кнопок с выпадающим меню во входных группах могут быть сделано, просто оборачивая кнопку и раскрывающееся меню в класс .input-group-btn, как показано в следующем примере:

 

Сегментные кнопки

Для сегментирования кнопок и выпадающего списка во входных группах, используйте один и тот же общий стиль кнопки, но добавить первичное действие вместе с раскрывающимся можно увидеть в следующем примере:

 

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

Войти с помощью: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Простая логическая игра "Поймай кота". Задача игры окружить кота точками так, чтобы он не смог убежать с поля. Постигла неудача - начни игру снова!

Заполните форму и наш менеджер перезвонит Вам в самое ближайшее время!

badge
Обратный звонок 1
Отправить
galka

Спасибо! Ваша заявка принята

close
galka

Спасибо! Ваша заявка принята

close