in English

Formularze

Przykłady i wskazówki dotyczące używania stylów formantów formularzy, opcji układu i komponentów niestandardowych do tworzenia szerokiej gamy formularzy.

Przegląd

Kontrolki formularzy Bootstrap rozszerzają nasze style formularzy Rebooted o klasy. Użyj tych klas, aby włączyć niestandardowe wyświetlacze, aby uzyskać bardziej spójne renderowanie w przeglądarkach i urządzeniach.

Pamiętaj, aby użyć odpowiedniego typeatrybutu we wszystkich danych wejściowych (np. w emailprzypadku adresu e-mail lub numberinformacji liczbowych), aby skorzystać z nowszych elementów sterujących, takich jak weryfikacja adresu e-mail, wybór numeru i inne.

Oto szybki przykład demonstrujący style formularzy Bootstrapa. Czytaj dalej, aby uzyskać dokumentację dotyczącą wymaganych klas, układu formularza i nie tylko.

Nigdy nie udostępnimy Twojego e-maila nikomu innemu. 
<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>

Kontrolki formularzy

Kontrolki formularza tekstowego — takie jak <input>s, <select>s i <textarea>s — są stylizowane razem z .form-controlklasą. Uwzględniono style ogólnego wyglądu, stanu skupienia, zmiany rozmiaru i nie tylko.

Koniecznie zapoznaj się z naszymi niestandardowymi formami , aby uzyskać więcej stylów <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>

W przypadku danych wejściowych z pliku zamień .form-controlna .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>

Rozmiary

Ustaw wysokości za pomocą klas takich jak .form-control-lgi .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>

Tylko czytać

Dodaj readonlyatrybut logiczny do danych wejściowych, aby zapobiec modyfikacji wartości danych wejściowych. Wejścia tylko do odczytu są jaśniejsze (podobnie jak wejścia wyłączone), ale zachowują standardowy kursor.

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

Zwykły tekst tylko do odczytu

Jeśli chcesz, aby <input readonly>elementy w formularzu były stylizowane jako zwykły tekst, użyj .form-control-plaintextklasy, aby usunąć domyślny styl pól formularza i zachować poprawny margines i dopełnienie.

<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>

Wejścia zakresowe

Ustaw wejścia zakresu z możliwością przewijania w poziomie za pomocą .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>

Pola wyboru i radia

Domyślne pola wyboru i radia zostały ulepszone za pomocą jednej .form-checkklasy dla obu typów danych wejściowych, która poprawia układ i zachowanie ich elementów HTML . Pola wyboru służą do wyboru jednej lub kilku opcji z listy, podczas gdy radia służą do wyboru jednej opcji z wielu.

Obsługiwane są wyłączone pola wyboru i radia. disabledAtrybut zastosuje jaśniejszy kolor, aby wskazać stan wejścia .

Pola wyboru i przyciski opcji obsługują walidację formularzy opartą na HTML i zapewniają zwięzłe, dostępne etykiety. Jako takie, nasze <input>s i <label>s są elementami rodzeństwa, w przeciwieństwie do <input>wewnątrz <label>. Jest to nieco bardziej gadatliwe, ponieważ musisz określić atrybuty idi for, aby powiązać <input>i <label>.

Domyślny (skumulowany)

Domyślnie dowolna liczba pól wyboru i radiotelefonów, które są bezpośrednim rodzeństwem, zostanie ułożona pionowo i odpowiednio rozmieszczona za pomocą .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>

W linii

Pogrupuj pola wyboru lub radia w tym samym poziomym rzędzie, dodając .form-check-inlinedo dowolnego .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>

Bez etykiet

