Това описание ще обхване следните теми:
- Как да деактивирам полето за въвеждане на текст?
- Как да деактивирам опцията за избор на кутия?
- Как да деактивирам въведен елемент в полето за отметка?
- Как да деактивирам елемента за въвеждане на бутон?
Предпоставка: Създайте формуляр
Първо, създайте формуляр, като използвате HTML „ <форма> ” елемент:
< форма >< / форма >
След това добавете „ <набор от полета> ' елемент и му присвоете клас ' col-12 ”. В елемента
< набор от полета клас = 'col-md-12' >
< легенда >Формуляр за регистрация на студенти< / легенда >
< / набор от полета >
Изход
Как да деактивирам полето за въвеждане на текст?
За текущия пример следвайте дадените инструкции:
- Вътре в „ <набор от полета> ” след елемента легенда добавете таг и му присвоете клас “ форма-група ”.
- След това включете „ <етикет> ' и ' <вход> ” елементи съответно за надписа и полетата за въвеждане. Присвоете на входния елемент клас “ форма-контрол ”.
- След това разпределете „ хора с увреждания ”, за да направите полето за въвеждане деактивирано:
< див клас = 'форма-група' >
< етикет >Въведете своя Име
< вход Тип = 'текст' клас = 'форма-контрол' деактивиран>
< / етикет >
< / див >Следва обяснението на класовете, споменати по-горе:
- “ форма-група ” е гъвкав клас, който предоставя най-лесния начин за включване на структура във формуляри.
- “ форма-контрол ” автоматично добавя стил към елементите на формуляра.
Изход
Добавете друго поле за въвеждане без „ хора с увреждания ' атрибут:
< див клас = 'форма-група' >
< етикет >Влезте в своя баща Име
< вход Тип = 'текст' клас = 'форма-контрол' >
< / етикет >
< / див >Вижда се, че първото поле за въвеждане е деактивирано, а второто е активирано:
Как да деактивирам опцията Select Box?
За да създадете поле за избор във формуляра, използвайте HTML „ <изберете> ” елемент. „ <опция> ” след това се добавят елементи за избор на елементи от кутията.
В този пример забележете, че втората опция е зададена като деактивирана с помощта на „ хора с увреждания ' атрибут:
< див клас = 'форма-група' >
< етикет > хора с увреждания Изберете кутия
< изберете клас = 'форма-контрол' >
< опция >изберете < / опция >
< опция деактивиран> хора с увреждания изберете< / опция >
< опция >Меню< / опция >
< / изберете >
< / етикет >
< / див >Изход
Как да деактивирам въведен елемент в полето за отметка?
Нека направим друго квадратче за отметка за контрол на формуляра. За да направите квадратчето за отметка деактивирано, „ хора с увреждания ” атрибутът е посочен, както следва:
< див клас = 'проверка на формуляр' >
< етикет клас = 'формуляр-проверка-етикет' >
< вход клас = 'форма-проверка-въвеждане' Тип = 'кутия за отметка' деактивиран>
Можеш не проверявай това
Изход
Как да деактивирам елемента за въвеждане на бутон?
Можете също така да добавите елемент на HTML бутон за изпращане на формуляра. Сега нека направим този бутон деактивиран, като използваме „ хора с увреждания ” клас:
< бутон Тип = 'Изпращане' клас = 'btn btn-основен btn-lg деактивиран' >Изпращане< / бутон >Изход
Това беше всичко за деактивиране на полетата за въвеждане в Bootstrap.
Заключение
В Bootstrap контролите на формуляра могат да бъдат деактивирани чрез „ хора с увреждания ” атрибут или клас. Атрибутът се поставя вътре в началния таг на елемента. От друга страна, „ хора с увреждания ” е поставен в рамките на „ клас ' атрибут. Тази статия предоставя примери, за да илюстрира как да деактивирате контролите на формуляра в Bootstrap.