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 type
sarrera guztietan atributu egoki bat erabiltzen duzula (adibidez, email
helbide elektronikorako edo number
informazio 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.
<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-control
Itxura 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-control
egiteko , 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-lg
eta 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 readonly
atributu 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-plaintext
klasea 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>
Barrutiko 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 disabled
sarreraren 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>
. id
Hau apur bat zehatzagoa da, eta eta for
atributuak 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-inline
edozeinetan 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-static
sarrerei . .form-check
Gogoratu oraindik laguntza-teknologietarako izen erabilgarriren bat ematen duzula (adibidez, erabiliz 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: block
eta width: 100%
gure inprimakien kontrol ia guztietan, inprimakiak berez bertikalean pilatuko dira. Klase gehigarriak erabil daitezke diseinu hau inprimakiaren arabera aldatzeko.
Taldeak osatu
.form-group
Klasea 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-inline
behar 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 .row
lehenetsiak .form-row
gainidazten 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 .row
klasea gehituz taldeak osatzeko eta .col-*-*
klaseak erabiliz zure etiketen eta kontrolen zabalera zehazteko. Ziurtatu .col-form-label
zure <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-top
pilatutako irrati-sarrerak etiketa kendu dugu testuaren oinarri-lerroa hobeto lerrokatzeko.
<form>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3">
</div>
</div>
<div class="form-group row">
<label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3">
</div>
</div>
<fieldset class="form-group row">
<legend class="col-form-label col-sm-2 float-sm-left pt-0">Radios</legend>
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
<label class="form-check-label" for="gridRadios1">
First radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
<label class="form-check-label" for="gridRadios2">
Second radio
</label>
</div>
<div class="form-check disabled">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
<label class="form-check-label" for="gridRadios3">
Third disabled radio
</label>
</div>
</div>
</fieldset>
<div class="form-group row">
<div class="col-sm-10 offset-sm-2">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck1">
<label class="form-check-label" for="gridCheck1">
Example checkbox
</label>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-sm-10">
<button type="submit" class="btn btn-primary">Sign in</button>
</div>
</div>
</form>
Inprimaki horizontaleko etiketen tamaina
Ziurtatu .col-form-label-sm
edo .col-form-label-lg
zure <label>
s edo <legend>
s erabiltzen duzula .form-control-lg
eta .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 .col
s-kopurua jartzeko aukera ematen du a .row
edo .form-row
. Eskuragarri dagoen zabalera berdin banatuko dute haien artean. Zure zutabeen azpimultzo bat ere hauta dezakezu leku gehiago edo gutxiago okupatzeko, gainerako .col
s-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 .col
dezaten . .col-auto
Beste 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-inline
klasea 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: auto
Bootstrap lehenetsia gainidazteko jasotzen dutewidth: 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-only
klasea erabiliz. Laguntza-teknologiei etiketa bat emateko beste metodo alternatibo batzuk daude, hala nola aria-label
, aria-labelledby
edo title
atributua. Horietako bat ere ez badago, laguntza-teknologiek placeholder
atributua erabil dezakete, baldin badago, baina kontuan izan placeholder
ez dela gomendagarria etiketatze-metodoen ordezko gisa erabiltzea.
Laguntza testua
Bloke-mailako laguntza-testua inprimakietan sor daiteke (lehen v3-n .form-text
bezala ezagutzen zen). .help-block
Sareko laguntza-testua malgutasunez inplementa daiteke lerroko edozein HTML elementu eta erabilgarritasun klaseak erabiliz .text-muted
.
Laguntza-testua inprimaki-kontrolekin lotzea
aria-describedby
Laguntza-testua espresuki 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: block
goiko marjina bat barne hartzen du eta gehitzen du goiko sarreretatik erraz tartekatzeko.
<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 edozein lerroko HTML elementu tipiko erabil dezake (izan <small>
, <span>
, edo beste zerbait) erabilgarritasun-klase bat baino ez duena.
<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 disabled
atributu boolearra sarrera batean erabiltzaileen elkarrekintzak saihesteko eta arinagoa izan dadin.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
Gehitu disabled
atributua a <fieldset>
barruko kontrol guztiak desgaitzeko.
<form>
<fieldset disabled>
<legend>Disabled fieldset example</legend>
<div class="form-group">
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="form-group">
<label for="disabledSelect">Disabled select menu</label>
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
<label class="form-check-label" for="disabledFieldsetCheck">
Can't check this
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>
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 disabled
atributua <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.
Nola dabil
Hona hemen inprimakien baliozkotzeak Bootstrap-ekin nola funtzionatzen duen:
- HTML inprimakiaren baliozkotzea CSSren bi sasi-klaseen bidez aplikatzen da,
:invalid
eta:valid
.<input>
,<select>
, eta<textarea>
elementuei aplikatzen zaie . - Bootstrap-ek
:invalid
eta:valid
estiloak.was-validated
klase 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-validated
klasea<form>
berriro bidali ondoren. - Errepide gisa,
.is-invalid
eta.is-valid
klaseak erabil daitezke zerbitzariaren baliozkotze sasi-klaseen ordez . Ez dute.was-validated
guraso 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
setCustomValidity
eman 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
novalidate
Bootstrap 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, :invalid
eta :valid
estiloak 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
.
<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-invalid
Bezeroaren aldetik baliozkotzea gomendatzen dugu, baina zerbitzariaren aldetik baliozkotzea behar baduzu, baliogabeak eta baliozkoak diren inprimaki-eremuak eta rekin adieraz ditzakezu .is-valid
. Kontuan izan .invalid-feedback
klase hauekin ere onartzen dela.
Eremu baliogabeetarako, ziurtatu baliogabeko iritzia/errore mezua dagokion inprimaki-eremuarekin lotuta dagoela aria-describedby
. Atributu honek bat baino gehiagori id
erreferentzia egiteko aukera ematen du, eremuak dagoeneko inprimakiaren testu gehigarria adierazten badu.
<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-control
edo.custom-select
.form-check
s.custom-checkbox
s eta.custom-radio
s.custom-file
<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}-feedback
klaseak klaseengatik alda ditzakezu .{valid|invalid}-tooltip
baliozkotze-erantzunak estiloko tresna-aholku batean bistaratzeko. Ziurtatu guraso bat position: relative
gainean duzula tresna-informazioa kokatzeko. Beheko adibidean, gure zutabe klaseek hori badute dagoeneko, baina baliteke zure proiektuak konfigurazio alternatibo bat behar izatea.
<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-states
maparekin. Gure fitxategian kokatuta _variables.scss
, Sass mapa hau begiztatuta dago lehenetsitako valid
/ invalid
baliozkotze 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-state
mixin-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 baliozkotzea
Balidazioarekin sarrera-talde baten barruan ertz biribilduak behar dituzten elementuak detektatzeko, sarrera-talde batek .has-validation
klase gehigarri bat behar du.
<div class="input-group has-validation">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text" class="form-control" required>
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
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-label
elementu bakoitzaren testua ere estilizatu dezakegu <input>
'ren egoeraren arabera.
Lehenetsia ezkutatzen dugu <input>
eta opacity
erabiltzen dugu .custom-control-label
inprimaki-adierazle pertsonalizatu berri bat eraikitzeko eta bere ::before
ordez ::after
. Zoritxarrez, ezin dugu pertsonalizaturik sortu <input>
CSS- content
ek 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 :indeterminate
JavaScript 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="customRadioInline" class="custom-control-input">
<label class="custom-control-label" for="customRadioInline1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadioInline2" name="customRadioInline" class="custom-control-input">
<label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label>
</div>
Desgaituta
Kontrol-lauki pertsonalizatuak eta irratiak ere desgaitu daitezke. Gehitu disabled
atributu 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-switch
klasea erabiltzen du etengailu etengailu bat errendatzeko. Etengailuek ere onartzen dute disabled
atributua.
<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-select
estilo 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>
multiple
Atributua 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>
size
Atributua 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 min
eta max
- 0
eta -ren balio inplizituak dituzte 100
, hurrenez hurren. Balio berriak zehaztu ditzakezu min
eta max
atributuak 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, step
balio 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">
Fitxategi-arakatzailea
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 opacity
eta horren ordez <label>
. Botoia sortu eta kokapenarekin kokatzen da ::after
. width
Azkenik, a eta height
on 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-text
Sass 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-browse
sarrera 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>