Вступ у макет форми завантажувальної форми

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

Типи макета форми завантажувача

Макет форми завантажувальної форми створює інший тип форми. це робить дизайн та перевірку без файлів CSS та JavaScript. Через макет форми зменшіть більше кодування та ускладнень. У Bootstrap є власний клас для подолання всіх складних CSS та JavaScript-коду.

Bootstrap має три типи макетів форм.

  • Вертикальна форма
  • Горизонтальна форма
  • Вбудована форма

Давайте детально розглянемо ці три типи:

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

У вертикальному макеті форми етикетки та текстові елементи розташовані вертикально, а кожна форма форм - вертикальна. Вертикальна форма є формою за замовчуванням у завантажувальній програмі. Немає додаткового правила для формату вертикальної форми.

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

У горизонтальному макеті форми мітки та текстові елементи розташовані горизонтально, але кожна група форм є вертикальною . Додайте два основні класи для горизонтальної форми.

Додайте клас до елемента форми.

Додайте клас до елементів етикетки.

3. Вбудована форма

У рядковій формі етикетки та елементи розташовані в рядку та ліворуч. У вікні перегляду принаймні ширина 768 пікселів. Додайте клас для вбудованої форми.

Додайте клас до елементів форми.

Макет форми завантажувальної форми має деякий клас за замовчуванням для конвенції форми, згаданої нижче:

  • .form-group: Цей клас використовується для інтервалу між формами та прив'язки мітки. Він гнучкий для прив’язки повідомлень,, перевірки форми та іншого для форми.
  • . form-control: Цей клас використовується для всіх текстових елементів та простору для форми тощо. Він використовується для всіх стилів, таких як розмір, фокус.
  • .form-control-lg і .form-control-sm використовуються для розміру вхідних елементів, великих і малих відповідно.

Підтримувані елемент та клас

Деякі підтримувані елементи та класи для перевірки форми Bootstrap без JavaScript. Це робить легко і долає багато кодування перевірки на стороні сервера.

1) .form-control-file: Цей клас використовується для додавання файлів, таких як pdf, Docx тощо, замість того, щоб використовувати клас form control, у файлові дані цього класу.

Приклад:

2) Readonly: Це булевий атрибут, який використовується для введення елементів. У цьому атрибуті користувач не може змінювати значення та відключати курсор для запису.

Приклад:

3) .form-control-plaintext: цей клас працює так само, як і лише для читання, але поставляється з правильним запасом і підкладкою.

Приклад:

Приклад макета форми завантажувача

Наведені приклади наведені нижче:

1. Приклад вертикальної форми (форма за замовчуванням)


Name:

Email:

  • Вертикальна форма - це проста і за замовчуванням форма в завантажувальній системі.
  • У наведеному вище прикладі є два поля введення та кнопка входу по вертикалі з міткою.
  • Використовуючи лише групу форм-класів та керування формою класу, створюється вертикальна форма.
  • Ви можете змінювати розмір вхідних елементів без коригування розміру файлу 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 використовував двоколонкові пробіли зліва у формі.
  • Дивіться приклад горизонтальної форми та її вихід, щоб зрозуміти макет. Побачене ім’я та текст, що вводиться, знаходяться в одному рядку, потім електронна пошта, а елементи - в іншому.
  • На великому та середньому екрані форма виглядає горизонтальною схемою, але на маленькому (767 пікселів та нижче) форма здається вертикальною.
  • Горизонтальна форма є складною традиційним методом, але макет завантажувального інструменту допомагає легко використовувати керування класом та мітками.

3. Приклад форми Inline

class=”form-inline”>
Name:

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

Email:
placeholder=”Enter email”>

  • У вбудованій формі всі мітки та елементи знаходяться в одному ряду. Усі групи форм складаються в один ряд. Форма класу-вбудованого класу є типовою для цього макета. Користувач розмістив цей клас у. Вбудована форма більше використовується для радіо кнопок, кнопок перевірки тощо.
  • Ця форма здебільшого працює як мінімум на 576 пікселів, після чого вона виглядає як форма за замовчуванням. У етикетці використовується клас sr-only. Цей клас - це зчитувач екрана, який використовується для приховування мітки та показує єдиний елемент.
  • Якщо вхідний елемент у формі вбудованої форми, то користувач повинен прийти із заповнювачем місця у вхідному елементі для розпізнавання елемента.

Висновок - Bootstrap from Layout

Щоб зрозуміти технологію Bootstrap, користувачеві необхідно знати про HTML, CSS та JavaScript. Форма завантаження - це найпростіший спосіб роботи у стандартній формі формату. У ньому є власні класи для видалення кодування та не потрібний інший файл CSS та JavaScript. Використовуючи форму Bootstrap, користувач отримує швидкість кодування та уникає дизайну та стилю блокування кодування. Bootstrap - це рамка для веб-дизайну передньої частини, яка є легкою та самореалізованою.

Рекомендовані статті

Це посібник із макета форми завантажувача. Тут ми обговорюємо вступ до макета форми Bootstrap разом із типами та прикладами. Ви також можете ознайомитися з іншими запропонованими нами статтями, щоб дізнатися більше -

  1. Типографія завантажувача
  2. Макет завантаження
  3. Сітка завантажувальної системи
  4. Компоненти завантажувальної машини

Категорія:

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