Source

Маягтууд

Маш олон төрлийн маягт үүсгэхэд зориулсан маягтын хяналтын хэв маяг, байршлын сонголтууд болон захиалгат бүрэлдэхүүн хэсгүүдийн жишээ, ашиглалтын заавар.

Тойм

Bootstrap-ийн маягтын удирдлага нь манай Дахин ачаалагдсан маягтын ангиуд дээр өргөжиж байна. Хөтөч болон төхөөрөмжүүдэд илүү тогтвортой үзүүлэхийн тулд эдгээр ангиудыг ашиглан өөрсдийн тохируулсан дэлгэцийг сонгоорой.

Имэйл баталгаажуулалт, дугаар сонгох гэх мэт шинэ оролтын хяналтын давуу талыг ашиглахын тулд typeбүх оролтонд тохирох шинж чанарыг (жишээ нь, emailимэйл хаяг эсвэл тоон мэдээлэл) ашиглахаа мартуузай .number

Bootstrap-ийн хэлбэрийн хэв маягийг харуулах хурдан жишээ энд байна. Шаардлагатай анги, маягтын зохион байгуулалт гэх мэт баримт бичгийг үргэлжлүүлэн уншаарай.

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group 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>

Маягтын удирдлага

<input>s, <select>s, s <textarea>гэх мэт текстийн хэлбэрийн хяналтыг .form-controlангид тохируулсан байна. Ерөнхий дүр төрх, фокусын төлөв, хэмжээ гэх мэт загваруудыг багтаасан болно.

Цаашид хэв маягийг бий болгохын тулд манай захиалгат маягтуудыг судлахаа мартуузай <select>.

<form>
  <div class="form-group">
    <label for="exampleFormControlInput1">Email address</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="exampleFormControlSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect2">Example multiple select</label>
    <select multiple class="form-control" id="exampleFormControlSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlTextarea1">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
</form>

Файлын оролтын .form-controlхувьд .form-control-file.

<form>
  <div class="form-group">
    <label for="exampleFormControlFile1">Example file input</label>
    <input type="file" class="form-control-file" id="exampleFormControlFile1">
  </div>
</form>

Хэмжээ тогтоох

.form-control-lgболон зэрэг ангиудыг ашиглан өндрийг тохируулна уу .form-control-sm.

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">

<select class="form-control form-control-lg">
  <option>Large select</option>
</select>
<select class="form-control">
  <option>Default select</option>
</select>
<select class="form-control form-control-sm">
  <option>Small select</option>
</select>

Зөвхөн унших

readonlyОролтын утгыг өөрчлөхөөс сэргийлэхийн тулд оролт дээр логик шинж чанарыг нэмнэ үү . Зөвхөн унших боломжтой оролтууд нь илүү хөнгөн харагдана (ямар нэгэн идэвхгүй оролттой адил), гэхдээ стандарт курсорыг хадгална.

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

Зөвхөн унших энгийн текст

Хэрэв та <input readonly>маягтдаа элементүүдийг энгийн текст хэлбэрээр оруулахыг хүсвэл .form-control-plaintextөгөгдмөл маягтын талбарын хэв маягийг устгаж, зөв захын зай, дүүргэлтийг хадгалахын тулд ангийг ашиглана уу.

<form>
  <div class="form-group row">
    <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="[email protected]">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group mb-2">
    <label for="staticEmail2" class="sr-only">Email</label>
    <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="[email protected]">
  </div>
  <div class="form-group mx-sm-3 mb-2">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
</form>

Хүрээний оролтууд

-г ашиглан хэвтээ гүйлгэх боломжтой хүрээний оролтыг тохируулна уу .form-control-range.

<form>
  <div class="form-group">
    <label for="formControlRange">Example Range input</label>
    <input type="range" class="form-control-range" id="formControlRange">
  </div>
</form>

Шалгах хайрцаг ба радио

Өгөгдмөл тэмдэглэгээ болон радиогуудыг HTML элементүүдийн зохион байгуулалт, үйл ажиллагааг сайжруулдаг хоёр төрлийн оролтын нэг ангиллын тусламжтайгаар.form-check сайжруулсан . Сонголтууд нь жагсаалтаас нэг буюу хэд хэдэн сонголтыг сонгоход зориулагдсан бол радио нь олон сонголтоос нэг сонголтыг сонгоход зориулагдсан.

Идэвхгүй болгосон тэмдэглэгээ болон радиог дэмждэг боловч not-allowedэцэг эхийн дээр хулганаар курсор <label>оруулахын тулд та disabledатрибутыг .form-check-input. Идэвхгүй болсон атрибут нь оролтын төлөвийг харуулахын тулд цайвар өнгө хэрэглэнэ.

Шалгалтын хайрцаг болон радио ашиглах нь HTML-д суурилсан маягтын баталгаажуулалтыг дэмжих, товч, хүртээмжтэй шошго өгөх зорилгоор бүтээгдсэн. Иймээс бидний <input>s ба s нь доторх <label>элементээс ялгаатай ах дүү элементүүд юм . Энэ нь арай илүү дэлгэрэнгүй, учир нь та болон -тай холбогдох шинж чанаруудыг зааж өгөх ёстой .<input><label>idfor<input><label>

Өгөгдмөл (овоолсон)

