in English

Formak

Inprimakien kontrol-estiloen, diseinu-aukeren eta osagai pertsonalizatuen adibideak eta erabilera-gidalerroak inprimaki ugari sortzeko.

Ikuspegi orokorra

Bootstrap-en inprimaki-kontrolak gure Berrabiarazitako inprimaki-estiloak zabaltzen ditu klaseekin. Erabili klase hauek beren pantaila pertsonalizatuak aukeratzeko, arakatzaile eta gailu guztietan errendatze koherenteagoa izateko.

Ziurtatu typesarrera guztietan atributu egoki bat erabiltzen duzula (adibidez, emailhelbide elektronikorako edo numberinformazio numerikorako) sarrera-kontrol berriagoak aprobetxatzeko, hala nola posta elektronikoaren egiaztapena, zenbakia aukeratzea eta abar.

Hona hemen adibide azkar bat Bootstrap-en inprimaki-estiloak erakusteko. Jarraitu irakurtzen beharrezko klaseei, inprimakien diseinuari eta abarrei buruzko dokumentazioa.

Ez dugu inoiz zure posta elektronikoa beste inorekin partekatuko. 
<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>

Inprimakien kontrolak

Testu-inprimakiaren kontrolak ( <input>s, <select>s eta s bezalakoak) klasearekin <textarea>batera moldatzen dira . .form-controlItxura orokorraren, fokuaren egoera, tamainaren eta abarrentzako estiloak sartzen dira.

Ziurtatu gure forma pertsonalizatuak arakatuz estilo gehiago lortzeko <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>

Fitxategien sarrerak .form-controlegiteko , aldatu .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>

Tamaina

Ezarri altuerak .form-control-lgeta bezalako klaseak erabiliz .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>

Irakurtzeko soilik

Gehitu readonlyatributu boolearra sarrera batean sarreraren balioa aldatzeko. Irakurtzeko soilik dauden sarrerak arinagoak agertzen dira (desgaitutako sarrerak bezala), baina kurtsore estandarra mantentzen dute.

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

Testu arrunta irakurtzeko soilik

<input readonly>Zure inprimakiko elementuak testu arrunt gisa diseinatuta eduki nahi badituzu , erabili .form-control-plaintextklasea inprimaki-eremuen estilo lehenetsia kentzeko eta marjina eta betegarri egokiak gordetzeko.

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

Gama Sarrerak

Ezarri horizontalki mugi daitezkeen barrutiaren sarrerak erabiliz .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>

Koadroak eta irratiak

Lehenetsitako kontrol-laukiak eta irratiak hobetzen dira , haien HTML elementuen diseinua eta portaera hobetzen dituen bi sarrera motentzako klase bakarraren.form-check laguntzarekin . Kontrol-laukiak zerrenda batean aukera bat edo batzuk hautatzeko dira, eta irratiak, berriz, askotariko aukera bat hautatzeko.

Desgaitutako kontrol-laukiak eta irratiak onartzen dira. Atributuak kolore argiagoa aplikatuko du disabledsarreraren egoera adierazten laguntzeko.

Kontrol-laukiek eta irrati-botoiek HTMLn oinarritutako inprimakien baliozkotzea onartzen dute eta etiketa zehatzak eta eskuragarriak eskaintzen dituzte. Horrela, gure <input>s eta <label>s anai-arreba-elementuak dira, baten <input>barruan ez bezala <label>. idHau apur bat zehatzagoa da, eta eta foratributuak zehaztu behar dituzulako <input>eta <label>.

Lehenetsia (pilatuta)

Lehenespenez, berehalako anai-arreba diren edozein kontrol-lauki eta irrati-kopuru bertikalki pilatuko dira eta behar bezala tartekatuko dira .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>

Sarean

Taldekatu kontrol-laukiak edo irratiak errenkada horizontal berean .form-check-inlineedozeinetan gehituz .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>

Etiketarik gabe

