ආකෘති පත්ර

දළ විශ්ලේෂණය

Bootstrap හි පෝරම පාලන පන්ති සමඟ අපගේ Rebooted form styles මත පුළුල් වේ. බ්‍රවුසර සහ උපාංග හරහා වඩාත් ස්ථාවර විදැහුම්කරණයක් සඳහා ඔවුන්ගේ අභිරුචි කළ සංදර්ශක වෙත තේරීමට මෙම පන්ති භාවිතා කරන්න.

විද්‍යුත් තැපෑල සත්‍යාපනය, අංක තේරීම සහ තවත් බොහෝ ආදාන පාලනවලින් ප්‍රයෝජන ගැනීමට 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.

පහත ආදාන පෙළ සමඟින් හැඩගැන්විය හැක .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>

පේළිගත පෙළට පන්තියට වඩා වැඩි දෙයක් නොමැතිව ඕනෑම සාමාන්‍ය පේළිගත HTML මූලද්‍රව්‍යයක් (එය a <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පරිශීලක අන්තර්ක්‍රියා වැළැක්වීමට සහ එය සැහැල්ලු ලෙස පෙනෙන පරිදි ආදානයක් මත boolean ගුණාංගය එක් කරන්න .

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

තුළ ඇති සියලුම පාලන අක්‍රිය disabledකිරීමට a වෙත උපලක්ෂණය එක් කරන්න . බ්‍රවුසරය තුළ ඇති සියලුම ස්වදේශීය ආකෘති පාලන ( , , සහ මූලද්‍රව්‍ය) අක්‍රිය ලෙස <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;