Өгөгдмөл байдлаар, ойрын ах дүүс болох дурын тооны шалгах хайрцаг болон радиог босоо байдлаар байрлуулж, -тай тохирох зайтай байрлуулна .form-check.

Өгөгдмөл хайрцаг

Идэвхгүй болгосон нүд

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
  <label class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  </label>
</div>

Өгөгдмөл радио

Хоёр дахь үндсэн радио

Радио идэвхгүй болсон

<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
    Second default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
  <label class="form-check-label" for="exampleRadios3">
    Disabled radio
  </label>
</div>

Шугаманд

.form-check-inlineДурын зүйл дээр нэмэх замаар ижил хэвтээ мөрөнд шалгах хайрцаг эсвэл радиог бүлэглээрэй .form-check.

3 (идэвхгүй)

<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
  <label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
  <label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
  <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>

3 (идэвхгүй)

<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
  <label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
  <label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
  <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>

Шошгогүй

Шошгогүй текст .position-staticдоторх оролтод нэмнэ үү . .form-checkТуслах технологид зориулсан шошго (жишээ нь, ашиглах aria-label) байхаа мартуузай.

<div class="form-check">
  <input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</div>
<div class="form-check">
  <input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
</div>

Зохион байгуулалт

Bootstrap нь манай бараг бүх маягтын удирдлагад хэрэгждэг display: blockтул width: 100%маягтууд нь анхдагчаар босоо байдлаар стек болно. Энэ байрлалыг хэлбэр тус бүрээр нь өөрчлөхийн тулд нэмэлт ангиудыг ашиглаж болно.

Бүлэг үүсгэх

Анги .form-groupнь маягтанд зарим бүтэц нэмэх хамгийн хялбар арга юм. Энэ нь шошго, хяналт, нэмэлт тусламжийн текст болон маягтын баталгаажуулалтын мессежийг зөв бүлэглэхийг дэмждэг уян хатан анги өгдөг. Анхдагч байдлаар энэ нь зөвхөн хэрэглэгдэх margin-bottomболовч .form-inlineшаардлагатай бол нэмэлт хэв маягийг сонгоно. <fieldset>Үүнийг s, <div>s эсвэл бусад бараг бүх элементтэй хамт ашиглаарай .

<form>
  <div class="form-group">
    <label for="formGroupExampleInput">Example label</label>
    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">Another label</label>
    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
  </div>
</form>

Маягтын сүлжээ

Манай тор ангиудыг ашиглан илүү төвөгтэй хэлбэрүүдийг барьж болно. Эдгээрийг олон багана, янз бүрийн өргөн, нэмэлт зэрэгцүүлэх сонголтуудыг шаарддаг маягтын байршилд ашиглаарай.

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

Маягтын эгнээ

Та мөн манай стандарт сүлжээний эгнээний нэг хувилбар болох багана суваг шуудууг дарж, илүү нягт, авсаархан байдлаар сольж болно .row..form-row

<form>
  <div class="form-row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

Сүлжээний системээр илүү төвөгтэй байршлыг үүсгэж болно.

<form>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputEmail4">Email</label>
      <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
    </div>
    <div class="form-group col-md-6">
      <label for="inputPassword4">Password</label>
      <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <label for="inputAddress">Address</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  </div>
  <div class="form-group">
    <label for="inputAddress2">Address 2</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputCity">City</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
    <div class="form-group col-md-4">
      <label for="inputState">State</label>
      <select id="inputState" class="form-control">
        <option selected>Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="form-group col-md-2">
      <label for="inputZip">Zip</label>
      <input type="text" class="form-control" id="inputZip">
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="gridCheck">
      <label class="form-check-label" for="gridCheck">
        Check me out
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

Хэвтээ хэлбэр

Бүлэг үүсгэх анги нэмж, шошго болон удирдлагынхаа өргөнийг тодорхойлохын тулд ангиудыг .rowашиглан сүлжээгээр хэвтээ маягтуудыг үүсгээрэй . Өөрийн холбогдох маягтын удирдлагатай босоо төвлөрсөн байхын тулд өөрийн s-г мөн .col-*-*нэмж оруулахаа мартуузай ..col-form-label<label>

Заримдаа та өөрт хэрэгтэй төгс тэгш байдлыг бий болгохын тулд захын зай эсвэл дүүргэх хэрэгслийг ашиглах хэрэгтэй болдог. Жишээлбэл, бид padding-topтекстийн үндсэн шугамыг илүү сайн тэгшлэхийн тулд давхарласан радио оролтын шошгыг устгасан.

<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <fieldset class="form-group">
    <div class="row">
      <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
      <div class="col-sm-10">
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
          <label class="form-check-label" for="gridRadios1">
            First radio
          </label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
          <label class="form-check-label" for="gridRadios2">
            Second radio
          </label>
        </div>
        <div class="form-check disabled">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
          <label class="form-check-label" for="gridRadios3">
            Third disabled radio
          </label>
        </div>
      </div>
    </div>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-2">Checkbox</div>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="gridCheck1">
        <label class="form-check-label" for="gridCheck1">
          Example checkbox
        </label>
      </div>
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
  </div>
</form>

Хэвтээ хэлбэрийн шошгоны хэмжээ

