ቅጾች
ለቅጽ ቁጥጥር ቅጦች፣ የአቀማመጥ አማራጮች እና የተለያዩ ቅጾችን ለመፍጠር ብጁ ክፍሎች ምሳሌዎች እና የአጠቃቀም መመሪያዎች።
አጠቃላይ እይታ
የቡትስትራፕ ቅፅ ቁጥጥሮች ከክፍሎች ጋር ዳግም በተጀመሩ የቅጽ ስልቶቻችን ላይ ይሰፋሉ። በአሳሾች እና በመሳሪያዎች ላይ የበለጠ ወጥነት ያለው ስራ ለመስራት ወደ ብጁ ማሳያዎቻቸው ለመምረጥ እነዚህን ክፍሎች ይጠቀሙ።
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 እና s ያሉ የጽሑፍ ቅፅ መቆጣጠሪያዎች ከክፍል <textarea>
ጋር በቅጥ የተሰሩ ናቸው .form-control
። ለአጠቃላይ ገጽታ፣ የትኩረት ሁኔታ፣ የመጠን መጠን እና ሌሎችም ቅጦች ተካትተዋል።
የእኛን ብጁ ቅፆች ወደ ተጨማሪ የቅጥ <select>
s ማሰስዎን እርግጠኛ ይሁኑ ።
<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
በመታገዝ ይሻሻላሉ ። አመልካች ሳጥኖች በአንድ ዝርዝር ውስጥ አንድ ወይም ብዙ አማራጮችን ለመምረጥ ሲሆኑ ራዲዮዎች ከብዙዎች አንድ ምርጫን ለመምረጥ ናቸው.
የተሰናከሉ አመልካች ሳጥኖች እና ሬዲዮዎች ይደገፋሉ። disabled
የመግቢያውን ሁኔታ ለማመልከት ባህሪው ቀለል ያለ ቀለም ይተገብራል ።
አመልካች ሳጥኖች እና የሬዲዮ አዝራሮች በኤችቲኤምኤል ላይ የተመሠረተ ቅጽ ማረጋገጥን ይደግፋሉ እና አጭር እና ተደራሽ መለያዎችን ይሰጣሉ። ስለዚህ፣ የእኛ <input>
እና ሴቶቻችን ከውስጥ <label>
በተቃራኒ የወንድም እህት አካላት ናቸው ። እርስዎ መግለጽ ስላለብዎት እና ን ለማዛመድ ባህሪያት ይህ በመጠኑ የበለጠ የቃል ነው ።<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>
በአግባቡ
.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
ተጨማሪ ቅጦችን ይወስዳል ። በ s፣ s ወይም ከማንኛውም ሌላ አካል .form-inline
ጋር ይጠቀሙበት ።<fieldset>
<div>
<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 ወይም s መጠቀምዎን ያረጋግጡ ።<legend>
.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
በ 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>
ራስ-ሰር መጠን
ከታች ያለው ምሳሌ ይዘቱን በአቀባዊ መሃል ለማድረግ እና አምዶችዎ የሚፈለገውን ያህል ቦታ ብቻ እንዲይዙ ለማድረግ .col
የ Flexbox መገልገያ ይጠቀማል። .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
ማንኛውንም የኤችቲኤምኤል ነጭ ቦታን እየሰበሩ እና ከቦታ ቦታ እና ከ flexbox መገልገያዎች ጋር የአሰላለፍ ቁጥጥር እንዲያቀርቡ ያስችሉዎታል። width: auto
የቡትስትራፕ ነባሪውን ለመሻር መቆጣጠሪያዎች እና የግቤት ቡድኖች ይቀበላሉwidth: 100%
።- በተንቀሳቃሽ መሳሪያዎች ላይ ጠባብ የእይታ ወደቦችን ለመለካት ቢያንስ 576 ፒክስል ስፋት ባላቸው የእይታ ወደቦች ውስጥ መቆጣጠሪያዎች በመስመር ውስጥ ብቻ ይታያሉ።
የግለሰብ የቅጽ መቆጣጠሪያዎችን ስፋት እና አሰላለፍ ከክፍተት መገልገያዎች ጋር (ከዚህ በታች እንደሚታየው) እራስዎ መፍታት ሊኖርብዎ ይችላል ። በመጨረሻ፣ ሁልጊዜ ከእያንዳንዱ የቅጽ መቆጣጠሪያ ጋር ማካተትዎን እርግጠኛ ይሁኑ <label>
፣ ምንም እንኳን በስክሪን አንባቢ ካልሆኑ ጎብኝዎች መደበቅ ቢፈልጉም .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
ሌሎች የመለያ ዘዴዎችን እንደ ምትክ መጠቀም አይመከርም።
የእገዛ ጽሑፍ
አግድ-ደረጃ እገዛ ጽሑፍ በቅጾች ሊፈጠር ይችላል (ቀደም ሲል v3 ውስጥ .form-text
ይታወቅ )። .help-block
የውስጠ-መስመር እገዛ ጽሑፍ ማንኛውንም የውስጠ-መስመር 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>
የውስጠ-መስመር ጽሑፍ ማንኛውንም የተለመደ የውስጠ-መስመር ኤችቲኤምኤል ኤለመንት (ኤ፣፣፣ ወይም ሌላ ነገር ሊሆን ይችላል <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
ወደ ሀ ያክሉ ።<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>
ኤለመንቶችን) እንደ አካል ጉዳተኛ አድርገው ይቆጥራሉ።<fieldset disabled>
ነገር ግን፣ የእርስዎ ቅፅ እንደ ብጁ አዝራር መሰል አባሎችን ካካተተ <a ... class="btn btn-*">
፣ እነዚህ የሚሰጣቸው የአጻጻፍ ስልት ብቻ ነው pointer-events: none
። ስለ አዝራሮች የአካል ጉዳተኛ ሁኔታ (በተለይም በንዑስ ክፍል ውስጥ ለአዝራሮች) እንደተገለፀው ይህ የሲኤስኤስ ንብረት ገና ደረጃውን ያልጠበቀ እና በInternet Explorer 10 ውስጥ ሙሉ በሙሉ አይደገፍም። መልህቅ ላይ የተመሰረቱ መቆጣጠሪያዎች እንዲሁ አሁንም ይቀራሉ። የቁልፍ ሰሌዳን በመጠቀም ትኩረት የሚስብ እና የሚሰራ። tabindex="-1"
ትኩረትን እንዳያገኙ እና aria-disabled="disabled"
ግዛታቸውን ለረዳት ቴክኖሎጂዎች ለማመልከት በማከል እነዚህን መቆጣጠሪያዎች እራስዎ ማስተካከል አለብዎት ።
የአሳሽ ተሻጋሪ ተኳኋኝነት
disabled
Bootstrap እነዚህን ቅጦች በሁሉም አሳሾች ላይ ቢተገበርም፣ ኢንተርኔት ኤክስፕሎረር 11 እና ከዚያ በታች በ ሀ ላይ ያለውን ባህሪ ሙሉ በሙሉ አይደግፉም <fieldset>
። በእነዚህ አሳሾች ውስጥ የመስክ ስብስቡን ለማሰናከል ብጁ ጃቫ ስክሪፕትን ይጠቀሙ።
ማረጋገጫ
በኤችቲኤምኤል 5 ቅጽ ማረጋገጫ ለተጠቃሚዎችዎ ጠቃሚ እና ተግባራዊ ግብረመልስ ያቅርቡ - በሁሉም በሚደገፉ አሳሾች ውስጥ ይገኛል። ከአሳሹ ነባሪ የማረጋገጫ ግብረመልስ ምረጥ ወይም ብጁ መልዕክቶችን አብሮ በተሰራ ክፍሎቻችን እና ጀማሪ ጃቫስክሪፕት ተግብር።
እንዴት እንደሚሰራ
የቅጽ ማረጋገጫ ከBootstrap ጋር እንዴት እንደሚሰራ እነሆ፡-
- የኤችቲኤምኤል ቅጽ ማረጋገጫ በ CSS ሁለት አስመሳይ ክፍሎች በኩል ይተገበራል፣
:invalid
እና:valid
. የሚመለከተው በ<input>
፣<select>
እና<textarea>
አባሎች ላይ ነው። - ቡትስትራፕ የወላጅ ክፍልን
:invalid
እና ቅጦችን ይሸፍናል፣ ብዙውን ጊዜ በ . ያለበለዚያ፣ ዋጋ የሌለው ማንኛውም አስፈላጊ መስክ በገጽ ጭነት ላይ ልክ ያልሆነ ሆኖ ይታያል። በዚህ መንገድ እነሱን መቼ እንደሚያነቃቁ መምረጥ ይችላሉ (በተለምዶ ቅጹን ለማስገባት ከተሞከረ በኋላ)።:valid
.was-validated
<form>
- የቅጹን ገጽታ እንደገና ለማስጀመር (ለምሳሌ AJAX ን በመጠቀም በተለዋዋጭ ቅፅ ማስረከቢያ) ፣ ካስረከቡ በኋላ
.was-validated
ክፍሉን<form>
እንደገና ያስወግዱት። - እንደ ውድቀት፣
.is-invalid
እና ክፍሎች ለአገልጋይ ጎን ማረጋገጫ.is-valid
ከሐሰት-ክፍሎች ይልቅ ጥቅም ላይ ሊውሉ ይችላሉ ። አያስፈልጋቸውም።.was-validated
የወላጅ ክፍል <label>
በሲኤስኤስ አሰራር ላይ ባሉ ገደቦች ምክንያት በብጁ ጃቫ ስክሪፕት ሳይታገዝ በDOM ውስጥ ከቅጽ ቁጥጥር በፊት የሚመጣውን ቅጦች (በአሁኑ ጊዜ) መተግበር አንችልም ።- ሁሉም ዘመናዊ አሳሾች የቅጽ መቆጣጠሪያዎችን ለማረጋገጥ ተከታታይ የጃቫ ስክሪፕት ዘዴዎችን የገደብ ማረጋገጫውን ይደግፋሉ ።
- የግብረመልስ መልእክቶች የአሳሹን ነባሪዎች (ለእያንዳንዱ አሳሽ የተለየ እና በ CSS በኩል የማይሰራ) ወይም የእኛን ብጁ የግብረመልስ ስልቶች ከተጨማሪ HTML እና CSS ጋር ሊጠቀሙ ይችላሉ።
- ብጁ ተቀባይነት ያላቸው መልዕክቶችን
setCustomValidity
በጃቫ ስክሪፕት ማቅረብ ይችላሉ።
ያንን በአእምሯችን ይዘን፣ ለብጁ የቅጽ ማረጋገጫ ስልቶቻችን፣ አማራጭ የአገልጋይ ክፍሎች እና የአሳሽ ነባሪዎች የሚከተሉትን ማሳያዎች አስቡባቸው።
ብጁ ቅጦች
ለብጁ የ Bootstrap ቅጽ ማረጋገጫ መልእክቶች novalidate
የቦሊያንን ባህሪ ወደ እርስዎ ማከል ያስፈልግዎታል <form>
። ይህ የአሳሹን ነባሪ የግብረመልስ መሳሪያ ምክሮችን ያሰናክላል፣ነገር ግን አሁንም በጃቫስክሪፕት የቅጽ ማረጋገጫ ኤፒአይዎችን መዳረሻ ይሰጣል። ከታች ያለውን ቅጽ ለማስገባት ይሞክሩ; የእኛ ጃቫ ስክሪፕት የማስረከቢያ አዝራሩን ያጠለፈ እና ግብረመልስ ያቀርብልዎታል። ለማስገባት ሲሞክሩ በቅጽ መቆጣጠሪያዎችዎ ላይ የተተገበሩትን :invalid
እና ቅጦችን ያያሉ ።:valid
ብጁ የግብረመልስ ቅጦች ግብረመልስን በተሻለ መልኩ ለማስተላለፍ ብጁ ቀለሞችን፣ ድንበሮችን፣ የትኩረት ቅጦችን እና የበስተጀርባ አዶዎችን ይተገበራሉ። የበስተጀርባ አዶዎች ለ <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>
የአሳሽ ነባሪዎች
የቅጽ ባህሪያትን ለመለወጥ ብጁ የማረጋገጫ ግብረመልስ መልዕክቶችን ወይም ጃቫ ስክሪፕትን ለመጻፍ ፍላጎት የለዎትም? ሁሉም ጥሩ, የአሳሽ ነባሪዎችን መጠቀም ይችላሉ. ከታች ያለውን ቅጽ ለማስገባት ይሞክሩ። በአሳሽዎ እና በስርዓተ ክወናዎ ላይ በመመስረት ትንሽ የተለየ የአስተያየት ዘይቤ ያያሉ።
እነዚህ የአስተያየት ስልቶች በሲኤስኤስ ሊቀረጹ ባይችሉም፣ አሁንም በጃቫስክሪፕት የአስተያየት ጽሑፉን ማበጀት ይችላሉ።
<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>
ጋር.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>
ማበጀት
$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>
content
ምልክት በተደረገባቸው ግዛቶች ውስጥ፣ ከ Open Iconic የ base64 የተከተቱ SVG አዶዎችን እንጠቀማለን ። ይህ በአሳሾች እና መሳሪያዎች ላይ የቅጥ እና አቀማመጥ ምርጥ ቁጥጥር ይሰጠናል።
አመልካች ሳጥኖች
<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
በእጅ በጃቫስክሪፕት ሲቀናበሩ የውሸት ክፍልን መጠቀም ይችላሉ (ለመግለጽ ምንም የኤችቲኤምኤል አይነታ የለም)።
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>
በአግባቡ
<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
ብጁ ቅጦች በ'መጀመሪያ መልክ የተገደቡ ናቸው እና በአሳሽ ውሱንነቶች ምክንያት sውን <select>
መቀየር አይችሉም ።<option>
<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
። ትራኩ (ዳራ) እና አውራ ጣት (እሴቱ) ሁለቱም በአሳሾች ላይ ተመሳሳይ ሆነው እንዲታዩ የተቀየሱ ናቸው። አይኢ እና ፋየርፎክስ ብቻ ትራካቸውን ከአውራ ጣት ከግራ ወይም ከቀኝ "መሙላት" የሚደግፉ እንደመሆናችን መጠን እድገትን በእይታ ለማሳየት አሁን አንደግፈውም።
<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">
በነባሪ፣የክልል ግብዓቶች ወደ ኢንቲጀር እሴቶች “ይያዙ”። ይህንን ለመለወጥ, 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">
የፋይል አሳሽ
የፋይሉ ግቤት ከጥቅሉ ውስጥ በጣም ጅል ነው እና እነሱን ከተግባራዊ ፋይል ምረጥ… እና ከተመረጠ የፋይል ስም ጽሑፍ ጋር ማገናኘት ከፈለጉ ተጨማሪ ጃቫ ስክሪፕት ይፈልጋል ።
<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
. width
በመጨረሻ፣ ሀ እና height
በ ላይ እናውጃለን ።<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
ሕብረቁምፊዎችን በኤችቲኤምኤል መተርጎም ወይም ማበጀት።
ቡትስትራፕ በኤችቲኤምኤል ውስጥ የ"አስስ" ጽሁፍን 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>