Ձևաթղթեր
Օրինակներ և օգտագործման ուղեցույցներ ձևերի կառավարման ոճերի, դասավորության ընտրանքների և հատուկ բաղադրիչների համար՝ ձևերի լայն տեսականի ստեղծելու համար:
Ընդհանուր ակնարկ
Bootstrap-ի ձևի վերահսկիչները ընդլայնվում են դասերով մեր Rebooted ձևերի ոճերի վրա: Օգտագործեք այս դասերը՝ ընտրելու դրանց հարմարեցված էկրանները՝ բրաուզերների և սարքերի միջև ավելի հետևողական ցուցադրման համար:
Համոզվեք, որ օգտագործեք համապատասխան type
հատկանիշ բոլոր մուտքերում (օրինակ՝ email
էլփոստի հասցեի կամ number
թվային տեղեկատվության համար), որպեսզի օգտվեք մուտքագրման ավելի նոր վերահսկիչներից, ինչպիսիք են էլփոստի հաստատումը, համարների ընտրությունը և այլն:
Ահա արագ օրինակ՝ Bootstrap-ի ձևի ոճերը ցուցադրելու համար: Շարունակեք կարդալ փաստաթղթերը պահանջվող դասերի, ձևի դասավորության և այլնի վերաբերյալ:
<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>
Ձևերի վերահսկում
Տեքստային ձևի վերահսկիչները, ինչպիսիք են <input>
s, <select>
s և <textarea>
s-ը, ոճավորվում են .form-control
դասի հետ: Ներառված են ընդհանուր տեսքի, ֆոկուսի վիճակի, չափերի և այլնի ոճեր:
Համոզվեք, որ ուսումնասիրեք մեր մաքսային ձևերը հետագա ոճերի <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>
Ֆայլի մուտքագրման համար .form-control
փոխեք .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>
Չափսերը
Սահմանեք բարձրություններ՝ օգտագործելով դասեր, ինչպիսիք են .form-control-lg
և .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>
Միայն կարդալու համար
Մուտքի վրա ավելացրեք readonly
բուլյան հատկանիշ՝ մուտքի արժեքի փոփոխությունը կանխելու համար: Միայն կարդալու մուտքերը ավելի թեթև են թվում (ինչպես անջատված մուտքերը), բայց պահպանում են ստանդարտ կուրսորը:
<input class="form-control" type="text" placeholder="Readonly input here..." readonly>
Միայն կարդալու պարզ տեքստ
Եթե ցանկանում եք <input readonly>
ձեր ձևի տարրերը ձևավորել որպես պարզ տեքստ, օգտագործեք .form-control-plaintext
դասը, որպեսզի հեռացնեք ձևի դաշտի լռելյայն ոճավորումը և պահպանեք ճիշտ լուսանցքն ու լրացումը:
<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>
Շրջանակի մուտքեր
Սահմանեք հորիզոնական ոլորվող միջակայքի մուտքերը՝ օգտագործելով .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>
Նշման տուփեր և ռադիոներ
Կանխադրված վանդակները և ռադիոկայանները բարելավվում են մեկ դասի օգնությամբ .form-check
երկու մուտքագրման տեսակների համար, որոնք բարելավում են իրենց HTML տարրերի դասավորությունը և վարքագիծը : Վանդակները նախատեսված են ցուցակում մեկ կամ մի քանի տարբերակներ ընտրելու համար, մինչդեռ ռադիոկայանները նախատեսված են շատերից մեկ տարբերակ ընտրելու համար:
Անջատված վանդակները և ռադիոները աջակցվում են: Հատկանիշը disabled
կկիրառի ավելի բաց գույն, որը կօգնի ցույց տալ մուտքագրման վիճակը:
Նշման տուփերը և ռադիոկոճակները աջակցում են HTML-ի վրա հիմնված ձևերի վավերացմանը և տրամադրում են հակիրճ, մատչելի պիտակներ: Որպես այդպիսին, մեր <input>
s-ն և <label>
s-ն եղբայրական տարրեր են՝ ի տարբերություն a-ի <input>
ներսում <label>
: Սա մի փոքր ավելի խոսուն է, քանի որ դուք պետք է նշեք id
և for
ատրիբուտները կապելու <input>
և <label>
.
Կանխադրված (դասավոր)
Լռելյայնորեն, ցանկացած թվով վանդակներ և ռադիոներ, որոնք անմիջական եղբայր կամ եղբայր են, կտեղավորվեն ուղղահայաց և համապատասխան հեռավորության վրա .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>
Inline
Խմբավորեք վանդակները կամ ռադիոները նույն հորիզոնական տողի վրա՝ ավելացնելով .form-check-inline
որևէ մեկին .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>
Առանց պիտակների
Ավելացրեք .position-static
այն մուտքագրումներին, .form-check
որոնք չունեն պիտակի տեքստ: Հիշեք, որ դեռևս պետք է տրամադրեք օժանդակ տեխնոլոգիաների համար հասանելի անվանման որևէ ձև (օրինակ՝ օգտագործելով 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>
Դասավորություն
Քանի որ Bootstrap-ը կիրառվում է display: block
և width: 100%
մեր գրեթե բոլոր ձևերի վերահսկիչները, ձևերը լռելյայնորեն կդասավորվեն ուղղահայաց: Լրացուցիչ դասերը կարող են օգտագործվել այս դասավորությունը փոփոխելու համար՝ ըստ յուրաքանչյուր ձևի:
Կազմել խմբեր
Դասը .form-group
ձևաթղթերին որոշ կառուցվածք ավելացնելու ամենահեշտ ձևն է: Այն ապահովում է ճկուն դաս, որը խրախուսում է պիտակների, հսկիչների, կամընտիր օգնության տեքստի և ձևերի վավերացման հաղորդագրությունների պատշաճ խմբավորումը: Լռելյայնորեն այն կիրառվում է միայն margin-bottom
, բայց անհրաժեշտության դեպքում ընտրում է լրացուցիչ ոճեր .form-inline
: Օգտագործեք այն <fieldset>
s, <div>
s կամ գրեթե ցանկացած այլ տարրի հետ:
<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>
Ձևավորող ցանց
Ավելի բարդ ձևեր կարելի է կառուցել՝ օգտագործելով մեր ցանցային դասերը: Օգտագործեք դրանք ձևերի դասավորության համար, որոնք պահանջում են բազմաթիվ սյունակներ, տարբեր լայնություններ և լրացուցիչ հավասարեցման ընտրանքներ:
<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>
Ձևավորել տող
Դուք կարող եք նաև փոխանակել մեր ստանդարտ ցանցի տողի .row
հետ .form-row
, որը վերացնում է լռելյայն սյունակի ջրահեռացումները՝ ավելի ամուր և կոմպակտ դասավորությունների համար:
<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>
Ցանցային համակարգով կարող են ստեղծվել նաև ավելի բարդ դասավորություններ:
<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>
Հորիզոնական ձև
Ցանցով ստեղծեք հորիզոնական ձևեր՝ ավելացնելով .row
դասը՝ խմբեր ձևավորելու համար և օգտագործելով .col-*-*
դասերը՝ ձեր պիտակների և հսկիչների լայնությունը նշելու համար: Համոզվեք, որ ավելացրեք .col-form-label
նաև ձեր <label>
ֆայլերին, որպեսզի դրանք ուղղահայաց կենտրոնացվեն իրենց հետ կապված ձևերի կառավարումներով:
Երբեմն, գուցե անհրաժեշտ լինի օգտագործել լուսանցք կամ լիցքավորման կոմունալ ծառայություններ՝ ձեզ անհրաժեշտ կատարյալ հավասարեցում ստեղծելու համար: Օրինակ, մենք հեռացրել ենք padding-top
մեր կուտակված ռադիոյի մուտքերի պիտակը, որպեսզի ավելի լավ հավասարեցնենք տեքստի բազային գիծը:
<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>
Հորիզոնական ձևի պիտակի չափում
Համոզվեք, որ օգտագործեք .col-form-label-sm
կամ .col-form-label-lg
ձեր <label>
s կամ <legend>
s-ի չափերը ճիշտ հետևելու համար .form-control-lg
և .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>
Սյունակի չափսերը
Ինչպես ցույց է տրված նախորդ օրինակներում, մեր ցանցային համակարգը թույլ է տալիս տեղադրել ցանկացած թվով .col
s a .row
կամ .form-row
. Նրանք հասանելի լայնությունը հավասարապես կբաժանեն իրենց միջև: Դուք կարող եք նաև ընտրել ձեր սյունակների ենթաբազմությունը՝ քիչ թե շատ տեղ գրավելու համար, մինչդեռ մնացած սյունակները .col
հավասարապես բաժանում են մնացածը՝ հատուկ սյունակների դասերով, ինչպիսիք են .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>
Ավտոմատ չափում
Ստորև բերված օրինակը օգտագործում է flexbox օգտակար ծրագիր՝ բովանդակությունը ուղղահայաց կենտրոնացնելու համար և փոխվում .col
է .col-auto
այնպես, որ ձեր սյունակները գրավեն այնքան տարածք, որքան անհրաժեշտ է: Մեկ այլ կերպ ասած, սյունակը չափվում է բովանդակության հիման վրա:
<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>
Այնուհետև կարող եք նորից խառնել այն չափի հատուկ սյունակների դասերի հետ:
<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>
Եվ, իհարկե , աջակցվում են հատուկ ձևի վերահսկում :
<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>
Ներդիր ձևեր
Օգտագործեք .form-inline
դասը՝ մեկ հորիզոնական տողի վրա մի շարք պիտակներ, ձևերի կառավարիչներ և կոճակներ ցուցադրելու համար: Ներկառուցված ձևաթղթերում ձևերի վերահսկիչները մի փոքր տարբերվում են իրենց լռելյայն վիճակներից:
- Կառավարումներն են
display: flex
՝ փլուզում է HTML-ի ցանկացած սպիտակ տարածություն և թույլ է տալիս ապահովել հավասարեցման կառավարում միջակայքի և flexbox կոմունալ ծառայությունների հետ: - Վերահսկիչները և մուտքային խմբերը ստանում
width: auto
են Bootstrap-ի լռելյայն վերացնելու համարwidth: 100%
: - Վերահսկիչները հայտնվում են միայն տեսադաշտերում, որոնք ունեն առնվազն 576 պիքսել լայնություն ՝ շարժական սարքերի նեղ դիտակետերը հաշվի առնելու համար:
Հնարավոր է, որ ձեզ անհրաժեշտ լինի ձեռքով կարգավորել առանձին ձևերի վերահսկման լայնությունը և հավասարեցումը միջակայքի կոմունալ ծառայություններով (ինչպես ցույց է տրված ստորև): Վերջապես, համոզվեք, որ <label>
յուրաքանչյուր ձևի կառավարում միշտ ներառեք a, նույնիսկ եթե ձեզ անհրաժեշտ է թաքցնել այն ոչ էկրանը կարդացող այցելուներից .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>
Աջակցվում են նաև ձևերի անհատական վերահսկում և ընտրություն:
<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>
Թաքնված պիտակների այլընտրանքներ
Օժանդակ տեխնոլոգիաները, ինչպիսիք են էկրանի ընթերցիչները, խնդիրներ կունենան ձեր ձևերի հետ, եթե յուրաքանչյուր մուտքագրման համար պիտակ չներառեք: Այս ներդիր ձևերի համար կարող եք թաքցնել պիտակները՝ օգտագործելով .sr-only
դասը: Աջակցող տեխնոլոգիաների համար պիտակ տրամադրելու այլ այլընտրանքային մեթոդներ կան, ինչպիսիք են aria-label
, aria-labelledby
կամ title
հատկանիշը: Եթե դրանցից ոչ մեկը չկա, օժանդակ տեխնոլոգիաները կարող են դիմել placeholder
հատկանիշի օգտագործմանը, եթե առկա է, բայց նշեք, որ placeholder
որպես պիտակավորման այլ մեթոդների փոխարինում օգտագործելը խորհուրդ չի տրվում:
Օգնության տեքստ
Բլոկի մակարդակի օգնության տեքստը ձևերով կարող է ստեղծվել օգտագործելով .form-text
(նախկինում հայտնի էր որպես .help-block
v3-ում): Ներկառուցված օգնության տեքստը կարող է ճկուն կերպով իրականացվել՝ օգտագործելով ցանկացած ներկառուցված HTML տարր և օգտակար դասեր, ինչպիսիք են .text-muted
.
Օգնության տեքստի կապակցում ձևի վերահսկման հետ
Օգնության տեքստը պետք է բացահայտորեն կապված լինի ձևի կառավարման հետ, որին այն առնչվում է aria-describedby
հատկանիշի օգտագործմամբ: Սա կապահովի, որ օժանդակ տեխնոլոգիաները, ինչպիսիք են էկրանի ընթերցողները, կհայտարարեն այս օգնության տեքստը, երբ օգտատերը կենտրոնանա կամ մտնի կառավարում:
Ներքևում գտնվող օգնության տեքստը կարելի է ոճավորել .form-text
. Այս դասը ներառում display: block
և ավելացնում է որոշ վերին լուսանցք՝ վերը նշված մուտքերից հեշտ հեռավորության համար:
<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>
Ներկառուցված տեքստը կարող է օգտագործել ցանկացած տիպիկ ներկառուցված HTML տարր (լինի դա <small>
, <span>
, կամ որևէ այլ բան) ոչ ավելի, քան օգտակար դաս:
<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>
Հաշմանդամ ձևեր
Ավելացրեք disabled
բուլյան հատկանիշը մուտքագրման վրա՝ կանխելու օգտատերերի փոխազդեցությունները և այն ավելի թեթև երևալու համար:
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
Ավելացրեք disabled
հատկանիշը a-ին, <fieldset>
որպեսզի անջատեք ներսում գտնվող բոլոր կառավարումները:
<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>
Զգուշացում խարիսխների հետ
Զննարկիչները վերաբերվում են բոլոր հիմնական ձևի վերահսկիչին ( <input>
, <select>
և <button>
տարրեր) a-ի ներսում <fieldset disabled>
որպես անջատված՝ կանխելով ստեղնաշարի և մկնիկի փոխազդեցությունը դրանց վրա:
Այնուամենայնիվ, եթե ձեր ձևը ներառում է նաև հատուկ կոճականման տարրեր, ինչպիսիք են <a ... class="btn btn-*">
, ապա դրանց կտրվի միայն ոճը pointer-events: none
: Ինչպես նշվեց կոճակների անջատված վիճակի մասին բաժնում (և մասնավորապես խարիսխի տարրերի ենթաբաժնում), այս CSS հատկությունը դեռ ստանդարտացված չէ և ամբողջությամբ չի աջակցվում Internet Explorer 10-ում: Խարիսխի վրա հիմնված վերահսկիչները նույնպես դեռևս կլինեն: կենտրոնանալի և գործել ստեղնաշարի միջոցով: Դուք պետք է ձեռքով փոփոխեք այս հսկիչները՝ ավելացնելով tabindex="-1"
, որպեսզի դրանք չկենտրոնանան և aria-disabled="disabled"
ազդարարեն դրանց վիճակը օժանդակ տեխնոլոգիաներին:
Բրաուզերների համատեղելիություն
Թեև Bootstrap-ը կկիրառի այս ոճերը բոլոր բրաուզերներում, Internet Explorer 11-ը և ստորև նշվածը լիովին չեն աջակցում disabled
հատկանիշը <fieldset>
. Օգտագործեք հատուկ JavaScript՝ այս բրաուզերներում դաշտերի հավաքածուն անջատելու համար:
Վավերացում
Տրամադրեք արժեքավոր, գործնական արձագանքներ ձեր օգտատերերին HTML5 ձևի վավերացման միջոցով, որը հասանելի է մեր բոլոր աջակցվող բրաուզերներում : Ընտրեք դիտարկիչի լռելյայն վավերացման հետադարձ կապից կամ գործարկեք հատուկ հաղորդագրություններ մեր ներկառուցված դասերի և մեկնարկային JavaScript-ի միջոցով:
Ինչպես է դա աշխատում
Ահա, թե ինչպես է ձևի վավերացումը աշխատում Bootstrap-ի հետ.
- HTML ձևի վավերացումը կիրառվում է CSS-ի երկու կեղծ դասերի միջոցով
:invalid
և:valid
. Այն վերաբերում է<input>
,<select>
և<textarea>
տարրերին: - Bootstrap-ը ներառում է
:invalid
և:valid
ոճերը ծնող.was-validated
դասի համար, որը սովորաբար կիրառվում է<form>
. Հակառակ դեպքում, ցանկացած պահանջվող դաշտ առանց արժեքի ցուցադրվում է որպես անվավեր էջի բեռնման ժամանակ: Այսպիսով, դուք կարող եք ընտրել, թե երբ դրանք ակտիվացնեք (սովորաբար ձևը ներկայացնելուց հետո): - Ձևի տեսքը վերականգնելու համար (օրինակ՝ AJAX-ի օգտագործմամբ դինամիկ ձևերի ներկայացման դեպքում), ներկայացվելուց հետո նորից հեռացրեք
.was-validated
դասը :<form>
- Որպես փոխարինող,
.is-invalid
և.is-valid
դասերը կարող են օգտագործվել կեղծ դասերի փոխարեն սերվերի կողմից վավերացման համար : Նրանք չեն պահանջում.was-validated
ծնողական դասարան: - CSS-ի աշխատանքի սահմանափակումների պատճառով մենք (ներկայումս) չենք կարող ոճեր կիրառել
<label>
DOM-ում ձևի կառավարումից առաջ, առանց հատուկ JavaScript-ի օգնության: - Բոլոր ժամանակակից բրաուզերներն աջակցում են սահմանափակումների վավերացման API- ին, որը JavaScript-ի մի շարք մեթոդներ է՝ ձևերի վերահսկման վավերացման համար:
- Հետադարձ կապի հաղորդագրությունները կարող են օգտագործել զննարկիչի կանխադրված կարգավորումները (տարբեր յուրաքանչյուր դիտարկիչի համար և անկայուն CSS-ի միջոցով) կամ մեր հատուկ հետադարձ կապի ոճերը՝ լրացուցիչ HTML և CSS:
- Դուք կարող եք տրամադրել հատուկ վավերականության հաղորդագրություններ
setCustomValidity
JavaScript-ում:
Հաշվի առնելով դա՝ հաշվի առեք հետևյալ ցուցադրությունները՝ մեր հատուկ ձևերի վավերացման ոճերի, կամընտիր սերվերի կողմի դասերի և դիտարկիչի լռելյայնների համար:
Պատվերով ոճեր
Հատուկ Bootstrap ձևի վավերացման հաղորդագրությունների համար դուք պետք է ավելացնեք novalidate
բուլյան հատկանիշը ձեր <form>
. Սա անջատում է դիտարկիչի կանխադրված հետադարձ կապի գործիքների հուշումները, բայց դեռևս ապահովում է JavaScript-ում ձևերի վավերացման API-ների մուտքը: Փորձեք ներկայացնել ստորև ներկայացված ձևը. մեր JavaScript-ը կխոչընդոտի ուղարկել կոճակը և կփոխանցի ձեզ հետադարձ կապ: Երբ փորձում եք ուղարկել, կտեսնեք ձեր ձևի կառավարում կիրառվող ոճերը :invalid
և ոճերը::valid
Հետադարձ կապի հատուկ ոճերը կիրառում են հատուկ գույներ, եզրագծեր, ֆոկուսի ոճեր և ֆոնային պատկերակներ՝ կարծիքն ավելի լավ հաղորդելու համար: s-ի ֆոնային պատկերակները <select>
հասանելի են միայն .custom-select
և ոչ .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>
Զննարկչի լռելյայն
Չե՞ք հետաքրքրված հատուկ վավերացման հետադարձ հաղորդագրություններով կամ գրել JavaScript՝ ձևի վարքագիծը փոխելու համար: Ամեն ինչ լավ է, դուք կարող եք օգտագործել բրաուզերի կանխադրված կարգավորումները: Փորձեք ներկայացնել ստորև ներկայացված ձևը: Կախված ձեր դիտարկիչից և ՕՀ-ից, դուք կտեսնեք արձագանքի մի փոքր այլ ոճ:
Թեև հետադարձ կապի այս ոճերը չեն կարող ձևավորվել CSS-ով, այնուամենայնիվ, դուք կարող եք հարմարեցնել հետադարձ կապի տեքստը JavaScript-ի միջոցով:
<form>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationDefault01">First name</label>
<input type="text" class="form-control" id="validationDefault01" value="Mark" required>
</div>
<div class="col-md-6 mb-3">
<label for="validationDefault02">Last name</label>
<input type="text" class="form-control" id="validationDefault02" value="Otto" required>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationDefault03">City</label>
<input type="text" class="form-control" id="validationDefault03" required>
</div>
<div class="col-md-3 mb-3">
<label for="validationDefault04">State</label>
<select class="custom-select" id="validationDefault04" required>
<option selected disabled value="">Choose...</option>
<option>...</option>
</select>
</div>
<div class="col-md-3 mb-3">
<label for="validationDefault05">Zip</label>
<input type="text" class="form-control" id="validationDefault05" required>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
<label class="form-check-label" for="invalidCheck2">
Agree to terms and conditions
</label>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
Սերվերի կողմը
Մենք խորհուրդ ենք տալիս օգտագործել հաճախորդի կողմից վավերացում, բայց եթե դուք պահանջում եք սերվերի կողմից վավերացում, կարող եք նշել անվավեր և վավեր ձևի դաշտերը .is-invalid
և .is-valid
. Նկատի ունեցեք, որ .invalid-feedback
աջակցվում է նաև այս դասերի հետ:
Անվավեր դաշտերի դեպքում համոզվեք, որ անվավեր հետադարձ կապի/սխալի հաղորդագրությունը կապված է համապատասխան ձևի դաշտի հետ՝ օգտագործելով aria-describedby
. Այս հատկանիշը թույլ է տալիս մեկից ավելի id
հղում կատարել, եթե դաշտն արդեն մատնանշում է ձևի լրացուցիչ տեքստը:
<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>
Աջակցվող տարրեր
Վավերացման ոճերը հասանելի են հետևյալ ձևի վերահսկիչների և բաղադրիչների համար.
<input>
s և<textarea>
s հետ.form-control
<select>
s հետ.form-control
կամ.custom-select
.form-check
ս.custom-checkbox
s և.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>
Գործիքների հուշումներ
Եթե ձեր ձևի դասավորությունը դա թույլ է տալիս, կարող եք դասերը փոխել .{valid|invalid}-feedback
դասերի .{valid|invalid}-tooltip
հետ՝ ստուգման հետադարձ կապը ցուցադրելու ոճավորված գործիքի հուշումով: Համոզվեք, որ դրա position: relative
վրա ծնող կա՝ գործիքի հուշում տեղադրելու համար: Ստորև բերված օրինակում մեր սյունակների դասերն արդեն ունեն սա, բայց ձեր նախագիծը կարող է պահանջել այլընտրանքային կարգավորում:
<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>
Անհատականացում
Վավերացման վիճակները կարող են հարմարեցվել Sass-ի միջոցով $form-validation-states
քարտեզի հետ: Այս Sass քարտեզը, որը գտնվում է մեր _variables.scss
ֆայլում, պտտվում է լռելյայն valid
/ invalid
վավերացման վիճակները ստեղծելու համար: Ներառված է յուրաքանչյուր նահանգի գույնը և պատկերակը հարմարեցնելու համար տեղադրված քարտեզը: Թեև այլ պետություններ չեն աջակցվում բրաուզերների կողմից, նրանք, ովքեր օգտագործում են հատուկ ոճեր, կարող են հեշտությամբ ավելացնել ավելի բարդ ձևերի հետադարձ կապ:
Խնդրում ենք նկատի ունենալ, որ մենք խորհուրդ չենք տալիս հարմարեցնել այս արժեքները՝ առանց նաև form-validation-state
միքսինը փոփոխելու:
// 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));
}
Մուտքային խմբի վավերացում
Որոշելու համար, թե որ տարրերին անհրաժեշտ են կլորացված անկյուններ մուտքային խմբի ներսում վավերացումով, մուտքային խմբին անհրաժեշտ է լրացուցիչ .has-validation
դաս:
<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>
Պատվերով ձևեր
Ավելի հարմարեցվածության և բրաուզերի միջև հետևողականության համար օգտագործեք մեր ամբողջովին հարմարեցված ձևի տարրերը՝ բրաուզերի կանխադրվածները փոխարինելու համար: Դրանք կառուցված են իմաստային և մատչելի նշագրման վրա, ուստի դրանք ամուր փոխարինում են ցանկացած լռելյայն ձևի վերահսկման համար:
Նշման տուփեր և ռադիոներ
Յուրաքանչյուր վանդակը, ռադիոն <input>
ու <label>
զուգավորումը փաթաթված են a-ով, <div>
որպեսզի ստեղծվի մեր հատուկ հսկողությունը: Կառուցվածքային առումով սա նույն մոտեցումն է, ինչ մեր լռելյայն .form-check
:
Մենք օգտագործում ենք քույր կամ եղբայր ընտրիչը ( ~
) մեր բոլոր <input>
վիճակների համար, օրինակ, :checked
մեր հատուկ ձևի ցուցիչը ճիշտ ձևավորելու համար: Երբ համակցվում է .custom-control-label
դասի հետ, մենք կարող ենք նաև ոճավորել տեքստը յուրաքանչյուր տարրի համար՝ հիմնվելով <input>
' վիճակի վրա:
Մենք թաքցնում ենք լռելյայնը <input>
և opacity
օգտագործում .custom-control-label
ենք՝ իր տեղում նոր հատուկ ձևի ցուցիչ կառուցելու համար ::before
և ::after
. Ցավոք սրտի, մենք չենք կարող ստեղծել մաքսային մեկը միայն այդ տարրի վրա, <input>
քանի որ CSS- content
ը չի աշխատում այդ տարրի վրա:
Նշված վիճակներում մենք օգտագործում ենք base64 ներկառուցված SVG պատկերակներ Open Iconic- ից : Սա ապահովում է մեզ լավագույն կառավարումը բրաուզերների և սարքերի միջև ոճավորման և դիրքավորման համար:
Նշավանդակներ
<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>
Պատվերով վանդակները կարող են նաև օգտագործել :indeterminate
կեղծ դասը, երբ ձեռքով սահմանվում է JavaScript-ի միջոցով (այն նշելու համար հասանելի HTML հատկանիշ չկա):
Եթե դուք օգտագործում եք jQuery, նման բան պետք է բավարար լինի.
$('.your-checkbox').prop('indeterminate', true)
Ռադիոներ
<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>
Inline
<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>
Անաշխատունակ
Պատվերով վանդակները և ռադիոկայանները կարող են նաև անջատվել: Ավելացրե՛ք disabled
բուլյան հատկանիշը, <input>
և հատուկ ցուցիչն ու պիտակի նկարագրությունը ավտոմատ կերպով ոճավորվեն:
<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>
Անջատիչներ
Անջատիչը ունի մաքսային վանդակի նշում, բայց օգտագործում է .custom-switch
դասը՝ փոխարկիչ փոխարկիչ ցուցադրելու համար: Անջատիչները նույնպես աջակցում են disabled
հատկանիշին:
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="customSwitch1">
<label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
</div>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
<label class="custom-control-label" for="customSwitch2">Disabled switch element</label>
</div>
Ընտրեք ընտրացանկը
Պատվերով <select>
մենյուներին անհրաժեշտ է միայն հատուկ դասակարգ՝ .custom-select
հատուկ ոճերը գործարկելու համար: Հատուկ ոճերը սահմանափակված են <select>
«-ի սկզբնական տեսքով և չեն կարող փոփոխել <option>
s-ը դիտարկիչի սահմանափակումների պատճառով:
<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>
Դուք կարող եք նաև ընտրել փոքր և մեծ հատուկ ընտրանքներից՝ մեր նմանատիպ չափի տեքստային մուտքագրումներին համապատասխանելու համար:
<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
նաև աջակցվում է.
<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
հատկանիշն է.
<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>
Շրջանակ
Ստեղծեք մաքսային <input type="range">
վերահսկումներ .custom-range
. Հետքը (ֆոնը) և բութ մատը (արժեքը) երկուսն էլ ձևավորված են այնպես, որ բրաուզերներում երևան նույնը: Քանի որ միայն IE-ն և Firefox-ն աջակցում են «լրացնել» իրենց հետքը բթամատի ձախից կամ աջից՝ որպես առաջընթացը տեսողականորեն ցույց տալու միջոց, մենք ներկայումս դա չենք աջակցում:
<label for="customRange1">Example range</label>
<input type="range" class="custom-range" id="customRange1">
min
Շրջանակի մուտքագրումներն ունեն համապատասխանաբար և max
— 0
և ի անուղղակի արժեքներ 100
: Դուք կարող եք նշել նոր արժեքներ նրանց համար, ովքեր օգտագործում են min
և max
ատրիբուտները:
<label for="customRange2">Example range</label>
<input type="range" class="custom-range" min="0" max="5" id="customRange2">
Լռելյայնորեն, միջակայքը մուտքագրում է «snap» ամբողջ թվերի արժեքներին: Սա փոխելու համար կարող եք նշել step
արժեք: Ստորև բերված օրինակում մենք կրկնապատկում ենք քայլերի քանակը՝ օգտագործելով step="0.5"
.
<label for="customRange3">Example range</label>
<input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3">
Ֆայլի զննարկիչ
Ֆայլի մուտքագրումն ամենասարսափելին է և պահանջում է լրացուցիչ JavaScript, եթե ցանկանում եք դրանք միացնել ֆունկցիոնալ Ընտրել ֆայլը… և ընտրված ֆայլի անվան տեքստին:
<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>
և opacity
փոխարենը ձևավորում ենք <label>
. Կոճակը ստեղծվում և տեղադրվում է ::after
. Վերջապես, մենք հայտարարում ենք a width
and height
on-ը <input>
շրջակա բովանդակության համար պատշաճ տարածության համար:
SCSS-ով տողերի թարգմանություն կամ հարմարեցում
Կեղծ :lang()
դասը օգտագործվում է «Փնտրել» տեքստը այլ լեզուներով թարգմանելու համար: Անտեսեք կամ ավելացրեք մուտքերը $custom-file-text
Sass փոփոխականին համապատասխան լեզվական պիտակով և տեղայնացված տողերով: Անգլերեն տողերը կարող են հարմարեցվել նույն կերպ: Օրինակ, ահա թե ինչպես կարելի է ավելացնել իսպաներեն թարգմանություն (իսպաներեն լեզվի կոդը հետևյալն է es
).
$custom-file-text: (
en: "Browse",
es: "Elegir"
);
Ահա lang(es)
իսպաներեն թարգմանության համար հատուկ ֆայլի մուտքագրման գործողությունը.
<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>
Դուք պետք է ճիշտ սահմանեք ձեր փաստաթղթի (կամ դրա ենթածառի) լեզուն, որպեսզի ճիշտ տեքստը ցուցադրվի: Դա կարելի է անել ՝lang
օգտագործելով <html>
տարրի հատկանիշը կամ Content-Language
HTTP վերնագիրը ՝ ի թիվս այլ մեթոդների:
Թարգմանել կամ հարմարեցնել տողերը HTML-ով
Bootstrap-ը նաև հնարավորություն է տալիս թարգմանել «Browse» տեքստը HTML-ով այն data-browse
հատկանիշով, որը կարող է ավելացվել հատուկ մուտքագրման պիտակի վրա (օրինակ՝ հոլանդերեն).
<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>