Хэмжээг зөв дагаж мөрдөхийн тулд .col-form-label-smэсвэл .col-form-label-lgөөрийн <label>s эсвэл s- г ашиглахаа мартуузай .<legend>.form-control-lg.form-control-sm

<form>
  <div class="form-group row">
    <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
    </div>
  </div>
  <div class="form-group row">
    <label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
    </div>
  </div>
  <div class="form-group row">
    <label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
    </div>
  </div>
</form>

Баганын хэмжээ

Өмнөх жишээнүүдээс харахад манай сүлжээний систем нь a эсвэл .colдотор ямар ч тооны s -г байрлуулах боломжийг олгодог . Тэд боломжтой өргөнийг хооронд нь тэнцүү хуваах болно. Та мөн багананыхаа дэд багцыг сонгож, бага эсвэл бага зай эзэлнэ, харин үлдсэн хэсэг нь бусад багана зэрэг тодорхой баганын ангиудад хувааж болно ..row.form-row.col.col-7

<form>
  <div class="form-row">
    <div class="col-7">
      <input type="text" class="form-control" placeholder="City">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="State">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Zip">
    </div>
  </div>
</form>

Автомат хэмжээ

Доорх жишээнд агуулгыг босоо байдлаар голлуулахын тулд flexbox хэрэглүүрийг ашигладаг бөгөөд .colтаны .col-autoбаганууд шаардлагатай хэмжээгээр зай эзэлнэ. Өөрөөр хэлбэл, баганын хэмжээ нь агуулгад тулгуурлан өөрөө тодорхойлогддог.

<form>
  <div class="form-row align-items-center">
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInput">Name</label>
      <input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe">
    </div>
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInputGroup">Username</label>
      <div class="input-group mb-2">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
      </div>
    </div>
    <div class="col-auto">
      <div class="form-check mb-2">
        <input class="form-check-input" type="checkbox" id="autoSizingCheck">
        <label class="form-check-label" for="autoSizingCheck">
          Remember me
        </label>
      </div>
    </div>
    <div class="col-auto">
      <button type="submit" class="btn btn-primary mb-2">Submit</button>
    </div>
  </div>
</form>

Дараа нь та үүнийг тодорхой хэмжээний баганын ангиудаар дахин дахин найруулж болно.

<form>
  <div class="form-row align-items-center">
    <div class="col-sm-3 my-1">
      <label class="sr-only" for="inlineFormInputName">Name</label>
      <input type="text" class="form-control" id="inlineFormInputName" placeholder="Jane Doe">
    </div>
    <div class="col-sm-3 my-1">
      <label class="sr-only" for="inlineFormInputGroupUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
      </div>
    </div>
    <div class="col-auto my-1">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="autoSizingCheck2">
        <label class="form-check-label" for="autoSizingCheck2">
          Remember me
        </label>
      </div>
    </div>
    <div class="col-auto my-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

Мэдээжийн хэрэг өөрчлөн маягтын хяналтыг дэмждэг.

<form>
  <div class="form-row align-items-center">
    <div class="col-auto my-1">
      <label class="mr-sm-2 sr-only" for="inlineFormCustomSelect">Preference</label>
      <select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
        <option selected>Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
    <div class="col-auto my-1">
      <div class="custom-control custom-checkbox mr-sm-2">
        <input type="checkbox" class="custom-control-input" id="customControlAutosizing">
        <label class="custom-control-label" for="customControlAutosizing">Remember my preference</label>
      </div>
    </div>
    <div class="col-auto my-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

Inline маягтууд

Хэд хэдэн шошго, маягтын удирдлага, товчлууруудыг нэг хэвтээ эгнээнд харуулахын тулд .form-inlineангийг ашиглана уу. Дотор маягт доторх маягтын удирдлага нь үндсэн төлөвөөсөө бага зэрэг ялгаатай байна.

Хяналтууд нь ямар ч HTML хоосон зайг буулгаж, зай болон flexbox хэрэгслүүдээр display: flexзэрэгцүүлэх хяналтыг хангах боломжийг танд олгоно .
Хяналт болон оролтын бүлгүүд width: autoBootstrap-ийн өгөгдмөлийг хүчингүй болгохын тулд хүлээн авдаг width: 100%.
Хөдөлгөөнт төхөөрөмж дээрх нарийхан харагдах цонхыг тооцохын тулд дор хаяж 576 пикселийн өргөнтэй харах цонхонд удирдлага нь зөвхөн шугаманд харагдана .

Та бие даасан маягтын хяналтын өргөн, тохируулгыг зайны хэрэгслүүдээр (доор үзүүлсэн шиг) гараар шийдвэрлэх шаардлагатай байж магадгүй юм. Эцэст нь, <label>дэлгэц уншдаггүй зочдоос нуух шаардлагатай байсан ч маягт бүрийн удирдлагад заавал тэмдэгт оруулахаа мартуузай .sr-only.

<form class="form-inline">
  <label class="sr-only" for="inlineFormInputName2">Name</label>
  <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">

  <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
  <div class="input-group mb-2 mr-sm-2">
    <div class="input-group-prepend">
      <div class="input-group-text">@</div>
    </div>
    <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
  </div>

  <div class="form-check mb-2 mr-sm-2">
    <input class="form-check-input" type="checkbox" id="inlineFormCheck">
    <label class="form-check-label" for="inlineFormCheck">
      Remember me
    </label>
  </div>

  <button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>

