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 type
atrybutu we wszystkich danych wejściowych (np. w email
przypadku adresu e-mail lub number
informacji 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.
<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-control
klasą. 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-control
na .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-lg
i .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 readonly
atrybut logiczny do danych wejściowych, aby zapobiec modyfikacji wartości danych wejściowych. Wejścia tylko do odczytu są jaśniejsze (tak 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-plaintext
klasy, 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-check
klasy 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. disabled
Atrybut 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 id
i 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-inline
do 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-static
do wejść .form-check
, które nie mają 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: block
i 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 wyników.
Grupy form
Klasa .form-group
to 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-bottom
pobiera dodatkowe style . .form-inline
Uż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ć .row
na .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 .row
klasę do grup formularzy i używając .col-*-*
klas do określania szerokości etykiet i kontrolek. Pamiętaj, aby dodać .col-form-label
ró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 tworzenia marginesów lub dopełniania, aby uzyskać idealne wyrównanie, którego potrzebujesz. Na przykład usunęliśmy padding-top
etykietę na naszych skumulowanych wejściach radiowych, aby lepiej wyrównać linię bazową tekstu.
<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 row">
<legend class="col-form-label col-sm-2 float-sm-left 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>
</fieldset>
<div class="form-group row">
<div class="col-sm-10 offset-sm-2">
<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-sm
lub .col-form-label-lg
do swojego <label>
s lub <legend>
s, aby prawidłowo podążać za rozmiarem .form-control-lg
i .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 .col
s w obrębie .row
lub .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 .col
kolumny 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 .col
tak .col-auto
, aby kolumny zajmowały tyle miejsca, ile jest potrzebne. Innymi słowy, rozmiar kolumny zależy 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-inline
klasy, 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: auto
aby zastąpić domyślne ustawienie Bootstrapwidth: 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 i selekcje formularzy.
<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-only
klasy. Istnieją dalsze alternatywne metody umieszczania etykiet dla technologii wspomagających, takich jak aria-label
atrybut lub aria-labelledby
. title
Jeśli żaden z nich nie występuje, technologie wspomagające mogą odwoływać się do używania placeholder
atrybutu, jeśli występuje, ale należy pamiętać, że nie zaleca się używania placeholder
go 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-block
w wersji 3). Wbudowany tekst pomocy można elastycznie zaimplementować za pomocą dowolnego wbudowanego elementu HTML i klas narzędzi, 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-describedby
atrybutu. 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: block
i dodaje górny margines ułatwiający odstępy od powyższych danych wejściowych.
<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ą.
<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 disabled
atrybut 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 disabled
atrybut do a, <fieldset>
aby wyłączyć wszystkie znajdujące się w nim kontrolki.
<form>
<fieldset disabled>
<legend>Disabled fieldset example</legend>
<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, zapobiegając 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 disabled
atrybutu 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.
Jak to działa
Oto jak walidacja formularzy działa z Bootstrap:
- Walidacja formularzy HTML jest stosowana za pomocą dwóch pseudoklas CSS
:invalid
oraz:valid
. Dotyczy elementów<input>
,<select>
, i<textarea>
. - Bootstrap określa zakres stylów
:invalid
i:valid
do 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-validated
klasę z<form>
ponownie po przesłaniu. - Jako rezerwę
.is-invalid
można.is-valid
użyć klas zamiast pseudoklas do walidacji po stronie serwera . Nie wymagają.was-validated
klasy 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
setCustomValidity
w 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ć novalidate
atrybut 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 :invalid
i :valid
zastosowane 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
.
<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ż style tych 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-invalid
i .is-valid
. Zauważ, że .invalid-feedback
jest 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 id
odwołanie do więcej niż jednego, na wypadek gdyby pole już wskazuje na dodatkowy tekst formularza.
<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 formularzy i składników:
<input>
s i<textarea>
s z.form-control
<select>
s z.form-control
lub.custom-select
.form-check
s.custom-checkbox
s i.custom-radio
s.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="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}-feedback
klasy na .{valid|invalid}-tooltip
klasy, aby wyświetlić informacje zwrotne dotyczące walidacji w stylizowanej podpowiedzi. Upewnij się, że masz na sobie rodzica position: relative
do pozycjonowania podpowiedzi. W poniższym przykładzie nasze klasy kolumn już to mają, ale Twój projekt może wymagać alternatywnej konfiguracji.
<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-states
mapy. Znajdująca się w naszym _variables.scss
pliku mapa Sassa jest zapętlona w celu wygenerowania stanów domyślnych valid
/ invalid
walidacji. 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-state
domieszki.
// 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));
}
Walidacja grupy wejściowej
Aby wykryć, które elementy wymagają zaokrąglonych rogów w grupie wejściowej z walidacją, grupa wejściowa wymaga dodatkowej .has-validation
klasy.
<div class="input-group has-validation">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text" class="form-control" required>
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
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 :checked
prawidłowego nadania stylu naszego niestandardowego wskaźnika formularza. W połączeniu z .custom-control-label
klasą możemy również stylizować tekst dla każdego elementu w oparciu o <input>
stan .
Ukrywamy domyślne <input>
za pomocą opacity
i używamy .custom-control-label
do zbudowania nowego niestandardowego wskaźnika formularza w jego miejscu za pomocą ::before
i ::after
. Niestety nie możemy zbudować niestandardowego tylko z tego, <input>
ponieważ CSS content
nie 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ć :indeterminate
pseudoklasę, 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="customRadioInline" 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="customRadioInline" 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 disabled
atrybut 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-switch
klasy do renderowania przełącznika. Przełączniki również obsługują disabled
atrybut.
<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-select
do 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 multiple
jest 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 size
atrybut:
<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 kciuk (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 min
i max
— 0
i 100
. Możesz określić nowe wartości dla tych, którzy używają atrybutów min
i .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ć step
wartość. 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
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 opacity
i zamiast tego stylizujemy <label>
. Przycisk jest generowany i pozycjonowany za pomocą ::after
. Na koniec deklarujemy a width
i height
na <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-text
zmiennej 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 lang
elementu lub <html>
nagłówka Content-Language
HTTP .
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-browse
atrybutu, 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>