ወደ ዋናው ይዘት ዝለል ወደ ሰነዶች ዳሰሳ ዝለል
Check
in English

ቅጾች

ለቅጽ ቁጥጥር ቅጦች፣ የአቀማመጥ አማራጮች እና የተለያዩ ቅጾችን ለመፍጠር ብጁ ክፍሎች ምሳሌዎች እና የአጠቃቀም መመሪያዎች።

አጠቃላይ እይታ

የቡትስትራፕ ቅፅ ቁጥጥሮች ከክፍሎች ጋር ዳግም በተጀመሩ የቅጽ ስልቶቻችን ላይ ይሰፋሉ። በአሳሾች እና በመሳሪያዎች ላይ የበለጠ ወጥነት ያለው ስራ ለመስራት ወደ ብጁ ማሳያዎቻቸው ለመምረጥ እነዚህን ክፍሎች ይጠቀሙ።

typeእንደ ኢሜል ማረጋገጫ፣ የቁጥር ምርጫ እና ሌሎችም ያሉ አዳዲስ የግቤት መቆጣጠሪያዎችን ለመጠቀም በሁሉም ግብዓቶች (ለምሳሌ emailለኢሜይል አድራሻ ወይም numberለቁጥር መረጃ) ተገቢውን ባህሪ መጠቀምዎን ያረጋግጡ ።

የBootstrapን ቅፅ ቅጦችን ለማሳየት ፈጣን ምሳሌ ይኸውና። በሚፈለጉት ክፍሎች፣ የቅጽ አቀማመጥ እና ሌሎች ላይ ለሰነዶች ማንበብ ይቀጥሉ።

ኢሜልህን ለሌላ ለማንም አናጋራም።
html
<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። የብሎክ-ደረጃ አካል ጥቅም ላይ የሚውል ከሆነ፣ ከላይ ካሉት ግብዓቶች ለቀላል ክፍተት የላይኛው ህዳግ ይታከላል።

የይለፍ ቃልዎ ከ8-20 ቁምፊዎች ርዝመት ያለው፣ ፊደሎችን እና ቁጥሮችን የያዘ እና ክፍተቶችን፣ ልዩ ቁምፊዎችን ወይም ስሜት ገላጭ ምስሎችን መያዝ የለበትም።
html
<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

ከ8-20 ቁምፊዎች ርዝመት ሊኖረው ይገባል.
html
<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"ግዛታቸውን ለረዳት ቴክኖሎጂዎች ለማመልከት በማከል እነዚህን መቆጣጠሪያዎች እራስዎ ማሻሻል አለብዎት .

የተሰናከለ የመስክ ስብስብ ምሳሌ
html
<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የቅጽ መስክ ይዘት ካለው በኋላ የሚጠፋውን ይዘት) በመጠቀም አጋዥ የቴክኖሎጂ ተጠቃሚዎችን ቢጠቅምም፣ የሚታይ የመለያ ጽሑፍ አለመኖር ለተወሰኑ ተጠቃሚዎች አሁንም ችግር ሊሆን ይችላል። አንዳንድ የሚታየው መሰየሚያ ዓይነቶች በአጠቃላይ ምርጡ አካሄድ ነው፣ ሁለቱም ለተደራሽነት እና ለአጠቃቀም።

ሳስ

ብዙ የቅጽ ተለዋዋጮች እንደገና ጥቅም ላይ እንዲውሉ እና በግለሰብ የቅጽ አካላት እንዲራዘሙ በአጠቃላይ ደረጃ ተቀምጠዋል። $input-btn-*እነዚህን ብዙ ጊዜ እንደ እና $input-*ተለዋዋጮች ያያሉ ።

ተለዋዋጮች

$input-btn-*ተለዋዋጮች በአዝራሮቻችን እና በቅጽ ክፍሎቻችን መካከል ያሉ ዓለም አቀፍ ተለዋዋጮች ናቸው። እነዚህ በተደጋጋሚ ወደ ሌላ አካል-ተኮር ተለዋዋጮች እንደ እሴት ሲመደቡ ታገኛቸዋለህ።

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