Source

Űrlapok

Példák és használati útmutatók az űrlapvezérlési stílusokhoz, elrendezési beállításokhoz és egyéni összetevőkhöz az űrlapok széles skálájának létrehozásához.

Áttekintés

A Bootstrap űrlapvezérlői osztályokkal bővítik az Újraindított űrlapstílusainkat . Ezekkel az osztályokkal választhatja ki a testreszabott megjelenítéseiket a konzisztensebb megjelenítés érdekében a böngészőkben és eszközökön.

Ügyeljen arra, hogy typeminden bemeneten megfelelő attribútumot használjon (pl. emaile-mail-cím vagy numbernumerikus információ esetén), hogy kihasználhassa az újabb beviteli vezérlők előnyeit, mint például az e-mailek ellenőrzése, a számok kiválasztása és egyebek.

Íme egy gyors példa a Bootstrap űrlapstílusainak bemutatására. Olvassa tovább a szükséges osztályokkal, űrlapelrendezéssel és egyebekkel kapcsolatos dokumentációt.

Soha nem osztjuk meg e-mail-címét másokkal. 
<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Űrlapvezérlők

A szöveges űrlapvezérlők – például az <input>s, <select>s és s – az osztály <textarea>stílusával vannak kialakítva . .form-controlIde tartoznak az általános megjelenés, a fókuszállapot, a méretezés és egyebek stílusai.

Feltétlenül fedezze fel egyéni űrlapjainkat , hogy további stílusokat <select>alakítson ki.

<form>
  <div class="form-group">
    <label for="exampleFormControlInput1">Email address</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="exampleFormControlSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect2">Example multiple select</label>
    <select multiple class="form-control" id="exampleFormControlSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlTextarea1">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
</form>

Fájlbemenetek esetén cserélje .form-controlle a .form-control-file.

<form>
  <div class="form-group">
    <label for="exampleFormControlFile1">Example file input</label>
    <input type="file" class="form-control-file" id="exampleFormControlFile1">
  </div>
</form>

Méretezés

Állítsa be a magasságokat olyan osztályokkal, mint .form-control-lgés .form-control-sm.

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
<select class="form-control form-control-lg">
  <option>Large select</option>
</select>
<select class="form-control">
  <option>Default select</option>
</select>
<select class="form-control form-control-sm">
  <option>Small select</option>
</select>

Csak olvasható

Adja hozzá a readonlylogikai attribútumot egy bemenethez, hogy megakadályozza a bemenet értékének módosítását. A csak olvasható bemenetek világosabbnak tűnnek (akárcsak a letiltott bemenetek), de megtartják a szabványos kurzort.

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

Csak olvasható sima szöveg

Ha azt szeretné, hogy <input readonly>az űrlap elemei egyszerű szövegként legyenek stílusosak, az .form-control-plaintextosztály segítségével távolítsa el az alapértelmezett űrlapmezőstílust, és őrizze meg a megfelelő margót és kitöltést.

<form>
  <div class="form-group row">
    <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="[email protected]">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>
<form class="form-inline">
  <div class="form-group mb-2">
    <label for="staticEmail2" class="sr-only">Email</label>
    <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="[email protected]">
  </div>
  <div class="form-group mx-sm-3 mb-2">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
</form>

Jelölőnégyzetek és rádiók

Az alapértelmezett jelölőnégyzetek és rádiók továbbfejlesztésére szolgál .form-check, egyetlen osztály mindkét bemeneti típushoz, amely javítja a HTML-elemeik elrendezését és viselkedését . A jelölőnégyzetek egy vagy több lehetőség kiválasztására szolgálnak egy listában, míg a rádiók egy opció kiválasztására szolgálnak a sok közül.

A letiltott jelölőnégyzetek és rádiók támogatottak, de ahhoz, hogy a not-allowedkurzort a szülőre vigye, <label>hozzá kell adnia az disabledattribútumot a .form-check-input. A letiltott attribútum világosabb színt alkalmaz a bemenet állapotának jelzésére.

A jelölőnégyzetek és rádiók a HTML-alapú űrlapellenőrzés támogatására épülnek, és tömör, hozzáférhető címkéket biztosítanak. Mint ilyen, a mi <input>s és <label>s testvérelemek, szemben a <input>belüli elemekkel <label>. Ez egy kicsit bőbeszédűbb, mivel meg kell adnia idés forattribútumokat kell megadnia a <input>és a <label>.