Захиалгат маягтын удирдлага болон сонголтуудыг мөн дэмждэг.

<form class="form-inline">
  <label class="my-1 mr-2" for="inlineFormCustomSelectPref">Preference</label>
  <select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>

  <div class="custom-control custom-checkbox my-1 mr-sm-2">
    <input type="checkbox" class="custom-control-input" id="customControlInline">
    <label class="custom-control-label" for="customControlInline">Remember my preference</label>
  </div>

  <button type="submit" class="btn btn-primary my-1">Submit</button>
</form>

Нуугдсан шошгоны өөр хувилбарууд

Хэрэв та оролт бүрт шошго оруулахгүй бол дэлгэц уншигч гэх мэт туслах технологид таны маягтуудад асуудал гарах болно. .sr-onlyЭдгээр доторлогооны маягтуудын хувьд та классыг ашиглан шошгыг нууж болно . aria-label, aria-labelledbyэсвэл titleшинж чанар гэх мэт туслах технологид шошго өгөх өөр аргууд байдаг . Хэрэв эдгээрийн аль нь ч байхгүй бол туслах технологи нь хэрэв байгаа бол атрибутыг ашиглах боломжтой боловч шошголох бусад аргыг орлуулахыг зөвлөдөггүйг placeholderанхаарна уу .placeholder

Тусламжийн текст

.form-textМаягт дахь блок түвшний тусламжийн текстийг (өмнө .help-blockнь v3 хувилбарт байсан) ашиглан үүсгэж болно . Inline тусламжийн текстийг дурын inline HTML элемент болон хэрэглүүрийн ангиудыг ашиглан уян хатан байдлаар хэрэгжүүлэх боломжтой .text-muted.

Тусламжийн текстийг маягтын удирдлагатай холбох

aria-describedbyТусламжийн текст нь атрибут ашиглахтай холбоотой маягтын удирдлагатай шууд холбоотой байх ёстой . Энэ нь хэрэглэгч анхаарлаа төвлөрүүлэх эсвэл удирдлага руу орох үед дэлгэц уншигч гэх мэт туслах технологиуд энэ тусламжийн текстийг зарлах болно.

Доорх тусламжийн текстийн оролтыг -аар тохируулж болно .form-text. Энэ анги нь display: blockдээрх оролтуудаас хялбар зай гаргахын тулд дээд талын зайг багтаасан бөгөөд нэмдэг.

Нууц үг Таны нууц үг 8-20 тэмдэгтээс бүрдэх, үсэг, тоо агуулсан байх ёстой бөгөөд хоосон зай, тусгай тэмдэгт, эможи агуулаагүй байх ёстой.

<label for="inputPassword5">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<small id="passwordHelpBlock" class="form-text text-muted">
  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</small>

Дотор текст нь ердийн HTML элементийг (энэ нь <small>, <span>, эсвэл өөр ямар нэгэн зүйл) ашиглах боломжтой бөгөөд зөвхөн хэрэглээний ангиас өөр зүйлгүй.

<form class="form-inline">
  <div class="form-group">
    <label for="inputPassword6">Password</label>
    <input type="password" id="inputPassword6" class="form-control mx-sm-3" aria-describedby="passwordHelpInline">
    <small id="passwordHelpInline" class="text-muted">
      Must be 8-20 characters long.
    </small>
  </div>
</form>

Идэвхгүй маягтууд

disabledХэрэглэгчийн харилцан үйлчлэлээс сэргийлж, илүү хөнгөн харагдуулахын тулд оролт дээр логик шинж чанарыг нэмнэ үү .

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

Доторх бүх удирдлагыг идэвхгүй болгохын тулд disabledатрибутыг a -д нэмнэ үү .<fieldset>

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <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>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

Зангуугаар анхааруулах

Өгөгдмөл байдлаар, хөтчүүд a доторх бүх эх хэлбэрийн хяналтыг ( <input>, <select>болон <button>элементүүд) <fieldset disabled>идэвхгүй болгож, гар болон хулганы харилцан үйлчлэлээс сэргийлнэ. Гэсэн хэдий ч, хэрэв таны маягт мөн <a ... class="btn btn-*">элементүүдийг агуулж байвал эдгээрт зөвхөн pointer-events: none. Товчлуурын идэвхгүй байдлын тухай хэсэгт (ялангуяа зангууны элементүүдийн дэд хэсэгт) дурдсанчлан , энэ CSS шинж чанар хараахан стандартчилагдаагүй бөгөөд Internet Explorer 10-д бүрэн дэмжигдээгүй байгаа бөгөөд гар хэрэглэгчдийг ашиглахад саад болохгүй. эдгээр холбоосыг төвлөрүүлэх эсвэл идэвхжүүлэх боломжтой. Тиймээс аюулгүй байхын тулд ийм холбоосыг идэвхгүй болгохын тулд захиалгат JavaScript ашиглана уу.

Хөтөч хоорондын нийцтэй байдал

Bootstrap нь эдгээр хэв маягийг бүх хөтөч дээр ашиглах боловч Internet Explorer 11 болон түүнээс доош хувилбарууд disabledнь <fieldset>. Эдгээр хөтчүүдийн талбарын багцыг идэвхгүй болгохын тулд захиалгат JavaScript ашиглана уу.

