Введение в макет формы Bootstrap

HTML и CSS являются основными языками для дизайна веб-форм. Все базовые шаблоны сделаны на HTML, но мы должны спроектировать и создать уникальный тогда необходимый отдельно CSS-файл. Этот метод сложен из-за ссылок на класс и id. Для преодоления всех проблем в файлах HTML и CSS идет начальная загрузка. Bootstrap - это продвинутая техника для веб-дизайна. Для проверки и требуемого формата формы у начальной загрузки есть собственный класс для Textarea, ввода и других элементов управления, таких как управление формой, группа ввода и т. Д. Используя макет начальной загрузки, мы можем выбрать формат формы. Мы можем легко создавать вертикальные, горизонтальные и встроенные форматы форм с помощью начальной загрузки.

Типы макетов начальной загрузки

Макет формы Bootstrap создает другой тип формы. это делает дизайн и проверку без CSS и JavaScript файлов. Из-за разметки формы уменьшите количество кодов и усложните. Bootstrap имеет собственный класс для преодоления всего сложного кода CSS и JavaScript.

Bootstrap имеет три типа макета формы.

  • Вертикальная форма
  • Горизонтальная форма
  • Встроенная форма

Давайте рассмотрим эти три типа в деталях:

1. Вертикальная форма

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

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

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

Добавьте класс в элемент формы.

Добавьте класс в элементы label.

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

Во встроенной форме метка и элементы расположены на одной линии и выровнены по левому краю. По крайней мере, область просмотра имеет 768 пикселей в ширину. Добавьте класс для встроенной формы.

Добавьте класс к элементам формы.

Макет формы начальной загрузки имеет некоторый класс по умолчанию для соглашения о форме, упомянутого ниже:

  • .form-group: этот класс используется для разметки форм и связывания метки. Это гибкий для связывания, проверки формы сообщения и многое другое для формы.
  • , контроль формы: этот класс используется для всех текстовых элементов и пространства для формы и т. д. Он используется для всех стилей, таких как размер, фокус.
  • .form-control-lg и .form-control-sm используются для входного элемента большого и малого размера соответственно.

Поддерживаемый элемент и класс

Некоторые поддерживаемые элементы и классы для проверки формы Bootstrap без JavaScript. Это облегчает и преодолевает много кодирования проверки на стороне сервера.

1) .form-control-file: этот класс используется для добавления файла, такого как pdf, Docx и т. Д. Вместо использования формы-контроля класса, в данных файла, в котором этот класс используется.

Пример:

2) Только для чтения: это логический атрибут, используемый для элементов ввода. В этом атрибуте пользователь не может изменять значение и отключать курсор для записи.

Пример:

3) .form-control-plaintext: этот класс работает только для чтения, но поставляется с правильным полем и отступом.

Пример:

Пример макета формы начальной загрузки

Приведенные примеры приведены ниже:

1. Пример вертикальной формы (форма по умолчанию)


Name:

Email:

  • Вертикальная форма проста и форма по умолчанию в начальной загрузке.
  • В приведенном выше примере есть два поля ввода и кнопка входа вертикально с меткой.
  • Используя только форму-группу классов и форму-контроль классов, создается вертикальная форма.
  • Вы можете изменить размер элементов ввода без настройки размера файла CSS. Пользователю нужен только класс .form-control-lg и .form-control-sm для большого и малого размера соответственно.

2. Пример горизонтальной формы

class=”form-horizontal”>
Name:


Email:


  • Используя класс form-horizontal, пользователь создает горизонтальную форму. Метка и элемент ввода встроены, а группа классов - вертикальная. Класс «control-label col-sm-2» и = «col-sm-10» используется для разделенного столбца. Назначение двух столбцов для метки и десять столбцов для элементов ввода.
  • Класс «col-sm-offset-2 col-sm-10» используется для кнопки входа в систему. Смещение, используемое для пробела, col-sm-offset-2 использовало два столбца слева в форме.
  • Посмотрите пример горизонтальной формы и ее вывод, чтобы понять расположение. Его видимое имя и входной текст находятся в одной строке, а электронная почта, а элементы - в другой.
  • На большом и среднем экране форма выглядит горизонтальной, но на маленьком экране (767 пикселей и ниже) форма кажется вертикальной.
  • Горизонтальная форма сложна с использованием традиционного метода, но макет начальной загрузки помогает упростить использование управления классами и метками.

3. Пример встроенной формы

class=”form-inline”>
Name:

Email:
placeholder=”Enter email”>
 class=”form-inline”>
Name:

Email:
placeholder=”Enter email”>

  • Во встроенной форме все метки и элементы находятся в одном ряду. Все группы форм находятся в одном ряду. Класс form-inline является значением по умолчанию для этого макета. Пользователь поместил этот класс в. Встроенная форма используется больше для переключателей, кнопок проверки и т. Д.
  • Эта форма в основном работает в окне просмотра размером не менее 576 пикселей, после чего она выглядит как форма по умолчанию. В метке используется только класс sr. Этот класс является программой чтения с экрана, используется для скрытия метки и показывает единственный элемент.
  • Если элемент ввода находится во встроенной форме, то пользователь должен прийти с заполнителем в элементе ввода, чтобы распознать элемент.

Вывод - Bootstrap From Layout

Чтобы понять технологию Bootstrap, пользователь должен знать о HTML, CSS и JavaScript. Форма начальной загрузки - это самый простой способ работы со стандартной формой. Он имеет собственные классы для удаления кодирования и не требует CSS и JavaScript другой файл. Используя форму Bootstrap, пользователь получает скорость кодирования и избегает дизайна и стиля блочного кодирования. Bootstrap - это фреймворк для веб-дизайна переднего плана, легкий и реализованный самостоятельно.

Рекомендуемые статьи

Это руководство по макету формы Bootstrap. Здесь мы обсуждаем введение в Bootstrap Form Layout вместе с типами и примерами. Вы также можете просмотреть наши другие предлагаемые статьи, чтобы узнать больше -

  1. Бутстрап Типография
  2. Схема начальной загрузки
  3. Bootstrap Grid System
  4. Компоненты начальной загрузки

Категория:

Разработка программного обеспечения