Alapértelmezett (halmozott)

Alapértelmezés szerint tetszőleges számú jelölőnégyzet és rádió, amelyek közvetlenül testvérek, függőlegesen egymásra lesznek helyezve, és megfelelő távolságban a -val .form-check.

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
  <label class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
    Second default radio
  </label>
</div>
<div class="form-check disabled">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
  <label class="form-check-label" for="exampleRadios3">
    Disabled radio
  </label>
</div>

Sorban

Csoportosítsa a jelölőnégyzeteket vagy rádiókat ugyanabban a vízszintes sorban úgy, hogy hozzáadja .form-check-inlineőket bármelyikhez .form-check.

<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
  <label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
  <label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
  <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
  <label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
  <label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
  <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>

Címkék nélkül

Adjon hozzá .position-staticolyan bemenetekhez, .form-checkamelyekben nincs címkeszöveg. Ne felejtsen el valamilyen címkét biztosítani a kisegítő technológiákhoz (például a aria-label).

<div class="form-check">
  <input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</div>
<div class="form-check">
  <input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
</div>

Elrendezés

Mivel a Bootstrap szinte minden űrlapvezérlőnkre vonatkozik display: block, width: 100%az űrlapok alapértelmezés szerint függőlegesen halmozódnak fel. További osztályok használhatók ennek az elrendezésnek az űrlaponkénti változtatására.

Alkoss csoportokat

Az .form-grouposztály a legegyszerűbb módja annak, hogy struktúrákat adjunk az űrlapokhoz. Rugalmas osztályt biztosít, amely ösztönzi a címkék, vezérlőelemek, az opcionális súgószöveg és az űrlapérvényesítő üzenetek megfelelő csoportosítását. Alapértelmezés szerint csak margin-bottom, de szükség szerint további stílusokat vesz fel .form-inline. Használja <fieldset>s, <div>s vagy szinte bármilyen más elemmel.

<form>
  <div class="form-group">
    <label for="formGroupExampleInput">Example label</label>
    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">Another label</label>
    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
  </div>
</form>

Űrlaprács

Bonyolultabb formák is építhetők rácsosztályaink segítségével. Használja ezeket olyan űrlapelrendezésekhez, amelyek több oszlopot, változó szélességet és további igazítási beállításokat igényelnek.

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

Űrlapsor

.rowLecserélheti a .form-rowszabványos rácssorunk egyik változatára is, amely felülírja az alapértelmezett oszlopcsatornákat a szűkebb és kompaktabb elrendezés érdekében .

<form>
  <div class="form-row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

A rácsrendszerrel bonyolultabb elrendezések is létrehozhatók.

<form>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputEmail4">Email</label>
      <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
    </div>
    <div class="form-group col-md-6">
      <label for="inputPassword4">Password</label>
      <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <label for="inputAddress">Address</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  </div>
  <div class="form-group">
    <label for="inputAddress2">Address 2</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputCity">City</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
    <div class="form-group col-md-4">
      <label for="inputState">State</label>
      <select id="inputState" class="form-control">
        <option selected>Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="form-group col-md-2">
      <label for="inputZip">Zip</label>
      <input type="text" class="form-control" id="inputZip">
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="gridCheck">
      <label class="form-check-label" for="gridCheck">
        Check me out
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

Vízszintes forma

Hozzon létre vízszintes űrlapokat a rács segítségével úgy, hogy hozzáadja az .rowosztályt az űrlapcsoportokhoz, és az .col-*-*osztályokkal adja meg a címkék és vezérlők szélességét. Ügyeljen arra, hogy hozzáadja .col-form-labelaz <label>s-hez is, hogy függőlegesen középre kerüljön a hozzájuk tartozó űrlapvezérlőkkel.

Időnként előfordulhat, hogy margó- vagy padding segédprogramokat kell használnia a szükséges tökéletes igazítás létrehozásához. Például eltávolítottuk a padding-tophalmozott rádióbemenetek címkéjét, hogy jobban igazítsuk a szöveg alapvonalát.

