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">
    <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">
  </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">
    </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 сайжруулсан . Сонголтууд нь жагсаалтаас нэг буюу хэд хэдэн сонголтыг сонгоход зориулагдсан бол радио нь олон сонголтоос нэг сонголтыг сонгоход зориулагдсан.

Идэвхгүй болгосон тэмдэглэгээ болон радиог дэмждэг. Оролтын disabledтөлөвийг харуулахын тулд атрибут нь цайвар өнгө хэрэглэнэ.

Шалгах хайрцаг болон радио товчлуурууд нь 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.

<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>
<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 placeholder">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">Another label</label>
    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
  </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">
    </div>
    <div class="form-group col-md-6">
      <label for="inputPassword4">Password</label>
      <input type="password" class="form-control" id="inputPassword4">
    </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текстийн үндсэн шугамыг илүү сайн уялдуулахын тулд давхарласан радио оролтын шошгыг устгасан.

Радио
Checkbox 
<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">
    </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">
    </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: autoнь Bootstrap-ийн өгөгдмөл тохиргоог хүчингүй болгохын тулд хүлээн авдаг 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>, эсвэл өөр ямар нэгэн зүйл) ашиглах боломжтой бөгөөд зөвхөн хэрэглээний ангиас өөр зүйлгүй.

8-20 тэмдэгтийн урттай байх ёстой. 
<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-group">
      <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>
Зангуугаар анхааруулах

Өгөгдмөл байдлаар, хөтчүүд 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хэв маягийг харах болно.

Санал хүсэлтээ илүү сайн дамжуулахын тулд захиалгат санал хүсэлтийн загвар нь өөрчлөн өнгө, хүрээ, фокусын хэв маяг, дэвсгэр дүрсийг ашигладаг. s -д зориулсан дэвсгэр дүрс <select>нь зөвхөн -тэй байх боломжтой бөгөөд .custom-selectүгүй .form-control.

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please select 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" 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" 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" 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" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom04">State</label>
      <select class="custom-select" id="validationCustom04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-feedback">
        Please select 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" 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" 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" 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"  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" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault04">State</label>
      <select class="custom-select" id="validationDefault04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault05">Zip</label>
      <input type="text" class="form-control" id="validationDefault05" 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" 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" 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" 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" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">State</label>
      <select class="custom-select is-invalid" id="validationServer04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-feedback">
        Please select 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" 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>s ба <textarea>s-тэй .form-control( .form-controlоролтын бүлэгт нэг хүртэлхийг оруулаад)
  • <select>s-тэй .form-controlэсвэл.custom-select
  • .form-checkс
  • .custom-checkboxs ба .custom-radios
  • .custom-file
Текст хэсэгт мессеж оруулна уу.
Хүчингүй санал хүсэлтийн жишээ
Бусад жишээ буруу санал хүсэлтийн текст
Жишээ нь буруу захиалгат санал хүсэлт
Жишээ нь буруу захиалгат файлын санал хүсэлт 
<form class="was-validated">
  <div class="mb-3">
    <label for="validationTextarea">Textarea</label>
    <textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required></textarea>
    <div class="invalid-feedback">
      Please enter a message in the textarea.
    </div>
  </div>

  <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үүн дээр байгаа эсэхийг шалгаарай. Доорх жишээн дээр манай баганын ангиудад үүнийг аль хэдийн оруулсан байгаа боловч таны төсөл өөр тохиргоог шаардаж магадгүй юм.

Looks good!
Looks good!
@
Please choose a unique and valid username.
Please provide a valid city.
Please select a valid state.
Please provide a valid zip. 
<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" 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" 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" 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" required>
      <div class="invalid-tooltip">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip04">State</label>
      <select class="custom-select" id="validationTooltip04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-tooltip">
        Please select 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" required>
      <div class="invalid-tooltip">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Тохируулах

Баталгаажуулалтын төлөвийг $form-validation-statesгазрын зурагтай хамт Sass-ээр дамжуулан өөрчлөх боломжтой. Манай файлд байрлах энэхүү Sass газрын зургийг өгөгдмөл / баталгаажуулалтын төлөвийг _variables.scssүүсгэхийн тулд давтсан болно . Муж тус бүрийн өнгө, дүрсийг тохируулах зориу��алттай газрын зураг багтсан болно. Өөр ямар ч мужийг хөтчүүд дэмждэггүй ч тусгай хэв маягийг ашигладаг хүмүүс илүү төвөгтэй маягтын санал хүсэлтийг хялбархан нэмж болно.validinvalid

Хольцыг өөрчлөхгүйгээр эдгээр утгыг өөрчлөхийг зөвлөдөггүйг анхаарна уу form-validation-state.

// Sass map from `_variables.scss`
// Override this and recompile your Sass to generate different states
$form-validation-states: map-merge(
  (
    "valid": (
      "color": $form-feedback-valid-color,
      "icon": $form-feedback-icon-valid
    ),
    "invalid": (
      "color": $form-feedback-invalid-color,
      "icon": $form-feedback-icon-invalid
    )
  ),
  $form-validation-states
);

// Loop from `_forms.scss`
// Any modifications to the above Sass map will be reflected in your compiled
// CSS via this loop.
@each $state, $data in $form-validation-states {
  @include form-validation-state($state, map-get($data, color), map-get($data, icon));
}

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

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

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

Шалгалтын хайрцаг, радио <input>болон хослолт бүр нь бидний захиалгат хяналтыг үүсгэхийн тулд <label>ороосон байна . <div>Бүтцийн хувьд энэ нь манай анхдагчтай ижил арга .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="customCheckDisabled1" disabled>
  <label class="custom-control-label" for="customCheckDisabled1">Check this custom checkbox</label>
</div>

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

Шилжүүлэгч

Шилжүүлэгч нь захиалгат тэмдэглэгээний тэмдэглэгээтэй боловч .custom-switchсэлгэн шилжүүлэгчийг үзүүлэхийн тулд классыг ашигладаг. Шилжүүлэгч нь мөн disabledшинж чанарыг дэмждэг.

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="customSwitch1">
  <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
</div>
<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
  <label class="custom-control-label" for="customSwitch2">Disabled switch element</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">

Файл хөтөч

Захиалгат файлын оролтыг идэвхжүүлэхийн тулд санал болгож буй залгаас: bs-custom-file-input , үүнийг бид одоогоор энд баримт бичигт ашиглаж байна.

Файлын оролт нь хамгийн бүдүүлэг нь бөгөөд хэрэв та файлыг сонгох… болон сонгосон файлын нэрийн тексттэй холбохыг хүсвэл нэмэлт 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>

SCSS ашиглан мөрүүдийг орчуулах эсвэл өөрчлөх

Псевдо :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

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

data-browseBootstrap нь мөн HTML хэл дээрх "Browse" текстийг тусгай оролтын шошгонд нэмж болох атрибутаар орчуулах боломжийг олгодог (Голланд хэл дээрх жишээ):

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFileLangHTML">
  <label class="custom-file-label" for="customFileLangHTML" data-browse="Bestand kiezen">Voeg je document toe</label>
</div>