Esempii è linee d'utilizazione per stili di cuntrollu di forma, opzioni di layout è cumpunenti persunalizati per creà una larga varietà di forme.
Panoramica
I cuntrolli di forma di Bootstrap si sviluppanu nantu à i nostri stili di forma riavviata cù classi. Aduprate queste classi per optà per i so schermi persunalizati per un rendering più coherente in i navigatori è i dispositi.
Assicuratevi di utilizà un typeattributu appropritatu in tutti l'inputs (per esempiu, emailper l'indirizzu email o numberper l'infurmazioni numeriche) per prufittà di i cuntrolli di input più recenti cum'è verificazione di email, selezzione di numeri, è più.
Eccu un esempiu rapidu per dimustrà i stili di forma di Bootstrap. Continua a leghje per a documentazione nantu à e classi richieste, u layout di furmulariu, è più.
Cuntrolli di forma
I cuntrolli di forma testuale - cum'è <input>s, <select>s è <textarea>s - sò stilati cù a .form-controlclasse. Includite sò stili per l'aspettu generale, u statu di focu, a dimensione, è più.
Assicuratevi di spiegà e nostre forme persunalizate per ulteriore stile <select>.
Per l'input di file, scambià u .form-controlfor .form-control-file.
Aghjunghjite l' readonlyattributu booleanu nantu à un input per impedisce a mudificazione di u valore di l'input. L'input di sola lettura parenu più ligeri (cum'è l'input disattivati), ma mantenenu u cursore standard.
Lettura solu testu chjaru
Se vulete avè <input readonly>elementi in a vostra forma stilata cum'è testu chjaru, utilizate a .form-control-plaintextclassa per sguassà u stilu di campu di forma predeterminatu è priservà u marghjenu currettu è u padding.
Ingressi di gamma
Stabilite l'inputs di intervallu di scorrimentu horizontale utilizendu .form-control-range.
Checkboxes è radiu
I caselle di verificazione predeterminate è i radii sò migliurati cù l'aiutu di .form-check, una sola classa per i dui tipi di input chì migliurà u layout è u cumpurtamentu di i so elementi HTML . I checkboxes sò per selezziunà una o parechje opzioni in una lista, mentre chì i radii sò per selezziunate una opzione da parechje.
I caselle di verificazione disabilitate è i radii sò supportati. L' disabledattributu applicà un culore più chjaru per aiutà à indicà u statu di l'input.
I checkboxes è i buttoni di radiu supportanu a validazione di forma basata in HTML è furnisce etichette concise è accessibili. Comu tali, i nostri <input>s è <label>s sò elementi di fratellu in uppusizione à un <input>in un <label>. Questu hè un pocu più verbose cum'è duvete specificà idè forattributi per rilancià u <input>è <label>.
Default (stacked)
Per automaticamente, ogni numeru di caselle di spunta è radiu chì sò fratelli immediati seranu impilati verticalmente è spaziati appropritamente cù .form-check.
In linea
Gruppu caselle di spunta o radiu nantu à a listessa fila horizontale aghjunghjendu .form-check-inlineà qualsiasi .form-check.
Senza etichette
Aghjunghjite .position-staticà l'inputs .form-checkchì ùn anu micca testu di l'etichetta. Ricurdatevi di furnisce sempre una forma di etichetta per e tecnulugia di assistenza (per esempiu, usendu aria-label).
Disposizione
Siccomu Bootstrap s'applica display: blockè width: 100%à quasi tutti i nostri cuntrolli di furmulariu, e forme si stackanu per automaticamente in verticale. E classi supplementari ponu esse aduprate per varià stu layout nantu à una basa per forma.
Forma gruppi
A .form-groupclassa hè u modu più faciule per aghjunghje una struttura à e forme. Fornisce una classa flessibile chì incuraghja un raggruppamentu propiu di etichette, cuntrolli, testu d'aiutu opzionale, è messageria di validazione di forma. Per automaticamente, s'applica solu margin-bottom, ma piglia stili supplementari in .form-inlinequantu necessariu. Aduprate cù <fieldset>s, <div>s, o quasi ogni altru elementu.
Forma griglia
Forme più cumplesse ponu esse custruite cù e nostre classi di griglia. Aduprate questi per schemi di forma chì necessitanu parechje colonne, larghezze variate è opzioni di allineamentu supplementari.
Forma fila
Pudete ancu scambià .rowper .form-row, una variazione di a nostra fila di griglia standard chì annulla i canali predefiniti di a colonna per layout più stretti è più compacti.
I layout più cumplessi ponu ancu esse creati cù u sistema di griglia.
Forma horizontale
Crea forme horizontale cù a griglia aghjunghjendu a .rowclassa per furmà gruppi è utilizendu e .col-*-*classi per specificà a larghezza di e vostre etichette è cuntrolli. Assicuratevi di aghjunghje ancu .col-form-labeli vostri <label>s in modu chì sò centrati verticalmente cù i so cuntrolli di forma assuciati.
A volte, forse avete bisognu di usà utilità di margine o padding per creà l'allineamentu perfettu chì avete bisognu. Per esempiu, avemu sguassatu l' padding-topetichetta nantu à i nostri input di radiu impilati per allineà megliu a linea di basa di testu.
Dimensione di l'etichetta in forma orizontale
Assicuratevi di utilizà .col-form-label-smo .col-form-label-lgà u vostru <label>s o <legend>s per seguità currettamente a dimensione di .form-control-lgè .form-control-sm.
Dimensione di a colonna
Cum'è mostratu in l'esempi precedenti, u nostru sistema di griglia vi permette di mette ogni numeru di .cols in un .rowo .form-row. Divideranu a larghezza dispunibule ugualmente trà elli. Pudete ancu sceglie un sottumessu di e vostre colonne per piglià più o menu spaziu, mentre chì u restu .cols ugualmente divide u restu, cù classi di colonna specifiche cum'è .col-7.
Auto-dimensionamento
L'esempiu quì sottu usa una utilità flexbox per centru verticalmente u cuntenutu è cambia .colin .col-autocusì chì e vostre colonne occupanu solu u spaziu quantu necessariu. In altre modu, a colonna si mette nantu à a dimensione di u cuntenutu.
Puderete allora remix chì una volta di novu cù classi di colonna specifica di dimensione.
Aduprate a .form-inlineclassa per vede una seria di etichette, cuntrolli di forma, è buttone nantu à una sola fila horizontale. I cuntrolli di forma in forme in linea varianu ligeramente da i so stati predeterminati.
I cuntrolli sò display: flex, colapsendu ogni spaziu biancu HTML è chì vi permettenu di furnisce u cuntrollu di l' allineamentu cù spazii è utilità flexbox .
I cuntrolli è i gruppi di input ricevenu width: autoper annullà u Bootstrap predeterminatu width: 100%.
I cuntrolli appariscenu solu in linea in i vetri chì sò almenu 576px di larghezza per cuntà e viste strette in i dispositi mobili.
Pudete bisognu di indirizzà manualmente a larghezza è l'allineamentu di i cuntrolli di forma individuale cù utilità di spaziatura (cum'è mostratu quì sottu). Infine, assicuratevi di include sempre un <label>cuntrolu cù ogni forma di cuntrollu, ancu s'ellu avete bisognu di ammuccià da i visitori chì ùn sò micca screenreader cù .sr-only.
I cuntrolli di forma persunalizati è e selezzione sò ancu supportati.
Alternative à l'etichette nascoste
Tecnulugie d'assistenza cum'è i lettori di schermu avarà prublemi cù i vostri formi se ùn include micca una etichetta per ogni input. Per queste forme inline, pudete ammuccià l'etichette cù a .sr-onlyclassa. Ci sò altri metudi alternativi di furnisce una etichetta per i tecnulugii assistivi, cum'è u aria-label, aria-labelledbyo titlel'attributu. Se nimu di questi sò prisenti, i tecnulugii assistivi ponu ricorrere à l'usu di l' placeholderattributu, se presente, ma nutate chì l'usu di placeholdercum'è un sustitutu per altri metudi di etichettatura ùn hè micca cunsigliatu.
Testu d'aiutu
U testu d'aiutu à u livellu di bloccu in forme pò esse creatu cù .form-text(cunnisciutu prima cum'è .help-blockin v3). U testu d'aiutu in linea pò esse implementatu in modu flessibile utilizendu qualsiasi elementu HTML in linea è classi di utilità cum'è .text-muted.
Associà u testu d'aiutu cù cuntrolli di forma
U testu di l'aiutu deve esse assuciatu esplicitamente cù u cuntrollu di forma chì hè in relazione cù l'usu di l' aria-describedbyattributu. Questu hà da assicurà chì e tecnulugii d'assistenza, cum'è i lettori di schermu, annunceranu stu testu d'aiutu quandu l'utilizatore si cuncentra o entra in u cuntrollu.
U testu di l'aiutu sottu inputs pò esse stilatu cù .form-text. Questa classa include display: blockè aghjunghje un pocu di margine superiore per un spaziu faciule da l'input sopra.
A vostra password deve esse 8-20 caratteri, cuntene lettere è numeri, è ùn deve micca cuntene spazii, caratteri speciali o emoji.
U testu in linea pò utilizà qualsiasi elementu HTML tipicu in linea (sia un <small>, <span>, o qualcosa d'altru) senza nunda più di una classa di utilità.
Forme disabilitate
Aghjunghjite l' disabledattributu booleanu nantu à un input per prevene l'interazzione di l'utilizatori è fà chì pare più liggeru.
Aghjunghjite l' disabledattributu à a <fieldset>per disattivà tutti i cuntrolli.
Caveat cù ancore
Per automaticamente, i navigatori trattanu tutti i cuntrolli di forma nativa ( <input>, <select>è <button>elementi) in un <fieldset disabled>cum'è disabilitati, impediscendu l'interazzione di u teclatu è di u mouse nantu à elli. In ogni casu, se a vostra forma include ancu <a ... class="btn btn-*">elementi, questi saranu solu un stile di pointer-events: none. Cum'è nutatu in a sezione nantu à u statu disattivatu per i buttoni (è in particulare in a sub-sezione per l'elementi di l'ancora), sta pruprietà CSS ùn hè ancu standardizzata è ùn hè micca cumplettamente supportata in Internet Explorer 10, è ùn impedisce micca l'utilizatori di u teclatu. capaci di fucalizza o attivà sti ligami. Allora per esse sicuru, utilizate JavaScript persunalizatu per disattivà tali ligami.
Compatibilità cross-browser
Mentre chì Bootstrap applicà sti stili in tutti i navigatori, Internet Explorer 11 è sottu ùn sustene micca cumplettamente l' disabledattributu in un <fieldset>. Aduprate JavaScript persunalizatu per disattivà u fieldset in questi navigatori.
Validazione
Fornite feedback preziosi è azzione à i vostri utilizatori cù validazione di forma HTML5 - dispunibule in tutti i nostri navigatori supportati . Sceglite da u feedback di validazione predeterminatu di u navigatore, o implementate messagi persunalizati cù e nostre classi integrate è JavaScript starter.
Attualmente ricumandemu d'utilizà stili di validazione persunalizati, postu chì i missaghji di validazione predeterminati di u navigatore nativu ùn sò micca sempre esposti à tecnulugii d'assistenza in tutti i navigatori (in particulare, Chrome in desktop è mobile).
Cumu funziona
Eccu cumu funziona a validazione di forma cù Bootstrap:
A validazione di forma HTML hè applicata via e duie pseudo-classi di CSS, :invalidè :valid. Hè applicà à <input>, <select>, è <textarea>elementi.
Bootstrap scopre i stili :invalidè :validà a classe parent .was-validated, generalmente appiicata à u <form>. Altrimenti, ogni campu obligatoriu senza valore si mostra cum'è invalidu nantu à a carica di a pagina. In questu modu, pudete sceglie quandu l'attivà (tipicamenti dopu a prova di sottumissione di forma).
Per resettate l'apparizione di u furmulariu (per esempiu, in u casu di sottumissioni di forma dinamica cù AJAX), sguassate a .was-validatedclassa da u <form>novu dopu a sottumissione.
Comu fallback, .is-invalidè e .is-validclassi ponu esse aduprate invece di e pseudo-classi per a validazione di u servitore . Ùn necessitanu micca una .was-validatedclasse di genitori.
A causa di limitazioni in u funziunamentu di u CSS, ùn pudemu micca (attualmente) applicà stili à un <label>chì vene prima di un cuntrollu di forma in u DOM senza l'aiutu di JavaScript persunalizatu.
Tutti i navigatori muderni supportanu l' API di validazione di limitazione , una seria di metudi JavaScript per cunvalidà i cuntrolli di forma.
I missaghji di feedback ponu utilizà i predefiniti di u navigatore (differenti per ogni navigatore, è unstilable via CSS) o i nostri stili di feedback persunalizati cù HTML è CSS supplementari.
Pudete furnisce missaghji di validità persunalizati setCustomValidityin JavaScript.
In questu in mente, cunzidira i seguenti demo per i nostri stili di validazione di forma persunalizati, classi opzionali di u servitore, è predefiniti di u navigatore.
Stili persunalizati
Per i missaghji di validazione di forma Bootstrap persunalizati, avete bisognu di aghjunghje l' novalidateattributu booleanu à u vostru <form>. Questu disattiva i tooltips di feedback predeterminati di u navigatore, ma ancu furnisce l'accessu à l'API di validazione di forma in JavaScript. Pruvate di mandà u furmulariu sottu; u nostru JavaScript intercepterà u buttone di invià è vi trasmetterà feedback. Quandu pruvate di mandà, vi vede i stili :invalidè :validapplicati à i vostri cuntrolli di forma.
Stili di feedback persunalizati applicanu culori persunalizati, cunfini, stili di focus è icone di fondo per cumunicà megliu i feedback. L'icone di fondo per <select>s sò dispunibuli solu cù .custom-select, è micca .form-control.
Predefiniti di u navigatore
Ùn avete micca interessatu à i missaghji di feedback di validazione persunalizati o scrive JavaScript per cambià i cumpurtamenti di forma? Tuttu bè, pudete aduprà i predefiniti di u navigatore. Pruvate invià u furmulariu sottu. Sicondu u vostru navigatore è u sistema operativu, vi vede un stile di feedback un pocu sfarente.
Mentre chì sti stili di feedback ùn ponu micca esse stilati cù CSS, pudete sempre persunalizà u testu di feedback attraversu JavaScript.
Latu servitore
Hè ricumandemu di utilizà a validazione di u cliente, ma in casu avete bisognu di validazione di u servitore, pudete indicà campi di forma invalidi è validi cù .is-invalidè .is-valid. Nota chì .invalid-feedbackhè ancu supportatu cù queste classi.
Elementi supportati
Stili di validazione sò dispunibuli per i seguenti cuntrolli di forma è cumpunenti:
<input>s è <textarea>s cù .form-control(cumpresu finu à unu .form-controlin gruppi di input)
<select>s cun .form-controlo.custom-select
.form-checks
.custom-checkboxs è .custom-radios
.custom-file
Tooltips
Se u vostru layout di furmulariu permette, pudete scambià e .{valid|invalid}-feedbackclassi per .{valid|invalid}-tooltipe classi per visualizà feedback di validazione in un tooltip stilatu. Assicuratevi di avè un genitore cun position: relativeellu per u posizionamentu di u tooltip. In l'esempiu sottu, i nostri classi di colonna anu digià questu, ma u vostru prughjettu pò esse bisognu di una configurazione alternativa.
Customizing
I stati di validazione ponu esse persunalizati via Sass cù a $form-validation-statesmappa. Situatu in u nostru _variables.scssschedariu, sta mappa di Sass hè in loop per generà i stati predefiniti valid/ invalidvalidazione. Includite hè una mappa nidificata per persunalizà u culore è l'icona di ogni statu. Mentre chì nisun altru statu hè supportatu da i navigatori, quelli chì utilizanu stili persunalizati ponu facilmente aghjunghje feedback di forma più cumplessa.
Per piacè nutate chì ùn ricumandemu micca di persunalizà questi valori senza ancu mudificà u form-validation-statemixin.
Forme persunalizate
Per ancu più persunalizazione è cunsistenza di u navigatore, utilizate i nostri elementi di forma cumplettamente persunalizati per rimpiazzà i predefiniti di u navigatore. Sò custruiti nantu à u marcatu semanticu è accessibile, cusì sò rimpiazzamenti solidi per qualsiasi cuntrollu di forma predeterminata.
Checkboxes è radiu
Ogni casella di spunta è radiu <input>è <label>accoppiamentu sò impannillati in un <div>per creà u nostru cuntrollu persunalizatu. Strutturalmente, questu hè u stessu approcciu cum'è u nostru predeterminatu .form-check.
Utilizemu u selettore di fratellu ( ~) per tutti i nostri <input>stati - cum'è :checked- per stilà bè u nostru indicatore di forma persunalizata. Quandu si combina cù a .custom-control-labelclassa, pudemu ancu stilà u testu per ogni articulu basatu annantu à u <input>statu.
Ocultemu u predefinitu <input>è opacityutilizemu .custom-control-labelper custruisce un novu indicatore di forma persunalizata in u so locu cù ::beforeè ::after. Sfortunatamente, ùn pudemu micca custruisce un persunalizatu da solu <input>perchè CSS contentùn funziona micca in quellu elementu.
In i stati verificati, usemu icone SVG incrustate base64 da Open Iconic . Questu ci furnisce u megliu cuntrollu per u stilu è u posizionamentu in i navigatori è i dispositi.
Checkboxes
I checkboxes persunalizati ponu ancu aduprà a :indeterminatepseudo classa quandu si stallanu manualmente via JavaScript (ùn ci hè micca un attributu HTML dispunibule per specificà lu).
Sè vo aduprate jQuery, qualcosa cum'è questu deve esse abbastanza:
Radios
In linea
Disabilitatu
I caselle di cuntrollu persunalizati è i radii ponu ancu esse disattivati. Aghjunghjite l' disabledattributu booleanu <input>è l'indicatore persunalizatu è a descrizzione di l'etichetta saranu automaticamente stilati.
Cambia
Un switch hà u marcatu di una casella di cuntrollu persunalizata, ma usa a .custom-switchclassa per rende un switch toggle. I switches sustenenu ancu l' disabledattributu.
Selezziunà menu
I menu persunalizati <select>necessitanu solu una classa persunalizata, .custom-selectper attivà i stili persunalizati. I stili persunalizati sò limitati à l' <select>apparenza iniziale è ùn ponu micca mudificà i <option>s per via di limitazioni di u navigatore.
Pudete ancu sceglie trà picculi è grandi selezioni persunalizati per currisponde à i nostri inputs di testu di dimensioni simili.
L' multipleattributu hè ancu supportatu:
Cum'è l' sizeattributu:
Gamma
Crea <input type="range">cuntrolli persunalizati cù .custom-range. A traccia (u sfondate) è u pollice (u valore) sò tramindui stilati per apparisce u listessu in i navigatori. Siccomu solu IE è Firefox supportanu "rimplendu" a so traccia da a manca o à a diritta di u pollice cum'è un mezzu per indicà visualmente u prugressu, ùn l'avete micca supportatu.
L'input di intervalli anu valori impliciti per mine max- 0è 100, rispettivamente. Pudete specificà novi valori per quelli chì utilizanu l' attributi minè .max
Per difettu, u range inputs "snap" à i valori interi. Per cambià questu, pudete specificà un stepvalore. In l'esempiu sottu, duppiemu u numeru di passi usendu step="0.5".
navigatore di schedari
U plugin cunsigliatu per animà l'input di file persunalizatu: bs-custom-file-input , hè ciò chì usemu attualmente quì in i nostri documenti.
L'input di u schedariu hè u più gnarly di u gruppu è richiede JavaScript supplementu se vulete cunnessu cù u funziunale Sceglie u schedariu ... è u testu di u nome di u schedariu sceltu.
Ocultemu u schedariu predeterminatu <input>via opacityè invece stile u <label>. U buttone hè generatu è posizionatu cù ::after. Infine, dichjaremu a widthè heightnantu à u <input>per u spaziu propiu per u cuntenutu circundante.
Traduce o persunalizà e stringhe cù SCSS
A :lang()pseudo-classe hè aduprata per permette a traduzzione di u testu "Browse" in altre lingue. Override o aghjunghje entrate à a $custom-file-textvariabile Sass cù l'etichetta di lingua pertinente è e stringhe localizzate. I strings inglesi ponu esse persunalizati in u listessu modu. Per esempiu, eccu cumu si pò aghjunghje una traduzzione spagnola (u codice di lingua spagnola hè es):
Eccu lang(es)in azzione nantu à l'input di file persunalizati per una traduzzione spagnola:
Averete bisognu di stabilisce a lingua di u vostru documentu (o subtree) currettamente per esse mostratu u testu currettu. Questu pò esse fattu utilizendu l' langattributu nantu à l' <html>elementu o l' Content-Languageintestazione HTTP , frà altri metudi.
Traducendu o persunalizà e stringhe cù HTML
Bootstrap furnisce ancu un modu per traduce u testu "Browse" in HTML cù l' data-browseattributu chì pò esse aghjuntu à l'etiqueta di input persunalizata (esempiu in Olandese):