Rádiók
Jelölőnégyzet 
<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <fieldset class="form-group">
    <div class="row">
      <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
      <div class="col-sm-10">
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
          <label class="form-check-label" for="gridRadios1">
            First radio
          </label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
          <label class="form-check-label" for="gridRadios2">
            Second radio
          </label>
        </div>
        <div class="form-check disabled">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
          <label class="form-check-label" for="gridRadios3">
            Third disabled radio
          </label>
        </div>
      </div>
    </div>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-2">Checkbox</div>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="gridCheck1">
        <label class="form-check-label" for="gridCheck1">
          Example checkbox
        </label>
      </div>
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
  </div>
</form>
Vízszintes formátumú címkeméretezés

Ügyeljen arra, hogy a .col-form-label-smvagy .col-form-label-lgaz <label>s vagy <legend>s-t használja, hogy megfelelően kövesse a .form-control-lgés a méretét .form-control-sm.

<form>
  <div class="form-group row">
    <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
    </div>
  </div>
  <div class="form-group row">
    <label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
    </div>
  </div>
  <div class="form-group row">
    <label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
    </div>
  </div>
</form>

Oszlopméretezés

Ahogy az előző példákban is látható, a rácsrendszerünk lehetővé teszi, hogy tetszőleges számú .cols-t helyezzen el a .rowvagy .form-row. A rendelkezésre álló szélességet egyenlően osztják fel közöttük. Kiválaszthatja az oszlopok egy részhalmazát is, hogy több vagy kevesebb helyet foglaljon el, míg a fennmaradó .cols egyenlő mértékben osztja fel a többit, speciális oszloposztályokkal, például .col-7.

<form>
  <div class="form-row">
    <div class="col-7">
      <input type="text" class="form-control" placeholder="City">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="State">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Zip">
    </div>
  </div>
</form>

Automatikus méretezés

Az alábbi példa egy flexbox segédprogramot használ a tartalom függőleges középre igazításához, és úgy módosítja .col, .col-autohogy az oszlopok csak annyi helyet foglalnak el, amennyire szükség van. Másképpen fogalmazva, az oszlop a tartalom alapján méretezi magát.

@ 
<form>
  <div class="form-row align-items-center">
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInput">Name</label>
      <input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe">
    </div>
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInputGroup">Username</label>
      <div class="input-group mb-2">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
      </div>
    </div>
    <div class="col-auto">
      <div class="form-check mb-2">
        <input class="form-check-input" type="checkbox" id="autoSizingCheck">
        <label class="form-check-label" for="autoSizingCheck">
          Remember me
        </label>
      </div>
    </div>
    <div class="col-auto">
      <button type="submit" class="btn btn-primary mb-2">Submit</button>
    </div>
  </div>
</form>

Ezután újra keverheti ezt a méretspecifikus oszloposztályokkal.

@ 
<form>
  <div class="form-row align-items-center">
    <div class="col-sm-3 my-1">
      <label class="sr-only" for="inlineFormInputName">Name</label>
      <input type="text" class="form-control" id="inlineFormInputName" placeholder="Jane Doe">
    </div>
    <div class="col-sm-3 my-1">
      <label class="sr-only" for="inlineFormInputGroupUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
      </div>
    </div>
    <div class="col-auto my-1">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="autoSizingCheck2">
        <label class="form-check-label" for="autoSizingCheck2">
          Remember me
        </label>
      </div>
    </div>
    <div class="col-auto my-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

És természetesen az egyéni űrlapvezérlők is támogatottak.

<form>
  <div class="form-row align-items-center">
    <div class="col-auto my-1">
      <label class="mr-sm-2" for="inlineFormCustomSelect">Preference</label>
      <select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
        <option selected>Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
    <div class="col-auto my-1">
      <div class="custom-control custom-checkbox mr-sm-2">
        <input type="checkbox" class="custom-control-input" id="customControlAutosizing">
        <label class="custom-control-label" for="customControlAutosizing">Remember my preference</label>
      </div>
    </div>
    <div class="col-auto my-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

Soron belüli űrlapok

