Шаклҳо

Барраси

Назорати формаи Bootstrap дар сабкҳои шакли Rebooted мо бо синфҳо васеъ мешавад. Аз ин синфҳо истифода баред, то ба намоишҳои фармоишии онҳо барои намоиши мувофиқтар дар байни браузерҳо ва дастгоҳҳо дохил шавед.

Боварӣ ҳосил кунед, ки 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-ро (хоҳ он <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аттрибутиро ба a илова кунед. <fieldset>Браузерҳо ҳамаи назорати шаклҳои модариро ( <input>, <select>, ва <button>унсурҳои) дар дохили a <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мундариҷа, ки пас аз доштани мундариҷаи майдони форма нопадид мешавад) ба корбарони технологияҳои ёрирасон манфиат хоҳад овард, набудани матни нишони намоён барои корбарони муайян то ҳол метавонад мушкил бошад. Баъзе шаклҳои тамғаи намоён одатан беҳтарин равиш ҳам барои дастрасӣ ва ҳам қобили истифода аст.

Сасс

Бисёре аз тағирёбандаҳои шакл дар сатҳи умумӣ муқаррар карда мешаванд, то аз ҷониби ҷузъҳои инфиродии шакл дубора истифода шаванд ва васеъ карда шаванд. Шумо инҳоро аксар вақт ҳамчун $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;