Gehitu etiketa-testurik ez duten .position-staticsarrerei . .form-checkGogoratu oraindik laguntza-teknologiei irisgarritasun-izena ematen diela (adibidez, 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>

Diseinua

Bootstrap aplikatzen denez display: blocketa width: 100%gure inprimakien kontrol ia guztietan, inprimakiak berez bertikalean pilatuko dira. Klase gehigarriak erabil daitezke diseinu hau inprimakiaren arabera aldatzeko.

Taldeak osatu

.form-groupKlasea inprimakiei egitura batzuk gehitzeko modurik errazena da . Etiketak, kontrolak, aukerako laguntza-testua eta inprimakiak baliozkotzeko mezuak egoki taldekatzea sustatzen duen klase malgua eskaintzen du. Lehenespenez, soilik aplikatzen da margin-bottom, baina estilo osagarriak jasotzen ditu .form-inlinebehar den moduan. Erabili <fieldset>s, <div>s edo ia beste edozein elementurekin.

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

Inprimakia sareta

Gure sareko klaseak erabiliz forma konplexuagoak eraiki daitezke. Erabili hauek zutabe anitz, zabalera anitzak eta lerrokatze aukera osagarriak behar dituzten inprimaki-diseinuetarako.

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

Forma errenkada

Era berean , alda dezakezu, gure sareta errenkada estandarraren aldakuntza, zutabeen erreten .rowlehenetsiak .form-rowgainidazten dituena diseinu estuago eta trinkoagoetarako.

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

Sare sistemarekin diseinu konplexuagoak ere sor daitezke.

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

Sortu inprimaki horizontalak saretarekin .rowklasea gehituz taldeak osatzeko eta .col-*-*klaseak erabiliz zure etiketen eta kontrolen zabalera zehazteko. Ziurtatu .col-form-labelzure <label>s-etara ere gehitzen duzula, inprimaki-kontrolekin bertikalki zentratuta egon daitezen.

Batzuetan, beharbada marjinak edo betegarrizko utilitateak erabili beharko dituzu behar duzun lerrokadura perfektu hori sortzeko. Adibidez, padding-topgure irrati-sarrerak pilatutako etiketa kendu dugu testuaren oinarri-lerroa hobeto lerrokatzeko.

Irratiak
Kontrol-laukia 
<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>
Inprimaki horizontaleko etiketen tamaina

Ziurtatu .col-form-label-smedo .col-form-label-lgzure <label>s edo <legend>s erabiltzen duzula .form-control-lgeta .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>

Zutabeen tamaina

Aurreko adibideetan erakusten den moduan, gure sareta-sistemak edozein .cols-kopurua jartzeko aukera ematen du a .rowedo .form-row. Eskuragarri dagoen zabalera berdin banatuko dute haien artean. Zure zutabeen azpimultzo bat ere hauta dezakezu leku gehiago edo gutxiago okupatzeko, gainerako .cols-ek gainerakoak berdin banatzen dituzten bitartean, zutabe-klase espezifikoekin .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>

Tamaina automatikoa

Beheko adibideak flexbox erabilgarritasun bat erabiltzen du edukiak eta aldaketak bertikalki zentratzeko, zutabeek behar adina leku bakarrik har .coldezaten . .col-autoBeste modu batean esanda, zutabeak bere burua hartzen du edukiaren arabera.

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

Ondoren, berriro nahastu dezakezu tamainari dagokion zutabe klaseekin.

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

Eta, jakina, inprimaki-kontrol pertsonalizatuak onartzen dira.

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

Lineako inprimakiak

Erabili .form-inlineklasea etiketa, inprimaki-kontrolak eta botoiak lerro horizontal bakarrean bistaratzeko. Lineako inprimakien barruko inprimakien kontrolak egoera lehenetsietatik apur bat aldatzen dira.

  • Kontrolak hauek dira display: flex, HTML edozein zuriune tolestuz eta lerrokadura kontrola hornitzeko tartea eta flexbox utilitateekin.
  • Kontrolak eta sarrera taldeek width: autoBootstrap lehenetsia gainidazteko jasotzen dute width: 100%.
  • Kontrolak lerroan agertzen dira gutxienez 576 px-ko zabalera duten bistaratzeetan soilik gailu mugikorren ikuspegi estuak kontuan izateko.

Baliteke eskuz zuzendu behar izatea inprimaki-kontrolen banakako kontrolen zabalera eta lerrokatzea tartekatze utilitateekin (behean erakusten den moduan). Azkenik, ziurtatu <label>inprimaki-kontrol bakoitzean beti sartzen duzula, nahiz eta pantaila-irakurle ez diren bisitariei ezkutatu behar duzun .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>

Inprimaki pertsonalizatuen kontrolak eta hautaketak ere onartzen dira.

<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>
Ezkutuko etiketen alternatibak

Laguntza-teknologiek, esaterako, pantaila-irakurgailuek arazoak izango dituzte zure inprimakiekin, sarrera bakoitzeko etiketarik sartzen ez baduzu. Lineako inprimaki hauetarako, etiketak ezkutatu ditzakezu .sr-onlyklasea erabiliz. Laguntza-teknologiei etiketa bat emateko beste metodo alternatibo batzuk daude, hala nola aria-label, aria-labelledbyedo titleatributua. Horietako bat ere ez badago, laguntza-teknologiek placeholderatributua erabil dezakete, baldin badago, baina kontuan izan placeholderez dela gomendagarria etiketatze-metodoen ordezko gisa erabiltzea.

Laguntza testua

Bloke-mailako laguntza-testua inprimakietan sor daiteke (lehen v3-n .form-textbezala ezagutzen zen). .help-blockSareko laguntza-testua malgutasunez inplementa daiteke lerroko edozein HTML elementu eta erabilgarritasun klaseak erabiliz .text-muted.

Laguntza-testua inprimaki-kontrolekin lotzea

aria-describedbyLaguntza-testua berariaz lotu behar da atributua erabiliz erlazionatutako inprimaki-kontrolarekin . Horrek bermatuko du laguntza-teknologiek (pantaila-irakurgailuak, esaterako) laguntza-testu hau iragarriko dutela erabiltzailea kontrolatzen denean edo kontrola sartzen denean.

Sarreraren azpiko laguntza-testua estiloarekin jar daiteke .form-text. Klase honek display: blockgoiko marjina bat barne hartzen du eta gehitzen du goiko sarreretatik erraz tartekatzeko.

Pasahitzak 8-20 karaktere izan behar ditu, letrak eta zenbakiak izan behar ditu eta ez du zuriunerik, karaktere berezirik edo emojirik izan behar. 
<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>

Barneko testuak lineako HTML elementu tipiko edozein erabil dezake (izan <small>, <span>, edo beste zerbait) erabilgarritasun-klase bat baino ez duena.

8-20 karaktere izan behar ditu. 
<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>

Desgaitutako inprimakiak

Gehitu disabledatributu boolearra sarrera batean erabiltzaileen elkarrekintzak saihesteko eta arinagoa izan dadin.

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

Gehitu disabledatributua a <fieldset>barruko kontrol guztiak desgaitzeko.

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

Arakatzaileek jatorrizko inprimaki-kontrol guztiak ( <input>, <select>, eta <button>elementuak) barnean <fieldset disabled>desgaituta bezala tratatzen dituzte, teklatuaren eta saguaren elkarrekintzak saihestuz.

Dena den, zure inprimakiak botoiaren antzeko elementu pertsonalizatuak ere baditu, hala nola <a ... class="btn btn-*">, hauei estiloa soilik emango zaie pointer-events: none. Botoien egoera desgaituari buruzko atalean adierazi bezala (eta zehazki aingura-elementuen azpi-atalean), CSS propietate hau oraindik ez dago estandarizatua eta ez dago guztiz onartzen Internet Explorer 10-n. Ainguran oinarritutako kontrolak ere egongo dira oraindik. teklatua erabiliz fokuragarria eta funtzionagarria. Kontrol hauek eskuz aldatu behar dituzu gehituz tabindex="-1", fokua jaso ez dezaten eta aria-disabled="disabled"laguntza-teknologiei haien egoera adierazteko.

Arakatzaileen arteko bateragarritasuna

Bootstrap-ek estilo hauek arakatzaile guztietan aplikatuko dituen arren, Internet Explorer 11 eta ondorengoek ez dute guztiz onartzen disabledatributua <fieldset>. Erabili JavaScript pertsonalizatua arakatzaile hauetan eremu-multzoa desgaitzeko.

Balioztatzea

Eman iritzi baliotsu eta ekingarriak zure erabiltzaileei HTML5 inprimakiaren baliozkotzearekin , gure nabigatzaile bateragarri guztietan eskuragarri . Aukeratu arakatzailearen baliozkotze-iritzia lehenetsia, edo inplementatu mezu pertsonalizatuak gure barneko klaseekin eta hasierako JavaScriptekin.

Badakigu gaur egun bezeroaren aldetik pertsonalizatutako baliozkotze estiloak eta tresna-aholkuak ez direla eskuragarri, ez daudelako laguntza-teknologien aurrean. Soluzio batean lan egiten dugun bitartean, zerbitzariaren aldeko aukera edo arakatzailearen baliozkotze metodo lehenetsia erabiltzea gomendatzen dugu.

Sarrera-taldeen baliozkotzea

Sarrera-taldeek zailtasunak dituzte baliozkotze-estiloekin, zoritxarrez. Gure gomendioa feedback-mezuak duten elementuaren anai-arreba gisa jartzea .input-groupda .is-{valid|invalid}. Iritzi-mezuak sarrera taldeetan jartzeak hausten du border-radius. Ikusi konponbide hau .

Nola dabil

Hona hemen inprimakien baliozkotzeak Bootstrap-ekin nola funtzionatzen duen:

  • HTML inprimakiaren baliozkotzea CSSren bi sasi-klaseen bidez aplikatzen da, :invalideta :valid. <input>, <select>, eta <textarea>elementuei aplikatzen zaie .
  • Bootstrap-ek :invalideta :validestiloak .was-validatedklase nagusira ezartzen ditu, normalean <form>. Bestela, baliorik gabeko derrigorrezko edozein eremu baliogabe gisa agertzen da orria kargatzean. Horrela, noiz aktibatu aukeratu dezakezu (normalean inprimakia bidaltzen saiatu ondoren).
  • Inprimakiaren itxura berrezartzeko (adibidez, AJAX erabiliz inprimaki dinamikoen bidalketa kasuan), kendu .was-validatedklasea <form>berriro bidali ondoren.
  • Errepide gisa, .is-invalideta .is-validklaseak erabil daitezke zerbitzariaren baliozkotze sasi-klaseen ordez . Ez dute .was-validatedguraso klaserik behar.
  • CSS funtzionamenduaren mugak direla eta, ezin ditugu (gaur egun) estiloak aplikatu <label>DOM-en inprimaki-kontrol baten aurretik dagoen bati JavaScript pertsonalizatuaren laguntzarik gabe.
  • Arakatzaile moderno guztiek mugak baliozkotzeko APIa onartzen dute , inprimakien kontrolak balioztatzeko JavaScript metodo sorta bat.
  • Iritzi-mezuek arakatzailearen lehenetsiak erabil ditzakete (desberdinak arakatzaile bakoitzeko eta CSS bidez estilizatu ezinak) edo gure iritzi-estilo pertsonalizatuak HTML eta CSS gehigarriekin.
  • Baliotasun mezu pertsonalizatuak setCustomValidityeman ditzakezu JavaScript-en.

Hori kontuan izanda, kontuan hartu honako demo hauek gure inprimaki pertsonalizatuak baliozkotzeko estiloetarako, zerbitzariaren alboko aukerako klaseetarako eta arakatzailearen lehenespenetarako.

Estilo pertsonalizatuak

novalidateBootstrap inprimakia baliozkotzeko mezu pertsonalizatuetarako, atributu boolearra gehitu beharko duzu zure <form>. Honek arakatzailearen iritzi-aholku lehenetsiak desgaitzen ditu, baina inprimakiak baliozkotzeko APIetarako sarbidea ematen du JavaScript-en. Saiatu beheko formularioa bidaltzen; gure JavaScript-ek bidaltzeko botoia atzemango dizu eta iritzia emango dizu. Bidaltzen saiatzean, :invalideta :validestiloak ikusiko dituzu inprimakiaren kontroletan aplikatuta.

Iritzi-estilo pertsonalizatuek kolore pertsonalizatuak, ertzak, foku-estiloak eta atzeko planoko ikonoak aplikatzen dituzte, iritzia hobeto komunikatzeko. S -rako atzeko planoko ikonoak <select>rekin soilik daude erabilgarri .custom-select, eta ez .form-control.

Itxura ona du!
Itxura ona du!
Mesedez, eman baliozko hiria.
Mesedez, hautatu baliozko egoera bat.
Mesedez, eman baliozko zip bat.
You must agree before submitting. 
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom01">First name</label>
      <input type="text" class="form-control" id="validationCustom01" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationCustom02">Last name</label>
      <input type="text" class="form-control" id="validationCustom02" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom03">City</label>
      <input type="text" class="form-control" id="validationCustom03" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom04">State</label>
      <select class="custom-select" id="validationCustom04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-feedback">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom05">Zip</label>
      <input type="text" class="form-control" id="validationCustom05" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
      <label class="form-check-label" for="invalidCheck">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

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

Arakatzailearen lehenetsiak

Ez al zaizu interesatzen baliozkotze pertsonalizatuaren iritzi-mezuak edo JavaScript idaztea inprimakiaren jokabideak aldatzeko? Dena ondo, arakatzailearen lehenetsiak erabil ditzakezu. Saiatu beheko formularioa bidaltzen. Zure arakatzailearen eta sistema eragilearen arabera, iritzi-estilo apur bat desberdina ikusiko duzu.

Iritzi-estilo hauek CSS-rekin estiloa jarri ezin badira ere, feedbackaren testua pertsonaliza dezakezu JavaScript bidez.

<form>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationDefault01">First name</label>
      <input type="text" class="form-control" id="validationDefault01" value="Mark" required>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationDefault02">Last name</label>
      <input type="text" class="form-control" id="validationDefault02" value="Otto" required>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationDefault03">City</label>
      <input type="text" class="form-control" id="validationDefault03" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault04">State</label>
      <select class="custom-select" id="validationDefault04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault05">Zip</label>
      <input type="text" class="form-control" id="validationDefault05" required>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
      <label class="form-check-label" for="invalidCheck2">
        Agree to terms and conditions
      </label>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Zerbitzariaren aldean

.is-invalidBezeroaren aldetik baliozkotzea gomendatzen dugu, baina zerbitzariaren aldetik baliozkotzea behar baduzu, baliogabeak eta baliozkoak diren inprimaki-eremuak eta bidez adieraz ditzakezu .is-valid. Kontuan izan .invalid-feedbackklase hauekin ere onartzen dela.

Eremu baliogabeetarako, ziurtatu baliogabeko iritzia/errore mezua dagokion inprimaki-eremuarekin lotuta dagoela aria-describedby. Atributu honek bat baino gehiagori iderreferentzia egiteko aukera ematen du, eremuak dagoeneko inprimakiaren testu gehigarria adierazten badu.

Itxura ona du!
Itxura ona du!
Mesedez, eman baliozko hiria.
Mesedez, hautatu baliozko egoera bat.
Mesedez, eman baliozko zip bat.
Bidali aurretik ados egon behar duzu. 
<form>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer01">First name</label>
      <input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationServer02">Last name</label>
      <input type="text" class="form-control is-valid" id="validationServer02" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer03">City</label>
      <input type="text" class="form-control is-invalid" id="validationServer03" aria-describedby="validationServer03Feedback" required>
      <div id="validationServer03Feedback" class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">State</label>
      <select class="custom-select is-invalid" id="validationServer04" aria-describedby="validationServer04Feedback" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div id="validationServer04Feedback" class="invalid-feedback">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer05">Zip</label>
      <input type="text" class="form-control is-invalid" id="validationServer05" aria-describedby="validationServer05Feedback" required>
      <div id="validationServer05Feedback" class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" aria-describedby="invalidCheck3Feedback" required>
      <label class="form-check-label" for="invalidCheck3">
        Agree to terms and conditions
      </label>
      <div  id="invalidCheck3Feedback" class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Onartutako elementuak

Balidazio-estiloak eskuragarri daude inprimaki-kontrol eta osagai hauetarako:

  • <input>s eta <textarea>s-ekin.form-control
  • <select>s .form-controledo.custom-select
  • .form-checks
  • .custom-checkboxs eta .custom-radios
  • .custom-file
Mesedez, idatzi mezu bat testu eremuan.
Iritzi-testu baliogabearen adibidea
Adibide gehiago, iritzi-testu baliogabea
Adibidea aukeraketa pertsonalizatuaren iritzi baliogabea
Fitxategi pertsonalizatuen iritzia baliogabearen adibidea
@
Adibidea sarrera-taldearen iritzi baliogabea
Adibidea sarrera-taldearen iritzi baliogabea
Adibidea sarrera-taldearen iritzi baliogabea 
<form class="was-validated">
  <div class="mb-3">
    <label for="validationTextarea">Textarea</label>
    <textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required></textarea>
    <div class="invalid-feedback">
      Please enter a message in the textarea.
    </div>
  </div>

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

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

  <div class="mb-3">
    <select class="custom-select" required>
      <option value="">Choose...</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
    <div class="invalid-feedback">Example invalid custom select feedback</div>
  </div>

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

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

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

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

Erreminta-aholkuak

Zure inprimakiaren diseinuak aukera ematen badu, .{valid|invalid}-feedbackklaseak klaseengatik alda ditzakezu .{valid|invalid}-tooltipbaliozkotze-erantzunak estiloko tresna-aholku batean bistaratzeko. Ziurtatu guraso bat position: relativegainean duzula tresna-informazioa kokatzeko. Beheko adibidean, gure zutabe klaseek hori badute dagoeneko, baina baliteke zure proiektuak konfigurazio alternatibo bat behar izatea.

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

Pertsonalizatzea

Balidazio-egoerak Sass bidez pertsonaliza daitezke $form-validation-statesmaparekin. Gure fitxategian kokatuta _variables.scss, Sass mapa hau begiztatuta dago lehenetsitako valid/ invalidbaliozkotze egoerak sortzeko. Estatu bakoitzaren kolorea eta ikonoa pertsonalizatzeko habiaratutako mapa dago barne. Arakatzaileek beste estaturik onartzen ez duten arren, estilo pertsonalizatuak erabiltzen dituztenek erraz gehi ditzakete inprimaki-erantzun konplexuagoak.

Kontuan izan ez dugula gomendatzen balio hauek pertsonalizatzea form-validation-statemixin-a ere aldatu gabe.

// 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));
}

