ОСНОВНОЕ

WORDPRESS

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

Базы данных

Фреймворк Bootstrap

Не старость сама по себе уважается, а прожитая жизнь. Если она была (В. Шукшин).

Bootstrap – Формы

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

Макет формы

Bootstrap предоставляет следующие типы макетов форм:

  • Вертикальная (по умолчанию) форма
  • Встроенная форма
  • Горизонтальная форма

Вертикальная или основная форма

Структура основной формы поставляется с Bootstrap; отдельные элементы управления формы автоматически получают некоторые глобальные стили. Для создания основной формы выполните следующие действия:

  • Добавьте роль form к родителю элемента <form>.
  • Оберните этикетки и элементы управления в <div> классом .form-group. Это необходимо для оптимального расстояния.
  • Добавить класс .form-control для всех текстовых элементов <input>, <textarea> и <select>.
 

Встроенная форма

Для того, чтобы создать форму, где все элементы являются рядными, выравнивание по левому краю и метки вместе, добавить класс .form-inline для тега <form>.

 

  • По умолчанию inputs, selects, and texta имеет ширину в Bootstrap 100%. Вы должны установить ширину на контролях форм при использовании встроенной формы.
  • С использованием класса .sr-only можно скрыть метки встроенных форм.

Горизонтальная форма

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

  • Добавить класс .form-horizontal родителю элемента <form>.
  • Оберните метки и элементы управления <div> классом .form-group.
  • Добавьте класс .control-label на метки.
 

Поддерживаемые элементы управления формы

Bootstrap изначально поддерживает наиболее распространенные формы управления в основном input, textarea, checkbox, radio, и select.

Inputs

Наиболее распространенной формой текстового поля является полем ввода. Это где пользователи будут вводить большинство необходимых данных формы. Bootstrap предлагает поддержку для всех встроенных типов ввода HTML5: текст, пароль, DateTime, дата, месяц, время, неделя, номер, адрес электронной почты, URL, поиск, тел, и цвет. Правильный тип декларации требуется, чтобы входы выглядели стильно.

 

Textarea

Текстовое поле используется, когда нужно несколько строк ввода. Изменение атрибута rows по мере необходимости (меньше rows = меньше форма, больше rows = больше форма).

 

CheckBoxes и радиокнопки

Флажки и переключатели являются большими, если вы хотите, чтобы пользователи смогли выбрать из списка предустановленных опций.

  • При создании формы, используйте checkbox, если вы хотите, чтобы пользователь мог выбрать любое количество опций из списка. Используйте radio, если вы хотите ограничить пользователя только одним выбором.
  • Используйте класс .checkbox-inline or .radio-inline серии флажков или радио кнопок для управления на одной и той же линии.

Следующий пример демонстрирует оба типа (по умолчанию и встроенного):

 

Selects

Select используются, когда вы хотите позволить пользователю выбрать один из нескольких вариантов, но по умолчанию она позволяет только один.

  • Используйте <select > для опций списка, с которыми пользователь знаком, например, состояний или цифры.
  • Используйте multiple = “multiple”, чтобы позволить пользователям выбрать более одного варианта.

Следующий пример демонстрирует, как (выбрать один или несколько) типов:

 

Static Control

Используйте класс .form-control-static в <р>, когда вам необходимо поместить обычный текст рядом с формой метки в горизонтальном виде.

 

Форма состояния контроля

В дополнении к : focus (т.е., пользователь нажимает на вход или вкладка на него) состояние, Bootstrap предлагает стиль для входа disabled и классов для проверки формы.

фокус ввода

Когда вход получает :focus, контур ввода удаляется и применяется box-shadow.

lnputs disabled

Если вам необходимо отключить вход, просто добавьте атрибут disabled, который не только выведет его из строя, он также изменит стиль и курсор мыши при наведении курсора на элемент.

Fieldsets disabled

Добавить отключенный атрибут в <fieldset>, чтобы отключить все элементы управления в пределах <fieldset>.

Проверка состояния

Bootstrap включает в себя стили проверки на наличие ошибок, предупреждений и сообщений успеха. Для использования, просто добавьте соответствующий класс (.has-warning, .has-error или .has-success) к родительскому элементу.

Следующий пример демонстрирует все состояния управления формы:

 

Форма контроля размеров

Вы можете установить высоту и ширину формы с использованием классов .input-lg и .col-lg-* соответственно. Следующий пример демонстрирует их:

 

Текст справки

Управление формы в Bootstrap может быть на уровне блоков, текст справки, который показывается под входами. Чтобы добавить полную ширину блока контента, используйте .help-block после <input>. Следующий пример демонстрирует его:

 

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

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

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

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

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

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

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

close
galka

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

close