Маягтууд

Тойм

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;