Sarrera-taldeen baliozkotze konponbidea

Ezin dugu konpondu border-radiussarrera-taldeen hautsiak baliozkotuz, hautatzaileen mugak direla eta, beraz, eskuz gainidatzi behar dira. Sarrera-talde estandar bat erabiltzen ari zarenean eta ertz-erradioaren balio lehenetsiak pertsonalizatzen ez dituzunean, gehitu .rounded-righthautsitako elementuei border-radius.

<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">@</span>
  </div>
  <input type="text" class="form-control rounded-right" required>
  <div class="invalid-feedback">
    Please choose a username.
  </div>
</div>
@
Mesedez, aukeratu erabiltzaile-izen bat.

Sarrera talde txiki edo handi bat erabiltzen ari zarenean edo border-radiusbalio lehenetsiak pertsonalizatzen ari zarenean, gehitu CSS pertsonalizatua busted elementua duen elementuari border-radius.

/* Change values to match the radius of your form control */
.fix-rounded-right {
  border-top-right-radius: .2rem !important;
  border-bottom-right-radius: .2rem !important;
}
<div class="input-group input-group-sm">
  <div class="input-group-prepend">
    <span class="input-group-text">@</span>
  </div>
  <input type="text" class="form-control fix-rounded-right" required>
  <div class="invalid-feedback">
    Please choose a username.
  </div>
