Sourceਫਾਰਮ
ਫਾਰਮ ਨਿਯੰਤਰਣ ਸ਼ੈਲੀਆਂ, ਲੇਆਉਟ ਵਿਕਲਪਾਂ, ਅਤੇ ਫਾਰਮਾਂ ਦੀ ਇੱਕ ਵਿਸ਼ਾਲ ਕਿਸਮ ਬਣਾਉਣ ਲਈ ਕਸਟਮ ਭਾਗਾਂ ਲਈ ਉਦਾਹਰਨਾਂ ਅਤੇ ਵਰਤੋਂ ਦਿਸ਼ਾ-ਨਿਰਦੇਸ਼।
ਸੰਖੇਪ ਜਾਣਕਾਰੀ
ਬੂਟਸਟਰੈਪ ਦੇ ਫਾਰਮ ਨਿਯੰਤਰਣ ਕਲਾਸਾਂ ਦੇ ਨਾਲ ਸਾਡੇ ਰੀਬੂਟ ਕੀਤੇ ਫਾਰਮ ਸਟਾਈਲ 'ਤੇ ਫੈਲਦੇ ਹਨ। ਬ੍ਰਾਊਜ਼ਰਾਂ ਅਤੇ ਡਿਵਾਈਸਾਂ ਵਿੱਚ ਵਧੇਰੇ ਇਕਸਾਰ ਰੈਂਡਰਿੰਗ ਲਈ ਉਹਨਾਂ ਦੇ ਅਨੁਕੂਲਿਤ ਡਿਸਪਲੇ ਨੂੰ ਚੁਣਨ ਲਈ ਇਹਨਾਂ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ।
ਨਵੇਂ ਇਨਪੁਟ ਨਿਯੰਤਰਣ ਜਿਵੇਂ ਕਿ ਈਮੇਲ ਤਸਦੀਕ, ਨੰਬਰ ਚੋਣ, ਅਤੇ ਹੋਰ ਬਹੁਤ ਕੁਝ ਦਾ ਲਾਭ ਲੈਣ ਲਈ type
ਸਾਰੇ ਇਨਪੁਟਸ (ਜਿਵੇਂ email
ਈਮੇਲ ਪਤੇ ਜਾਂ ਸੰਖਿਆਤਮਕ ਜਾਣਕਾਰੀ ਲਈ) 'ਤੇ ਇੱਕ ਢੁਕਵੀਂ ਵਿਸ਼ੇਸ਼ਤਾ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਯਕੀਨੀ ਬਣਾਓ ।number
ਇੱਥੇ ਬੂਟਸਟਰੈਪ ਦੇ ਫਾਰਮ ਸਟਾਈਲ ਦਾ ਪ੍ਰਦਰਸ਼ਨ ਕਰਨ ਲਈ ਇੱਕ ਤੇਜ਼ ਉਦਾਹਰਨ ਹੈ। ਲੋੜੀਂਦੀਆਂ ਕਲਾਸਾਂ, ਫਾਰਮ ਲੇਆਉਟ, ਅਤੇ ਹੋਰ ਬਹੁਤ ਕੁਝ ਬਾਰੇ ਦਸਤਾਵੇਜ਼ਾਂ ਲਈ ਪੜ੍ਹਦੇ ਰਹੋ।
ਲਿਖਤੀ ਰੂਪ ਨਿਯੰਤਰਣ - ਜਿਵੇਂ ਕਿ <input>
s, <select>
s, ਅਤੇ <textarea>
s - ਕਲਾਸ ਦੇ ਨਾਲ ਸਟਾਈਲ ਕੀਤੇ ਗਏ ਹਨ .form-control
। ਆਮ ਦਿੱਖ, ਫੋਕਸ ਸਥਿਤੀ, ਆਕਾਰ, ਅਤੇ ਹੋਰ ਲਈ ਸਟਾਈਲ ਸ਼ਾਮਲ ਹਨ।
ਹੋਰ ਸਟਾਈਲ s ਲਈ ਸਾਡੇ ਕਸਟਮ ਫਾਰਮਾਂ ਦੀ ਪੜਚੋਲ ਕਰਨਾ ਯਕੀਨੀ ਬਣਾਓ।<select>
ਫਾਈਲ ਇਨਪੁਟਸ ਲਈ, .form-control
ਲਈ ਸਵੈਪ ਕਰੋ .form-control-file
।
ਆਕਾਰ
.form-control-lg
ਵਰਗੀਆਂ ਅਤੇ ਵਰਗਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਉਚਾਈਆਂ ਸੈੱਟ ਕਰੋ .form-control-sm
।
ਸਿਰਫ ਪੜ੍ਹਨ ਲਈ
readonly
ਇੰਪੁੱਟ ਦੇ ਮੁੱਲ ਨੂੰ ਸੋਧਣ ਤੋਂ ਰੋਕਣ ਲਈ ਇੱਕ ਇਨਪੁਟ 'ਤੇ ਬੂਲੀਅਨ ਗੁਣ ਸ਼ਾਮਲ ਕਰੋ । ਸਿਰਫ਼-ਪੜ੍ਹਨ ਲਈ ਇਨਪੁੱਟ ਹਲਕੇ ਦਿਖਾਈ ਦਿੰਦੇ ਹਨ (ਬਿਲਕੁਲ ਅਯੋਗ ਇਨਪੁਟਸ ਵਾਂਗ), ਪਰ ਮਿਆਰੀ ਕਰਸਰ ਨੂੰ ਬਰਕਰਾਰ ਰੱਖਦੇ ਹਨ।
ਸਿਰਫ਼ ਪੜ੍ਹਨ ਲਈ ਸਾਦਾ ਟੈਕਸਟ
ਜੇਕਰ ਤੁਸੀਂ <input readonly>
ਆਪਣੇ ਫਾਰਮ ਵਿੱਚ ਸਾਦੇ ਟੈਕਸਟ ਦੇ ਰੂਪ ਵਿੱਚ ਸਟਾਈਲ ਕੀਤੇ ਤੱਤ ਰੱਖਣਾ ਚਾਹੁੰਦੇ ਹੋ, .form-control-plaintext
ਤਾਂ ਡਿਫਾਲਟ ਫਾਰਮ ਫੀਲਡ ਸਟਾਈਲਿੰਗ ਨੂੰ ਹਟਾਉਣ ਅਤੇ ਸਹੀ ਹਾਸ਼ੀਏ ਅਤੇ ਪੈਡਿੰਗ ਨੂੰ ਸੁਰੱਖਿਅਤ ਰੱਖਣ ਲਈ ਕਲਾਸ ਦੀ ਵਰਤੋਂ ਕਰੋ।
ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਖਿਤਿਜੀ ਤੌਰ 'ਤੇ ਸਕ੍ਰੋਲ ਕਰਨ ਯੋਗ ਰੇਂਜ ਇਨਪੁਟਸ ਸੈੱਟ ਕਰੋ .form-control-range
।
ਚੈੱਕਬਾਕਸ ਅਤੇ ਰੇਡੀਓ
ਡਿਫੌਲਟ ਚੈਕਬਾਕਸ ਅਤੇ ਰੇਡੀਓ ਦੀ ਮਦਦ ਨਾਲ ਸੁਧਾਰੇ ਜਾਂਦੇ ਹਨ .form-check
, ਦੋਨਾਂ ਇਨਪੁਟ ਕਿਸਮਾਂ ਲਈ ਇੱਕ ਸਿੰਗਲ ਕਲਾਸ ਜੋ ਉਹਨਾਂ ਦੇ HTML ਤੱਤਾਂ ਦੇ ਖਾਕੇ ਅਤੇ ਵਿਵਹਾਰ ਵਿੱਚ ਸੁਧਾਰ ਕਰਦਾ ਹੈ । ਚੈਕਬਾਕਸ ਇੱਕ ਸੂਚੀ ਵਿੱਚ ਇੱਕ ਜਾਂ ਕਈ ਵਿਕਲਪਾਂ ਨੂੰ ਚੁਣਨ ਲਈ ਹੁੰਦੇ ਹਨ, ਜਦੋਂ ਕਿ ਰੇਡੀਓ ਬਹੁਤ ਸਾਰੇ ਵਿੱਚੋਂ ਇੱਕ ਵਿਕਲਪ ਚੁਣਨ ਲਈ ਹੁੰਦੇ ਹਨ।
ਅਸਮਰੱਥ ਚੈੱਕਬਾਕਸ ਅਤੇ ਰੇਡੀਓ ਸਮਰਥਿਤ ਹਨ। ਵਿਸ਼ੇਸ਼ਤਾ ਇਨਪੁਟ ਦੀ disabled
ਸਥਿਤੀ ਨੂੰ ਦਰਸਾਉਣ ਵਿੱਚ ਮਦਦ ਕਰਨ ਲਈ ਇੱਕ ਹਲਕਾ ਰੰਗ ਲਾਗੂ ਕਰੇਗੀ।
ਚੈੱਕਬਾਕਸ ਅਤੇ ਰੇਡੀਓ ਬਟਨ HTML-ਅਧਾਰਿਤ ਫਾਰਮ ਪ੍ਰਮਾਣਿਕਤਾ ਦਾ ਸਮਰਥਨ ਕਰਦੇ ਹਨ ਅਤੇ ਸੰਖੇਪ, ਪਹੁੰਚਯੋਗ ਲੇਬਲ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ। ਜਿਵੇਂ ਕਿ, ਸਾਡੇ <input>
s ਅਤੇ <label>
s ਭੈਣ-ਭਰਾ ਤੱਤ ਹਨ , ਇੱਕ <input>
ਦੇ ਅੰਦਰ ਇੱਕ ਦੇ ਉਲਟ <label>
। ਇਹ ਥੋੜਾ ਹੋਰ ਵਰਬੋਸ ਹੈ ਕਿਉਂਕਿ ਤੁਹਾਨੂੰ ਅਤੇ ਨਾਲ ਸੰਬੰਧਿਤ ਕਰਨ ਲਈ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਅਤੇ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਨਾ ਚਾਹੀਦਾ id
ਹੈ ।for
<input>
<label>
ਡਿਫੌਲਟ (ਸਟੈਕਡ)
ਪੂਰਵ-ਨਿਰਧਾਰਤ ਤੌਰ 'ਤੇ, ਕਿਸੇ ਵੀ ਗਿਣਤੀ ਦੇ ਚੈਕਬਾਕਸ ਅਤੇ ਰੇਡੀਓ ਜੋ ਤਤਕਾਲੀ ਭੈਣ-ਭਰਾ ਹਨ, ਨੂੰ ਲੰਬਕਾਰੀ ਸਟੈਕ ਕੀਤਾ ਜਾਵੇਗਾ ਅਤੇ ਨਾਲ ਢੁਕਵੀਂ ਥਾਂ ਦਿੱਤੀ ਜਾਵੇਗੀ .form-check
।
ਇਨ ਲਾਇਨ
.form-check-inline
ਕਿਸੇ ਵੀ ਵਿੱਚ ਜੋੜ ਕੇ ਇੱਕੋ ਖਿਤਿਜੀ ਕਤਾਰ 'ਤੇ ਚੈਕਬਾਕਸ ਜਾਂ ਰੇਡੀਓ ਦਾ ਸਮੂਹ ਕਰੋ .form-check
।
ਬਿਨਾਂ ਲੇਬਲ ਦੇ
.position-static
ਇਨਪੁਟਸ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ .form-check
ਜਿਸ ਵਿੱਚ ਕੋਈ ਲੇਬਲ ਟੈਕਸਟ ਨਹੀਂ ਹੈ। ਅਜੇ ਵੀ ਸਹਾਇਕ ਤਕਨਾਲੋਜੀਆਂ ਲਈ ਲੇਬਲ ਦੇ ਕੁਝ ਰੂਪ ਪ੍ਰਦਾਨ ਕਰਨਾ ਯਾਦ ਰੱਖੋ (ਉਦਾਹਰਨ ਲਈ, ਦੀ ਵਰਤੋਂ ਕਰਨਾ aria-label
)।
ਖਾਕਾ
ਕਿਉਂਕਿ ਬੂਟਸਟਰੈਪ ਲਾਗੂ ਹੁੰਦਾ ਹੈ display: block
ਅਤੇ width: 100%
ਸਾਡੇ ਲਗਭਗ ਸਾਰੇ ਫਾਰਮ ਨਿਯੰਤਰਣਾਂ 'ਤੇ, ਫਾਰਮ ਡਿਫੌਲਟ ਤੌਰ 'ਤੇ ਵਰਟੀਕਲ ਸਟੈਕ ਹੋਣਗੇ। ਪ੍ਰਤੀ-ਫਾਰਮ ਦੇ ਆਧਾਰ 'ਤੇ ਇਸ ਲੇਆਉਟ ਨੂੰ ਬਦਲਣ ਲਈ ਵਾਧੂ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਜਾ ਸਕਦੀ ਹੈ।
.form-group
ਕਲਾਸ ਫਾਰਮਾਂ ਵਿੱਚ ਕੁਝ ਢਾਂਚੇ ਨੂੰ ਜੋੜਨ ਦਾ ਸਭ ਤੋਂ ਆਸਾਨ ਤਰੀਕਾ ਹੈ । ਇਹ ਇੱਕ ਲਚਕਦਾਰ ਕਲਾਸ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ ਜੋ ਲੇਬਲਾਂ, ਨਿਯੰਤਰਣਾਂ, ਵਿਕਲਪਿਕ ਮਦਦ ਟੈਕਸਟ, ਅਤੇ ਫਾਰਮ ਪ੍ਰਮਾਣਿਕਤਾ ਮੈਸੇਜਿੰਗ ਦੇ ਸਹੀ ਸਮੂਹ ਨੂੰ ਉਤਸ਼ਾਹਿਤ ਕਰਦਾ ਹੈ। ਮੂਲ ਰੂਪ ਵਿੱਚ ਇਹ ਸਿਰਫ ਲਾਗੂ ਹੁੰਦਾ ਹੈ margin-bottom
, ਪਰ ਇਹ ਲੋੜ ਅਨੁਸਾਰ ਵਾਧੂ ਸ਼ੈਲੀਆਂ ਨੂੰ ਚੁਣਦਾ ਹੈ .form-inline
। <fieldset>
ਇਸਨੂੰ s, <div>
s, ਜਾਂ ਲਗਭਗ ਕਿਸੇ ਹੋਰ ਤੱਤ ਨਾਲ ਵਰਤੋ ।
ਸਾਡੀਆਂ ਗਰਿੱਡ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਹੋਰ ਗੁੰਝਲਦਾਰ ਫਾਰਮ ਬਣਾਏ ਜਾ ਸਕਦੇ ਹਨ। ਇਹਨਾਂ ਨੂੰ ਫਾਰਮ ਲੇਆਉਟ ਲਈ ਵਰਤੋ ਜਿਹਨਾਂ ਲਈ ਕਈ ਕਾਲਮਾਂ, ਵੱਖ-ਵੱਖ ਚੌੜਾਈਆਂ, ਅਤੇ ਵਾਧੂ ਅਲਾਈਨਮੈਂਟ ਵਿਕਲਪਾਂ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ।
.row
ਤੁਸੀਂ ਸਾਡੀ ਸਟੈਂਡਰਡ ਗਰਿੱਡ ਕਤਾਰ ਦੀ ਇੱਕ ਪਰਿਵਰਤਨ ਲਈ ਵੀ ਅਦਲਾ-ਬਦਲੀ ਕਰ ਸਕਦੇ ਹੋ .form-row
ਜੋ ਸਖਤ ਅਤੇ ਵਧੇਰੇ ਸੰਖੇਪ ਲੇਆਉਟ ਲਈ ਡਿਫੌਲਟ ਕਾਲਮ ਗਟਰਾਂ ਨੂੰ ਓਵਰਰਾਈਡ ਕਰਦੀ ਹੈ।
ਗਰਿੱਡ ਸਿਸਟਮ ਨਾਲ ਹੋਰ ਗੁੰਝਲਦਾਰ ਲੇਆਉਟ ਵੀ ਬਣਾਏ ਜਾ ਸਕਦੇ ਹਨ।
.row
ਗਰੁੱਪ ਬਣਾਉਣ ਲਈ ਕਲਾਸ ਨੂੰ ਜੋੜ ਕੇ .col-*-*
ਅਤੇ ਆਪਣੇ ਲੇਬਲਾਂ ਅਤੇ ਨਿਯੰਤਰਣਾਂ ਦੀ ਚੌੜਾਈ ਨੂੰ ਨਿਸ਼ਚਿਤ ਕਰਨ ਲਈ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਗਰਿੱਡ ਦੇ ਨਾਲ ਹਰੀਜੱਟਲ ਫਾਰਮ ਬਣਾਓ। .col-form-label
ਆਪਣੇ s ਵਿੱਚ ਵੀ ਸ਼ਾਮਲ ਕਰਨਾ ਯਕੀਨੀ ਬਣਾਓ <label>
ਤਾਂ ਜੋ ਉਹ ਉਹਨਾਂ ਦੇ ਸੰਬੰਧਿਤ ਫਾਰਮ ਨਿਯੰਤਰਣਾਂ ਨਾਲ ਲੰਬਕਾਰੀ ਤੌਰ 'ਤੇ ਕੇਂਦਰਿਤ ਹੋਣ।
ਕਦੇ-ਕਦੇ, ਤੁਹਾਨੂੰ ਲੋੜੀਂਦੇ ਸੰਪੂਰਣ ਅਲਾਈਨਮੈਂਟ ਬਣਾਉਣ ਲਈ ਹਾਸ਼ੀਏ ਜਾਂ ਪੈਡਿੰਗ ਉਪਯੋਗਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਲੋੜ ਹੋ ਸਕਦੀ ਹੈ। ਉਦਾਹਰਨ ਲਈ, ਅਸੀਂ padding-top
ਟੈਕਸਟ ਬੇਸਲਾਈਨ ਨੂੰ ਬਿਹਤਰ ਢੰਗ ਨਾਲ ਇਕਸਾਰ ਕਰਨ ਲਈ ਸਾਡੇ ਸਟੈਕ ਕੀਤੇ ਰੇਡੀਓ ਇਨਪੁਟਸ ਲੇਬਲ ਨੂੰ ਹਟਾ ਦਿੱਤਾ ਹੈ।
ਅਤੇ ਦੇ ਆਕਾਰ ਦਾ ਸਹੀ ਢੰਗ ਨਾਲ ਪਾਲਣ ਕਰਨ ਲਈ ਆਪਣੇ s ਜਾਂ .col-form-label-sm
s ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਯਕੀਨੀ ਬਣਾਓ ।.col-form-label-lg
<label>
<legend>
.form-control-lg
.form-control-sm
ਕਾਲਮ ਦਾ ਆਕਾਰ
ਜਿਵੇਂ ਕਿ ਪਿਛਲੀਆਂ ਉਦਾਹਰਣਾਂ ਵਿੱਚ ਦਿਖਾਇਆ ਗਿਆ ਹੈ, ਸਾਡਾ ਗਰਿੱਡ ਸਿਸਟਮ ਤੁਹਾਨੂੰ a ਜਾਂ .col
ਦੇ ਅੰਦਰ s ਦੀ ਕੋਈ ਵੀ ਸੰਖਿਆ ਰੱਖਣ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ । ਉਹ ਉਪਲਬਧ ਚੌੜਾਈ ਨੂੰ ਉਹਨਾਂ ਵਿਚਕਾਰ ਬਰਾਬਰ ਵੰਡਣਗੇ। ਤੁਸੀਂ ਵੱਧ ਜਾਂ ਘੱਟ ਥਾਂ ਲੈਣ ਲਈ ਆਪਣੇ ਕਾਲਮਾਂ ਦਾ ਇੱਕ ਸਬਸੈੱਟ ਵੀ ਚੁਣ ਸਕਦੇ ਹੋ, ਜਦੋਂ ਕਿ ਬਾਕੀ s ਬਾਕੀ ਨੂੰ ਬਰਾਬਰ ਵੰਡ ਸਕਦੇ ਹੋ, ਜਿਵੇਂ ਕਿ ਖਾਸ ਕਾਲਮ ਕਲਾਸਾਂ ਨਾਲ ।.row
.form-row
.col
.col-7
ਆਟੋ-ਸਾਈਜ਼ਿੰਗ
ਹੇਠਾਂ ਦਿੱਤੀ ਉਦਾਹਰਨ ਸਮੱਗਰੀ ਨੂੰ ਲੰਬਕਾਰੀ ਤੌਰ 'ਤੇ ਕੇਂਦਰਿਤ ਕਰਨ ਲਈ ਇੱਕ ਫਲੈਕਸਬਾਕਸ ਉਪਯੋਗਤਾ ਦੀ ਵਰਤੋਂ ਕਰਦੀ ਹੈ ਅਤੇ ਇਸ ਵਿੱਚ ਤਬਦੀਲੀਆਂ .col
ਕਰਦੀ ਹੈ .col-auto
ਤਾਂ ਜੋ ਤੁਹਾਡੇ ਕਾਲਮ ਲੋੜ ਅਨੁਸਾਰ ਹੀ ਜ਼ਿਆਦਾ ਥਾਂ ਲੈ ਸਕਣ। ਹੋਰ ਤਰੀਕੇ ਨਾਲ ਕਹੋ, ਕਾਲਮ ਦਾ ਆਕਾਰ ਸਮੱਗਰੀ ਦੇ ਆਧਾਰ 'ਤੇ ਹੁੰਦਾ ਹੈ।
ਤੁਸੀਂ ਫਿਰ ਇਸਨੂੰ ਆਕਾਰ-ਵਿਸ਼ੇਸ਼ ਕਾਲਮ ਕਲਾਸਾਂ ਦੇ ਨਾਲ ਇੱਕ ਵਾਰ ਫਿਰ ਰੀਮਿਕਸ ਕਰ ਸਕਦੇ ਹੋ।
ਅਤੇ ਬੇਸ਼ੱਕ ਕਸਟਮ ਫਾਰਮ ਨਿਯੰਤਰਣ ਸਮਰਥਿਤ ਹਨ।
.form-inline
ਇੱਕ ਸਿੰਗਲ ਹਰੀਜੱਟਲ ਕਤਾਰ 'ਤੇ ਲੇਬਲਾਂ, ਫਾਰਮ ਨਿਯੰਤਰਣਾਂ, ਅਤੇ ਬਟਨਾਂ ਦੀ ਲੜੀ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਲਈ ਕਲਾਸ ਦੀ ਵਰਤੋਂ ਕਰੋ । ਇਨਲਾਈਨ ਫਾਰਮਾਂ ਦੇ ਅੰਦਰ ਫਾਰਮ ਨਿਯੰਤਰਣ ਉਹਨਾਂ ਦੀਆਂ ਪੂਰਵ-ਨਿਰਧਾਰਤ ਸਥਿਤੀਆਂ ਤੋਂ ਥੋੜੇ ਵੱਖਰੇ ਹੁੰਦੇ ਹਨ।
- ਨਿਯੰਤਰਣ ਹਨ
display: flex
, ਕਿਸੇ ਵੀ HTML ਸਫੈਦ ਸਪੇਸ ਨੂੰ ਸਮੇਟਣਾ ਅਤੇ ਤੁਹਾਨੂੰ ਸਪੇਸਿੰਗ ਅਤੇ ਫਲੈਕਸਬਾਕਸ ਉਪਯੋਗਤਾਵਾਂ ਦੇ ਨਾਲ ਅਲਾਈਨਮੈਂਟ ਨਿਯੰਤਰਣ ਪ੍ਰਦਾਨ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦੇ ਹਨ।
- ਕੰਟਰੋਲ ਅਤੇ ਇਨਪੁਟ ਗਰੁੱਪ
width: auto
ਬੂਟਸਟਰੈਪ ਡਿਫੌਲਟ ਨੂੰ ਓਵਰਰਾਈਡ ਕਰਨ ਲਈ ਪ੍ਰਾਪਤ ਕਰਦੇ ਹਨ width: 100%
।
- ਨਿਯੰਤਰਣ ਕੇਵਲ ਉਹਨਾਂ ਵਿਊਪੋਰਟਾਂ ਵਿੱਚ ਇਨਲਾਈਨ ਦਿਖਾਈ ਦਿੰਦੇ ਹਨ ਜੋ ਮੋਬਾਈਲ ਡਿਵਾਈਸਾਂ 'ਤੇ ਤੰਗ ਵਿਊਪੋਰਟਾਂ ਲਈ ਖਾਤੇ ਵਿੱਚ ਘੱਟੋ-ਘੱਟ 576px ਚੌੜੇ ਹੁੰਦੇ ਹਨ।
ਤੁਹਾਨੂੰ ਸਪੇਸਿੰਗ ਉਪਯੋਗਤਾਵਾਂ (ਜਿਵੇਂ ਕਿ ਹੇਠਾਂ ਦਿਖਾਇਆ ਗਿਆ ਹੈ) ਦੇ ਨਾਲ ਵਿਅਕਤੀਗਤ ਰੂਪ ਨਿਯੰਤਰਣ ਦੀ ਚੌੜਾਈ ਅਤੇ ਅਲਾਈਨਮੈਂਟ ਨੂੰ ਹੱਥੀਂ ਸੰਬੋਧਿਤ ਕਰਨ ਦੀ ਲੋੜ ਹੋ ਸਕਦੀ ਹੈ । ਅੰਤ ਵਿੱਚ, ਹਰ ਇੱਕ ਫਾਰਮ ਨਿਯੰਤਰਣ ਦੇ ਨਾਲ ਹਮੇਸ਼ਾਂ ਇੱਕ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨਾ ਯਕੀਨੀ ਬਣਾਓ <label>
, ਭਾਵੇਂ ਤੁਹਾਨੂੰ ਇਸਨੂੰ ਗੈਰ-ਸਕ੍ਰੀਨ ਰੀਡਰ ਦਰਸ਼ਕਾਂ ਤੋਂ ਲੁਕਾਉਣ ਦੀ ਲੋੜ ਹੋਵੇ .sr-only
।
ਕਸਟਮ ਫਾਰਮ ਨਿਯੰਤਰਣ ਅਤੇ ਚੋਣ ਵੀ ਸਮਰਥਿਤ ਹਨ।
ਲੁਕਵੇਂ ਲੇਬਲਾਂ ਦੇ ਵਿਕਲਪ
ਸਹਾਇਕ ਤਕਨੀਕਾਂ ਜਿਵੇਂ ਕਿ ਸਕਰੀਨ ਰੀਡਰਾਂ ਨੂੰ ਤੁਹਾਡੇ ਫਾਰਮਾਂ ਨਾਲ ਸਮੱਸਿਆ ਹੋਵੇਗੀ ਜੇਕਰ ਤੁਸੀਂ ਹਰੇਕ ਇਨਪੁਟ ਲਈ ਇੱਕ ਲੇਬਲ ਸ਼ਾਮਲ ਨਹੀਂ ਕਰਦੇ ਹੋ। ਇਹਨਾਂ ਇਨਲਾਈਨ ਫਾਰਮਾਂ ਲਈ, ਤੁਸੀਂ .sr-only
ਕਲਾਸ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਲੇਬਲਾਂ ਨੂੰ ਲੁਕਾ ਸਕਦੇ ਹੋ। ਸਹਾਇਕ ਤਕਨੀਕਾਂ ਲਈ ਲੇਬਲ ਪ੍ਰਦਾਨ ਕਰਨ ਦੇ ਹੋਰ ਵਿਕਲਪਿਕ ਤਰੀਕੇ ਹਨ, ਜਿਵੇਂ ਕਿ aria-label
, aria-labelledby
ਜਾਂ title
ਗੁਣ। ਜੇਕਰ ਇਹਨਾਂ ਵਿੱਚੋਂ ਕੋਈ ਵੀ ਮੌਜੂਦ ਨਹੀਂ ਹੈ, ਤਾਂ ਸਹਾਇਕ ਤਕਨੀਕਾਂ placeholder
ਵਿਸ਼ੇਸ਼ਤਾ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦਾ ਸਹਾਰਾ ਲੈ ਸਕਦੀਆਂ ਹਨ, ਜੇਕਰ ਮੌਜੂਦ ਹੈ, ਪਰ ਨੋਟ ਕਰੋ ਕਿ placeholder
ਹੋਰ ਲੇਬਲਿੰਗ ਵਿਧੀਆਂ ਦੇ ਬਦਲ ਵਜੋਂ ਵਰਤਣ ਦੀ ਸਲਾਹ ਨਹੀਂ ਦਿੱਤੀ ਜਾਂਦੀ ਹੈ।
ਮਦਦ ਲਿਖਤ
ਫਾਰਮਾਂ ਵਿੱਚ ਬਲਾਕ-ਪੱਧਰ ਦੀ ਮਦਦ ਟੈਕਸਟ (ਪਹਿਲਾਂ v3 ਵਿੱਚ .form-text
ਜਾਣਿਆ ਜਾਂਦਾ ਸੀ) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਬਣਾਇਆ ਜਾ ਸਕਦਾ ਹੈ। .help-block
ਇਨਲਾਈਨ ਹੈਲਪ ਟੈਕਸਟ ਨੂੰ ਕਿਸੇ ਵੀ ਇਨਲਾਈਨ HTML ਐਲੀਮੈਂਟ ਅਤੇ ਉਪਯੋਗਤਾ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਲਚਕਦਾਰ ਤਰੀਕੇ ਨਾਲ ਲਾਗੂ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ .text-muted
।
ਫਾਰਮ ਨਿਯੰਤਰਣਾਂ ਨਾਲ ਮਦਦ ਟੈਕਸਟ ਨੂੰ ਜੋੜਨਾ
ਮਦਦ ਟੈਕਸਟ ਨੂੰ ਸਪਸ਼ਟ ਤੌਰ 'ਤੇ ਫਾਰਮ ਨਿਯੰਤਰਣ ਨਾਲ ਜੋੜਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ ਜੋ aria-describedby
ਵਿਸ਼ੇਸ਼ਤਾ ਦੀ ਵਰਤੋਂ ਨਾਲ ਸੰਬੰਧਿਤ ਹੈ। ਇਹ ਯਕੀਨੀ ਬਣਾਏਗਾ ਕਿ ਸਹਾਇਕ ਤਕਨਾਲੋਜੀਆਂ-ਜਿਵੇਂ ਕਿ ਸਕ੍ਰੀਨ ਰੀਡਰ-ਇਸ ਮਦਦ ਟੈਕਸਟ ਦੀ ਘੋਸ਼ਣਾ ਕਰਨਗੇ ਜਦੋਂ ਉਪਭੋਗਤਾ ਫੋਕਸ ਕਰਦਾ ਹੈ ਜਾਂ ਕੰਟਰੋਲ ਵਿੱਚ ਦਾਖਲ ਹੁੰਦਾ ਹੈ।
ਹੇਠਾਂ ਦਿੱਤੇ ਮਦਦ ਪਾਠ ਨੂੰ ਨਾਲ ਸਟਾਈਲ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ .form-text
। ਇਸ ਕਲਾਸ ਵਿੱਚ display: block
ਉੱਪਰ ਦਿੱਤੇ ਇਨਪੁਟਸ ਤੋਂ ਆਸਾਨ ਵਿੱਥ ਲਈ ਕੁਝ ਸਿਖਰਲਾ ਹਾਸ਼ੀਏ ਸ਼ਾਮਲ ਹਨ ਅਤੇ ਜੋੜਦੇ ਹਨ।
ਤੁਹਾਡਾ ਪਾਸਵਰਡ 8-20 ਅੱਖਰਾਂ ਦਾ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ, ਅੱਖਰ ਅਤੇ ਸੰਖਿਆਵਾਂ ਹੋਣੇ ਚਾਹੀਦੇ ਹਨ, ਅਤੇ ਇਸ ਵਿੱਚ ਸਪੇਸ, ਵਿਸ਼ੇਸ਼ ਅੱਖਰ, ਜਾਂ ਇਮੋਜੀ ਨਹੀਂ ਹੋਣੇ ਚਾਹੀਦੇ।
ਇਨਲਾਈਨ ਟੈਕਸਟ ਕਿਸੇ ਵੀ ਆਮ ਇਨਲਾਈਨ HTML ਤੱਤ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦਾ ਹੈ (ਇਹ ਇੱਕ <small>
, <span>
, ਜਾਂ ਕੁਝ ਹੋਰ ਹੋਵੇ) ਇੱਕ ਉਪਯੋਗਤਾ ਕਲਾਸ ਤੋਂ ਵੱਧ ਕੁਝ ਨਹੀਂ ਹੈ।
disabled
ਉਪਭੋਗਤਾ ਦੇ ਅੰਤਰਕਿਰਿਆਵਾਂ ਨੂੰ ਰੋਕਣ ਅਤੇ ਇਸਨੂੰ ਹਲਕਾ ਵਿਖਾਉਣ ਲਈ ਇੱਕ ਇਨਪੁਟ 'ਤੇ ਬੁਲੀਅਨ ਵਿਸ਼ੇਸ਼ਤਾ ਸ਼ਾਮਲ ਕਰੋ ।
ਅੰਦਰਲੇ ਸਾਰੇ ਨਿਯੰਤਰਣਾਂ ਨੂੰ ਅਯੋਗ ਕਰਨ disabled
ਲਈ a ਵਿੱਚ ਵਿਸ਼ੇਸ਼ਤਾ ਸ਼ਾਮਲ ਕਰੋ ।<fieldset>
ਲੰਗਰ ਦੇ ਨਾਲ ਚੇਤਾਵਨੀ
ਪੂਰਵ-ਨਿਰਧਾਰਤ ਤੌਰ 'ਤੇ, ਬ੍ਰਾਊਜ਼ਰ ਇੱਕ ਦੇ ਅੰਦਰ ਸਾਰੇ ਮੂਲ ਰੂਪ ਨਿਯੰਤਰਣ ( <input>
, <select>
ਅਤੇ <button>
ਤੱਤ) <fieldset disabled>
ਨੂੰ ਅਸਮਰੱਥ ਸਮਝਣਗੇ, ਉਹਨਾਂ 'ਤੇ ਕੀਬੋਰਡ ਅਤੇ ਮਾਊਸ ਦੇ ਆਪਸੀ ਤਾਲਮੇਲ ਨੂੰ ਰੋਕਦੇ ਹੋਏ। ਹਾਲਾਂਕਿ, ਜੇਕਰ ਤੁਹਾਡੇ ਫਾਰਮ ਵਿੱਚ <a ... class="btn btn-*">
ਤੱਤ ਵੀ ਸ਼ਾਮਲ ਹਨ, ਤਾਂ ਇਹਨਾਂ ਨੂੰ ਸਿਰਫ ਦੀ ਇੱਕ ਸ਼ੈਲੀ ਦਿੱਤੀ ਜਾਵੇਗੀ pointer-events: none
। ਜਿਵੇਂ ਕਿ ਬਟਨਾਂ ਲਈ ਅਯੋਗ ਸਥਿਤੀ ਬਾਰੇ ਭਾਗ ਵਿੱਚ ਨੋਟ ਕੀਤਾ ਗਿਆ ਹੈ (ਅਤੇ ਖਾਸ ਤੌਰ 'ਤੇ ਐਂਕਰ ਐਲੀਮੈਂਟਸ ਲਈ ਉਪ-ਭਾਗ ਵਿੱਚ), ਇਹ CSS ਵਿਸ਼ੇਸ਼ਤਾ ਅਜੇ ਪ੍ਰਮਾਣਿਤ ਨਹੀਂ ਹੈ ਅਤੇ ਇੰਟਰਨੈਟ ਐਕਸਪਲੋਰਰ 10 ਵਿੱਚ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਮਰਥਿਤ ਨਹੀਂ ਹੈ, ਅਤੇ ਕੀਬੋਰਡ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਹੋਣ ਤੋਂ ਨਹੀਂ ਰੋਕੇਗੀ। ਇਹਨਾਂ ਲਿੰਕਾਂ ਨੂੰ ਫੋਕਸ ਕਰਨ ਜਾਂ ਸਰਗਰਮ ਕਰਨ ਦੇ ਯੋਗ। ਇਸ ਲਈ ਸੁਰੱਖਿਅਤ ਰਹਿਣ ਲਈ, ਅਜਿਹੇ ਲਿੰਕਾਂ ਨੂੰ ਅਯੋਗ ਕਰਨ ਲਈ ਕਸਟਮ JavaScript ਦੀ ਵਰਤੋਂ ਕਰੋ।
ਕਰਾਸ-ਬ੍ਰਾਊਜ਼ਰ ਅਨੁਕੂਲਤਾ
disabled
ਜਦੋਂ ਕਿ ਬੂਟਸਟਰੈਪ ਇਹਨਾਂ ਸਟਾਈਲਾਂ ਨੂੰ ਸਾਰੇ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਲਾਗੂ ਕਰੇਗਾ, ਇੰਟਰਨੈੱਟ ਐਕਸਪਲੋਰਰ 11 ਅਤੇ ਇਸਤੋਂ ਹੇਠਾਂ ਇੱਕ 'ਤੇ ਵਿਸ਼ੇਸ਼ਤਾ ਦਾ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਮਰਥਨ ਨਹੀਂ ਕਰਦਾ <fieldset>
। ਇਹਨਾਂ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਫੀਲਡਸੈੱਟ ਨੂੰ ਅਯੋਗ ਕਰਨ ਲਈ ਕਸਟਮ JavaScript ਦੀ ਵਰਤੋਂ ਕਰੋ।
ਪ੍ਰਮਾਣਿਕਤਾ
HTML5 ਫਾਰਮ ਪ੍ਰਮਾਣਿਕਤਾ ਦੇ ਨਾਲ ਆਪਣੇ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਕੀਮਤੀ, ਕਾਰਵਾਈਯੋਗ ਫੀਡਬੈਕ ਪ੍ਰਦਾਨ ਕਰੋ- ਸਾਡੇ ਸਾਰੇ ਸਮਰਥਿਤ ਬ੍ਰਾਉਜ਼ਰਾਂ ਵਿੱਚ ਉਪਲਬਧ ਹੈ । ਬ੍ਰਾਊਜ਼ਰ ਡਿਫੌਲਟ ਪ੍ਰਮਾਣਿਕਤਾ ਫੀਡਬੈਕ ਵਿੱਚੋਂ ਚੁਣੋ, ਜਾਂ ਸਾਡੀਆਂ ਬਿਲਟ-ਇਨ ਕਲਾਸਾਂ ਅਤੇ ਸਟਾਰਟਰ JavaScript ਨਾਲ ਕਸਟਮ ਸੁਨੇਹਿਆਂ ਨੂੰ ਲਾਗੂ ਕਰੋ।
ਅਸੀਂ ਵਰਤਮਾਨ ਵਿੱਚ ਕਸਟਮ ਪ੍ਰਮਾਣਿਕਤਾ ਸ਼ੈਲੀਆਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਸਿਫ਼ਾਰਿਸ਼ ਕਰਦੇ ਹਾਂ, ਕਿਉਂਕਿ ਮੂਲ ਬ੍ਰਾਊਜ਼ਰ ਪੂਰਵ-ਨਿਰਧਾਰਤ ਪ੍ਰਮਾਣਿਕਤਾ ਸੁਨੇਹੇ ਸਾਰੇ ਬ੍ਰਾਊਜ਼ਰਾਂ (ਸਭ ਤੋਂ ਖਾਸ ਤੌਰ 'ਤੇ, ਡੈਸਕਟੌਪ ਅਤੇ ਮੋਬਾਈਲ 'ਤੇ ਕ੍ਰੋਮ) ਵਿੱਚ ਸਹਾਇਕ ਤਕਨਾਲੋਜੀਆਂ ਦੇ ਸੰਪਰਕ ਵਿੱਚ ਨਹੀਂ ਆਉਂਦੇ ਹਨ।
ਕਿਦਾ ਚਲਦਾ
ਇੱਥੇ ਦੱਸਿਆ ਗਿਆ ਹੈ ਕਿ ਬੂਟਸਟਰੈਪ ਨਾਲ ਫਾਰਮ ਪ੍ਰਮਾਣਿਕਤਾ ਕਿਵੇਂ ਕੰਮ ਕਰਦੀ ਹੈ:
- HTML ਫਾਰਮ ਪ੍ਰਮਾਣਿਕਤਾ CSS ਦੀਆਂ ਦੋ ਸੂਡੋ-ਕਲਾਸਾਂ ਦੁਆਰਾ ਲਾਗੂ ਕੀਤੀ ਜਾਂਦੀ ਹੈ,
:invalid
ਅਤੇ :valid
. ਇਹ <input>
, <select>
, ਅਤੇ <textarea>
ਤੱਤਾਂ 'ਤੇ ਲਾਗੂ ਹੁੰਦਾ ਹੈ।
- ਬੂਟਸਟਰੈਪ ਪੇਰੈਂਟ ਕਲਾਸ ਨੂੰ ਸਕੋਪ
:invalid
ਅਤੇ :valid
ਸਟਾਈਲ ਦਿੰਦਾ ਹੈ , ਆਮ ਤੌਰ 'ਤੇ 'ਤੇ ਲਾਗੂ ਹੁੰਦਾ ਹੈ । ਨਹੀਂ ਤਾਂ, ਬਿਨਾਂ ਮੁੱਲ ਦੇ ਕੋਈ ਵੀ ਲੋੜੀਂਦਾ ਖੇਤਰ ਪੰਨਾ ਲੋਡ 'ਤੇ ਅਵੈਧ ਵਜੋਂ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ। ਇਸ ਤਰ੍ਹਾਂ, ਤੁਸੀਂ ਚੁਣ ਸਕਦੇ ਹੋ ਕਿ ਉਹਨਾਂ ਨੂੰ ਕਦੋਂ ਕਿਰਿਆਸ਼ੀਲ ਕਰਨਾ ਹੈ (ਆਮ ਤੌਰ 'ਤੇ ਫਾਰਮ ਜਮ੍ਹਾਂ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਨ ਤੋਂ ਬਾਅਦ)।.was-validated
<form>
- ਫਾਰਮ ਦੀ ਦਿੱਖ ਨੂੰ ਰੀਸੈਟ ਕਰਨ ਲਈ (ਉਦਾਹਰਨ ਲਈ, AJAX ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਡਾਇਨਾਮਿਕ ਫਾਰਮ ਸਬਮਿਸ਼ਨ ਦੇ ਮਾਮਲੇ ਵਿੱਚ), ਸਬਮਿਸ਼ਨ ਤੋਂ ਬਾਅਦ
.was-validated
ਕਲਾਸ ਨੂੰ <form>
ਦੁਬਾਰਾ ਹਟਾਓ।
- ਫਾਲਬੈਕ ਵਜੋਂ,
.is-invalid
ਅਤੇ ਸਰਵਰ ਸਾਈਡ ਪ੍ਰਮਾਣਿਕਤਾ.is-valid
ਲਈ ਸੂਡੋ-ਕਲਾਸਾਂ ਦੀ ਬਜਾਏ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਜਾ ਸਕਦੀ ਹੈ । ਉਹਨਾਂ ਨੂੰ ਮਾਤਾ-ਪਿਤਾ ਵਰਗ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ ।.was-validated
<label>
CSS ਦੇ ਕੰਮ ਕਰਨ ਦੇ ਤਰੀਕੇ ਵਿੱਚ ਰੁਕਾਵਟਾਂ ਦੇ ਕਾਰਨ, ਅਸੀਂ ਕਸਟਮ JavaScript ਦੀ ਮਦਦ ਤੋਂ ਬਿਨਾਂ DOM ਵਿੱਚ ਇੱਕ ਫਾਰਮ ਨਿਯੰਤਰਣ ਤੋਂ ਪਹਿਲਾਂ ਆਉਣ ਵਾਲੇ ਸਟਾਈਲ ਨੂੰ (ਮੌਜੂਦਾ ਸਮੇਂ ਵਿੱਚ) ਲਾਗੂ ਨਹੀਂ ਕਰ ਸਕਦੇ ਹਾਂ ।
- ਸਾਰੇ ਆਧੁਨਿਕ ਬ੍ਰਾਊਜ਼ਰ ਕੰਸਟਰੈਂਟ ਵੈਧਤਾ API ਦਾ ਸਮਰਥਨ ਕਰਦੇ ਹਨ, ਫਾਰਮ ਨਿਯੰਤਰਣਾਂ ਨੂੰ ਪ੍ਰਮਾਣਿਤ ਕਰਨ ਲਈ JavaScript ਵਿਧੀਆਂ ਦੀ ਇੱਕ ਲੜੀ।
- ਫੀਡਬੈਕ ਸੁਨੇਹੇ ਵਾਧੂ HTML ਅਤੇ CSS ਦੇ ਨਾਲ ਬ੍ਰਾਊਜ਼ਰ ਡਿਫੌਲਟ (ਹਰੇਕ ਬ੍ਰਾਊਜ਼ਰ ਲਈ ਵੱਖਰੇ, ਅਤੇ CSS ਦੁਆਰਾ ਅਸਥਿਰ) ਜਾਂ ਸਾਡੀਆਂ ਕਸਟਮ ਫੀਡਬੈਕ ਸ਼ੈਲੀਆਂ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹਨ।
setCustomValidity
ਤੁਸੀਂ JavaScript ਵਿੱਚ ਕਸਟਮ ਵੈਧਤਾ ਸੁਨੇਹੇ ਪ੍ਰਦਾਨ ਕਰ ਸਕਦੇ ਹੋ ।
ਇਸ ਨੂੰ ਧਿਆਨ ਵਿੱਚ ਰੱਖਦੇ ਹੋਏ, ਸਾਡੀਆਂ ਕਸਟਮ ਫਾਰਮ ਪ੍ਰਮਾਣਿਕਤਾ ਸ਼ੈਲੀਆਂ, ਵਿਕਲਪਿਕ ਸਰਵਰ ਸਾਈਡ ਕਲਾਸਾਂ, ਅਤੇ ਬ੍ਰਾਊਜ਼ਰ ਡਿਫੌਲਟ ਲਈ ਹੇਠਾਂ ਦਿੱਤੇ ਡੈਮੋ 'ਤੇ ਵਿਚਾਰ ਕਰੋ।
ਕਸਟਮ ਸਟਾਈਲ
novalidate
ਕਸਟਮ ਬੂਟਸਟਰੈਪ ਫਾਰਮ ਪ੍ਰਮਾਣਿਕਤਾ ਸੁਨੇਹਿਆਂ ਲਈ, ਤੁਹਾਨੂੰ ਆਪਣੇ ਵਿੱਚ ਬੂਲੀਅਨ ਵਿਸ਼ੇਸ਼ਤਾ ਜੋੜਨ ਦੀ ਲੋੜ ਪਵੇਗੀ <form>
. ਇਹ ਬ੍ਰਾਊਜ਼ਰ ਡਿਫੌਲਟ ਫੀਡਬੈਕ ਟੂਲਟਿਪਸ ਨੂੰ ਅਸਮਰੱਥ ਬਣਾਉਂਦਾ ਹੈ, ਪਰ ਫਿਰ ਵੀ JavaScript ਵਿੱਚ ਫਾਰਮ ਪ੍ਰਮਾਣਿਕਤਾ API ਤੱਕ ਪਹੁੰਚ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ। ਹੇਠਾਂ ਦਿੱਤੇ ਫਾਰਮ ਨੂੰ ਜਮ੍ਹਾਂ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ; ਸਾਡੀ JavaScript ਸਬਮਿਟ ਬਟਨ ਨੂੰ ਰੋਕੇਗੀ ਅਤੇ ਤੁਹਾਨੂੰ ਫੀਡਬੈਕ ਰੀਲੇਅ ਕਰੇਗੀ। ਸਪੁਰਦ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਸਮੇਂ, ਤੁਸੀਂ ਆਪਣੇ ਫਾਰਮ ਨਿਯੰਤਰਣਾਂ 'ਤੇ ਲਾਗੂ ਕੀਤੀਆਂ ਸ਼ੈਲੀਆਂ :invalid
ਅਤੇ ਸਟਾਈਲ ਦੇਖੋਗੇ ।:valid
ਕਸਟਮ ਫੀਡਬੈਕ ਸਟਾਈਲ ਫੀਡਬੈਕ ਨੂੰ ਬਿਹਤਰ ਢੰਗ ਨਾਲ ਸੰਚਾਰ ਕਰਨ ਲਈ ਕਸਟਮ ਰੰਗ, ਬਾਰਡਰ, ਫੋਕਸ ਸਟਾਈਲ ਅਤੇ ਬੈਕਗ੍ਰਾਊਂਡ ਆਈਕਨ ਲਾਗੂ ਕਰਦੇ ਹਨ। s ਲਈ ਬੈਕਗ੍ਰਾਉਂਡ ਆਈਕਨ <select>
ਸਿਰਫ ਦੇ ਨਾਲ ਉਪਲਬਧ ਹਨ .custom-select
, ਅਤੇ ਨਹੀਂ .form-control
।
ਬ੍ਰਾਊਜ਼ਰ ਪੂਰਵ-ਨਿਰਧਾਰਤ
ਕਸਟਮ ਪ੍ਰਮਾਣਿਕਤਾ ਫੀਡਬੈਕ ਸੰਦੇਸ਼ਾਂ ਜਾਂ ਫਾਰਮ ਵਿਵਹਾਰ ਨੂੰ ਬਦਲਣ ਲਈ JavaScript ਲਿਖਣ ਵਿੱਚ ਦਿਲਚਸਪੀ ਨਹੀਂ ਹੈ? ਸਭ ਠੀਕ ਹੈ, ਤੁਸੀਂ ਬ੍ਰਾਊਜ਼ਰ ਡਿਫੌਲਟ ਵਰਤ ਸਕਦੇ ਹੋ। ਹੇਠਾਂ ਦਿੱਤੇ ਫਾਰਮ ਨੂੰ ਸਪੁਰਦ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ। ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਅਤੇ OS 'ਤੇ ਨਿਰਭਰ ਕਰਦੇ ਹੋਏ, ਤੁਸੀਂ ਫੀਡਬੈਕ ਦੀ ਥੋੜੀ ਵੱਖਰੀ ਸ਼ੈਲੀ ਦੇਖੋਗੇ।
ਹਾਲਾਂਕਿ ਇਹਨਾਂ ਫੀਡਬੈਕ ਸਟਾਈਲਾਂ ਨੂੰ CSS ਨਾਲ ਸਟਾਈਲ ਨਹੀਂ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ, ਫਿਰ ਵੀ ਤੁਸੀਂ JavaScript ਦੁਆਰਾ ਫੀਡਬੈਕ ਟੈਕਸਟ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰ ਸਕਦੇ ਹੋ।
ਸਰਵਰ ਪਾਸੇ
ਅਸੀਂ ਕਲਾਇੰਟ-ਸਾਈਡ ਪ੍ਰਮਾਣਿਕਤਾ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਸਿਫਾਰਸ਼ ਕਰਦੇ ਹਾਂ, ਪਰ ਜੇਕਰ ਤੁਹਾਨੂੰ ਸਰਵਰ-ਸਾਈਡ ਪ੍ਰਮਾਣਿਕਤਾ ਦੀ ਲੋੜ ਹੈ, ਤਾਂ ਤੁਸੀਂ ਅਤੇ ਨਾਲ ਅਵੈਧ ਅਤੇ ਵੈਧ ਫਾਰਮ ਖੇਤਰਾਂ ਨੂੰ ਦਰਸਾ ਸਕਦੇ .is-invalid
ਹੋ .is-valid
। ਨੋਟ ਕਰੋ ਕਿ .invalid-feedback
ਇਹਨਾਂ ਕਲਾਸਾਂ ਨਾਲ ਵੀ ਸਮਰਥਿਤ ਹੈ।
ਸਹਿਯੋਗੀ ਤੱਤ
ਪ੍ਰਮਾਣਿਕਤਾ ਸਟਾਈਲ ਹੇਠਾਂ ਦਿੱਤੇ ਫਾਰਮ ਨਿਯੰਤਰਣਾਂ ਅਤੇ ਭਾਗਾਂ ਲਈ ਉਪਲਬਧ ਹਨ:
<input>
s ਅਤੇ <textarea>
s ਨਾਲ .form-control
( .form-control
ਇਨਪੁਟ ਸਮੂਹਾਂ ਵਿੱਚ ਇੱਕ ਤੱਕ)
<select>
s ਨਾਲ .form-control
ਜ.custom-select
.form-check
ਐੱਸ
.custom-checkbox
s ਅਤੇ .custom-radio
s
.custom-file
ਜੇਕਰ ਤੁਹਾਡਾ ਫਾਰਮ ਲੇਆਉਟ ਇਸਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ, ਤਾਂ ਤੁਸੀਂ ਇੱਕ ਸਟਾਈਲ ਕੀਤੇ ਟੂਲਟਿਪ ਵਿੱਚ ਪ੍ਰਮਾਣਿਕਤਾ ਪ੍ਰਤੀਕਰਮ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ .{valid|invalid}-feedback
ਲਈ ਕਲਾਸਾਂ ਲਈ ਕਲਾਸਾਂ ਨੂੰ ਸਵੈਪ ਕਰ ਸਕਦੇ ਹੋ। ਟੂਲਟਿਪ ਪੋਜੀਸ਼ਨਿੰਗ ਲਈ ਇਸ 'ਤੇ .{valid|invalid}-tooltip
ਮਾਤਾ-ਪਿਤਾ ਦਾ ਹੋਣਾ ਯਕੀਨੀ ਬਣਾਓ । position: relative
ਹੇਠਾਂ ਦਿੱਤੀ ਉਦਾਹਰਨ ਵਿੱਚ, ਸਾਡੀਆਂ ਕਾਲਮ ਕਲਾਸਾਂ ਵਿੱਚ ਇਹ ਪਹਿਲਾਂ ਹੀ ਮੌਜੂਦ ਹੈ, ਪਰ ਤੁਹਾਡੇ ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਇੱਕ ਵਿਕਲਪਿਕ ਸੈੱਟਅੱਪ ਦੀ ਲੋੜ ਹੋ ਸਕਦੀ ਹੈ।
ਅਨੁਕੂਲਿਤ
$form-validation-states
ਪ੍ਰਮਾਣਿਕਤਾ ਸਥਿਤੀਆਂ ਨੂੰ ਨਕਸ਼ੇ ਦੇ ਨਾਲ ਸਾਸ ਦੁਆਰਾ ਅਨੁਕੂਲਿਤ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ । ਸਾਡੀ _variables.scss
ਫਾਈਲ ਵਿੱਚ ਸਥਿਤ, ਇਹ Sass ਮੈਪ ਡਿਫੌਲਟ valid
/ invalid
ਪ੍ਰਮਾਣਿਕਤਾ ਸਥਿਤੀਆਂ ਨੂੰ ਬਣਾਉਣ ਲਈ ਲੂਪ ਕੀਤਾ ਗਿਆ ਹੈ। ਹਰੇਕ ਰਾਜ ਦੇ ਰੰਗ ਅਤੇ ਆਈਕਨ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰਨ ਲਈ ਇੱਕ ਨੇਸਟਡ ਨਕਸ਼ਾ ਸ਼ਾਮਲ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਕੋਈ ਹੋਰ ਰਾਜ ਬ੍ਰਾਊਜ਼ਰਾਂ ਦੁਆਰਾ ਸਮਰਥਿਤ ਨਹੀਂ ਹਨ, ਉਹ ਲੋਕ ਜੋ ਕਸਟਮ ਸਟਾਈਲ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ ਉਹ ਆਸਾਨੀ ਨਾਲ ਵਧੇਰੇ ਗੁੰਝਲਦਾਰ ਫਾਰਮ ਫੀਡਬੈਕ ਜੋੜ ਸਕਦੇ ਹਨ।
ਕਿਰਪਾ ਕਰਕੇ ਨੋਟ ਕਰੋ ਕਿ ਅਸੀਂ form-validation-state
ਮਿਕਸਿਨ ਨੂੰ ਸੋਧੇ ਬਿਨਾਂ ਇਹਨਾਂ ਮੁੱਲਾਂ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰਨ ਦੀ ਸਿਫ਼ਾਰਿਸ਼ ਨਹੀਂ ਕਰਦੇ ਹਾਂ।
ਹੋਰ ਵੀ ਅਨੁਕੂਲਤਾ ਅਤੇ ਕ੍ਰਾਸ ਬ੍ਰਾਊਜ਼ਰ ਇਕਸਾਰਤਾ ਲਈ, ਬ੍ਰਾਊਜ਼ਰ ਡਿਫੌਲਟ ਨੂੰ ਬਦਲਣ ਲਈ ਸਾਡੇ ਪੂਰੀ ਤਰ੍ਹਾਂ ਕਸਟਮ ਫਾਰਮ ਐਲੀਮੈਂਟਸ ਦੀ ਵਰਤੋਂ ਕਰੋ। ਉਹ ਸਿਮੈਂਟਿਕ ਅਤੇ ਪਹੁੰਚਯੋਗ ਮਾਰਕਅੱਪ ਦੇ ਸਿਖਰ 'ਤੇ ਬਣਾਏ ਗਏ ਹਨ, ਇਸਲਈ ਉਹ ਕਿਸੇ ਵੀ ਡਿਫੌਲਟ ਫਾਰਮ ਨਿਯੰਤਰਣ ਲਈ ਠੋਸ ਬਦਲ ਹਨ।
ਚੈੱਕਬਾਕਸ ਅਤੇ ਰੇਡੀਓ
ਸਾਡੇ ਕਸਟਮ ਨਿਯੰਤਰਣ ਨੂੰ ਬਣਾਉਣ ਲਈ ਹਰੇਕ ਚੈਕਬਾਕਸ ਅਤੇ ਰੇਡੀਓ <input>
ਅਤੇ <label>
ਜੋੜੀ ਨੂੰ ਇੱਕ ਵਿੱਚ ਲਪੇਟਿਆ ਜਾਂਦਾ ਹੈ । <div>
ਢਾਂਚਾਗਤ ਤੌਰ 'ਤੇ, ਇਹ ਸਾਡੇ ਡਿਫੌਲਟ ਵਾਂਗ ਹੀ ਪਹੁੰਚ ਹੈ .form-check
।
ਅਸੀਂ ਆਪਣੇ ਸਾਰੇ ਰਾਜਾਂ ਲਈ ਸਿਬਲਿੰਗ ਸਿਲੈਕਟਰ ( ~
) ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ — ਜਿਵੇਂ — ਸਾਡੇ ਕਸਟਮ ਫਾਰਮ ਇੰਡੀਕੇਟਰ ਨੂੰ ਸਹੀ ਢੰਗ ਨਾਲ ਸਟਾਈਲ ਕਰਨ ਲਈ। ਜਦੋਂ ਕਲਾਸ ਦੇ ਨਾਲ ਜੋੜਿਆ ਜਾਂਦਾ ਹੈ , ਤਾਂ ਅਸੀਂ 'ਸਟੇਟ' ਦੇ ਆਧਾਰ 'ਤੇ ਹਰੇਕ ਆਈਟਮ ਲਈ ਟੈਕਸਟ ਨੂੰ ਸਟਾਈਲ ਵੀ ਕਰ ਸਕਦੇ ਹਾਂ ।<input>
:checked
.custom-control-label
<input>
ਅਸੀਂ ਡਿਫਾਲਟ ਨੂੰ ਲੁਕਾਉਂਦੇ ਹਾਂ <input>
ਅਤੇ ਇਸਦੀ ਥਾਂ 'ਤੇ ਅਤੇ ਨਾਲ ਇੱਕ ਨਵਾਂ ਕਸਟਮ ਫਾਰਮ ਸੂਚਕ ਬਣਾਉਣ ਲਈ opacity
ਵਰਤਦੇ ਹਾਂ । ਬਦਕਿਸਮਤੀ ਨਾਲ ਅਸੀਂ ਸਿਰਫ਼ ਇਸ ਲਈ ਇੱਕ ਕਸਟਮ ਨਹੀਂ ਬਣਾ ਸਕਦੇ ਕਿਉਂਕਿ CSS ਉਸ ਤੱਤ 'ਤੇ ਕੰਮ ਨਹੀਂ ਕਰਦਾ ਹੈ।.custom-control-label
::before
::after
<input>
content
ਚੈੱਕ ਕੀਤੇ ਰਾਜਾਂ ਵਿੱਚ, ਅਸੀਂ Open Iconic ਤੋਂ base64 ਏਮਬੈਡਡ SVG ਆਈਕਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ । ਇਹ ਸਾਨੂੰ ਬ੍ਰਾਊਜ਼ਰਾਂ ਅਤੇ ਡਿਵਾਈਸਾਂ ਵਿੱਚ ਸਟਾਈਲਿੰਗ ਅਤੇ ਸਥਿਤੀ ਲਈ ਸਭ ਤੋਂ ਵਧੀਆ ਨਿਯੰਤਰਣ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ।
ਚੈੱਕਬਾਕਸ
ਕਸਟਮ ਚੈਕਬਾਕਸ ਵੀ :indeterminate
ਸੂਡੋ ਕਲਾਸ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹਨ ਜਦੋਂ ਜਾਵਾ ਸਕ੍ਰਿਪਟ ਦੁਆਰਾ ਹੱਥੀਂ ਸੈੱਟ ਕੀਤਾ ਜਾਂਦਾ ਹੈ (ਇਸ ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਨ ਲਈ ਕੋਈ ਉਪਲਬਧ HTML ਵਿਸ਼ੇਸ਼ਤਾ ਨਹੀਂ ਹੈ)।
ਜੇ ਤੁਸੀਂ jQuery ਦੀ ਵਰਤੋਂ ਕਰ ਰਹੇ ਹੋ, ਤਾਂ ਇਸ ਤਰ੍ਹਾਂ ਦਾ ਕੁਝ ਕਾਫ਼ੀ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ:
ਰੇਡੀਓ
ਇਨ ਲਾਇਨ
ਅਯੋਗ
ਕਸਟਮ ਚੈਕਬਾਕਸ ਅਤੇ ਰੇਡੀਓ ਵੀ ਅਯੋਗ ਕੀਤੇ ਜਾ ਸਕਦੇ ਹਨ। disabled
ਵਿੱਚ ਬੂਲੀਅਨ ਐਟਰੀਬਿਊਟ ਸ਼ਾਮਲ ਕਰੋ <input>
ਅਤੇ ਕਸਟਮ ਇੰਡੀਕੇਟਰ ਅਤੇ ਲੇਬਲ ਵੇਰਵਾ ਆਪਣੇ ਆਪ ਹੀ ਸਟਾਈਲ ਹੋ ਜਾਵੇਗਾ।
ਸਵਿੱਚ
ਇੱਕ ਸਵਿੱਚ ਵਿੱਚ ਇੱਕ ਕਸਟਮ ਚੈੱਕਬਾਕਸ ਦਾ ਮਾਰਕਅੱਪ ਹੁੰਦਾ ਹੈ ਪਰ .custom-switch
ਇੱਕ ਟੌਗਲ ਸਵਿੱਚ ਨੂੰ ਰੈਂਡਰ ਕਰਨ ਲਈ ਕਲਾਸ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ। ਸਵਿੱਚ ਵੀ disabled
ਵਿਸ਼ੇਸ਼ਤਾ ਦਾ ਸਮਰਥਨ ਕਰਦੇ ਹਨ।
ਕਸਟਮ ਸਟਾਈਲ ਨੂੰ ਟਰਿੱਗਰ ਕਰਨ ਲਈ , ਕਸਟਮ <select>
ਮੀਨੂ ਨੂੰ ਸਿਰਫ਼ ਇੱਕ ਕਸਟਮ ਕਲਾਸ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। .custom-select
ਕਸਟਮ ਸਟਾਈਲ <select>
ਦੀ ਸ਼ੁਰੂਆਤੀ ਦਿੱਖ ਤੱਕ ਸੀਮਿਤ ਹੈ ਅਤੇ <option>
ਬ੍ਰਾਊਜ਼ਰ ਸੀਮਾਵਾਂ ਦੇ ਕਾਰਨ s ਨੂੰ ਸੋਧ ਨਹੀਂ ਸਕਦਾ ਹੈ।
ਤੁਸੀਂ ਸਾਡੇ ਸਮਾਨ ਆਕਾਰ ਦੇ ਟੈਕਸਟ ਇਨਪੁਟਸ ਨਾਲ ਮੇਲ ਕਰਨ ਲਈ ਛੋਟੇ ਅਤੇ ਵੱਡੇ ਕਸਟਮ ਚੋਣਵਾਂ ਵਿੱਚੋਂ ਵੀ ਚੁਣ ਸਕਦੇ ਹੋ।
multiple
ਵਿਸ਼ੇਸ਼ਤਾ ਵੀ ਸਮਰਥਿਤ ਹੈ :
ਜਿਵੇਂ ਕਿ size
ਵਿਸ਼ੇਸ਼ਤਾ ਹੈ:
ਰੇਂਜ
ਨਾਲ ਕਸਟਮ <input type="range">
ਕੰਟਰੋਲ ਬਣਾਓ .custom-range
। ਟਰੈਕ (ਬੈਕਗ੍ਰਾਊਂਡ) ਅਤੇ ਅੰਗੂਠਾ (ਮੁੱਲ) ਦੋਵੇਂ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਇੱਕੋ ਜਿਹੇ ਦਿਖਾਈ ਦੇਣ ਲਈ ਸਟਾਈਲ ਕੀਤੇ ਗਏ ਹਨ। ਜਿਵੇਂ ਕਿ ਸਿਰਫ IE ਅਤੇ ਫਾਇਰਫਾਕਸ ਪ੍ਰਗਤੀ ਨੂੰ ਦ੍ਰਿਸ਼ਟੀਗਤ ਰੂਪ ਵਿੱਚ ਦਰਸਾਉਣ ਦੇ ਸਾਧਨ ਵਜੋਂ ਅੰਗੂਠੇ ਦੇ ਖੱਬੇ ਜਾਂ ਸੱਜੇ ਤੋਂ ਆਪਣੇ ਟਰੈਕ ਨੂੰ "ਭਰਨ" ਦਾ ਸਮਰਥਨ ਕਰਦੇ ਹਨ, ਅਸੀਂ ਇਸ ਵੇਲੇ ਇਸਦਾ ਸਮਰਥਨ ਨਹੀਂ ਕਰਦੇ ਹਾਂ।
ਰੇਂਜ ਇਨਪੁਟਸ ਵਿੱਚ ਕ੍ਰਮਵਾਰ min
ਅਤੇ max
— 0
ਅਤੇ 100
, ਲਈ ਅਨਿੱਖੜਵੇਂ ਮੁੱਲ ਹਨ। min
ਤੁਸੀਂ ਅਤੇ max
ਗੁਣਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਵਾਲਿਆਂ ਲਈ ਨਵੇਂ ਮੁੱਲ ਨਿਰਧਾਰਤ ਕਰ ਸਕਦੇ ਹੋ ।
ਪੂਰਵ-ਨਿਰਧਾਰਤ ਤੌਰ 'ਤੇ, ਸੀਮਾ ਇੰਪੁੱਟ ਪੂਰਨ ਅੰਕ ਮੁੱਲਾਂ ਨੂੰ "ਸਨੈਪ" ਕਰਦੀ ਹੈ। ਇਸਨੂੰ ਬਦਲਣ ਲਈ, ਤੁਸੀਂ ਇੱਕ step
ਮੁੱਲ ਨਿਰਧਾਰਤ ਕਰ ਸਕਦੇ ਹੋ। ਹੇਠਾਂ ਦਿੱਤੀ ਉਦਾਹਰਨ ਵਿੱਚ, ਅਸੀਂ ਵਰਤ ਕੇ ਕਦਮਾਂ ਦੀ ਸੰਖਿਆ ਨੂੰ ਦੁੱਗਣਾ ਕਰਦੇ ਹਾਂ step="0.5"
।
ਫਾਈਲ ਬ੍ਰਾਊਜ਼ਰ
ਕਸਟਮ ਫਾਈਲ ਇਨਪੁਟ ਨੂੰ ਐਨੀਮੇਟ ਕਰਨ ਲਈ ਸਿਫਾਰਿਸ਼ ਕੀਤੀ ਪਲੱਗਇਨ: bs-custom-file-input , ਇਹ ਉਹ ਹੈ ਜੋ ਅਸੀਂ ਇਸ ਸਮੇਂ ਆਪਣੇ ਡੌਕਸ ਵਿੱਚ ਵਰਤ ਰਹੇ ਹਾਂ।
ਫਾਈਲ ਇੰਪੁੱਟ ਸਭ ਤੋਂ ਵੱਧ ਗੰਧਲਾ ਹੁੰਦਾ ਹੈ ਅਤੇ ਜੇਕਰ ਤੁਸੀਂ ਉਹਨਾਂ ਨੂੰ ਫੰਕਸ਼ਨਲ ਚੁਣੋ ਫਾਈਲ… ਅਤੇ ਚੁਣੇ ਗਏ ਫਾਈਲ ਨਾਮ ਟੈਕਸਟ ਨਾਲ ਜੋੜਨਾ ਚਾਹੁੰਦੇ ਹੋ ਤਾਂ ਵਾਧੂ JavaScript ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ।
ਅਸੀਂ ਡਿਫਾਲਟ ਫਾਈਲ <input>
ਨੂੰ ਲੁਕਾਉਂਦੇ ਹਾਂ opacity
ਅਤੇ ਇਸਦੀ ਬਜਾਏ ਸਟਾਈਲ ਕਰਦੇ ਹਾਂ <label>
। ਬਟਨ ਤਿਆਰ ਕੀਤਾ ਗਿਆ ਹੈ ਅਤੇ ਨਾਲ ਸਥਿਤੀ ਵਿੱਚ ਹੈ ::after
. ਅੰਤ ਵਿੱਚ, ਅਸੀਂ ਆਲੇ ਦੁਆਲੇ ਦੀ ਸਮਗਰੀ ਲਈ ਸਹੀ ਸਪੇਸਿੰਗ ਲਈ a width
ਅਤੇ height
on ਘੋਸ਼ਿਤ ਕਰਦੇ ਹਾਂ।<input>
SCSS ਨਾਲ ਸਤਰ ਦਾ ਅਨੁਵਾਦ ਜਾਂ ਅਨੁਕੂਲਿਤ ਕਰਨਾ
:lang()
ਸੂਡੋ-ਕਲਾਸ ਦੀ ਵਰਤੋਂ "ਬ੍ਰਾਊਜ਼" ਟੈਕਸਟ ਦੇ ਹੋਰ ਭਾਸ਼ਾਵਾਂ ਵਿੱਚ ਅਨੁਵਾਦ ਕਰਨ ਲਈ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਸੰਬੰਧਿਤ ਭਾਸ਼ਾ ਟੈਗ ਅਤੇ ਸਥਾਨਕ ਸਤਰ $custom-file-text
ਦੇ ਨਾਲ Sass ਵੇਰੀਏਬਲ ਵਿੱਚ ਇੰਦਰਾਜ਼ਾਂ ਨੂੰ ਓਵਰਰਾਈਡ ਕਰੋ ਜਾਂ ਜੋੜੋ । ਅੰਗਰੇਜ਼ੀ ਸਤਰ ਨੂੰ ਉਸੇ ਤਰੀਕੇ ਨਾਲ ਅਨੁਕੂਲਿਤ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ. ਉਦਾਹਰਨ ਲਈ, ਇੱਥੇ ਇੱਕ ਸਪੈਨਿਸ਼ ਅਨੁਵਾਦ ਕਿਵੇਂ ਸ਼ਾਮਲ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ (ਸਪੈਨਿਸ਼ ਭਾਸ਼ਾ ਦਾ ਕੋਡ ਹੈ ):es
ਇੱਥੇ lang(es)
ਇੱਕ ਸਪੈਨਿਸ਼ ਅਨੁਵਾਦ ਲਈ ਕਸਟਮ ਫਾਈਲ ਇਨਪੁਟ 'ਤੇ ਕਾਰਵਾਈ ਕੀਤੀ ਜਾ ਰਹੀ ਹੈ:
ਤੁਹਾਨੂੰ ਸਹੀ ਟੈਕਸਟ ਦਿਖਾਉਣ ਲਈ ਆਪਣੇ ਦਸਤਾਵੇਜ਼ ਦੀ ਭਾਸ਼ਾ (ਜਾਂ ਇਸਦੀ ਸਬਟ੍ਰੀ) ਨੂੰ ਸਹੀ ਢੰਗ ਨਾਲ ਸੈੱਟ ਕਰਨ ਦੀ ਲੋੜ ਪਵੇਗੀ। ਇਹ ਐਲੀਮੈਂਟ ਜਾਂ HTTP ਹੈਡਰ 'ਤੇ ਵਿਸ਼ੇਸ਼ਤਾ ਦੀ lang
ਵਰਤੋਂ ਕਰਕੇ , ਹੋਰ ਤਰੀਕਿਆਂ ਦੇ ਨਾਲ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ।<html>
Content-Language
HTML ਨਾਲ ਸਤਰਾਂ ਦਾ ਅਨੁਵਾਦ ਜਾਂ ਅਨੁਕੂਲਿਤ ਕਰਨਾ
ਬੂਟਸਟਰੈਪ HTML ਵਿੱਚ "ਬ੍ਰਾਊਜ਼" ਟੈਕਸਟ ਨੂੰ data-browse
ਵਿਸ਼ੇਸ਼ਤਾ ਦੇ ਨਾਲ ਅਨੁਵਾਦ ਕਰਨ ਦਾ ਇੱਕ ਤਰੀਕਾ ਵੀ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ ਜਿਸਨੂੰ ਕਸਟਮ ਇਨਪੁਟ ਲੇਬਲ ਵਿੱਚ ਜੋੜਿਆ ਜਾ ਸਕਦਾ ਹੈ (ਡਚ ਵਿੱਚ ਉਦਾਹਰਨ):