ቅጾች
ለቅጽ ቁጥጥር ቅጦች፣ የአቀማመጥ አማራጮች እና የተለያዩ ቅጾችን ለመፍጠር ብጁ ክፍሎች ምሳሌዎች እና የአጠቃቀም መመሪያዎች።
አጠቃላይ እይታ
የቡትስትራፕ ቅፅ ቁጥጥሮች ከክፍሎች ጋር ዳግም በተጀመሩ የቅጽ ስልቶቻችን ላይ ይሰፋሉ። በአሳሾች እና በመሳሪያዎች ላይ የበለጠ ወጥነት ያለው ስራ ለመስራት ወደ ብጁ ማሳያዎቻቸው ለመምረጥ እነዚህን ክፍሎች ይጠቀሙ።
type
እንደ ኢሜል ማረጋገጫ፣ የቁጥር ምርጫ እና ሌሎችም ያሉ አዳዲስ የግቤት መቆጣጠሪያዎችን ለመጠቀም በሁሉም ግብዓቶች (ለምሳሌ email
ለኢሜይል አድራሻ ወይም number
ለቁጥር መረጃ) ተገቢውን ባህሪ መጠቀምዎን ያረጋግጡ ።
የBootstrapን ቅፅ ቅጦችን ለማሳየት ፈጣን ምሳሌ ይኸውና። በሚፈለጉት ክፍሎች፣ የቅጽ አቀማመጥ እና ሌሎች ላይ ለሰነዶች ማንበብ ይቀጥሉ።
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="mb-3 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>
ቅጽ ጽሑፍ
አግድ-ደረጃ ወይም የመስመር-ደረጃ ቅጽ ጽሑፍ በመጠቀም ሊፈጠር ይችላል .form-text
።
የቅጽ ጽሑፍን ከቅጽ መቆጣጠሪያዎች ጋር ማያያዝ
የቅጽ ጽሑፍ ባህሪውን ከመጠቀም ጋር ከሚዛመደው የቅጽ መቆጣጠሪያ ጋር በግልጽ መያያዝ አለበት aria-describedby
። ይህ እንደ ስክሪን አንባቢ ያሉ አጋዥ ቴክኖሎጂዎች ተጠቃሚው ትኩረት ሲያደርግ ወይም መቆጣጠሪያው ውስጥ ሲገባ ይህን ቅጽ ጽሁፍ እንደሚያሳውቁ ያረጋግጣል።
ከግብዓቶች በታች የቅጽ ጽሑፍ በ ቅጥ ሊደረግ ይችላል .form-text
። የብሎክ-ደረጃ አካል ጥቅም ላይ የሚውል ከሆነ፣ ከላይ ካሉት ግብዓቶች ለቀላል ክፍተት የላይኛው ህዳግ ይታከላል።
<label for="inputPassword5" class="form-label">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<div id="passwordHelpBlock" class="form-text">
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</div>
የውስጠ-መስመር ጽሑፍ ማንኛውንም የተለመደ የውስጠ-መስመር ኤችቲኤምኤል ኤለመንት (ኤ፣፣፣ ወይም ሌላ ነገር ሊሆን ይችላል <span>
) ከክፍል <small>
በቀር ምንም ሊጠቀም ይችላል።.form-text
<div class="row g-3 align-items-center">
<div class="col-auto">
<label for="inputPassword6" class="col-form-label">Password</label>
</div>
<div class="col-auto">
<input type="password" id="inputPassword6" class="form-control" aria-describedby="passwordHelpInline">
</div>
<div class="col-auto">
<span id="passwordHelpInline" class="form-text">
Must be 8-20 characters long.
</span>
</div>
</div>
የተሰናከሉ ቅጾች
disabled
የተጠቃሚ መስተጋብርን ለመከላከል እና ቀለል ያለ መስሎ እንዲታይ ለማድረግ የቦሊያን አይነታውን በግቤት ላይ ያክሉ ።
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
በውስጡ ያሉትን ሁሉንም መቆጣጠሪያዎች ለማሰናከል ባህሪውን disabled
ወደ ሀ ያክሉ ። አሳሾች ሁሉንም የቁልፍ ሰሌዳ እና የመዳፊት መስተጋብር በመከልከል በውስጣቸው <fieldset>
ያሉትን ሁሉንም መቆጣጠሪያዎች ( <input>
፣ <select>
እና <button>
ኤለመንቶችን) እንደ አካል ጉዳተኛ አድርገው ይቆጥራሉ።<fieldset disabled>
ነገር ግን፣ የእርስዎ ቅጽ እንደ ብጁ ቁልፍ መሰል አባሎችን ካካተተ <a class="btn btn-*">...</a>
፣ እነዚህ የሚሰጣቸው የአጻጻፍ ስልት ብቻ ነው pointer-events: none
፣ ይህ ማለት አሁንም በቁልፍ ሰሌዳው ሊተኩሩ የሚችሉ እና የሚሰሩ ናቸው። tabindex="-1"
በዚህ ሁኔታ, ትኩረትን እንዳያገኙ እና aria-disabled="disabled"
ግዛታቸውን ለረዳት ቴክኖሎጂዎች ለማመልከት በማከል እነዚህን መቆጣጠሪያዎች እራስዎ ማሻሻል አለብዎት .
<form>
<fieldset disabled>
<legend>Disabled fieldset example</legend>
<div class="mb-3">
<label for="disabledTextInput" class="form-label">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="mb-3">
<label for="disabledSelect" class="form-label">Disabled select menu</label>
<select id="disabledSelect" class="form-select">
<option>Disabled select</option>
</select>
</div>
<div class="mb-3">
<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>
ተደራሽነት
ዓላማቸው ለረዳት ቴክኖሎጂዎች ተጠቃሚዎች እንዲደርስ ሁሉም የቅጽ መቆጣጠሪያዎች ተገቢ የሆነ ተደራሽ ስም እንዳላቸው ያረጋግጡ። ይህንን ለማግኘት ቀላሉ መንገድ ኤለመንትን መጠቀም ወይም - በአዝራሮች ሁኔታ - በቂ ገላጭ ጽሑፍን እንደ የይዘቱ <label>
አካል ማካተት ነው ።<button>...</button>
የሚታይ ወይም ተገቢ የሆነ የጽሁፍ ይዘት ለማካተት ለማይቻል <label>
ሁኔታዎች አሁንም ተደራሽ የሆነ ስም የማቅረብ አማራጭ መንገዶች አሉ ለምሳሌ፡-
<label>
.visually-hidden
ክፍሉን በመጠቀም የተደበቁ ንጥረ ነገሮች- በመጠቀም እንደ መለያ ሆኖ ሊያገለግል ወደሚችል ነባር አካል በመጠቆም
aria-labelledby
title
ባህሪን መስጠት- በአንድ አካል ላይ ያለውን ተደራሽ ስም በግልፅ በማዘጋጀት ላይ
aria-label
ከእነዚህ ውስጥ አንዳቸውም ከሌሉ፣ አጋዥ ቴክኖሎጂዎች placeholder
ባህሪውን ለተደራሽ ስም <input>
እና <textarea>
አካላት እንደ ውድቅ አድርገው ሊጠቀሙበት ይችላሉ። በዚህ ክፍል ውስጥ ያሉት ምሳሌዎች ጥቂት የተጠቆሙ፣ ጉዳይ-ተኮር አቀራረቦችን ያቀርባሉ።
በምስላዊ የተደበቀ ይዘት (፣፣ .visually-hidden
እና aria-label
ሌላው ቀርቶ placeholder
የቅጽ መስክ ይዘት ካለው በኋላ የሚጠፋውን ይዘት) በመጠቀም አጋዥ የቴክኖሎጂ ተጠቃሚዎችን ቢጠቅምም፣ የሚታይ የመለያ ጽሑፍ አለመኖር ለተወሰኑ ተጠቃሚዎች አሁንም ችግር ሊሆን ይችላል። አንዳንድ የሚታየው መሰየሚያ ዓይነቶች በአጠቃላይ ምርጡ አካሄድ ነው፣ ሁለቱም ለተደራሽነት እና ለአጠቃቀም።
ሳስ
ብዙ የቅጽ ተለዋዋጮች እንደገና ጥቅም ላይ እንዲውሉ እና በግለሰብ የቅጽ አካላት እንዲራዘሙ በአጠቃላይ ደረጃ ተቀምጠዋል። $btn-input-*
እነዚህን ብዙ ጊዜ እንደ እና $input-*
ተለዋዋጮች ያያሉ ።
ተለዋዋጮች
$btn-input-*
ተለዋዋጮች በአዝራሮቻችን እና በቅጽ ክፍሎቻችን መካከል ያሉ ዓለም አቀፍ ተለዋዋጮች ናቸው። እነዚህ በተደጋጋሚ ወደ ሌላ አካል-ተኮር ተለዋዋጮች እንደ እሴት ሲመደቡ ታገኛቸዋለህ።
$input-btn-padding-y: .375rem;
$input-btn-padding-x: .75rem;
$input-btn-font-family: null;
$input-btn-font-size: $font-size-base;
$input-btn-line-height: $line-height-base;
$input-btn-focus-width: .25rem;
$input-btn-focus-color-opacity: .25;
$input-btn-focus-color: rgba($component-active-bg, $input-btn-focus-color-opacity);
$input-btn-focus-blur: 0;
$input-btn-focus-box-shadow: 0 0 $input-btn-focus-blur $input-btn-focus-width $input-btn-focus-color;
$input-btn-padding-y-sm: .25rem;
$input-btn-padding-x-sm: .5rem;
$input-btn-font-size-sm: $font-size-sm;
$input-btn-padding-y-lg: .5rem;
$input-btn-padding-x-lg: 1rem;
$input-btn-font-size-lg: $font-size-lg;
$input-btn-border-width: $border-width;