Баталгаажуулалт

HTML5 маягтын баталгаажуулалтыг ашиглан хэрэглэгчдэдээ үнэ цэнэтэй, бодитой санал хүсэлтийг илгээгээрэй – манай бүх дэмждэг хөтөч дээр байдаг. Хөтчийн өгөгдмөл баталгаажуулалтын санал хүсэлтээс сонгох эсвэл манай суулгасан ангиуд болон эхлэлийн JavaScript ашиглан захиалгат мессежүүдийг хэрэгжүүлээрэй.

Дотоод хөтөчийн өгөгдмөл баталгаажуулалтын мессежүүд нь бүх хөтчүүдэд (ялангуяа, ширээний болон гар утсан дээрх Chrome) туслах технологид байнга өртдөггүй тул бид одоогоор тусгай баталгаажуулалтын хэв маягийг ашиглахыг зөвлөж байна.

Хэрхэн ажилладаг

Bootstrap дээр маягтын баталгаажуулалт хэрхэн ажилладаг талаар эндээс үзнэ үү.

HTML маягтын баталгаажуулалтыг CSS-ийн хоёр псевдо-анги, :invalidба :valid. Энэ нь <input>, <select>, болон <textarea>элементүүдэд хамаарна.
Bootstrap :invalidнь ихэвчлэн . :valid_ Үгүй бол хуудас ачаалахад утгагүй шаардлагатай талбарууд хүчингүй гэж харагдана. Ингэснээр та тэдгээрийг хэзээ идэвхжүүлэхээ сонгож болно (ихэвчлэн маягт илгээх оролдлогын дараа)..was-validated<form>
Маягтын гадаад төрхийг дахин тохируулахын тулд (жишээлбэл, AJAX ашиглан динамик маягт илгээх тохиолдолд) илгээсний дараа дахин .was-validatedангиас устгана уу.<form>
Нөхцөл болгон .is-invalid, .is-validангиудыг псевдо ангийн оронд сервер талын баталгаажуулалтад ашиглаж болно. .was-validatedТэд эцэг эхийн анги шаарддаггүй .
CSS-ийн ажиллах хязгаарлалтын улмаас бид (одоогоор) <label>DOM дахь маягтын удирдлагын өмнө ирдэг a-д тусгайлсан JavaScript-ийн тусламжгүйгээр хэв маягийг ашиглах боломжгүй байна.
Орчин үеийн бүх хөтчүүд маягтын хяналтыг баталгаажуулах JavaScript-н цуврал аргууд болох хязгаарлалт баталгаажуулалтын API -г дэмждэг.
Санал хүсэлтийн мессеж нь хөтчийн өгөгдмөл (хөтөч бүрийн хувьд өөр, CSS-ээр тохируулагдах боломжгүй) эсвэл нэмэлт HTML болон CSS бүхий бидний санал хүсэлтийн хэв маягийг ашиглаж болно.
setCustomValidityТа JavaScript хэлээр захиалгат хүчинтэй мессеж өгч болно .

Үүнийг харгалзан манай маягтын баталгаажуулалтын хэв маяг, нэмэлт серверийн анги, хөтчийн өгөгдмөл тохиргоонуудын хувьд дараах үзүүлэнг авч үзье.

Захиалгат хэв маяг

Захиалгат Bootstrap маягтын баталгаажуулалтын мессежийн хувьд та novalidateлогик шинж чанарыг өөрийн <form>. Энэ нь хөтчийн өгөгдмөл санал хүсэлтийн зөвлөмжийг идэвхгүй болгосон ч JavaScript дахь маягтын баталгаажуулалтын API-д хандах боломжийг олгодог. Доорх маягтыг оруулахыг оролдоно уу; Манай JavaScript нь илгээх товчийг таслан зогсоож, танд санал хүсэлт илгээх болно.

Илгээхийг оролдох үед та маягтын удирдлагад хэрэглэгдэх :invalidболон :validхэв маягийг харах болно.

Нэр

Looks good!

Овог нэр

Looks good!

Хэрэглэгчийн нэр

Please choose a username.

Хот

Please provide a valid city.

муж

Please provide a valid state.

Зип

Please provide a valid zip.

Нөхцөл, болзлыг зөвшөөрч байна

You must agree before submitting.

<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationCustom01">First name</label>
      <input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustom02">Last name</label>
      <input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustomUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend">@</span>
        </div>
        <input type="text" class="form-control" id="validationCustomUsername" placeholder="Username" aria-describedby="inputGroupPrepend" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom03">City</label>
      <input type="text" class="form-control" id="validationCustom03" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom04">State</label>
      <input type="text" class="form-control" id="validationCustom04" placeholder="State" required>
      <div class="invalid-feedback">
        Please provide a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom05">Zip</label>
      <input type="text" class="form-control" id="validationCustom05" placeholder="Zip" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
      <label class="form-check-label" for="invalidCheck">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();
</script>

Хөтчийн өгөгдмөл