Dodaj .position-staticdo wejść w obrębie .form-check, które nie mają żadnego tekstu etykiety. Pamiętaj, aby nadal podawać jakąś formę dostępnej nazwy dla technologii wspomagających (na przykład używając 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>

Układ

Ponieważ Bootstrap ma zastosowanie display: blocki width: 100%do prawie wszystkich naszych kontrolek formularzy, formularze będą domyślnie układane w stos pionowo. Dodatkowe klasy mogą służyć do różnicowania tego układu na podstawie formularza.

Grupy form

Klasa .form-groupto najprostszy sposób na dodanie pewnej struktury do formularzy. Zapewnia elastyczną klasę, która zachęca do prawidłowego grupowania etykiet, kontrolek, opcjonalnego tekstu pomocy i komunikatów weryfikacyjnych formularzy. Domyślnie ma zastosowanie tylko , ale w razie potrzeby margin-bottompobiera dodatkowe style . .form-inlineUżyj go z <fieldset>s, <div>s lub prawie każdym innym elementem.

<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>

Siatka formularzy

Bardziej złożone formularze można budować za pomocą naszych klas siatek. Użyj ich w przypadku układów formularzy, które wymagają wielu kolumn, różnych szerokości i dodatkowych opcji wyrównania.

<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>

Wiersz formularza

Możesz także zamienić .rowna .form-row, odmianę naszego standardowego wiersza siatki, który zastępuje domyślne rynny kolumn, aby uzyskać bardziej zwarte i zwarte układy.

<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>

Za pomocą systemu siatki można również tworzyć bardziej złożone układy.

<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>

Forma pozioma

Twórz formularze poziome z siatką, dodając .rowklasę do grup formularzy i używając .col-*-*klas do określania szerokości etykiet i kontrolek. Pamiętaj, aby dodać .col-form-labelrównież do swoich <label>s, aby były wyśrodkowane w pionie z powiązanymi kontrolkami formularza.

Czasami może być konieczne użycie narzędzi do marginesów lub dopełniania, aby uzyskać idealne wyrównanie, którego potrzebujesz. Na przykład usunęliśmy padding-topetykietę na naszych skumulowanych wejściach radiowych, aby lepiej wyrównać linię bazową tekstu.

Radia
Pole wyboru 
<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>
Rozmiar etykiety w formie poziomej

Upewnij się, że używasz .col-form-label-smlub .col-form-label-lgdo swojego <label>s lub <legend>s, aby prawidłowo podążać za rozmiarem .form-control-lgi .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>

Rozmiary kolumn

Jak pokazano w poprzednich przykładach, nasz system siatki pozwala na umieszczenie dowolnej liczby .cols w obrębie .rowlub .form-row. Podzielą dostępną szerokość równo między siebie. Możesz także wybrać podzbiór swoich kolumn, aby zajmować mniej lub więcej miejsca, podczas gdy pozostałe .colkolumny równo podzielą resztę za pomocą określonych klas kolumn, takich jak .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>

Automatyczne dopasowywanie

Poniższy przykład wykorzystuje narzędzie flexbox do pionowego wyśrodkowania zawartości i zmian .coltak .col-auto, aby Twoje kolumny zajmowały tylko tyle miejsca, ile jest potrzebne. Innymi słowy, same rozmiary kolumn zależą od zawartości.

@ 
<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>

Następnie możesz ponownie zmiksować to z klasami kolumn specyficznymi dla rozmiaru.

@ 
<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>

I oczywiście obsługiwane są niestandardowe kontrolki formularzy .

<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>

Formularze wbudowane

Użyj .form-inlineklasy, aby wyświetlić serię etykiet, kontrolek formularzy i przycisków w jednym poziomym rzędzie. Kontrolki formularzy w formularzach wbudowanych różnią się nieco od ich stanów domyślnych.

  • Kontrolki to display: flex, zwijające wszelkie białe znaki HTML i pozwalające zapewnić kontrolę wyrównania za pomocą narzędzi odstępów i flexbox .
  • Kontrolki i grupy wejściowe otrzymują, width: autoaby zastąpić domyślne ustawienie Bootstrap width: 100%.
  • Kontrolki pojawiają się tylko w widocznych oknach o szerokości co najmniej 576 pikseli, aby uwzględnić wąskie okna widoczne na urządzeniach mobilnych.

Może być konieczne ręczne określenie szerokości i wyrównania poszczególnych kontrolek formularza za pomocą narzędzi do ustawiania odstępów (jak pokazano poniżej). Na koniec pamiętaj, aby zawsze dołączyć znak <label>do każdej kontrolki formularza, nawet jeśli chcesz ukryć go przed użytkownikami, którzy nie korzystają z czytnika ekranu, za pomocą .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>

Obsługiwane są również niestandardowe kontrolki formularzy i selekcje.

<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>
Alternatywy dla ukrytych etykiet

Technologie wspomagające, takie jak czytniki ekranu, będą miały problemy z formularzami, jeśli nie dodasz etykiety do wszystkich danych wejściowych. W przypadku tych formularzy wbudowanych możesz ukryć etykiety za pomocą .sr-onlyklasy. Istnieją dalsze alternatywne metody umieszczania etykiety dla technologii wspomagających, takie jak aria-labelatrybut lub aria-labelledby. titleJeśli żaden z nich nie występuje, technologie wspomagające mogą odwoływać się do używania placeholderatrybutu, jeśli występuje, ale należy pamiętać, że nie zaleca się używania placeholdergo jako zamiennika dla innych metod znakowania.

Tekst pomocy

Tekst pomocy na poziomie bloku w formularzach można utworzyć za pomocą .form-text(wcześniej znanego jako .help-blockw wersji 3). Wbudowany tekst pomocy można elastycznie zaimplementować za pomocą dowolnego wbudowanego elementu HTML i klas narzędziowych, takich jak .text-muted.

Kojarzenie tekstu pomocy z kontrolkami formularza

Tekst pomocy powinien być jawnie powiązany z kontrolką formularza, do której się odnosi przy użyciu aria-describedbyatrybutu. Dzięki temu technologie pomocnicze — takie jak czytniki ekranu — będą ogłaszać ten tekst pomocy, gdy użytkownik skupi się lub przejdzie do kontrolki.

Tekst pomocy poniżej danych wejściowych może być stylizowany za pomocą .form-text. Ta klasa zawiera display: blocki dodaje górny margines ułatwiający odstępy od powyższych danych wejściowych.

Twoje hasło musi mieć od 8 do 20 znaków, zawierać litery i cyfry oraz nie może zawierać spacji, znaków specjalnych ani emotikonów. 
<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>

W tekście śródliniowym można używać dowolnego typowego śródliniowego elementu HTML (czy to <small>, <span>, czy czegoś innego) z niczym więcej niż klasą użytkową.

Musi mieć 8-20 znaków. 
<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>

Formularze dla osób niepełnosprawnych

Dodaj disabledatrybut logiczny do danych wejściowych, aby zapobiec interakcji użytkownika i sprawić, by wyglądał jaśniej.

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

Dodaj disabledatrybut do a, <fieldset>aby wyłączyć wszystkie znajdujące się w nim kontrolki.

<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>
Zastrzeżenie za pomocą kotwic

Przeglądarki traktują wszystkie natywne kontrolki formularzy ( <input>, <select>i <button>elementy) wewnątrz a <fieldset disabled>jako wyłączone, co zapobiega interakcji klawiatury i myszy na nich.

Jeśli jednak formularz zawiera również niestandardowe elementy przypominające przyciski, takie jak <a ... class="btn btn-*">, otrzymają one tylko styl pointer-events: none. Jak wspomniano w sekcji dotyczącej stanu wyłączenia przycisków (a konkretnie w podsekcji dotyczącej elementów kotwicy), ta właściwość CSS nie jest jeszcze ustandaryzowana i nie jest w pełni obsługiwana w przeglądarce Internet Explorer 10. Kontrolki oparte na kotwicach również będą nadal z możliwością ustawiania ostrości i obsługi za pomocą klawiatury. Musisz ręcznie zmodyfikować te kontrolki, dodając, tabindex="-1"aby uniemożliwić im otrzymywanie fokusu i aria-disabled="disabled"sygnalizować ich stan technologiom pomocniczym.

Kompatybilność z różnymi przeglądarkami

Chociaż Bootstrap zastosuje te style we wszystkich przeglądarkach, Internet Explorer 11 i starsze wersje nie obsługują w pełni disabledatrybutu na <fieldset>. Użyj niestandardowego JavaScript, aby wyłączyć zestaw pól w tych przeglądarkach.

Walidacja

Przekazuj swoim użytkownikom cenne, przydatne informacje zwrotne dzięki walidacji formularzy HTML5 — dostępnej we wszystkich obsługiwanych przez nas przeglądarkach . Wybierz z domyślnych opinii dotyczących walidacji przeglądarki lub zaimplementuj niestandardowe komunikaty za pomocą naszych wbudowanych klas i początkowego kodu JavaScript.

Zdajemy sobie sprawę, że obecnie niestandardowe style walidacji i podpowiedzi po stronie klienta nie są dostępne, ponieważ nie są one narażone na technologie wspomagające. Podczas gdy pracujemy nad rozwiązaniem, zalecamy użycie opcji po stronie serwera lub domyślnej metody walidacji przeglądarki.

Walidacja grupy wejściowej

Grupy wejściowe mają niestety trudności ze stylami walidacji. Naszą rekomendacją jest umieszczanie wiadomości zwrotnych jako elementów rodzeństwa tego .input-group, co ma .is-{valid|invalid}. Umieszczanie komunikatów zwrotnych w grupach wejściowych przerywa border-radius. Zobacz to obejście .

Jak to działa

Oto jak walidacja formularzy działa z Bootstrap:

  • Walidacja formularzy HTML jest stosowana za pomocą dwóch pseudoklas CSS :invalidoraz :valid. Dotyczy elementów <input>, <select>, i <textarea>.
  • Bootstrap określa zakres stylów :invalidi :validdo klasy nadrzędnej .was-validated, zwykle stosowanej do <form>. W przeciwnym razie każde wymagane pole bez wartości będzie wyświetlane jako nieprawidłowe po wczytaniu strony. W ten sposób możesz wybrać, kiedy je aktywować (zwykle po próbie przesłania formularza).
  • Aby zresetować wygląd formularza (na przykład w przypadku dynamicznego przesyłania formularzy za pomocą AJAX), usuń .was-validatedklasę z <form>ponownie po przesłaniu.
  • Jako rezerwę .is-invalidmożna .is-validużyć klas zamiast pseudoklas do walidacji po stronie serwera . Nie wymagają .was-validatedklasy rodzicielskiej.
  • Ze względu na ograniczenia w działaniu CSS, nie możemy (obecnie) stosować stylów do elementu znajdującego <label>się przed kontrolką formularza w DOM bez pomocy niestandardowego JavaScript.
  • Wszystkie nowoczesne przeglądarki obsługują API walidacji ograniczeń , serię metod JavaScript do walidacji kontrolek formularzy.
  • Wiadomości zwrotne mogą wykorzystywać domyślne ustawienia przeglądarki (inne dla każdej przeglądarki i niestylizowane przez CSS) lub nasze niestandardowe style opinii z dodatkowym kodem HTML i CSS.
  • Możesz podać niestandardowe komunikaty dotyczące ważności setCustomValidityw JavaScript.

Mając to na uwadze, rozważ poniższe prezentacje naszych niestandardowych stylów walidacji formularzy, opcjonalnych klas po stronie serwera i domyślnych ustawień przeglądarki.

Style niestandardowe

W przypadku niestandardowych komunikatów sprawdzania poprawności formularza Bootstrap należy dodać novalidateatrybut logiczny do <form>. Spowoduje to wyłączenie domyślnych etykietek opinii przeglądarki, ale nadal zapewnia dostęp do interfejsów API walidacji formularzy w języku JavaScript. Spróbuj przesłać poniższy formularz; nasz JavaScript przechwyci przycisk przesyłania i przekaże Ci informację zwrotną. Podczas próby przesłania zobaczysz style :invalidi :validzastosowane do kontrolek formularza.

Niestandardowe style opinii stosują niestandardowe kolory, obramowania, style fokusu i ikony tła, aby lepiej przekazywać opinie. Ikony tła dla <select>s są dostępne tylko z .custom-select, a nie .form-control.

Wygląda dobrze!
Wygląda dobrze!
Podaj prawidłowe miasto.
Wybierz prawidłowy stan.
Podaj poprawny zip.
You must agree before submitting. 
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-6 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-6 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>
  <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>

Domyślne ustawienia przeglądarki

Nie interesują Cię niestandardowe komunikaty zwrotne dotyczące walidacji ani pisanie JavaScript w celu zmiany zachowań formularzy? Wszystko dobrze, możesz użyć domyślnych ustawień przeglądarki. Spróbuj przesłać poniższy formularz. W zależności od przeglądarki i systemu operacyjnego zobaczysz nieco inny styl opinii.

Chociaż te style opinii nie mogą być stylizowane za pomocą CSS, nadal możesz dostosować tekst opinii za pomocą JavaScript.

<form>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationDefault01">First name</label>
      <input type="text" class="form-control" id="validationDefault01" value="Mark" required>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationDefault02">Last name</label>
      <input type="text" class="form-control" id="validationDefault02" value="Otto" required>
    </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>

Po stronie serwera

Zalecamy korzystanie z walidacji po stronie klienta, ale jeśli potrzebujesz walidacji po stronie serwera, możesz wskazać nieprawidłowe i prawidłowe pola formularza za pomocą .is-invalidi .is-valid. Zauważ, że .invalid-feedbackjest to również obsługiwane przez te klasy.

W przypadku nieprawidłowych pól upewnij się, że nieprawidłowa opinia/komunikat o błędzie jest powiązany z odpowiednim polem formularza za pomocą aria-describedby. Ten atrybut umożliwia idodwołanie do więcej niż jednego, na wypadek gdyby pole już wskazuje na dodatkowy tekst formularza.

Wygląda dobrze!
Wygląda dobrze!
Podaj prawidłowe miasto.
Wybierz prawidłowy stan.
Podaj poprawny zip.
Musisz wyrazić zgodę przed przesłaniem. 
<form>
  <div class="form-row">
    <div class="col-md-6 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-6 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>
  <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" aria-describedby="validationServer03Feedback" required>
      <div id="validationServer03Feedback" 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" aria-describedby="validationServer04Feedback" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div id="validationServer04Feedback" 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" aria-describedby="validationServer05Feedback" required>
      <div id="validationServer05Feedback" 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" aria-describedby="invalidCheck3Feedback" required>
      <label class="form-check-label" for="invalidCheck3">
        Agree to terms and conditions
      </label>
      <div  id="invalidCheck3Feedback" class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Obsługiwane elementy

Style walidacji są dostępne dla następujących kontrolek i komponentów formularzy:

  • <input>s i <textarea>s z.form-control
  • <select>s z .form-controllub.custom-select
  • .form-checks
  • .custom-checkboxs i .custom-radios
  • .custom-file
Wpisz wiadomość w polu tekstowym.
Przykład nieprawidłowego tekstu opinii
Więcej przykładowego tekstu nieprawidłowej opinii
Przykład nieprawidłowej opinii dotyczącej wyboru niestandardowego
Przykład nieprawidłowej opinii o pliku niestandardowym
@
Przykład nieprawidłowej opinii grupy wejściowej
Przykład nieprawidłowej opinii grupy wejściowej
Przykład nieprawidłowej opinii grupy wejściowej 
<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="mb-3">
    <select class="custom-select" required>
      <option value="">Choose...</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 mb-3">
    <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>

  <div class="mb-3">
    <div class="input-group is-invalid">
      <div class="input-group-prepend">
        <span class="input-group-text" id="validatedInputGroupPrepend">@</span>
      </div>
      <input type="text" class="form-control is-invalid" aria-describedby="validatedInputGroupPrepend" required>
    </div>
    <div class="invalid-feedback">
      Example invalid input group feedback
    </div>
  </div>

  <div class="mb-3">
    <div class="input-group is-invalid">
      <div class="input-group-prepend">
        <label class="input-group-text" for="validatedInputGroupSelect">Options</label>
      </div>
      <select class="custom-select" id="validatedInputGroupSelect" required>
        <option value="">Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
    <div class="invalid-feedback">
      Example invalid input group feedback
    </div>
  </div>

  <div class="input-group is-invalid">
    <div class="custom-file">
      <input type="file" class="custom-file-input" id="validatedInputGroupCustomFile" required>
      <label class="custom-file-label" for="validatedInputGroupCustomFile">Choose file...</label>
    </div>
    <div class="input-group-append">
       <button class="btn btn-outline-secondary" type="button">Button</button>
    </div>
  </div>
  <div class="invalid-feedback">
    Example invalid input group feedback
  </div>
</form>

Podpowiedzi

Jeśli pozwala na to układ formularza, możesz zamienić .{valid|invalid}-feedbackklasy na .{valid|invalid}-tooltipklasy, aby wyświetlić informacje zwrotne dotyczące walidacji w stylizowanej podpowiedzi. Upewnij się, że masz na sobie rodzica position: relativedo pozycjonowania podpowiedzi. W poniższym przykładzie nasze klasy kolumn już to mają, ale Twój projekt może wymagać alternatywnej konfiguracji.

Looks good!
Looks good!
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-6 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-6 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>
  <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>

Dostosowywanie

Stany walidacji można dostosować za pomocą Sass za pomocą $form-validation-statesmapy. Znajdująca się w naszym _variables.scsspliku mapa Sassa jest zapętlona w celu wygenerowania stanów domyślnych valid/ invalidwalidacji. W zestawie znajduje się zagnieżdżona mapa do dostosowywania koloru i ikony każdego stanu. Chociaż żadne inne stany nie są obsługiwane przez przeglądarki, te korzystające ze stylów niestandardowych mogą łatwo dodawać bardziej złożone informacje zwrotne do formularzy.

Należy pamiętać, że nie zalecamy dostosowywania tych wartości bez modyfikacji form-validation-statedomieszki.

// 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));
}

