Agtaytayab nga etiketa
Mangaramid kadagiti napintas a simple nga etiketa ti porma nga agtaytayab kadagiti tay-ak ti panagserrekmo.
Pagwadan
Balkoten ti maysa a paris ti <input class="form-control">ken <label>dagiti elemento iti .form-floatingtapno mapalubosan dagiti agtaytayab nga etiketa babaen dagiti tay-ak ti tekstual a porma ti Bootstrap. Ti A placeholderket kasapulan iti tunggal maysa <input>a kas ti pamay-anmi kadagiti CSS-laeng nga agtaytayab nga etiketa ket agus-usar ti :placeholder-shownpseudo-element. Paliiwenyo pay a ti <input>masapul nga umuna tapno mabalintayo nga usaren ti sibling selector (kas pagarigan, ~).
<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>No adda ti valuenaikeddengen, <label>ti s ket automatiko nga ag-adjust iti floated a posisionda.
<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>Dagiti estilo ti panangipaneknek ti porma ket agtrabaho met a kas ninamnama.
<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>Dagiti lugar ti teksto
Babaen ti default, <textarea>ti s nga addaan .form-controlket isunto ti kangato a kas <input>ti s.
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
<label for="floatingTextarea">Comments</label>
</div>Tapno mangikeddeng ti kostumbre a kangato iti <textarea>, saanmo nga usaren ti rowsattribute. Imbes ketdi, mangikeddeng ti nalawag height(inline man wenno babaen ti kostumbre a 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>Pilien ti
Malaksid iti .form-control, dagiti agtaytayab nga etiketa ket magun-od laeng kadagiti .form-selects. Agtrabahoda iti isu met laeng a wagas, ngem saan a kas <input>iti s, kanayon nga ipakitada ti <label>iti floated state-na. Pilien nga addaan sizeken multiplesaan a nasuportaran.
<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>Basaen laeng ti plaintext
Dagiti agtaytayab nga etiketa ket mangsuporta pay ti .form-control-plaintext, a mabalin a makatulong para iti panagbalbaliw manipud iti ma-edit <input>aginggana ti pateg ti plaintext a saan a mangapektar ti layout ti panid.
<div class="form-floating mb-3">
<input type="email" readonly class="form-control-plaintext" id="floatingEmptyPlaintextInput" placeholder="[email protected]">
<label for="floatingEmptyPlaintextInput">Empty input</label>
</div>
<div class="form-floating mb-3">
<input type="email" readonly class="form-control-plaintext" id="floatingPlaintextInput" placeholder="[email protected]" value="[email protected]">
<label for="floatingPlaintextInput">Input with value</label>
</div>Dagiti grupo ti input
Suportaran met dagiti agtaytayab nga etiketa ti .input-group.
<div class="input-group mb-3">
<span class="input-group-text">@</span>
<div class="form-floating">
<input type="text" class="form-control" id="floatingInputGroup1" placeholder="Username">
<label for="floatingInputGroup1">Username</label>
</div>
</div>No agus -usar .input-groupken .form-floatingagraman ti panangipaneknek ti porma, ti -feedbackrumbeng a maikabil iti ruar ti .form-floating, ngem iti uneg ti .input-group. Kayatna a sawen a kasapulan a maipakita ti feedback babaen ti javascript.
<div class="input-group has-validation">
<span class="input-group-text">@</span>
<div class="form-floating is-invalid">
<input type="text" class="form-control is-invalid" id="floatingInputGroup2" placeholder="Username" required>
<label for="floatingInputGroup2">Username</label>
</div>
<div class="invalid-feedback">
Please choose a username.
</div>
</div>Aninaw
No agtrabaho iti sistema ti grid ti Bootstrap, siguraduen nga ikabil dagiti elemento ti porma iti uneg dagiti klase ti adigi.
<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">
<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>Sass nga
Dagiti Variable
$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;