Fa'ailoga opeopea
Fausia ni fa'ailoga faigofie faigofie e opeopea i luga o lau fa'ato'aga.
Faataitaiga
Afifi se pea <input class="form-control">
ma <label>
elemene i totonu .form-floating
ina ia mafai ai ona fa'aigoa fa'aigoa fa'atasi ma matā'upu tusitusi a Bootstrap. E placeholder
mana'omia le A i luga o ta'itasi <input>
ona o la tatou metotia o CSS-na'o fa'aoloa fa'aigoa e fa'aogaina ai le :placeholder-shown
pseudo-element. Ia maitauina foi e <input>
tatau ona sau muamua ina ia mafai ona tatou faʻaogaina se tagata filifilia (faʻataʻitaʻiga, ~
).
<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>
A i ai se value
faʻamatalaga ua uma ona faʻamalamalamaina, <label>
o le a otometi lava ona fetuunai i lo latou tulaga faʻafefe.
<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>
E aoga fo'i sitaili fa'amaonia pepa e pei ona fa'amoemoeina.
<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
E le mafai, <textarea>
s ma .form-control
o le a tutusa le maualuga ma <input>
le s.
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
<label for="floatingTextarea">Comments</label>
</div>
Ina ia seti se maualuga masani i lau <textarea>
, aua le faʻaaogaina le rows
uiga. Nai lo lena, seti se faʻamatalaga manino height
(pe i totonu poʻo le CSS masani).
<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>
Filifilia
E ese mai i le .form-control
, o fa'ailoga opeopea e na'o avanoa i luga ole .form-select
s. Latou te galulue i le auala lava e tasi, ae le pei o <input>
le s, latou te faʻaalia i taimi uma <label>
i lona tulaga faʻafefe. Filifili size
ma multiple
e le lagolagoina.
<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>
Fa'atulagaina
A e galue ma le Bootstrap grid system, ia mautinoa e tuʻu elemene elemene i totonu o vasega koluma.
<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>
Sass
Fuafuaga
$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;