Obejście walidacji grupy wejściowej

Ze względu na ograniczenia selektora nie jesteśmy w stanie rozwiązać problemu z podziałem border-radiusgrup wejściowych za pomocą walidacji, dlatego wymagane jest ręczne zastępowanie. Jeśli używasz standardowej grupy danych wejściowych i nie dostosowujesz domyślnych wartości promienia obramowania, dodaj .rounded-rightelementy z broken border-radius.

<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">@</span>
  </div>
  <input type="text" class="form-control rounded-right" required>
  <div class="invalid-feedback">
    Please choose a username.
  </div>
</div>
@
Wybierz nazwę użytkownika.

Jeśli używasz małej lub dużej grupy wejściowej lub dostosowujesz border-radiuswartości domyślne, dodaj niestandardowy kod CSS do elementu z pominiętym border-radius.

/* Change values to match the radius of your form control */
.fix-rounded-right {
  border-top-right-radius: .2rem !important;
  border-bottom-right-radius: .2rem !important;
}
<div class="input-group input-group-sm">
  <div class="input-group-prepend">
    <span class="input-group-text">@</span>
  </div>
  <input type="text" class="form-control fix-rounded-right" required>
  <div class="invalid-feedback">
    Please choose a username.
  </div>
</div>
@
Wybierz nazwę użytkownika.

