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

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-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" placeholder="Password">
    </div>
  </div>
</form>

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

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 dhe radiot e çaktivizuara mbështeten, por për të siguruar një not-allowedkursor në lëvizjen e prindit <label>, do t'ju duhet të shtoni disabledatributin në .form-check-input. Atributi i çaktivizuar do të aplikojë një ngjyrë më të çelur për të ndihmuar në përcaktimin e gjendjes së hyrjes.

Kutitë e kontrollit dhe përdorimi i radiove janë ndërtuar për të mbështetur vërtetimin e formularit të bazuar në HTML dhe për të ofruar 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 kontrollit të ç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 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">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">Another label</label>
    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
  </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" placeholder="Email">
    </div>
    <div class="form-group col-md-6">
      <label for="inputPassword4">Password</label>
      <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <label for="inputAddress">Address</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  </div>
  <div class="form-group">
    <label for="inputAddress2">Address 2</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputCity">City</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
    <div class="form-group col-md-4">
      <label for="inputState">State</label>
      <select id="inputState" class="form-control">
        <option selected>Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="form-group col-md-2">
      <label for="inputZip">Zip</label>
      <input type="text" class="form-control" id="inputZip">
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="gridCheck">
      <label class="form-check-label" for="gridCheck">
        Check me out
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

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" placeholder="Email">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <fieldset class="form-group">
    <div class="row">
      <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
      <div class="col-sm-10">
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
          <label class="form-check-label" for="gridRadios1">
            First radio
          </label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
          <label class="form-check-label" for="gridRadios2">
            Second radio
          </label>
        </div>
        <div class="form-check disabled">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
          <label class="form-check-label" for="gridRadios3">
            Third disabled radio
          </label>
        </div>
      </div>
    </div>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-2">Checkbox</div>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="gridCheck1">
        <label class="form-check-label" for="gridCheck1">
          Example checkbox
        </label>
      </div>
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
  </div>
</form>

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

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.

Emri

Looks good!

Mbiemri

Looks good!

Emri i përdoruesit

Please choose a username.

Qyteti

Please provide a valid city.

Shtetit

Please provide a valid state.

Zip

Please provide a valid zip.

Pajtohuni me termat dhe kushtet

You must agree before submitting.

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

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

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

Ana e serverit

Ne rekomandojmë përdorimin e vlefshmërisë nga ana e klientit, por në rast se keni nevojë për anën 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.

Emri

Duket mirë!

Mbiemri

Duket mirë!

Emri i përdoruesit

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

Qyteti

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

Shtetit

Ju lutemi jepni një gjendje të vlefshme.

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-4 mb-3">
      <label for="validationServer01">First name</label>
      <input type="text" class="form-control is-valid" id="validationServer01" placeholder="First name" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServer02">Last name</label>
      <input type="text" class="form-control is-valid" id="validationServer02" placeholder="Last name" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServerUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend3">@</span>
        </div>
        <input type="text" class="form-control is-invalid" id="validationServerUsername" placeholder="Username" aria-describedby="inputGroupPrepend3" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer03">City</label>
      <input type="text" class="form-control is-invalid" id="validationServer03" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">State</label>
      <input type="text" class="form-control is-invalid" id="validationServer04" placeholder="State" required>
      <div class="invalid-feedback">
        Please provide a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer05">Zip</label>
      <input type="text" class="form-control is-invalid" id="validationServer05" placeholder="Zip" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" required>
      <label class="form-check-label" for="invalidCheck3">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Elementet e mbështetur

Formularët tanë të shembujve tregojnë s tekstuale origjinale <input>më sipër, por stilet e vërtetimit të formularit janë gjithashtu të disponueshëm për kontrollet tona të personalizuara të formularit.

<form class="was-validated">
  <div class="custom-control custom-checkbox mb-3">
    <input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
    <label class="custom-control-label" for="customControlValidation1">Check this custom checkbox</label>
    <div class="invalid-feedback">Example invalid feedback text</div>
  </div>

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

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

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

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

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 dhe radio është e mbështjellë në një <div>me një vëlla <span>për të krijuar kontrollin tonë të personalizuar dhe një <label>për tekstin shoqërues. 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="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.

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="customCheckDisabled" disabled>
  <label class="custom-control-label" for="customCheckDisabled">Check this custom checkbox</label>
</div>

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

<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

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

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.

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

Forma të personalizuara

Kutitë e kontrollit dhe radiot

Kutitë e kontrollit

Radiot

Në rradhë

I paaftë

Zgjidhni menunë

Gama

Shfletuesi i skedarëve

Përkthimi ose personalizimi i vargjeve