Пішіндер

Шолу

Bootstrap пішін басқару элементтері сыныптары бар Қайта жүктелген пішін мәнерлерінде кеңейтіледі. Браузерлер мен құрылғыларда неғұрлым дәйекті көрсету үшін олардың теңшелген дисплейлеріне қосылу үшін осы сыныптарды пайдаланыңыз.

Электрондық поштаны тексеру, нөмірді таңдау және т.б. сияқты жаңарақ енгізуді басқару элементтерін пайдалану үшін 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>Браузерлер a ішіндегі барлық жергілікті пішін басқару элементтерін ( <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;