Formularze niestandardowe

Aby uzyskać jeszcze większe możliwości dostosowania i spójność między przeglądarkami, użyj naszych całkowicie niestandardowych elementów formularza, aby zastąpić domyślne ustawienia przeglądarki. Są one zbudowane na semantycznych i dostępnych znacznikach, dzięki czemu są solidnymi zamiennikami dowolnej domyślnej kontrolki formularza.

Pola wyboru i radia

Każde pole wyboru, radio <input>i <label>parowanie są opakowane w symbol, <div>aby stworzyć naszą niestandardową kontrolę. Strukturalnie jest to takie samo podejście, jak nasze domyślne .form-check.

Używamy selektora rodzeństwa ( ~) dla wszystkich naszych <input>stanów — na przykład — w celu :checkedprawidłowego nadania stylu naszego niestandardowego wskaźnika formularza. W połączeniu z .custom-control-labelklasą możemy również stylizować tekst dla każdego elementu w oparciu o <input>stan .

Ukrywamy domyślne <input>za pomocą opacityi używamy .custom-control-labeldo zbudowania nowego niestandardowego wskaźnika formularza w jego miejscu za pomocą ::beforei ::after. Niestety nie możemy zbudować niestandardowego tylko z tego, <input>ponieważ CSS contentnie działa na tym elemencie.