</div>
@
Mesedez, aukeratu erabiltzaile-izen bat.

Inprimaki pertsonalizatuak

Are gehiago pertsonalizatzeko eta arakatzaileen arteko koherentzia lortzeko, erabili gure inprimaki-elementu guztiz pertsonalizatuak arakatzailearen lehenetsiak ordezkatzeko. Markatze semantiko eta eskuragarriaren gainean eraikita daude, beraz, inprimaki-kontrol lehenetsien ordezko sendoak dira.

Koadroak eta irratiak

Kontrol- lauki eta irrati <input>eta <label>parekatze bakoitza batean bilduta dago <div>gure kontrol pertsonalizatua sortzeko. Egitura aldetik, gure lehenetsitako ikuspegi bera da .form-check.

Anai-arreba-hautatzailea ( ~) erabiltzen dugu gure <input>estatu guztietarako, adibidez :checked, gure inprimaki-adierazle pertsonalizatua behar bezala estilotzeko. Klasarekin konbinatuta, .custom-control-labelelementu bakoitzaren testua ere estilizatu dezakegu <input>'ren egoeraren arabera.

Lehenetsia ezkutatzen dugu <input>eta opacityerabiltzen dugu .custom-control-labelinprimaki-adierazle pertsonalizatu berri bat eraikitzeko eta bere ::beforeordez ::after. Zoritxarrez, ezin dugu pertsonalizatu bat eraiki <input>CSS- contentek elementu horretan ez duelako funtzionatzen.