Használja az .form-inlineosztályt címkék, űrlapvezérlők és gombok sorozatának megjelenítésére egyetlen vízszintes sorban. A soron belüli űrlapokon belüli űrlapvezérlők kissé eltérnek az alapértelmezett állapotuktól.

  • A vezérlők a display: flex, összecsukják a HTML szóközöket, és lehetővé teszik az igazítás szabályozását a térközökkel és a flexbox segédprogramokkal.
  • A vezérlők és a bemeneti csoportok width: autofelülbírálják a Bootstrap alapértelmezett értékét width: 100%.
  • A vezérlőelemek csak beágyazottan jelennek meg a legalább 576 képpont széles nézetablakban, hogy figyelembe vegyék a mobileszközök szűk nézetablakát.

Előfordulhat, hogy manuálisan kell kezelnie az egyes űrlapvezérlők szélességét és igazítását a térköz segédprogramokkal (lásd alább). Végül ügyeljen arra, hogy minden űrlapvezérlőhöz mindig szerepeljen egy <label>jel, még akkor is, ha el kell rejtenie azt a nem képernyőolvasó látogatók elől .sr-only.

@ 
<form class="form-inline">
  <label class="sr-only" for="inlineFormInputName2">Name</label>
  <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">

  <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
  <div class="input-group mb-2 mr-sm-2">
    <div class="input-group-prepend">
      <div class="input-group-text">@</div>
    </div>
    <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
  </div>

  <div class="form-check mb-2 mr-sm-2">
    <input class="form-check-input" type="checkbox" id="inlineFormCheck">
    <label class="form-check-label" for="inlineFormCheck">
      Remember me
    </label>
  </div>

  <button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>

Az egyéni űrlapvezérlők és -kijelölések szintén támogatottak.

<form class="form-inline">
  <label class="my-1 mr-2" for="inlineFormCustomSelectPref">Preference</label>
  <select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>

  <div class="custom-control custom-checkbox my-1 mr-sm-2">
    <input type="checkbox" class="custom-control-input" id="customControlInline">
    <label class="custom-control-label" for="customControlInline">Remember my preference</label>
  </div>

  <button type="submit" class="btn btn-primary my-1">Submit</button>
</form>
A rejtett címkék alternatívái

A kisegítő technológiák, például a képernyőolvasók gondot okoznak az űrlapokkal, ha nem ad meg minden bevitelhez címkét. Ezeknél a szövegközi űrlapoknál az .sr-onlyosztály segítségével elrejtheti a címkéket. Vannak további alternatív módszerek is a segítő technológiák címkézésére, mint például a aria-label, aria-labelledbyvagy titleattribútum. Ha ezek egyike sem található meg, a kisegítő technológiák igénybe vehetik az placeholderattribútum használatát, ha van ilyen, de vegye figyelembe, hogy placeholdermás címkézési módszerek helyett nem javasolt az attribútum használata.

Súgó szöveg

Az űrlapok blokkszintű súgószövege a .form-text(korábban .help-blocka v3-ban ismert) használatával hozható létre. A soron belüli súgószöveg rugalmasan megvalósítható bármilyen soron belüli HTML elem és segédprogram osztályok használatával, mint pl .text-muted.

Súgószöveg társítása űrlapvezérlőkkel

A súgószöveget kifejezetten hozzá kell rendelni ahhoz az űrlapvezérlőhöz, amelyhez az aria-describedbyattribútum használatával kapcsolódik. Ez biztosítja, hogy a kisegítő technológiák – például a képernyőolvasók – közöljék ezt a súgószöveget, amikor a felhasználó fókuszál, vagy belép a vezérlőelembe.

Az alábbi bemeneti súgószöveg stílusozható a -val .form-text. Ez az osztály tartalmaz display: blockés ad hozzá néhány felső margót, hogy a fenti bemenetektől könnyebben elhelyezkedjen.

A jelszónak 8-20 karakter hosszúnak kell lennie, betűket és számokat kell tartalmaznia, és nem tartalmazhat szóközt, speciális karaktereket vagy hangulatjeleket. 
<label for="inputPassword5">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<small id="passwordHelpBlock" class="form-text text-muted">
  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</small>

A szövegközi szöveg bármilyen tipikus beágyazott HTML-elemet használhat (legyen az <small>, <span>, vagy valami más), csak egy segédprogram osztályával.