W zaznaczonych stanach używamy ikon SVG osadzonych w base64 z Open Iconic . Zapewnia nam to najlepszą kontrolę nad stylami i pozycjonowaniem w różnych przeglądarkach i urządzeniach.

Pola wyboru

<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>

Niestandardowe pola wyboru mogą również wykorzystywać :indeterminatepseudoklasę, gdy jest ona ustawiana ręcznie za pomocą JavaScript (nie ma dostępnego atrybutu HTML do jego określenia).

Jeśli używasz jQuery, coś takiego powinno wystarczyć:

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

Radia

<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>

W linii

<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>

Wyłączone

Niestandardowe pola wyboru i radia można również wyłączyć. Dodaj disabledatrybut logiczny do <input>wskaźnika, a niestandardowy wskaźnik i opis etykiety zostaną automatycznie przypisane.

<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>

Przełączniki

Przełącznik ma znacznik niestandardowego pola wyboru, ale używa .custom-switchklasy do renderowania przełącznika. Przełączniki również obsługują disabledatrybut.

<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>

Wybierz menu

Niestandardowe <select>menu wymagają tylko niestandardowej klasy .custom-selectdo wyzwalania niestandardowych stylów. Style niestandardowe są ograniczone do <select>początkowego wyglądu i nie mogą modyfikować <option>s ze względu na ograniczenia przeglądarki.