Захиалгат баталгаажуулалтын санал хүсэлтийн мессеж эсвэл маягтын үйлдлийг өөрчлөхийн тулд JavaScript бичих сонирхолгүй байна уу? Сайн байна, та хөтчийн өгөгдмөл тохиргоог ашиглаж болно. Доорх маягтыг илгээж үзнэ үү. Таны хөтөч болон үйлдлийн системээс хамааран та санал хүсэлтийн арай өөр хэв маягийг харах болно.

Эдгээр санал хүсэлтийн хэв маягийг CSS-ээр тохируулах боломжгүй ч та JavaScript-ээр дамжуулан санал хүсэлтийн текстийг өөрчлөх боломжтой.

<form>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationDefault01">First name</label>
      <input type="text" class="form-control" id="validationDefault01" placeholder="First name" value="Mark" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefault02">Last name</label>
      <input type="text" class="form-control" id="validationDefault02" placeholder="Last name" value="Otto" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefaultUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend2">@</span>
        </div>
        <input type="text" class="form-control" id="validationDefaultUsername" placeholder="Username" aria-describedby="inputGroupPrepend2" required>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationDefault03">City</label>
      <input type="text" class="form-control" id="validationDefault03" placeholder="City" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault04">State</label>
      <input type="text" class="form-control" id="validationDefault04" placeholder="State" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault05">Zip</label>
      <input type="text" class="form-control" id="validationDefault05" placeholder="Zip" required>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
      <label class="form-check-label" for="invalidCheck2">
        Agree to terms and conditions
      </label>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Сервер тал

Бид үйлчлүүлэгч талын баталгаажуулалтыг ашиглахыг зөвлөж байна, гэхдээ хэрэв танд сервер тал шаардлагатай бол хүчингүй болон хүчинтэй маягтын талбаруудыг болон -ээр зааж өгч .is-invalidболно .is-valid. .invalid-feedbackЭдгээр ангиудыг дэмждэг гэдгийг анхаарна уу .

Нэр

Сайхан харагдаж байна!

Овог нэр

Сайхан харагдаж байна!

Хэрэглэгчийн нэр

Хэрэглэгчийн нэр сонгоно уу.

Хот

Хүчинтэй хот оруулна уу.

муж

Хүчинтэй төлөв оруулна уу.

Зип

Хүчинтэй зип оруулна уу.

Нөхцөл, болзлыг зөвшөөрч байна

Та илгээхээсээ өмнө зөвшөөрөх ёстой.

<form>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationServer01">First name</label>
      <input type="text" class="form-control is-valid" id="validationServer01" placeholder="First name" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServer02">Last name</label>
      <input type="text" class="form-control is-valid" id="validationServer02" placeholder="Last name" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServerUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend3">@</span>
        </div>
        <input type="text" class="form-control is-invalid" id="validationServerUsername" placeholder="Username" aria-describedby="inputGroupPrepend3" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer03">City</label>
      <input type="text" class="form-control is-invalid" id="validationServer03" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">State</label>
      <input type="text" class="form-control is-invalid" id="validationServer04" placeholder="State" required>
      <div class="invalid-feedback">
        Please provide a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer05">Zip</label>
      <input type="text" class="form-control is-invalid" id="validationServer05" placeholder="Zip" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" required>
      <label class="form-check-label" for="invalidCheck3">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Дэмжигдсэн элементүүд

Манай жишээ маягтууд <input>дээрх эх бичвэрүүдийг харуулж байгаа боловч маягт баталгаажуулалтын хэв маягийг манай тусгай маягтын удирдлагад бас ашиглах боломжтой.

Энэ тохируулсан нүдийг шалгана уу

Хүчингүй санал хүсэлтийн жишээ

Энэ тусгай радиог асааж/унтраах

Эсвэл энэ өөр захиалгат радиог сэлгэх

Бусад жишээ буруу санал хүсэлтийн текст

Жишээ нь буруу захиалгат санал хүсэлт

Файл сонгох...

Жишээ нь буруу захиалгат файлын санал хүсэлт

<form class="was-validated">
  <div class="custom-control custom-checkbox mb-3">
    <input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
    <label class="custom-control-label" for="customControlValidation1">Check this custom checkbox</label>
    <div class="invalid-feedback">Example invalid feedback text</div>
  </div>

  <div class="custom-control custom-radio">
    <input type="radio" class="custom-control-input" id="customControlValidation2" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation2">Toggle this custom radio</label>
  </div>
  <div class="custom-control custom-radio mb-3">
    <input type="radio" class="custom-control-input" id="customControlValidation3" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation3">Or toggle this other custom radio</label>
    <div class="invalid-feedback">More example invalid feedback text</div>
  </div>

  <div class="form-group">
    <select class="custom-select" required>
      <option value="">Open this select menu</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
    <div class="invalid-feedback">Example invalid custom select feedback</div>
  </div>

  <div class="custom-file">
    <input type="file" class="custom-file-input" id="validatedCustomFile" required>
    <label class="custom-file-label" for="validatedCustomFile">Choose file...</label>
    <div class="invalid-feedback">Example invalid custom file feedback</div>
  </div>
</form>

Зөвлөмж