8-20 karakter hosszúságúnak kell lennie. 
<form class="form-inline">
  <div class="form-group">
    <label for="inputPassword6">Password</label>
    <input type="password" id="inputPassword6" class="form-control mx-sm-3" aria-describedby="passwordHelpInline">
    <small id="passwordHelpInline" class="text-muted">
      Must be 8-20 characters long.
    </small>
  </div>
</form>

Letiltott űrlapok

Adja hozzá a disabledlogikai attribútumot egy bemenethez, hogy megakadályozza a felhasználói interakciókat, és világosabbnak tűnjön.

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

Adja hozzá az disabledattribútumot az a <fieldset>-hoz az összes vezérlő letiltásához.

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
      <label class="form-check-label" for="disabledFieldsetCheck">
        Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>
Figyelmeztetés horgonyokkal

A böngészők alapértelmezés szerint letiltottként kezelik az összes natív űrlapvezérlőt ( <input>, <select>és <button>elemet) az a-n belül <fieldset disabled>, megakadályozva a billentyűzet és az egér interakcióit. Ha azonban az űrlap <a ... class="btn btn-*">elemeket is tartalmaz, ezek csak a stílust kapják pointer-events: none. Amint azt a gombok letiltott állapotáról szóló részben (és különösen a horgonyelemekre vonatkozó alszakaszban) megjegyeztük, ez a CSS-tulajdonság még nincs szabványosítva, és nem támogatja teljes mértékben az Opera 18 és régebbi verzióiban, illetve az Internet Explorer 10-ben, és nyert. ne akadályozza meg a billentyűzetet használókat abban, hogy fókuszálhassanak vagy aktiválhassák ezeket a hivatkozásokat. Tehát a biztonság kedvéért használjon egyéni JavaScriptet az ilyen hivatkozások letiltásához.

Böngészők közötti kompatibilitás

Míg a Bootstrap ezeket a stílusokat minden böngészőben alkalmazni fogja, az Internet Explorer 11 és régebbi verziói nem támogatják teljes mértékben az disabledattribútumot a <fieldset>. Használjon egyéni JavaScriptet a mezőkészlet letiltásához ezekben a böngészőkben.

Érvényesítés

Értékes, gyakorlatias visszajelzést adjon felhasználóinak a HTML5-űrlap érvényesítésével – minden támogatott böngészőnkben elérhető . Válasszon a böngésző alapértelmezett érvényesítési visszajelzései közül, vagy valósítson meg egyéni üzeneteket beépített osztályainkkal és kezdő JavaScript-kóddal.

Erősen javasoljuk az egyéni érvényesítési stílusokat, mivel a natív böngésző alapértelmezett beállításait nem közlik a képernyőolvasókkal.

Hogyan működik

A következőképpen működik az űrlapellenőrzés a Bootstrap használatával:

  • A HTML-űrlap érvényesítése a CSS két álosztályán keresztül történik, :invalidés :valid. <input>, <select>, és <textarea>elemekre vonatkozik .
  • A Bootstrap a :invalidés a :validstílusokat a szülőosztályba helyezi .was-validated, általában a <form>. Ellenkező esetben minden érték nélküli kötelező mező érvénytelenként jelenik meg az oldal betöltésekor. Ily módon kiválaszthatja, hogy mikor aktiválja őket (általában az űrlap beküldésének kísérlete után).
  • Tartalékként osztályok használhatók a pszeudoosztályok helyett a .is-invalidszerveroldali érvényesítéshez . Nem igényelnek szülői osztályt..is-valid.was-validated
  • A CSS működésének korlátai miatt (jelenleg) nem alkalmazhatunk stílusokat <label>a DOM-ban az űrlapvezérlők elé kerülő stílusokra egyéni JavaScript segítsége nélkül.
  • Minden modern böngésző támogatja a kényszerérvényesítési API -t , egy sor JavaScript-módszert az űrlapvezérlők érvényesítésére.
  • A visszajelzési üzenetek használhatják a böngésző alapértelmezett beállításait (minden böngészőnél eltérőek, és CSS-en keresztül nem stílusozhatók), vagy egyéni visszajelzési stílusainkat további HTML- és CSS-kóddal.
  • Egyéni érvényességi üzeneteket adhat setCustomValiditymeg JavaScriptben.