<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>

Możesz także wybierać spośród małych i dużych niestandardowych zaznaczeń, aby dopasować nasze dane wejściowe tekstu o podobnej wielkości.

<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>

Obsługiwany multiplejest również atrybut:

<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>

Jak jest sizeatrybut:

<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>

Zasięg

Utwórz niestandardowe <input type="range">kontrolki za pomocą .custom-range. Ścieżka (tło) i miniatura (wartość) mają taki sam styl w różnych przeglądarkach. Ponieważ tylko IE i Firefox obsługują „wypełnianie” swojej ścieżki od lewej lub prawej strony kciuka jako sposób wizualnego wskazania postępu, obecnie nie obsługujemy tego.

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

Dane wejściowe zakresu mają niejawne wartości odpowiednio dla mini max— 0i 100. Możesz określić nowe wartości dla tych, którzy używają atrybutów mini .max

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

Domyślnie zakres wprowadza „przyciąganie” do wartości całkowitych. Aby to zmienić, możesz określić stepwartość. W poniższym przykładzie podwajamy liczbę kroków za pomocą step="0.5".

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

Przeglądarka plików

Zalecana wtyczka do animowania niestandardowych danych wejściowych pliku: bs-custom-file-input , tego właśnie używamy obecnie w naszej dokumentacji.

