ਫਲੋਟਿੰਗ ਲੇਬਲ
ਸੁੰਦਰਤਾ ਨਾਲ ਸਧਾਰਨ ਫਾਰਮ ਲੇਬਲ ਬਣਾਓ ਜੋ ਤੁਹਾਡੇ ਇਨਪੁਟ ਖੇਤਰਾਂ 'ਤੇ ਫਲੋਟ ਕਰਦੇ ਹਨ।
ਉਦਾਹਰਨ
ਬੂਟਸਟਰੈਪ ਦੇ ਟੈਕਸਟੁਅਲ ਫਾਰਮ ਫੀਲਡਾਂ ਨਾਲ ਫਲੋਟਿੰਗ ਲੇਬਲਾਂ ਨੂੰ ਸਮਰੱਥ ਕਰਨ ਲਈ ਇੱਕ ਜੋੜਾ <input class="form-control">
ਅਤੇ <label>
ਤੱਤਾਂ ਨੂੰ ਲਪੇਟੋ। .form-floating
ਹਰੇਕ 'ਤੇ A placeholder
ਦੀ ਲੋੜ ਹੈ <input>
ਕਿਉਂਕਿ CSS-ਸਿਰਫ਼ ਫਲੋਟਿੰਗ ਲੇਬਲਾਂ ਦੀ ਸਾਡੀ ਵਿਧੀ :placeholder-shown
ਸੂਡੋ-ਐਲੀਮੈਂਟ ਦੀ ਵਰਤੋਂ ਕਰਦੀ ਹੈ। ਇਹ ਵੀ ਨੋਟ ਕਰੋ ਕਿ <input>
ਪਹਿਲਾਂ ਆਉਣਾ ਲਾਜ਼ਮੀ ਹੈ ਤਾਂ ਜੋ ਅਸੀਂ ਇੱਕ ਭੈਣ-ਭਰਾ ਚੋਣਕਾਰ (ਉਦਾਹਰਨ ਲਈ, ~
) ਦੀ ਵਰਤੋਂ ਕਰ ਸਕੀਏ।
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
<label for="floatingInput">Email address</label>
</div>
<div class="form-floating">
<input type="password" class="form-control" id="floatingPassword" placeholder="Password">
<label for="floatingPassword">Password</label>
</div>
ਜਦੋਂ value
ਪਹਿਲਾਂ ਤੋਂ ਪਰਿਭਾਸ਼ਿਤ ਹੁੰਦਾ ਹੈ, ਤਾਂ <label>
s ਆਪਣੇ ਆਪ ਹੀ ਉਹਨਾਂ ਦੀ ਫਲੋਟ ਕੀਤੀ ਸਥਿਤੀ ਵਿੱਚ ਅਨੁਕੂਲ ਹੋ ਜਾਵੇਗਾ।
<form class="form-floating">
<input type="email" class="form-control" id="floatingInputValue" placeholder="[email protected]" value="[email protected]">
<label for="floatingInputValue">Input with value</label>
</form>
ਫਾਰਮ ਪ੍ਰਮਾਣਿਕਤਾ ਸ਼ੈਲੀਆਂ ਵੀ ਉਮੀਦ ਅਨੁਸਾਰ ਕੰਮ ਕਰਦੀਆਂ ਹਨ।
<form class="form-floating">
<input type="email" class="form-control is-invalid" id="floatingInputInvalid" placeholder="[email protected]" value="[email protected]">
<label for="floatingInputInvalid">Invalid input</label>
</form>
ਟੈਕਸਟਰੇਅਸ
ਮੂਲ ਰੂਪ ਵਿੱਚ, <textarea>
s ਨਾਲ s .form-control
ਦੀ ਉਚਾਈ s ਦੇ ਬਰਾਬਰ ਹੋਵੇਗੀ <input>
।
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
<label for="floatingTextarea">Comments</label>
</div>
ਆਪਣੇ 'ਤੇ ਕਸਟਮ ਉਚਾਈ ਸੈੱਟ ਕਰਨ ਲਈ , ਵਿਸ਼ੇਸ਼ਤਾ <textarea>
ਦੀ ਵਰਤੋਂ ਨਾ ਕਰੋ । rows
ਇਸਦੀ ਬਜਾਏ, ਇੱਕ ਸਪੱਸ਼ਟ ਸੈੱਟ height
ਕਰੋ (ਜਾਂ ਤਾਂ ਇਨਲਾਈਨ ਜਾਂ ਕਸਟਮ CSS ਰਾਹੀਂ)।
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2" style="height: 100px"></textarea>
<label for="floatingTextarea2">Comments</label>
</div>
ਚੁਣਦਾ ਹੈ
ਇਸ ਤੋਂ ਇਲਾਵਾ , ਫਲੋਟਿੰਗ ਲੇਬਲ ਸਿਰਫ਼ s .form-control
'ਤੇ ਉਪਲਬਧ ਹਨ । .form-select
ਉਹ ਉਸੇ ਤਰੀਕੇ ਨਾਲ ਕੰਮ ਕਰਦੇ ਹਨ, ਪਰ <input>
s ਦੇ ਉਲਟ, ਉਹ ਹਮੇਸ਼ਾ <label>
ਇਸਦੀ ਫਲੋਟਿਡ ਸਥਿਤੀ ਵਿੱਚ ਦਿਖਾਉਣਗੇ। ਨਾਲ ਚੁਣਦਾ ਹੈ size
ਅਤੇ multiple
ਸਮਰਥਿਤ ਨਹੀਂ ਹੈ।
<div class="form-floating">
<select class="form-select" id="floatingSelect" aria-label="Floating label select example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<label for="floatingSelect">Works with selects</label>
</div>
ਖਾਕਾ
ਬੂਟਸਟਰੈਪ ਗਰਿੱਡ ਸਿਸਟਮ ਨਾਲ ਕੰਮ ਕਰਦੇ ਸਮੇਂ, ਕਾਲਮ ਕਲਾਸਾਂ ਦੇ ਅੰਦਰ ਫਾਰਮ ਐਲੀਮੈਂਟਸ ਰੱਖਣਾ ਯਕੀਨੀ ਬਣਾਓ।
<div class="row g-2">
<div class="col-md">
<div class="form-floating">
<input type="email" class="form-control" id="floatingInputGrid" placeholder="[email protected]" value="[email protected]">
<label for="floatingInputGrid">Email address</label>
</div>
</div>
<div class="col-md">
<div class="form-floating">
<select class="form-select" id="floatingSelectGrid" aria-label="Floating label select example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<label for="floatingSelectGrid">Works with selects</label>
</div>
</div>
</div>
ਸੱਸ
ਵੇਰੀਏਬਲ
$form-floating-height: add(3.5rem, $input-height-border);
$form-floating-line-height: 1.25;
$form-floating-padding-x: $input-padding-x;
$form-floating-padding-y: 1rem;
$form-floating-input-padding-t: 1.625rem;
$form-floating-input-padding-b: .625rem;
$form-floating-label-opacity: .65;
$form-floating-label-transform: scale(.85) translateY(-.5rem) translateX(.15rem);
$form-floating-transition: opacity .1s ease-in-out, transform .1s ease-in-out;