in English

Format

Shembuj dhe udhëzime përdorimi për stilet e kontrollit të formave, opsionet e paraqitjes dhe komponentët e personalizuar për krijimin e një shumëllojshmërie të gjerë formash.

Vështrim i përgjithshëm

Kontrollet e formës së Bootstrap zgjerohen në stilet tona të formave të rindezura me klasa. Përdorni këto klasa për të zgjedhur ekranet e tyre të personalizuara për një paraqitje më të qëndrueshme nëpër shfletues dhe pajisje.

Sigurohuni që të përdorni një typeatribut të përshtatshëm në të gjitha hyrjet (p.sh., emailpër adresën e emailit ose numberpër informacionin numerik) për të përfituar nga kontrollet më të reja të hyrjes si verifikimi i emailit, zgjedhja e numrave dhe më shumë.

Këtu është një shembull i shpejtë për të demonstruar stilet e formës së Bootstrap. Vazhdoni të lexoni për dokumentacionin mbi klasat e kërkuara, paraqitjen e formularit dhe më shumë.

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <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">
  </div>
  <div class="form-group 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>

Kontrollet e formularit

Kontrollet e formës tekstuale - si <input>s, <select>s dhe <textarea>s - stilohen me .form-controlklasën. Të përfshira janë stilet për pamjen e përgjithshme, gjendjen e fokusit, madhësinë dhe më shumë.

Sigurohuni që të eksploroni format tona të personalizuara për të stiluar më tej <select>.

<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>

Për hyrjet e skedarëve, ndërroni .form-controlpër .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>

Përmasat

Vendosni lartësitë duke përdorur klasa si .form-control-lgdhe .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>

Lexo vetem

Shtoni readonlyatributin boolean në një hyrje për të parandaluar modifikimin e vlerës së hyrjes. Hyrjet vetëm për lexim duken më të lehta (ashtu si hyrjet e çaktivizuara), por ruajnë kursorin standard.

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

Tekst i thjeshtë vetëm për lexim

Nëse dëshironi të keni <input readonly>elementë në formën tuaj të stilizuar si tekst i thjeshtë, përdorni .form-control-plaintextklasën për të hequr stilin e paracaktuar të fushës së formës dhe për të ruajtur margjinën dhe mbushjen e saktë.

<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">
    </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>

Inputet e diapazonit

Vendosni hyrjet e diapazonit të lëvizshëm horizontalisht duke përdorur .form-control-range.

<form>
  <div class="form-group">
    <label for="formControlRange">Example Range input</label>
    <input type="range" class="form-control-range" id="formControlRange">
  </div>
</form>

Kutitë e kontrollit dhe radiot

Kutitë e kontrollit dhe radiot e parazgjedhura përmirësohen me ndihmën e .form-checknjë klase të vetme për të dy llojet e hyrjes që përmirëson paraqitjen dhe sjelljen e elementeve të tyre HTML . Kutitë e kontrollit janë për zgjedhjen e një ose disa opsioneve në një listë, ndërsa radiot janë për zgjedhjen e një opsioni nga shumë.

Kutitë e kontrollit të çaktivizuara dhe radiot mbështeten. Atributi disableddo të aplikojë një ngjyrë më të çelur për të ndihmuar në përcaktimin e gjendjes së hyrjes.

Kutitë e kontrollit dhe butonat e radios mbështesin vërtetimin e formularit të bazuar në HTML dhe ofrojnë etiketa koncize dhe të arritshme. Si të tilla, <input>s-të dhe <label>s-të tanë janë elementë vëlla-motra në krahasim me një <input>brenda një <label>. Kjo është pak më e folur pasi duhet të specifikoni iddhe foratributet për të lidhur <input>dhe <label>.

E parazgjedhur (e grumbulluar)

Si parazgjedhje, çdo numër kutish kontrolli dhe radiosh që janë të afërta do të vendosen vertikalisht dhe do të vendosen në mënyrë të përshtatshme me .form-check.

Kutia e zgjedhjes e parazgjedhur

Kutia e zgjedhjes e çaktivizuar

<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>

Radio e parazgjedhur

Radio e dytë e paracaktuar

Radio me aftësi të kufizuara

<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">
  <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>

Në rradhë

Gruponi kutitë e kontrollit ose radiot në të njëjtin rresht horizontal duke shtuar .form-check-inlinenë ndonjë .form-check.

3 (të paaftë)

<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>

3 (të paaftë)

<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>

Pa etiketa

