Source

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

Ne kurrë nuk do ta ndajmë emailin tuaj me dikë tjetër. 
<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 që <input readonly>elementet në formën tuaj të stilohen 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 duhur.

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

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

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

Pa etiketa

Shto .position-staticte hyrjet brenda të .form-checkcilave nuk ka tekst etikete. Mos harroni të jepni ende një formë etiketimi 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, format si parazgjedhje do të grumbullohen vertikalisht. Klasa shtesë mund të përdoren 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.

Radiot
Kutia e zgjedhjes 
<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">
    <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>
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 më poshtë 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ëra 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 kini parasysh se përdorimi i tij 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 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.

Duhet të jetë i gjatë 8-20 karaktere. 
<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>
    <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

Si parazgjedhje, shfletuesit do t'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 <a ... class="btn btn-*">elementë, 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 dhe nuk do të parandalojë që përdoruesit e tastierës të jenë në gjendje të fokusojë ose aktivizojë këto lidhje. Pra, për të qenë të sigurt, përdorni JavaScript të personalizuar për të çaktivizuar lidhje të tilla.

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.

Aktualisht rekomandojmë përdorimin e stileve të personalizuara të vlefshmërisë, pasi mesazhet e verifikimit të paracaktuar të shfletuesit nuk ekspozohen vazhdimisht ndaj teknologjive ndihmëse në të gjithë shfletuesit (më së shumti, Chrome në desktop dhe celular).

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 (për momentin) 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 çdo shfletues, dhe të pa stilizuara 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.

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please select 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" 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" 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" 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" 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-4 mb-3">
      <label for="validationDefault01">First name</label>
      <input type="text" class="form-control" id="validationDefault01" 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" 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"  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" 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.

Duket mirë!
Duket mirë!
@
Ju lutemi zgjidhni një emër përdoruesi.
Ju lutemi jepni një qytet të vlefshëm.
Ju lutemi zgjidhni një shtet të vlefshëm.
Ju lutemi jepni një zip të vlefshëm.
Duhet të bini dakord përpara se të dorëzoni. 
<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" 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" 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" 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" required>
      <div 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" 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="validationServer05">Zip</label>
      <input type="text" class="form-control is-invalid" id="validationServer05" 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>

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(duke përfshirë deri në një .form-controlnë grupet hyrëse)
  • <select>s me .form-controlose.custom-select
  • .form-checks
  • .custom-checkboxs dhe .custom-radios
  • .custom-file
Ju lutemi shkruani një mesazh në zonën e tekstit.
Shembull teksti i pavlefshëm reagimi
Një shembull tjetër i tekstit të komenteve të pavlefshme
Shembull reagime të pavlefshme për zgjedhjen e personalizuar
Shembull reagime të pavlefshme për skedarin e personalizuar 
<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="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>

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.

Looks good!
Looks good!
@
Please choose a unique and valid username.
Please provide a valid city.
Please select 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" 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" 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" 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" 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));
}

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

<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ë).

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

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

Radiot

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

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

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.

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

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

Zgjidhni menunë

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

<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

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

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

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

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

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