Въведение в оформлението на формуляра за зареждане

HTML и CSS са основните езици за дизайн на формуляр на уебсайт. Всички основни шаблони, направени от HTML, но ние трябва да проектираме и създаваме уникален тогава необходим отделно CSS файл. Този метод е сложен поради препратки към клас и id. За преодоляване на всички проблеми в HTML и CSS файловете идва bootstrap. Bootstrap е усъвършенствана техника за уеб дизайн. За валидиране и необходимия формат на формата, bootstrap има собствен клас за Textarea, въвеждане и други контроли като контрол на формата, група вход и т.н. Използвайки оформлението на bootstrap, можем да решим формата на формата. Лесно можем да правим вертикални, хоризонтални и вградени формати, използвайки bootstrap.

Видове оформление на Bootstrap Form

Оформлението на Bootstrap на формата прави различен тип форма. той прави дизайн и валидиране без CSS и JavaScript файлове. Поради оформлението на формата, намалете повече кодиране и усложнения. Bootstrap има собствен клас за преодоляване на всички сложни CSS и JavaScript код.

Bootstrap има три вида оформление на формата.

  • Вертикална форма
  • Хоризонтална форма
  • Inline форма

Нека разгледаме подробно тези три типа:

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

При вертикално оформление на формата, етикетите и текстовите елементи са вертикални и всяка група от форми е вертикална. Вертикалната форма е форма по подразбиране в bootstrap. Няма допълнително правило за вертикален формат на формата.

2. Хоризонтална форма

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

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

Добавете класа в елементите на етикета.

3. Inline форма

Inline форма, етикетът и елементите са редови и наляво подравнени. Viewport имат поне 768px ширина. Добавете клас за вградена форма.

Добавете класа към елементите на формата.

Оформлението на формуляра Bootstrap има някакъв клас по подразбиране за конвенцията на формуляра, спомената по-долу:

  • .form-group: Този клас се използва за разстояние между формите и обвързване на етикета. Той е гъвкав за свързване на,, съобщения за валидиране на формуляри и още за форма.
  • , form-control: Този клас се използва за всички текстови елементи и пространство за форма и т.н. Използва се за всички стилове като размер, фокус.
  • .form-control-lg и .form-control-sm се използват за размер на входните елементи съответно голям и малък.

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

Някои поддържани елементи и класове за валидиране на формуляра Bootstrap без JavaScript. Това прави лесно и преодолява много кодиране за валидиране от страна на сървъра.

1 .

Пример:

2) Само за четене: Това е булев атрибут, използван за входни елементи. В този атрибут потребителят не може да променя стойността и да деактивира курсора да пише.

Пример:

3) .form-control-plaintext: този клас работи като само за четене, но идва с правилен марж и подплънки.

Пример:

Пример за оформление на Bootstrap Form

Дадените примери са дадени по-долу:

1. Пример за вертикална форма (форма по подразбиране)


Name:

Email:

  • Вертикалната форма е проста и по подразбиране форма в bootstrap.
  • Горният пример има две полета за въвеждане и бутон за вход вертикално с етикета.
  • Използвайки само класната група и контрола на формата, създадената вертикална форма.
  • Можете да променяте размера на входните елементи без корекция на размера на CSS файла. Потребителят се нуждае само от клас, който е .form-control-lg и .form-control-sm съответно за голям и малък размер.

2. Пример за хоризонтална форма

class=”form-horizontal”>
Name:


Email:


  • Използвайки клас форма - хоризонтална, потребителят прави хоризонтална форма. Елементът и елементът на въвеждане е вграден, но групата от форми на клас е вертикална. Клас „контролен етикет col-sm-2“ и = „col-sm-10“, използван за разделена колона. Присвояване на две колони За етикет и Десет колони присвояване за входни елементи.
  • Клас “col-sm-offset-2 col-sm-10”, използван за бутон за влизане. Отместване, използвано за пространство, col-sm-offset-2 използва двуколонни пространства отляво във форма.
  • Вижте пример за хоризонтална форма и нейния изход, за да разберете оформлението. Вижданото име и въвежданият текст са в един ред, след което имейлът и елементите са в друг ред.
  • На голям и среден екран формата изглежда хоризонтално оформление, но на малък екран (767px и по-долу) формата изглежда вертикална.
  • Хоризонталната форма е сложна с помощта на традиционен метод, но оформлението на началната програма помага да се улесни използването на клас и управление на етикети.

3. Пример за Inline форма

class=”form-inline”>
Name:

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

Email:
placeholder=”Enter email”>

  • Във вътрешна форма всички етикети и елементи са в един ред. Всички групи форми са в един ред. Формата за вграждане в клас е по подразбиране за това оформление. Потребителят постави този клас в. Формата за вграждане, използвана повече за радио бутони, бутони за проверка и т.н.
  • Този формуляр работи най-малко на 576px прозорец за показване, след което показва като форма по подразбиране. В етикета се използва само клас sr. Този клас е екранен четец, използва се за скриване на етикета и показва единствения елемент.
  • Ако входният елемент във вградената форма тогава потребителят трябва да дойде със запазено място във входния елемент, за да разпознае елемента.

Заключение - Bootstrap From Layout

За да разбере Bootstrap технологията, потребителят трябва да знае за HTML, CSS и JavaScript. Формата за зареждане е най-лесният начин за работа със стандартен формат. Той има собствени класове за премахване на кодиране и не се изисква CSS и JavaScript различен файл. Използвайки Bootstrap формата, потребителят получава скорост на кодиране и избягва дизайн и стил на блоково кодиране. Bootstrap е рамка за уеб дизайн отпред, който е лек и самостоятелно реализиран.

Препоръчителни статии

Това е ръководство за оформлението на Bootstrap Form. Тук обсъждаме въвеждането на оформлението на Bootstrap Form, заедно с типовете и примерите. Можете също да прегледате и другите ни предложени статии, за да научите повече -

  1. Типография на Bootstrap
  2. Оформление на обувката
  3. Grid система за зареждане
  4. Компоненти за зареждане

Категория:

Разработване на софтуер