Markatutako egoeretan, Open Iconic -eko base64 kapsulatutako SVG ikonoak erabiltzen ditugu . Honek arakatzaile eta gailuetan diseinatzeko eta kokatzeko kontrol onena eskaintzen digu.

Kontrol-laukiak

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

Kontrol-lauki pertsonalizatuek sasi-klasea ere erabil dezakete :indeterminateJavaScript bidez eskuz ezartzen direnean (ez dago HTML atributurik erabilgarri hori zehazteko).

jQuery erabiltzen ari bazara, nahikoa izango litzateke horrelako zerbait:

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

Irratiak

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

Sarean

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

Desgaituta

Kontrol-lauki pertsonalizatuak eta irratiak ere desgaitu daitezke. Gehitu disabledatributu boolearrari <input>eta adierazle pertsonalizatua eta etiketa deskribapena automatikoki estiloa izango da.

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

Etengailuak

Etengailu batek kontrol-lauki pertsonalizatu baten marka du, baina .custom-switchklasea erabiltzen du etengailu etengailu bat errendatzeko. Etengailuek ere onartzen dute disabledatributua.

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

Hautatu menua

Menu pertsonalizatuek <select>klase pertsonalizatu bat baino ez dute behar, .custom-selectestilo pertsonalizatuak abiarazteko. Estilo pertsonalizatuak hasierako itxurara mugatzen dira <select>eta ezin dituzte aldatu <option>nabigatzaileen mugak direla eta.

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