Ezt szem előtt tartva tekintse meg az alábbi bemutatókat az egyéni űrlapérvényesítési stílusainkhoz, az opcionális szerveroldali osztályainkhoz és a böngésző alapértelmezett beállításaihoz.

Egyedi stílusok

Egyéni Bootstrap űrlap érvényesítő üzeneteihez hozzá kell adnia a novalidatelogikai attribútumot a <form>. Ezzel letiltja a böngésző alapértelmezett visszajelzési eszköztippjeit, de továbbra is hozzáférést biztosít a JavaScript űrlapellenőrző API-jához. Próbálja meg elküldeni az alábbi űrlapot; JavaScriptünk elfogja a küldés gombot, és visszajelzést küld Önnek.

Amikor megpróbál beküldeni, látni fogja az űrlapvezérlőkre alkalmazott :invalidés stílusokat.:valid

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.
You must agree before submitting. 
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationCustom01">First name</label>
      <input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustom02">Last name</label>
      <input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustomUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend">@</span>
        </div>
        <input type="text" class="form-control" id="validationCustomUsername" placeholder="Username" aria-describedby="inputGroupPrepend" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom03">City</label>
      <input type="text" class="form-control" id="validationCustom03" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom04">State</label>
      <input type="text" class="form-control" id="validationCustom04" placeholder="State" required>
      <div class="invalid-feedback">
        Please provide a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom05">Zip</label>
      <input type="text" class="form-control" id="validationCustom05" placeholder="Zip" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
      <label class="form-check-label" for="invalidCheck">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();
</script>

A böngésző alapértelmezett beállításai

Nem érdekli az egyéni érvényesítési visszajelzési üzenetek vagy a JavaScript írása az űrlap viselkedésének megváltoztatásához? Minden rendben, használhatja a böngésző alapértelmezett beállításait. Próbálja meg elküldeni az alábbi űrlapot. A böngészőtől és az operációs rendszertől függően kissé eltérő stílusú visszajelzést fog látni.

Bár ezek a visszajelzési stílusok nem alakíthatók CSS-sel, a visszajelzés szövegét továbbra is személyre szabhatja a JavaScript segítségével.

@ 
<form>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationDefault01">First name</label>
      <input type="text" class="form-control" id="validationDefault01" placeholder="First name" value="Mark" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefault02">Last name</label>
      <input type="text" class="form-control" id="validationDefault02" placeholder="Last name" value="Otto" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefaultUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend2">@</span>
        </div>
        <input type="text" class="form-control" id="validationDefaultUsername" placeholder="Username" aria-describedby="inputGroupPrepend2" required>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationDefault03">City</label>
      <input type="text" class="form-control" id="validationDefault03" placeholder="City" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault04">State</label>
      <input type="text" class="form-control" id="validationDefault04" placeholder="State" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault05">Zip</label>
      <input type="text" class="form-control" id="validationDefault05" placeholder="Zip" required>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
      <label class="form-check-label" for="invalidCheck2">
        Agree to terms and conditions
      </label>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Szerver oldal

Javasoljuk, hogy használja a kliens oldali érvényesítést, de ha szerveroldalra van szüksége, az érvénytelen és érvényes űrlapmezőket a .is-invalidés gombokkal jelezheti .is-valid. Vegye figyelembe, hogy .invalid-feedbackezek az osztályok is támogatottak.

Jól néz ki!
Jól néz ki!
@
Kérjük, válasszon felhasználónevet.
Adjon meg egy érvényes várost.
Adjon meg egy érvényes állapotot.
Kérjük, adjon meg egy érvényes zip-címet.
Beküldés előtt el kell fogadnia. 
<form>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationServer01">First name</label>
      <input type="text" class="form-control is-valid" id="validationServer01" placeholder="First name" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServer02">Last name</label>
      <input type="text" class="form-control is-valid" id="validationServer02" placeholder="Last name" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServerUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend3">@</span>
        </div>
        <input type="text" class="form-control is-invalid" id="validationServerUsername" placeholder="Username" aria-describedby="inputGroupPrepend3" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer03">City</label>
      <input type="text" class="form-control is-invalid" id="validationServer03" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">State</label>
      <input type="text" class="form-control is-invalid" id="validationServer04" placeholder="State" required>
      <div class="invalid-feedback">
        Please provide a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer05">Zip</label>
      <input type="text" class="form-control is-invalid" id="validationServer05" placeholder="Zip" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" required>
      <label class="form-check-label" for="invalidCheck3">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Támogatott elemek