Хэрэв таны маягтын загвар үүнийг зөвшөөрвөл та .{valid|invalid}-feedbackангиудыг ангиудаар сольж, .{valid|invalid}-tooltipбаталгаажуулалтын санал хүсэлтийг загварчлагдсан хэрэгслийн зөвлөмжөөр харуулах боломжтой. Хэрэгслийн зөвлөмжийн байршлыг тогтоохын тулд эцэг эх нь position: relativeүүн дээр байгаа эсэхийг шалгаарай. Доорх жишээн дээр манай баганын ангиудад үүнийг аль хэдийн оруулсан байгаа боловч таны төсөл өөр тохиргоог шаардаж магадгүй юм.

Нэр

Овог нэр

Хэрэглэгчийн нэр

Хот

муж

Зип

<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationTooltip01">First name</label>
      <input type="text" class="form-control" id="validationTooltip01" placeholder="First name" value="Mark" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationTooltip02">Last name</label>
      <input type="text" class="form-control" id="validationTooltip02" placeholder="Last name" value="Otto" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationTooltipUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
        </div>
        <input type="text" class="form-control" id="validationTooltipUsername" placeholder="Username" aria-describedby="validationTooltipUsernamePrepend" required>
        <div class="invalid-tooltip">
          Please choose a unique and valid username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationTooltip03">City</label>
      <input type="text" class="form-control" id="validationTooltip03" placeholder="City" required>
      <div class="invalid-tooltip">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip04">State</label>
      <input type="text" class="form-control" id="validationTooltip04" placeholder="State" required>
      <div class="invalid-tooltip">
        Please provide a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip05">Zip</label>
      <input type="text" class="form-control" id="validationTooltip05" placeholder="Zip" required>
      <div class="invalid-tooltip">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Захиалгат маягтууд

Илүү их өөрчлөн тохируулах, хөтчийг хооронд нь уялдуулахын тулд хөтчийн өгөгдмөл тохиргоог солихын тулд манай бүрэн өөрчлөн маягтын элементүүдийг ашиглана уу. Эдгээр нь семантик, хүртээмжтэй тэмдэглэгээн дээр бүтээгдсэн тул аливаа өгөгдмөл маягтын хяналтыг бүрэн орлуулах болно.

Шалгах хайрцаг ба радио

Шалгалтын хайрцаг болон радио тус бүрийг <div>ах эгчтэй хамт хавсаргаж <span>, бидний захиалгат хяналт болон <label>дагалдах текстийн хувьд a-г бий болгодог. Бүтцийн хувьд энэ нь манай анхдагчтай ижил арга .form-checkюм.

Бид өөрчлөн маягтын индикаторыг зөв загварчлахын тулд дүү сонгогчийг ( ~) ашигладаг . Ангитай хослуулснаар бид "-ын төлөв" дээр үндэслэн зүйл бүрийн текстийг загварчилж болно .<input>:checked.custom-control-label<input>

Бид өгөгдмөл тохиргоог нууж, оронд <input>нь өөрчлөн тохируулсан маягтын индикаторыг ашиглан , болон . Харамсалтай нь CSS нь тухайн элемент дээр ажиллахгүй тул бид зөвхөн энэ элементээс захиалгат нэгийг бүтээх боломжгүй.opacity.custom-control-label::before::after<input>content

Сонгосон мужуудад бид Open Iconic - ийн base64 суулгагдсан SVG дүрсүүдийг ашигладаг . Энэ нь хөтчүүд болон төхөөрөмжүүд дээр загварчлах, байршуулах хамгийн сайн хяналтыг бидэнд олгодог.

Шалгалтын нүднүүд

Энэ тохируулсан нүдийг шалгана уу

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>

Захиалгат хайрцгууд нь :indeterminateJavaScript-ээр гараар тохируулах үед псевдо классыг ашиглаж болно (үүнийг зааж өгөх боломжтой HTML шинж чанар байхгүй).

Энэ тохируулсан нүдийг шалгана уу

Хэрэв та jQuery ашиглаж байгаа бол дараах зүйл хангалттай.

$('.your-checkbox').prop('indeterminate', true)

Радио

Энэ тусгай радиог асааж/унтраах

Эсвэл энэ өөр захиалгат радиог сэлгэх

<div class="custom-control custom-radio">
  <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio">
  <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
</div>

Шугаманд

Энэ тусгай радиог асааж/унтраах

Эсвэл энэ өөр захиалгат радиог сэлгэх

<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label>
</div>

Идэвхгүй

Захиалгат хайрцаг болон радиог идэвхгүй болгож болно. disabledBoolean атрибутыг -д нэмэх <input>ба өөрчлөн заагч болон шошгоны тайлбарыг автоматаар загварчлах болно.

Энэ тохируулсан нүдийг шалгана уу

Энэ тусгай радиог асааж/унтраах

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheckDisabled" disabled>
  <label class="custom-control-label" for="customCheckDisabled">Check this custom checkbox</label>
</div>

<div class="custom-control custom-radio">
  <input type="radio" id="radio3" name="radioDisabled" id="customRadioDisabled" class="custom-control-input" disabled>
  <label class="custom-control-label" for="customRadioDisabled">Toggle this custom radio</label>
</div>

Захиалгат цэсэнд захиалгат хэв маягийг идэвхжүүлэхийн <select>тулд зөвхөн тусгай анги хэрэгтэй . .custom-selectЗахиалгат загварууд нь <select>анхны дүр төрхөөр <option>хязгаарлагддаг бөгөөд хөтчийн хязгаарлалтаас шалтгаалан s-г өөрчлөх боломжгүй.