Aukeraketa pertsonalizatu txikiak eta handiak ere hauta ditzakezu gure tamaina bereko testu-sarrerak bat etor daitezen.

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

multipleAtributua ere onartzen da :

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

sizeAtributua den bezala :

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

Barrutia

Sortu <input type="range">kontrol pertsonalizatuak .custom-range. Pista (atzealdea) eta erpurua (balioa) biak nabigatzaile guztietan berdin ager daitezen. IE-k eta Firefoxek bakarrik onartzen dutenez euren pista "betetzea" erpuruaren ezkerretik edo eskuinetik aurrera bisualki adierazteko bitarteko gisa, ez dugu onartzen.

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

Barrutiko sarrerek mineta max- 0eta -ren balio inplizituak dituzte 100, hurrenez hurren. Balio berriak zehaztu ditzakezu mineta maxatributuak erabiltzen dituztenentzat.

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

Lehenespenez, barrutiak balio osoetara "lokatzen" dira. Hau aldatzeko, stepbalio bat zehaztu dezakezu. Beheko adibidean, urrats kopurua bikoiztu egiten dugu step="0.5".

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

Fitxategien arakatzailea

Fitxategien sarrera pertsonalizatua animatzeko gomendatutako plugina: bs-custom-file-input , horixe erabiltzen ari gara gure dokumentuetan.