Példaűrlapjaink natív szöveges szövegeket jelenítenek meg <input>fent, de űrlapérvényesítési stílusok is rendelkezésre állnak egyéni űrlapvezérlőinkhez.

Példa érvénytelen visszajelzési szövegre
További példa érvénytelen visszajelzési szövegre
Példa érvénytelen egyéni kiválasztási visszajelzés
Példa érvénytelen egyéni fájl visszajelzés 
<form class="was-validated">
  <div class="custom-control custom-checkbox mb-3">
    <input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
    <label class="custom-control-label" for="customControlValidation1">Check this custom checkbox</label>
    <div class="invalid-feedback">Example invalid feedback text</div>
  </div>

  <div class="custom-control custom-radio">
    <input type="radio" class="custom-control-input" id="customControlValidation2" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation2">Toggle this custom radio</label>
  </div>
  <div class="custom-control custom-radio mb-3">
    <input type="radio" class="custom-control-input" id="customControlValidation3" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation3">Or toggle this other custom radio</label>
    <div class="invalid-feedback">More example invalid feedback text</div>
  </div>

  <div class="form-group">
    <select class="custom-select" required>
      <option value="">Open this select menu</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
    <div class="invalid-feedback">Example invalid custom select feedback</div>
  </div>

  <div class="custom-file">
    <input type="file" class="custom-file-input" id="validatedCustomFile" required>
    <label class="custom-file-label" for="validatedCustomFile">Choose file...</label>
    <div class="invalid-feedback">Example invalid custom file feedback</div>
  </div>
</form>

Eszköztippek

Ha az űrlap elrendezése lehetővé teszi, az .{valid|invalid}-feedbackosztályokat .{valid|invalid}-tooltiposztályokra cserélheti, hogy az érvényesítési visszajelzéseket stílusos elemleírásban jelenítse meg. Ügyeljen arra, hogy szülője legyen position: relativerajta az eszköztipp elhelyezéséhez. Az alábbi példában oszloposztályaink már rendelkeznek ezzel, de a projektje alternatív beállítást igényelhet.

Looks good!
Looks good!
@
Please choose a unique and valid username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip. 
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationTooltip01">First name</label>
      <input type="text" class="form-control" id="validationTooltip01" placeholder="First name" value="Mark" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationTooltip02">Last name</label>
      <input type="text" class="form-control" id="validationTooltip02" placeholder="Last name" value="Otto" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationTooltipUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
        </div>
        <input type="text" class="form-control" id="validationTooltipUsername" placeholder="Username" aria-describedby="validationTooltipUsernamePrepend" required>
        <div class="invalid-tooltip">
          Please choose a unique and valid username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationTooltip03">City</label>
      <input type="text" class="form-control" id="validationTooltip03" placeholder="City" required>
      <div class="invalid-tooltip">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip04">State</label>
      <input type="text" class="form-control" id="validationTooltip04" placeholder="State" required>
      <div class="invalid-tooltip">
        Please provide a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip05">Zip</label>
      <input type="text" class="form-control" id="validationTooltip05" placeholder="Zip" required>
      <div class="invalid-tooltip">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Egyedi űrlapok

A még nagyobb testreszabás és a böngészők közötti konzisztencia érdekében használja teljesen egyéni űrlapelemeinket a böngésző alapértelmezéseinek lecserélésére. Szemantikus és hozzáférhető jelölésekre épülnek, így megbízhatóan helyettesítik az alapértelmezett űrlapvezérlést.

Jelölőnégyzetek és rádiók

Mindegyik jelölőnégyzet és rádió egy a-ba van csomagolva <div>egy testvérrel <span>, hogy létrehozzuk egyéni vezérlőnket, valamint a <label>-t a kísérő szöveghez. Szerkezetileg ez ugyanaz a megközelítés, mint az alapértelmezett .form-check.