Shto .position-staticte inputet brenda të .form-checkcilave nuk ka tekst etikete. Mos harroni të jepni ende një formë të emrit të aksesueshëm për teknologjitë ndihmëse (për shembull, duke përdorur 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>

Paraqitja

Meqenëse Bootstrap zbatohet display: blockdhe width: 100%pothuajse në të gjitha kontrollet tona të formave, formularët si parazgjedhje do të grumbullohen vertikalisht. Mund të përdoren klasa shtesë për të ndryshuar këtë plan urbanistik në bazë të formës.

Formoni grupe

Klasa .form-groupështë mënyra më e lehtë për të shtuar një strukturë në forma. Ai siguron një klasë fleksibël që inkurajon grupimin e duhur të etiketave, kontrolleve, tekstit opsional të ndihmës dhe mesazheve të vërtetimit të formularit. Si parazgjedhje, ai zbatohet vetëm margin-bottom, por zgjedh stile shtesë .form-inlinesipas nevojës. Përdoreni atë me <fieldset>s, <div>s ose pothuajse çdo element tjetër.

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

Rrjeti i formës

Forma më komplekse mund të ndërtohen duke përdorur klasat tona të rrjetit. Përdorni këto për paraqitjet e formave që kërkojnë kolona të shumta, gjerësi të ndryshme dhe opsione shtesë të shtrirjes.

<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>

Formoni rreshtin

Ju gjithashtu mund të ndërroni .rowme .form-row, një variant të rreshtit tonë standard të rrjetës që anashkalon ulluqet e parazgjedhura të kolonës për paraqitje më të ngushta dhe më kompakte.

<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>

Paraqitjet më komplekse mund të krijohen gjithashtu me sistemin e rrjetit.

<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">
    </div>
    <div class="form-group col-md-6">
      <label for="inputPassword4">Password</label>
      <input type="password" class="form-control" id="inputPassword4">
    </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>

Forma horizontale

Krijoni forma horizontale me rrjetin duke shtuar .rowklasën për të formuar grupe dhe duke përdorur .col-*-*klasat për të specifikuar gjerësinë e etiketave dhe kontrolleve tuaja. Sigurohuni që t'i shtoni .col-form-labeledhe s-ve tuaja <label>në mënyrë që ato të jenë të përqendruara vertikalisht me kontrollet e formave të lidhura me to.

Ndonjëherë, mund t'ju duhet të përdorni shërbimet e marzhit ose mbushjes për të krijuar atë shtrirje të përsosur që ju nevojitet. Për shembull, ne kemi hequr padding-topetiketën e hyrjeve të radios së grumbulluar për të përafruar më mirë vijën bazë të tekstit.

<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">
    </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">
    </div>
  </div>
  <fieldset class="form-group row">
    <legend class="col-form-label col-sm-2 float-sm-left 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>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-10 offset-sm-2">
      <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>

Madhësia e etiketës së formës horizontale

Sigurohuni që të përdorni .col-form-label-smose .col-form-label-lgnë <label>s ose <legend>s tuaj për të ndjekur saktë madhësinë e .form-control-lgdhe .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>

Madhësia e kolonës

Siç tregohet në shembujt e mëparshëm, sistemi ynë i rrjetit ju lejon të vendosni çdo numër .cols brenda një .rowose .form-row. Ata do të ndajnë gjerësinë e disponueshme në mënyrë të barabartë midis tyre. Ju gjithashtu mund të zgjidhni një nëngrup të kolonave tuaja për të zënë pak a shumë hapësirë, ndërsa pjesa e mbetur .coltë ndajë në mënyrë të barabartë pjesën tjetër, me klasa të veçanta kolonash si .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>

Përmasat automatike

Shembulli i mëposhtëm përdor një mjet flexbox për të përqendruar vertikalisht përmbajtjen dhe ndryshon .colnë .col-automënyrë që kolonat tuaja të zënë vetëm aq hapësirë sa nevojitet. E thënë ndryshe, madhësia e kolonës bëhet në bazë të përmbajtjes.

<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>

Më pas mund ta ripërzieni atë edhe një herë me klasa kolone specifike për madhësi.

<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>

Dhe sigurisht që mbështeten kontrollet e formave me porosi .

<form>
  <div class="form-row align-items-center">
    <div class="col-auto my-1">
      <label class="mr-sm-2 sr-only" 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>

Format inline

Përdorni .form-inlineklasën për të shfaqur një sërë etiketash, kontrolle formash dhe butona në një rresht të vetëm horizontal. Kontrollet e formave brenda formularëve të linjës ndryshojnë pak nga gjendjet e tyre të paracaktuara.

Kontrollet janë display: flex, duke shembur çdo hapësirë të bardhë HTML dhe duke ju lejuar të siguroni kontrollin e shtrirjes me shërbimet e ndarjes dhe flexbox .
Kontrollet dhe grupet hyrëse marrin width: autopër të anashkaluar parazgjedhjen e Bootstrap width: 100%.
Kontrollet shfaqen në linjë vetëm në portat e shikimit që kanë gjerësi të paktën 576 pikselë për të llogaritur portat e ngushta të shikimit në pajisjet celulare.

Mund t'ju duhet të adresoni manualisht gjerësinë dhe shtrirjen e kontrolleve individuale të formularit me programet e ndarjes (siç tregohet më poshtë). Së fundi, sigurohuni që të përfshini gjithmonë një <label>me çdo kontroll formulari, edhe nëse duhet ta fshihni atë nga vizitorët që nuk e lexojnë ekranin me .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>

Mbështeten gjithashtu kontrollet dhe përzgjedhjet e formularit të personalizuar.

<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>

Alternativa për etiketat e fshehura

Teknologjitë ndihmëse si lexuesit e ekranit do të kenë probleme me format tuaja nëse nuk përfshini një etiketë për çdo hyrje. Për këto forma inline, ju mund t'i fshehni etiketat duke përdorur .sr-onlyklasën. Ka metoda të tjera alternative për të siguruar një etiketë për teknologjitë ndihmëse, të tilla si atributi aria-label, aria-labelledbyose . titleNëse asnjë nga këto nuk është e pranishme, teknologjitë ndihmëse mund të përdorin përdorimin e placeholderatributit, nëse është i pranishëm, por vini re se përdorimi i placeholdersi zëvendësim për metodat e tjera të etiketimit nuk këshillohet.

Teksti i ndihmës

Teksti i ndihmës në nivel blloku në forma mund të krijohet duke përdorur .form-text(i njohur më parë si .help-blocknë v3). Teksti i ndihmës në linjë mund të zbatohet në mënyrë fleksibël duke përdorur çdo element HTML inline dhe klasa të shërbimeve si .text-muted.

Lidhja e tekstit të ndihmës me kontrollet e formularit

Teksti i ndihmës duhet të shoqërohet në mënyrë eksplicite me kontrollin e formës me të cilin lidhet duke përdorur aria-describedbyatributin. Kjo do të sigurojë që teknologjitë ndihmëse - të tilla si lexuesit e ekranit - do ta shpallin këtë tekst ndihme kur përdoruesi të fokusohet ose të hyjë në kontroll.

Teksti i ndihmës më poshtë hyrjet mund të stilohet me .form-text. Kjo klasë përfshin display: blockdhe shton një diferencë të lartë për ndarje të lehtë nga inputet e mësipërme.

Fjalëkalimi Fjalëkalimi juaj duhet të jetë 8-20 karaktere, të përmbajë shkronja dhe numra dhe nuk duhet të përmbajë hapësira, karaktere speciale ose emoji.

<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>

Teksti inline mund të përdorë çdo element tipik HTML inline (qoftë një <small>, <span>, ose diçka tjetër) me asgjë më shumë se një klasë të dobishme.

<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>

Format me aftësi të kufizuara

Shto disabledatributin boolean në një hyrje për të parandaluar ndërveprimet e përdoruesit dhe për ta bërë atë të duket më i lehtë.

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

Shtoni disabledatributin në a <fieldset>për të çaktivizuar të gjitha kontrollet brenda.

<form>
  <fieldset disabled>
    <legend>Disabled fieldset example</legend>
    <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-group">
      <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>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

Kujdes me spiranca

Shfletuesit i trajtojnë të gjitha kontrollet e formës ( <input>, <select>dhe <button>elementët) brenda një <fieldset disabled>si të paaftë, duke parandaluar ndërveprimet e tastierës dhe të miut në to.

Megjithatë, nëse forma juaj përfshin gjithashtu elementë të personalizuar të ngjashëm me butonin, si p.sh. <a ... class="btn btn-*">, atyre do t'u jepet vetëm një stil i pointer-events: none. Siç u përmend në seksionin rreth gjendjes së çaktivizuar për butonat (dhe veçanërisht në nën-seksionin për elementët e ankorimit), kjo veçori CSS nuk është ende e standardizuar dhe nuk mbështetet plotësisht në Internet Explorer 10. Kontrollet e bazuara në ankorim do të vazhdojnë gjithashtu të jenë i fokusueshëm dhe i funksionueshëm duke përdorur tastierën. Ju duhet t'i modifikoni manualisht këto kontrolle duke shtuar tabindex="-1"për t'i parandaluar ato nga marrja e fokusit dhe aria-disabled="disabled"për të sinjalizuar gjendjen e tyre tek teknologjitë ndihmëse.

Pajtueshmëria me shfletues

Ndërsa Bootstrap do t'i zbatojë këto stile në të gjithë shfletuesit, Internet Explorer 11 dhe më poshtë nuk e mbështesin plotësisht disabledatributin në një <fieldset>. Përdorni JavaScript të personalizuar për të çaktivizuar grupin e fushave në këta shfletues.

Vleresimi

Jepni komente të vlefshme dhe të zbatueshme për përdoruesit tuaj me vërtetimin e formularit HTML5 – i disponueshëm në të gjithë shfletuesit tanë të mbështetur . Zgjidhni nga komentet e verifikimit të parazgjedhur të shfletuesit ose zbatoni mesazhe të personalizuara me klasat tona të integruara dhe JavaScript fillestar.

Ne jemi të vetëdijshëm se aktualisht stilet e verifikimit të personalizuar nga ana e klientit dhe këshillat e veglave nuk janë të aksesueshme, pasi ato nuk janë të ekspozuara ndaj teknologjive ndihmëse. Ndërsa ne punojmë për një zgjidhje, ne do të rekomandonim ose përdorimin e opsionit nga ana e serverit ose metodën e verifikimit të parazgjedhur të shfletuesit.

Si punon

Ja se si funksionon vërtetimi i formularit me Bootstrap:

Vlefshmëria e formës HTML zbatohet nëpërmjet dy pseudo-klasave të CSS, :invaliddhe :valid. Zbatohet për <input>, <select>dhe <textarea>elementë.
Bootstrap shtrin stilet :invaliddhe :validnë klasën prind .was-validated, zakonisht aplikohet në <form>. Përndryshe, çdo fushë e kërkuar pa vlerë shfaqet si e pavlefshme në ngarkimin e faqes. Në këtë mënyrë, ju mund të zgjidhni kur t'i aktivizoni ato (zakonisht pasi tentohet të dorëzohet formulari).
Për të rivendosur pamjen e formularit (për shembull, në rastin e paraqitjeve dinamike të formularit duke përdorur AJAX), hiqni .was-validatedklasën nga <form>përsëri pas dorëzimit.
Si rezervë, .is-invaliddhe .is-validklasat mund të përdoren në vend të pseudo-klasave për vërtetimin nga ana e serverit . Ata nuk kërkojnë një .was-validatedklasë prindërore.
Për shkak të kufizimeve në mënyrën se si funksionon CSS, ne nuk mund (aktualisht) të aplikojmë stile në një <label>që vjen përpara një kontrolli formulari në DOM pa ndihmën e JavaScript-it të personalizuar.
Të gjithë shfletuesit modern mbështesin API-në e vlefshmërisë së kufizimeve , një seri metodash JavaScript për vërtetimin e kontrolleve të formularit.
Mesazhet e komenteve mund të përdorin parazgjedhjet e shfletuesit (të ndryshme për secilin shfletues dhe të pa stilizuar nëpërmjet CSS) ose stilet tona të personalizuara të komenteve me HTML dhe CSS shtesë.
Ju mund të jepni mesazhe të personalizuara të vlefshmërisë setCustomValiditynë JavaScript.

Me këtë në mendje, merrni parasysh demonstrimet e mëposhtme për stilet tona të verifikimit të formularit të personalizuar, klasat opsionale të serverit dhe parazgjedhjet e shfletuesit.

Stilet e personalizuara

Për mesazhet e personalizuara të vërtetimit të formularit Bootstrap, do t'ju duhet të shtoni novalidateatributin boolean në <form>. Kjo çaktivizon këshillat e parazgjedhur të veglave të komenteve të shfletuesit, por gjithsesi siguron qasje në API-të e vërtetimit të formularit në JavaScript. Mundohuni të dorëzoni formularin e mëposhtëm; JavaScript ynë do të përgjojë butonin e dorëzimit dhe do t'ju përcjellë komentet. Kur përpiqeni të dorëzoni, do të shihni stilet :invaliddhe :validtë aplikuara në kontrollet e formularit tuaj.

Stilet e personalizuara të komenteve aplikojnë ngjyra të personalizuara, kufij, stile fokusi dhe ikona të sfondit për të komunikuar më mirë reagimet. Ikonat e sfondit për <select>s janë të disponueshme vetëm me .custom-selectdhe jo .form-control.

Emri

Duket mirë!

Mbiemri

Duket mirë!

Qyteti

Ju lutemi jepni një qytet të vlefshëm.

Shtetit

Ju lutemi zgjidhni një shtet të vlefshëm.

Zip

Ju lutemi jepni një zip të vlefshëm.

Pajtohuni me termat dhe kushtet

Duhet të bini dakord përpara se të dorëzoni.

<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom01">First name</label>
      <input type="text" class="form-control" id="validationCustom01" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationCustom02">Last name</label>
      <input type="text" class="form-control" id="validationCustom02" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </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" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom04">State</label>
      <select class="custom-select" id="validationCustom04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-feedback">
        Please select 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" 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>

Parazgjedhjet e shfletuesit

Nuk jeni të interesuar për mesazhet e komenteve të verifikimit të personalizuar ose për të shkruar JavaScript për të ndryshuar sjelljet e formularit? Gjithçka mirë, mund të përdorni parazgjedhjet e shfletuesit. Provoni të dërgoni formularin e mëposhtëm. Në varësi të shfletuesit dhe sistemit operativ, do të shihni një stil paksa të ndryshëm reagimesh.

Ndërsa këto stile reagimesh nuk mund të stilohen me CSS, ju mund të personalizoni tekstin e komenteve përmes JavaScript.

<form>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationDefault01">First name</label>
      <input type="text" class="form-control" id="validationDefault01" value="Mark" required>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationDefault02">Last name</label>
      <input type="text" class="form-control" id="validationDefault02" value="Otto" required>
    </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" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault04">State</label>
      <select class="custom-select" id="validationDefault04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault05">Zip</label>
      <input type="text" class="form-control" id="validationDefault05" 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>

Ana e serverit

Ne rekomandojmë përdorimin e vlefshmërisë nga ana e klientit, por në rast se keni nevojë për vërtetim nga ana e serverit, mund të tregoni fushat e pavlefshme dhe të vlefshme të formularit me .is-invaliddhe .is-valid. Vini re se .invalid-feedbackmbështetet edhe me këto klasa.

Për fushat e pavlefshme, sigurohuni që reagimi i pavlefshëm/mesazhi i gabimit të jetë i lidhur me fushën përkatëse të formularit duke përdorur aria-describedby. Ky atribut lejon më shumë se një idreferencë, në rast se fusha tashmë tregon tekstin shtesë të formularit.

Emri

Duket mirë!

Mbiemri

Duket mirë!

Qyteti

Ju lutemi jepni një qytet të vlefshëm.

Shtetit

Ju lutemi zgjidhni një shtet të vlefshëm.

Zip

Ju lutemi jepni një zip të vlefshëm.

Pajtohuni me termat dhe kushtet

Duhet të bini dakord përpara se të dorëzoni.

<form>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer01">First name</label>
      <input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationServer02">Last name</label>
      <input type="text" class="form-control is-valid" id="validationServer02" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </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" aria-describedby="validationServer03Feedback" required>
      <div id="validationServer03Feedback" class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">State</label>
      <select class="custom-select is-invalid" id="validationServer04" aria-describedby="validationServer04Feedback" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div id="validationServer04Feedback" class="invalid-feedback">
        Please select 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" aria-describedby="validationServer05Feedback" required>
      <div id="validationServer05Feedback" 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" aria-describedby="invalidCheck3Feedback" required>
      <label class="form-check-label" for="invalidCheck3">
        Agree to terms and conditions
      </label>
      <div  id="invalidCheck3Feedback" class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Elementet e mbështetur

Stilet e verifikimit janë të disponueshme për kontrollet dhe komponentët e mëposhtëm të formularit:

<input>s dhe <textarea>s me.form-control
<select>s me .form-controlose.custom-select
.form-checks
.custom-checkboxs dhe .custom-radios
.custom-file

Textarea

Ju lutemi shkruani një mesazh në zonën e tekstit.

Kontrollo këtë kuti kontrolli të personalizuar

Shembull teksti i pavlefshëm reagimi

Ndrysho këtë radio të personalizuar

Ose ndërroni këtë radio tjetër të personalizuar

Një shembull tjetër i tekstit të komenteve të pavlefshme

Shembull reagime të pavlefshme për zgjedhjen e personalizuar

Zgjidhni skedarin...

Shembull reagime të pavlefshme për skedarin e personalizuar

Shembull reagime të pavlefshme të grupit të hyrjes

Opsione

Shembull reagime të pavlefshme të grupit të hyrjes

Zgjidhni skedarin...

Shembull reagime të pavlefshme të grupit të hyrjes

<form class="was-validated">
  <div class="mb-3">
    <label for="validationTextarea">Textarea</label>
    <textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required></textarea>
    <div class="invalid-feedback">
      Please enter a message in the textarea.
    </div>
  </div>

  <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="mb-3">
    <select class="custom-select" required>
      <option value="">Choose...</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 mb-3">
    <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>

  <div class="mb-3">
    <div class="input-group is-invalid">
      <div class="input-group-prepend">
        <span class="input-group-text" id="validatedInputGroupPrepend">@</span>
      </div>
      <input type="text" class="form-control is-invalid" aria-describedby="validatedInputGroupPrepend" required>
    </div>
    <div class="invalid-feedback">
      Example invalid input group feedback
    </div>
  </div>

  <div class="mb-3">
    <div class="input-group is-invalid">
      <div class="input-group-prepend">
        <label class="input-group-text" for="validatedInputGroupSelect">Options</label>
      </div>
      <select class="custom-select" id="validatedInputGroupSelect" required>
        <option value="">Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
    <div class="invalid-feedback">
      Example invalid input group feedback
    </div>
  </div>

  <div class="input-group is-invalid">
    <div class="custom-file">
      <input type="file" class="custom-file-input" id="validatedInputGroupCustomFile" required>
      <label class="custom-file-label" for="validatedInputGroupCustomFile">Choose file...</label>
    </div>
    <div class="input-group-append">
       <button class="btn btn-outline-secondary" type="button">Button</button>
    </div>
  </div>
  <div class="invalid-feedback">
    Example invalid input group feedback
  </div>
</form>

Këshilla për veglat

Nëse faqosja e formularit tuaj e lejon këtë, ju mund t'i ndërroni .{valid|invalid}-feedbackklasat me .{valid|invalid}-tooltipklasa për të shfaqur komentet e vërtetimit në një këshillë mjeti të stiluar. Sigurohuni që të keni një prind me position: relativetë për pozicionimin e majës së veglave. Në shembullin e mëposhtëm, klasat tona të kolonave e kanë tashmë këtë, por projekti juaj mund të kërkojë një konfigurim alternativ.

<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationTooltip01">First name</label>
      <input type="text" class="form-control" id="validationTooltip01" value="Mark" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationTooltip02">Last name</label>
      <input type="text" class="form-control" id="validationTooltip02" value="Otto" required>
      <div class="valid-tooltip">
        Looks good!
      </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" required>
      <div class="invalid-tooltip">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip04">State</label>
      <select class="custom-select" id="validationTooltip04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-tooltip">
        Please select 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" required>
      <div class="invalid-tooltip">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Përshtatje

Gjendjet e verifikimit mund të personalizohen nëpërmjet Sass me $form-validation-stateshartën. E vendosur në _variables.scssskedarin tonë, kjo hartë Sass është mbështjellë për të gjeneruar gjendjet e parazgjedhura valid/ invalidvleftësimit. Përfshirë është një hartë e mbivendosur për përshtatjen e ngjyrës dhe ikonës së çdo shteti. Ndërsa asnjë shtet tjetër nuk mbështetet nga shfletuesit, ata që përdorin stile të personalizuara mund të shtojnë lehtësisht reagime më komplekse të formës.

Ju lutemi vini re se ne nuk rekomandojmë personalizimin e këtyre vlerave pa modifikuar gjithashtu form-validation-statemiksin.

// Sass map from `_variables.scss`
// Override this and recompile your Sass to generate different states
$form-validation-states: map-merge(
  (
    "valid": (
      "color": $form-feedback-valid-color,
      "icon": $form-feedback-icon-valid
    ),
    "invalid": (
      "color": $form-feedback-invalid-color,
      "icon": $form-feedback-icon-invalid
    )
  ),
  $form-validation-states
);

// Loop from `_forms.scss`
// Any modifications to the above Sass map will be reflected in your compiled
// CSS via this loop.
@each $state, $data in $form-validation-states {
  @include form-validation-state($state, map-get($data, color), map-get($data, icon));
}

Vleresimi i grupit te hyrjes

Për të zbuluar se cilët elementë kanë nevojë për qoshe të rrumbullakosura brenda një grupi hyrës me vërtetim, një grup hyrës kërkon një .has-validationklasë shtesë.

<div class="input-group has-validation">
  <div class="input-group-prepend">
    <span class="input-group-text">@</span>
  </div>
  <input type="text" class="form-control" required>
  <div class="invalid-feedback">
    Please choose a username.
  </div>
</div>

Ju lutemi zgjidhni një emër përdoruesi.

Forma të personalizuara

Për më shumë personalizim dhe qëndrueshmëri të tërthortë të shfletuesit, përdorni elementët tanë të formularit plotësisht të personalizuar për të zëvendësuar parazgjedhjet e shfletuesit. Ato janë ndërtuar në krye të shënimit semantik dhe të aksesueshëm, kështu që ato janë zëvendësime solide për çdo kontroll të formës së paracaktuar.

Kutitë e kontrollit dhe radiot

Çdo kuti e zgjedhjes, radio <input>dhe <label>çiftim janë mbështjellë në një <div>për të krijuar kontrollin tonë të personalizuar. Strukturisht, kjo është e njëjta qasje si parazgjedhja jonë .form-check.

Ne përdorim përzgjedhësin e vëllezërve ( ~) për të gjitha <input>gjendjet tona—si p.sh.— :checkedpër të stiluar siç duhet treguesin tonë të formës së personalizuar. Kur kombinohet me .custom-control-labelklasën, ne gjithashtu mund të stilojmë tekstin për çdo artikull bazuar në gjendjen <input>'.

Ne fshehim parazgjedhjen <input>me opacitydhe përdorim .custom-control-labelpër të ndërtuar një tregues të ri të formës së personalizuar në vend të tij me ::beforedhe ::after. Fatkeqësisht, ne nuk mund të ndërtojmë një të personalizuar vetëm nga ai, <input>sepse CSS-të contentnuk funksionojnë në atë element.

Në gjendjet e kontrolluara, ne përdorim ikona SVG të ngulitura base64 nga Open Iconic . Kjo na siguron kontrollin më të mirë për stilimin dhe pozicionimin nëpër shfletues dhe pajisje.

Kutitë e kontrollit

Kontrollo këtë kuti kontrolli të personalizuar

<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>

Kutitë e kontrollit të personalizuara gjithashtu mund të përdorin :indeterminateklasën pseudo kur vendosen manualisht përmes JavaScript (nuk ka asnjë atribut të disponueshëm HTML për ta specifikuar atë).

Kontrollo këtë kuti kontrolli të personalizuar

Nëse jeni duke përdorur jQuery, diçka e tillë duhet të mjaftojë:

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

Radiot

Ndrysho këtë radio të personalizuar

Ose ndërroni këtë radio tjetër të personalizuar

<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>

Në rradhë

Ndrysho këtë radio të personalizuar

Ose ndërroni këtë radio tjetër të personalizuar

<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline1" name="customRadioInline" 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="customRadioInline" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label>
</div>

I paaftë

Kutitë e kontrollit të personalizuara dhe radiot gjithashtu mund të çaktivizohen. Shtoni disabledatributin boolean në <input>dhe treguesi i personalizuar dhe përshkrimi i etiketës do të stilohen automatikisht.

Kontrollo këtë kuti kontrolli të personalizuar

Ndrysho këtë radio të personalizuar

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

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

Çelësat

Një ndërprerës ka shënjimin e një kutie të personalizuar, por përdor .custom-switchklasën për të dhënë një ndërprerës ndërrimi. Ndërprerësit gjithashtu mbështesin disabledatributin.

Ndrysho këtë element ndërprerës

Elementi i ndërprerës i çaktivizuar

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="customSwitch1">
  <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
</div>
<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
  <label class="custom-control-label" for="customSwitch2">Disabled switch element</label>
</div>

<select>Menytë e personalizuara kanë nevojë vetëm për një klasë të personalizuar, .custom-selectpër të aktivizuar stilet e personalizuara. Stilet e personalizuara janë të kufizuara në <select>pamjen fillestare dhe nuk mund të modifikojnë <option>s për shkak të kufizimeve të shfletuesit.

<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>

Ju gjithashtu mund të zgjidhni nga përzgjedhjet e vogla dhe të mëdha me porosi që të përputhen me inputet tona të tekstit me madhësi të ngjashme.

<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>

Atributi multiplembështetet gjithashtu:

<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>

Siç është sizeatributi:

<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>

Gama

Krijoni <input type="range">kontrolle të personalizuara me .custom-range. Pista (sfondi) dhe gishti i madh (vlera) janë të stiluara që të shfaqen njësoj nëpër shfletues. Meqenëse vetëm IE dhe Firefox mbështesin "mbushjen" e gjurmës së tyre nga e majta ose e djathta e gishtit të madh si një mjet për të treguar vizualisht përparimin, ne aktualisht nuk e mbështesim atë.

Gama e shembullit

<label for="customRange1">Example range</label>
<input type="range" class="custom-range" id="customRange1">

Inputet e rangut kanë vlera të nënkuptuara për mindhe max— 0dhe 100, përkatësisht. Ju mund të specifikoni vlera të reja për ata që përdorin atributet mindhe .max

Gama e shembullit

<label for="customRange2">Example range</label>
<input type="range" class="custom-range" min="0" max="5" id="customRange2">

Si parazgjedhje, futjet e diapazonit "kalojnë" në vlerat e numrave të plotë. Për ta ndryshuar këtë, mund të specifikoni një stepvlerë. Në shembullin e mëposhtëm, ne dyfishojmë numrin e hapave duke përdorur step="0.5".

Gama e shembullit

<label for="customRange3">Example range</label>
<input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3">

Shfletuesi i skedarëve

Shtojca e rekomanduar për të animuar hyrjen e skedarit të personalizuar: bs-custom-file-input , kjo është ajo që ne po përdorim aktualisht këtu në dokumentet tona.

Hyrja e skedarit është më e çuditshmja e grupit dhe kërkon JavaScript shtesë nëse dëshironi t'i lidhni ato me " Zgjidh skedarin" funksional... dhe tekstin e zgjedhur të emrit të skedarit.

Zgjidhni skedarin

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

Ne e fshehim skedarin e paracaktuar <input>nëpërmjet opacitydhe në vend të kësaj e stilojmë <label>. Butoni gjenerohet dhe pozicionohet me ::after. Së fundi, ne deklarojmë një widthdhe heightnë <input>hapësirën e duhur për përmbajtjen përreth.

Përkthimi ose personalizimi i vargjeve me SCSS

Pseudo - :lang()klasa përdoret për të lejuar përkthimin e tekstit "Shfleto" në gjuhë të tjera. Anuloni ose shtoni hyrjet në $custom-file-textndryshoren Sass me etiketën përkatëse të gjuhës dhe vargjet e lokalizuara. Vargjet angleze mund të personalizohen në të njëjtën mënyrë. Për shembull, ja se si mund të shtohet një përkthim në spanjisht (kodi i gjuhës spanjolle është es):

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

Këtu është lang(es)në veprim në hyrjen e skedarit të personalizuar për një përkthim në spanjisht:

Arkivi Përzgjedhës

<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>

Ju duhet të vendosni saktë gjuhën e dokumentit tuaj (ose nënpemës së tij) në mënyrë që të shfaqet teksti i saktë. Kjo mund të bëhet duke përdorur atributin langnë element <html>ose Content-Languagekokën HTTP , midis metodave të tjera.

Përkthimi ose personalizimi i vargjeve me HTML

Bootstrap ofron gjithashtu një mënyrë për të përkthyer tekstin "Shfleto" në HTML me data-browseatributin që mund të shtohet në etiketën e hyrjes me porosi (shembull në holandisht):

Voeg je dokument gishti

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFileLangHTML">
  <label class="custom-file-label" for="customFileLangHTML" data-browse="Bestand kiezen">Voeg je document toe</label>
</div>

Format

Vështrim i përgjithshëm

Kontrollet e formularit

Përmasat

Lexo vetem

Tekst i thjeshtë vetëm për lexim

Inputet e diapazonit

Kutitë e kontrollit dhe radiot

E parazgjedhur (e grumbulluar)

Në rradhë

Pa etiketa

Paraqitja

Formoni grupe

Rrjeti i formës

Formoni rreshtin

Forma horizontale

Madhësia e etiketës së formës horizontale

Madhësia e kolonës

Përmasat automatike

Format inline

Alternativa për etiketat e fshehura

Teksti i ndihmës

Lidhja e tekstit të ndihmës me kontrollet e formularit

Format me aftësi të kufizuara

Kujdes me spiranca

Pajtueshmëria me shfletues

Vleresimi

Si punon

Stilet e personalizuara

Parazgjedhjet e shfletuesit

Ana e serverit

Elementet e mbështetur

Këshilla për veglat

Përshtatje

Vleresimi i grupit te hyrjes

Forma të personalizuara

Kutitë e kontrollit dhe radiot

Kutitë e kontrollit

Radiot

Në rradhë

I paaftë

Çelësat

Zgjidhni menunë

Gama

Shfletuesi i skedarëve

Përkthimi ose personalizimi i vargjeve me SCSS

Përkthimi ose personalizimi i vargjeve me HTML