Fitxategiaren sarrera multzoko nardagarriena da eta JavaScript gehigarria behar du Aukeratu fitxategi funtzionalarekin… eta hautatutako fitxategi-izenaren testuarekin lotu nahi badituzu.

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

<input>Fitxategi lehenetsia ezkutatzen dugu opacityeta horren ordez <label>. Botoia sortu eta kokapenarekin kokatzen da ::after. widthAzkenik, a eta heighton deklaratzen dugu <input>inguruko edukietarako tarte egokia izateko.

Kateak itzultzea edo pertsonalizatzea SCSS-rekin

:lang()Sasi-klasea " Browse" testua beste hizkuntza batzuetara itzultzeko erabiltzen da. Gainidatzi edo gehitu sarrerak $custom-file-textSass aldagaiari dagokion hizkuntza-etiketa eta lokalizatutako kateekin. Ingelesezko kateak modu berean pertsonaliza daitezke. Adibidez, hona hemen nola gehitu litekeen gaztelaniazko itzulpen bat (gaztelaniazko hizkuntza kodea da es):

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

Hona hemen lang(es)gaztelaniazko itzulpen baterako fitxategi pertsonalizatuaren sarreraren ekintza:

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

Zure dokumentuaren (edo honen azpizuhaitzaren) hizkuntza behar bezala ezarri beharko duzu testu zuzena erakusteko. Elementuaren atributua edo HTTP goiburua erabiliz egin daiteke ,lang beste metodo batzuen artean.<html>Content-Language

Kateak HTMLrekin itzultzea edo pertsonalizatzea

Bootstrap-ek "Arakatu" testua HTML-n itzultzeko modua ere eskaintzen du data-browsesarrera pertsonalizatuaren etiketara gehi daitekeen atributuarekin (adibidea nederlanderaz):

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