A testvérválasztót ( ~) használjuk minden <input>állapotunkhoz – például :checked– az egyéni űrlapjelző megfelelő stílusához. Az osztállyal kombinálva az .custom-control-labelegyes elemek szövegét is stílusozhatjuk a <input>' állapota alapján.

Elrejtjük az alapértelmezett értéket <input>, opacityés az és .custom-control-labelsegítségével új egyéni űrlapjelzőt építünk a ::beforehelyére ::after. Sajnos nem tudunk egyedit építeni pusztán az elemből, <input>mert a CSS- ek contentnem működnek ezen az elemen.

A bejelölt állapotokban az Open Iconic base64 beágyazott SVG ikonjait használjuk . Ez biztosítja számunkra a legjobb vezérlést a stílus és a pozicionálás tekintetében a böngészők és eszközök között.

Jelölőnégyzetek

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>

Az egyéni jelölőnégyzetek a pszeudoosztályt is használhatják, :indeterminateha manuálisan állítják be JavaScripten keresztül (nincs elérhető HTML attribútum ennek megadásához).

Ha jQuery-t használ, valami ilyesmi elegendő:

$('.your-checkbox').prop('indeterminate', true)

Rádiók

<div class="custom-control custom-radio">
  <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio">
  <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
</div>

Sorban

<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label>
</div>

Tiltva

Az egyéni jelölőnégyzetek és a rádiók is letilthatók. Adja hozzá a disabledlogikai attribútumot, <input>és az egyéni jelző és címkeleírás stílusa automatikusan megtörténik.

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheckDisabled" disabled>
  <label class="custom-control-label" for="customCheckDisabled">Check this custom checkbox</label>
</div>

<div class="custom-control custom-radio">
  <input type="radio" id="radio3" name="radioDisabled" id="customRadioDisabled" class="custom-control-input" disabled>
  <label class="custom-control-label" for="customRadioDisabled">Toggle this custom radio</label>
</div>

Válassza ki a menüt

Az egyéni <select>menüknek csak egyéni osztályra van szükségük .custom-selectaz egyéni stílusok aktiválásához.

<select class="custom-select">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Kis és nagy egyéni kijelölések közül is választhat, hogy megfeleljenek a hasonló méretű szövegbeviteleinknek.

<select class="custom-select custom-select-lg mb-3">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<select class="custom-select custom-select-sm">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Az multipleattribútum is támogatott:

<select class="custom-select" multiple>
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Ahogy az sizeattribútum is:

<select class="custom-select" size="3">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Fájl böngésző

A fájlbevitel a legdurvább a csoportban, és további JavaScriptet igényel, ha össze szeretné kötni a Fájl kiválasztása … funkcióval és a kiválasztott fájlnév szövegével.

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFile">
  <label class="custom-file-label" for="customFile">Choose file</label>
</div>

Elrejtjük az alapértelmezett fájlt a következőn <input>keresztül opacity, és helyette a <label>. A gomb létrehozása és elhelyezése a gombbal történik ::after. Végül kijelentjük, hogy a widthés heighta <input>megfelelő térközt helyezünk el a környező tartalomhoz.

A karakterláncok lefordítása vagy testreszabása

Az :lang()álosztályt arra használjuk, hogy lehetővé tegye a „Tallózás” szöveg más nyelvekre történő lefordítását. Írja felül vagy adjon hozzá bejegyzéseket a $custom-file-textSass változóhoz a megfelelő nyelvi címkével és lokalizált karakterláncokkal. Az angol húrok ugyanúgy testreszabhatók. Például a következőképpen adhat hozzá egy spanyol fordítást (a spanyol nyelv kódja: es):

$custom-file-text: (
  en: "Browse",
  es: "Elegir"
);

Íme lang(es)a művelet a spanyol fordítás egyéni fájlbevitelével kapcsolatban:

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFileLang" lang="es">
  <label class="custom-file-label" for="customFileLang">Seleccionar Archivo</label>
</div>

A megfelelő szöveg megjelenítéséhez helyesen kell beállítania a dokumentum nyelvét (vagy annak részfáját). Ezt megteheti az elem langattribútuma<html> vagy a HTTP Content-Language-fejléc használatával , többek között.