جەدۋەل

ئومۇمىي چۈشەنچە

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 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خاسلىقنى قوشۇڭ . <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بىر جەدۋەلنىڭ مەزمۇنى بولغاندىن كېيىن يوقىلىدىغان مەزمۇن) ياردەمچى تېخنىكا ئىشلەتكۈچىلەرگە نەپ يەتكۈزۈش بىلەن بىر ۋاقىتتا ، كۆرۈنگەن بەلگە تېكىستىنىڭ كەملىكى بەزى ئىشلەتكۈچىلەر ئۈچۈن يەنىلا مەسىلە بولۇشى مۇمكىن. كۆرۈنۈش شەكلىدىكى بەزى شەكىللەر ئادەتتە ئىشلىتىشچانلىقى ۋە ئىشلىتىشچانلىقى ئۈچۈن ئەڭ ياخشى ئۇسۇل.

Sass

نۇرغۇن شەكىل ئۆزگەرگۈچى مىقدارلار يەككە شەكىل زاپچاسلىرى تەرىپىدىن قايتا ئىشلىتىش ۋە كېڭەيتىش ئۈچۈن ئومۇمىي سەۋىيىگە تەڭشەلدى. $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;