Bevezetés a Bootstrap űrlap elrendezésbe

A HTML és a CSS a weboldal űrlaptervezésének alapvető nyelvei. Minden alap sablon, amelyet HTML készített, de meg kell terveznünk és létrehoznunk az egyedi, majd külön szükséges CSS fájlt. Ez a módszer bonyolult az osztály- és azonosító hivatkozások miatt. A HTML és CSS fájlokban felmerülő problémák kiküszöböléséhez a rendszer indul. A Bootstrap egy fejlett technika a webdesign készítéséhez. Az érvényesítéshez és az űrlap szükséges formátumához a rendszerindítónak saját osztálya van a Textarea, az input és egyéb vezérlők számára, például az alak-vezérlés, input-group stb. A bootstrap elrendezés segítségével eldönthetjük az űrlap formátumát. A bootstrap segítségével könnyen készíthetünk függőleges, vízszintes és inline formátumot.

A Bootstrap forma elrendezésének típusai

A rendszerindító űrlap elrendezése más típusú űrlapokat készít. CSS és JavaScript fájlok nélkül teszi meg a tervezést és az érvényesítést. Az űrlap elrendezése miatt csökkentse a több kódolást és a komplikációkat. A Bootstrapnek saját osztálya van az összes összetett CSS és JavaScript kód leküzdésére.

A Bootstrap háromféle űrlap elrendezést tartalmaz.

  • Függőleges forma
  • Vízszintes forma
  • Inline forma

Lássuk részletesen ezt a három fajtát:

1. Függőleges forma

Függőleges formaelrendezésnél a címke és a szöveges elemek függőlegesen állnak, és minden formacsoport függőleges. A függőleges forma az alapértelmezett forma a bootstrapban. A függőleges űrlapformátumra nincs további szabály.

2. Vízszintes forma

Vízszintes formaelrendezésnél a címke és a szöveges elemek vízszintesen vannak, de minden formacsoport függőleges . Adjon hozzá két fő osztályt a vízszintes formához.

Adja hozzá az osztályt az űrlapelemhez.

Adja hozzá az osztályt a címke elemekhez.

3. Beépített forma

Inline formában a címke és az elemek inline és balra igazítva. A nézetablak legalább 768 képpont széles. Adjon hozzá osztályt az inline formához.

Adja hozzá az osztályt az űrlapelemekhez.

A rendszerindító képernyő elrendezésének van néhány alapértelmezett osztálya az alábbiakban említett űrlap-egyezményhez:

  • .form-group: Ez az osztály az űrlap-távolság és a címke megkötésére szolgál. Rugalmas a,, az űrlap-érvényesítési üzenetek és az űrlapok összekapcsolásához.
  • . form-control: Ez az osztály az összes szöveges elemhez és a forma, stb. használható, minden stílushoz, például mérethez, fókuszhoz.
  • Az .form-control-lg és .form-control-sm a nagy és kicsi bemeneti elem méretére szolgál.

Támogatott elem és osztály

Néhány támogatott elem és osztály a JavaScript nélküli Bootstrap-űrlap érvényesítéshez. Ez megkönnyíti és legyőzi a szerveroldali érvényesítési kódolást.

1) .form-control-file: Ezt az osztályt egy olyan fájl hozzáadásához használják, mint a pdf, Docx stb., Ahelyett, hogy az form-control osztályt használnánk, a fájlban, amelyet ez az osztály használ.

Példa:

2) Csak olvasható: Ez egy logikai attribútum, amelyet a bemeneti elemekhez használnak. Ebben az attribútumban a felhasználó nem módosíthatja az értéket, és letilthatja a kurzor írását.

Példa:

3) .form-control-sima szöveg: ez az osztály ugyanúgy működik, mint a csak olvasás, de megfelelő margóval és párnázattal rendelkezik.

Példa:

Példa a Bootstrap űrlap elrendezésére

A példák az alábbiakban találhatók:

1. Példa a függőleges formára (alapértelmezett forma)


Name:

Email:

  • A függőleges forma egyszerű és alapértelmezett forma a bootstrapban.
  • A fenti példa két beviteli mezőt és egy függőleges bejelentkezési gombot tartalmaz a címkével.
  • Csak az osztály űrlap-csoport és az osztály űr-vezérlés használatával létrejött a függőleges forma.
  • A bemeneti elemek méretét a CSS fájl méretének módosítása nélkül módosíthatja. A felhasználónak csak az .form-control-lg és .form-control-sm osztályra van szüksége, a nagy és a kis mérethez.

2. Példa a vízszintes formára

class=”form-horizontal”>
Name:


Email:


  • Az osztály-vízszintes űrlap használatával a felhasználó vízszintes űrlapot készít. A címke és a bemeneti elem inline, de az osztály-group függőleges. Osztott oszlophoz használt „kontroll-címke col-sm-2” és = „col-sm-10” osztály. Két oszlop hozzárendelése címkéhez és tíz oszlop hozzárendelése bemeneti elemekhez.
  • A „col-sm-offset-2 col-sm-10” osztály a Bejelentkezés gombra használható. A szóközhöz használt ofszet, a col-sm-ofszet-2 bal oldali két oszlop tereket használt egy formában.
  • Az elrendezés megértéséhez lásd a vízszintes forma példát és annak kimenetet. A látható név és a bemeneti szöveg egy sorban található, az e-mail és az elemek egy sorban vannak.
  • Nagy és közepes méretű képernyőn a vízszintes elrendezés néz ki, a kis képernyőn (767 képpont és alatta) a forma függőlegesnek tűnik.
  • A vízszintes forma a hagyományos módszerrel bonyolult, de a rendszerindító elrendezés megkönnyíti az osztály- és címkevezérlés használatát.

3. Példa az inline formára

class=”form-inline”>
Name:

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

Email:
placeholder=”Enter email”>

  • Inline formában az összes címke és elem egy sorban van. Az összes űrlapcsoport egy sorban van. Az osztályba ágyazott osztály az alapértelmezés ezen elrendezésnél. A felhasználó ebbe az osztályba helyezte. Az inline forma többet használt a rádiógombokhoz, az ellenőrző gombokhoz és így tovább.
  • Ez az űrlap többnyire legalább 576 képpontos nézetablakon működik, majd az alapértelmezett űrlaphoz hasonlóan jelenik meg. Címkén csak az sr osztály használható. Ez az osztály képernyőolvasó, a címke elrejtésére szolgál, és megmutatja az egyetlen elemet.
  • Ha a bemeneti elem beépített formában van, akkor a felhasználónak el kell látnia egy helyőrzőt a bemeneti elemben az elem felismerése érdekében.

Következtetés - Bootstrap az elrendezésből

A Bootstrap technológia megértéséhez a felhasználónak tudnia kell a HTML-ről, CSS-ről és a JavaScript-ről. A rendszerindító űrlap a legegyszerűbb módszer a szabványos formátum működésére. Saját osztályokkal rendelkezik a kódolás eltávolításához, és nem szükséges a CSS és a JavaScript különféle fájlja. A Bootstrap képernyőn a felhasználó gyorsabban tud kódolni, és elkerülheti a blokkkódolás kialakítását és stílusát. A Bootstrap egy könnyű és saját megvalósítású keret az elülső weboldal kialakításához.

Ajánlott cikkek

Ez egy útmutató a Bootstrap űrlap elrendezéséhez. Itt tárgyaljuk a Bootstrap Form Layout bevezetését, a típusokat és a példákat. A további javasolt cikkeken keresztül további információkat is megtudhat -

  1. Bootstrap tipográfia
  2. Bootstrap elrendezés
  3. Rendszerindító rendszer
  4. Bootstrap alkatrészek

Kategória:

Szoftverfejlesztés