Plik wejściowy jest najbardziej skomplikowany i wymaga dodatkowego JavaScript, jeśli chcesz je połączyć za pomocą funkcjonalnego Wybierz plik… i wybranego tekstu nazwy pliku.

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

Ukrywamy domyślny plik <input>przez opacityi zamiast tego stylizujemy <label>. Przycisk jest generowany i pozycjonowany za pomocą ::after. Na koniec deklarujemy a widthi heightna <input>odpowiednie odstępy dla otaczających treści.

Tłumaczenie lub dostosowywanie ciągów za pomocą SCSS

Pseudoklasa służy do tłumaczenia tekstu „Przeglądaj” na inne języki :lang(). Zastąp lub dodaj wpisy do $custom-file-textzmiennej Sass za pomocą odpowiedniego tagu języka i zlokalizowanych ciągów. Angielskie struny można dostosować w ten sam sposób. Na przykład, oto jak można dodać tłumaczenie hiszpańskie (kod języka hiszpańskiego to es):

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

Oto lang(es)działanie na niestandardowych danych wejściowych pliku dla hiszpańskiego tłumaczenia:

<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>

Aby wyświetlić prawidłowy tekst, musisz poprawnie ustawić język dokumentu (lub jego poddrzewa). Można to zrobić między innymi za pomocą atrybutu langelementu lub <html>nagłówka Content-LanguageHTTP .

Tłumaczenie lub dostosowywanie ciągów za pomocą HTML

Bootstrap zapewnia również sposób na przetłumaczenie tekstu „Przeglądaj” w HTML za pomocą data-browseatrybutu, który można dodać do niestandardowej etykiety wejściowej (przykład w języku niderlandzkim):

<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>