<select class="custom-select">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Та мөн манай ижил хэмжээтэй текстийн оруулгад тохирох жижиг, том захиалгат сонголтуудаас сонгож болно.

<select class="custom-select custom-select-lg mb-3">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<select class="custom-select custom-select-sm">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Атрибутыг multipleмөн дэмждэг:

<select class="custom-select" multiple>
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Шинж sizeчанар нь:

<select class="custom-select" size="3">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Хүрээ

<input type="range">-ын тусламжтайгаар захиалгат хяналтыг үүсгэ .custom-range. Зам (арын дэвсгэр) болон эрхий хуруу (утга) нь хөтчүүдэд адилхан харагдахаар загварчлагдсан. Зөвхөн IE болон Firefox нь ахиц дэвшлийг нүдээр харуулахын тулд эрхий хурууны зүүн эсвэл баруун талаас замаа "бөглөх"-ийг дэмждэг тул бид одоогоор үүнийг дэмжихгүй байна.

Жишээ хүрээ

<label for="customRange1">Example range</label>
<input type="range" class="custom-range" id="customRange1">

minМужийн оролтууд нь болон max- 0ба -ын далд утгуудтай 100. minТа болон шинж чанаруудыг ашигладаг хүмүүст шинэ утгыг зааж өгч болно max.

Жишээ хүрээ

<label for="customRange2">Example range</label>
<input type="range" class="custom-range" min="0" max="5" id="customRange2">

Өгөгдмөлөөр муж бүхэл тоон утгууд руу "цахилдаг" оролтыг оруулдаг. Үүнийг өөрчлөхийн тулд та stepутгыг зааж өгч болно. Доорх жишээнд бид алхмуудын тоог хоёр дахин нэмэгдүүлнэ step="0.5".

Жишээ хүрээ

<label for="customRange3">Example range</label>
<input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3">

Файл хөтөч

Файлын оролт нь хамгийн бүдүүлэг нь бөгөөд хэрэв та файл сонгох функц болон сонгосон файлын нэрийн тексттэй холбохыг хүсвэл нэмэлт JavaScript шаардлагатай.

Файл сонгох

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFile">
  <label class="custom-file-label" for="customFile">Choose file</label>
</div>

Бид өгөгдмөл файлыг <input>дамжуулан нууж opacity, оронд нь <label>. Товчлуурыг үүсгээд байрлуулна ::after. Эцэст нь, бид эргэн тойрны контентын хоорондын зайг зөв тогтоохын тулд " а " width-ыг зарлаж байна.height<input>

Мөрүүдийг орчуулах эсвэл өөрчлөх

Псевдо :lang()анги нь "Browse" текстийг бусад хэл рүү орчуулах боломжийг олгодог. Холбогдох хэлний шошго болон локалчлагдсан тэмдэгт мөр $custom-file-textбүхий Sass хувьсагчийн оруулгуудыг дарж бичих эсвэл нэмэх . Англи хэлний утсыг ижил аргаар өөрчилж болно. Жишээлбэл, Испани хэл дээрх орчуулгыг хэрхэн нэмж оруулахыг эндээс үзнэ үү (Испани хэлний код нь ):es

$custom-file-text: (
  en: "Browse",
  es: "Elegir"
);

lang(es)Испани орчуулгад зориулсан тусгай файлын оролтыг энд хийж байна:

Сонгосон архив

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFileLang" lang="es">
  <label class="custom-file-label" for="customFileLang">Seleccionar Archivo</label>
</div>

Зөв текстийг харуулахын тулд та өөрийн баримт бичгийн хэлийг (эсвэл түүний дэд мод) зөв тохируулах хэрэгтэй. Үүнийг элемент дээрх langатрибут эсвэл HTTP толгой хэсгийг ашиглан хийж болно .<html>Content-Language

Маягтууд

Тойм

Маягтын удирдлага

Хэмжээ тогтоох

Зөвхөн унших

Зөвхөн унших энгийн текст

Хүрээний оролтууд

Шалгах хайрцаг ба радио

Өгөгдмөл (овоолсон)

Шугаманд

Шошгогүй

Зохион байгуулалт

Бүлэг үүсгэх

Маягтын сүлжээ

Маягтын эгнээ

Хэвтээ хэлбэр

Хэвтээ хэлбэрийн шошгоны хэмжээ

Баганын хэмжээ

Автомат хэмжээ

Inline маягтууд

Нуугдсан шошгоны өөр хувилбарууд

Тусламжийн текст

Тусламжийн текстийг маягтын удирдлагатай холбох

Идэвхгүй маягтууд

Зангуугаар анхааруулах

Хөтөч хоорондын нийцтэй байдал

Баталгаажуулалт

Хэрхэн ажилладаг

Захиалгат хэв маяг

Хөтчийн өгөгдмөл

Сервер тал

Дэмжигдсэн элементүүд

Зөвлөмж

Захиалгат маягтууд

Шалгах хайрцаг ба радио

Шалгалтын нүднүүд

Радио

Шугаманд

Идэвхгүй

Цэсийг сонгоно уу

Хүрээ

Файл хөтөч

Мөрүүдийг орчуулах эсвэл өөрчлөх