Bootstrap išjungtas teksto įvesties laukai

Bootstrap Isjungtas Teksto Ivesties Laukai



„Bootstrap“ naudojamos įvairios klasės, kad būtų galima efektyviai sukurti formą. Šios klasės suteikia daug elementų stiliaus savybių, įskaitant ' formos valdymas “, „ forma-grupė “, „ forma-čekis-etiketė ', ir daug daugiau. Tiksliau, formos įvesties laukai yra teksto įvesties laukai, naudojami informacijai iš vartotojų rinkti. Tačiau įvesties lauką galime išjungti naudodami „ neįgalus “ klasė ar atributas.

Šis rašymas apims šias temas:

Būtina sąlyga: sukurkite formą

Pirmiausia sukurkite formą naudodami HTML “ “ elementas:







< forma >< / forma >

Tada pridėkite „ elementą ir priskirkite jam klasę Col-12 “. Elemente nurodykite formos antraštę:



< laukų rinkinys klasė = 'col-md-12' >

< legenda >Studentų registracijos forma< / legenda >

< / laukų rinkinys >

Išvestis







Kaip išjungti teksto įvesties lauką?

Vykstančiam pavyzdžiui vadovaukitės pateiktomis instrukcijomis:

  • Viduje ' “, po legendos elemento pridėkite žymą
    ir priskirkite jai klasę forma-grupė “.
  • Tada įtraukite „ “ ir „ <įvestis> “ elementai, skirti atitinkamai antraštei ir įvesties laukams. Priskirkite įvesties elementui klasę ' formos valdymas “.
  • Po to paskirkite „ neįgalus “ atributas, kad įvesties laukas būtų išjungtas:
< div klasė = 'formos grupė' >

< etiketė >Įveskite savo vardas

< įvestis tipo = 'tekstas' klasė = 'formos valdymas' išjungtas>

< / etiketė >

< / div >

Toliau pateikiamas aukščiau paminėtų klasių paaiškinimas:



  • forma-grupė “ yra lanksti klasė, kuri suteikia paprasčiausią būdą įtraukti struktūrą į formas.
  • formos valdymas “ automatiškai prideda formos elementų stilių.

Išvestis

Pridėkite kitą įvesties lauką be „ neįgalus “ atributas:

< div klasė = 'formos grupė' >

< etiketė >Įveskite savo Tėvą vardas

< įvestis tipo = 'tekstas' klasė = 'formos valdymas' >

< / etiketė >

< / div >

Galima pastebėti, kad pirmasis įvesties laukas yra išjungtas, o antrasis įjungtas:

Kaip išjungti parinkties langelį?

Norėdami formoje sukurti pasirinkimo laukelį, naudokite HTML ' “ elementas. „ “ elementai pridedami, kad būtų galima pasirinkti laukelio elementus.

Šiame pavyzdyje atkreipkite dėmesį, kad antroji parinktis nustatyta kaip išjungta naudojant „ neįgalus “ atributas:

< div klasė = 'formos grupė' >

< etiketė > Išjungta Pasirinkite langelį

< pasirinkite klasė = 'formos valdymas' >

< variantas >pasirinkite < / variantas >

< variantas išjungtas> Išjungta pasirinkti < / variantas >

< variantas >Meniu< / variantas >

< / pasirinkite >

< / etiketė >

< / div >

Išvestis

Kaip išjungti žymės langelio įvesties elementą?

Pažymėkime kitą formos valdymo langelį. Norėdami išjungti žymimąjį laukelį, „ neįgalus “ atributas nurodomas taip:

< div klasė = 'formos patikrinimas' >

< etiketė klasė = 'formos patikrinimo etiketė' >

< įvestis klasė = 'formos patikrinimo įvestis' tipo = 'žymimasis langelis' išjungtas>

Tu gali netikrinkite šito



Išvestis

Kaip išjungti mygtuko įvesties elementą?

Taip pat galite pridėti HTML mygtuko elementą formos pateikimui. Dabar išjungkime šį mygtuką naudodami „ neįgalus ' klasė:

< mygtuką tipo = 'Pateikti' klasė = „btn btn-primary btn-lg išjungtas“ >Pateikti< / mygtuką >

Išvestis

Tai buvo viskas apie įvesties laukų išjungimą „Bootstrap“.

Išvada

„Bootstrap“ formos valdiklius galima išjungti naudojant „ neįgalus “ atributas arba klasė. Atributas dedamas į pradinę elemento žymą. Kita vertus, „ neįgalus “ klasė yra įtraukta į „ klasė “ atributas. Šiame straipsnyje pateikti pavyzdžiai, iliustruojantys, kaip išjungti formos valdiklius programoje Bootstrap.