ស្លាកអណ្តែត
បង្កើតស្លាកទម្រង់សាមញ្ញដ៏ស្រស់ស្អាត ដែលអណ្តែតលើវាលបញ្ចូលរបស់អ្នក។
ឧទាហរណ៍
រុំមួយគូ <input class="form-control">
និង <label>
ធាតុចូល .form-floating
ដើម្បីបើកស្លាកអណ្តែតជាមួយវាលទម្រង់អត្ថបទរបស់ Bootstrap ។ A placeholder
ត្រូវបានទាមទារនៅលើនីមួយៗ <input>
ដោយសារវិធីសាស្រ្តរបស់យើងនៃស្លាកអណ្តែតតែ CSS ប្រើ :placeholder-shown
ធាតុ pseudo-element ។ សូមចំណាំផងដែរថា <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 ជាមួយនឹង .form-control
មានកម្ពស់ដូចគ្នានឹង <input>
s ។
<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>
ជ្រើសរើស
ផ្សេងពី .form-control
នេះ ស្លាកអណ្តែតអាចមាននៅលើ .form-select
s ប៉ុណ្ណោះ។ ពួកវាដំណើរការតាមរបៀបដូចគ្នា ប៉ុន្តែមិនដូច <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>
បានតែអានអត្ថបទធម្មតាប៉ុណ្ណោះ។
ស្លាកអណ្តែតក៏គាំទ្រផងដែរ .form-control-plaintext
ដែលអាចមានប្រយោជន៍សម្រាប់ការបិទបើកពីតម្លៃដែលអាចកែសម្រួលបាន <input>
ទៅតម្លៃអត្ថបទធម្មតាដោយមិនប៉ះពាល់ដល់ប្លង់ទំព័រ។
<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>
ក្រុមបញ្ចូល
ស្លាកអណ្តែតក៏គាំទ្រផងដែរ .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>
នៅពេលប្រើ .input-group
និង .form-floating
រួមជាមួយការបញ្ជាក់ទម្រង់ -feedback
គួរតែត្រូវបានដាក់នៅខាងក្រៅ .form-floating
ប៉ុន្តែនៅខាងក្នុងនៃ .input-group
. នេះមានន័យថាមតិកែលម្អនឹងត្រូវបង្ហាញដោយប្រើ 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>
ប្លង់
នៅពេលធ្វើការជាមួយប្រព័ន្ធក្រឡាចត្រង្គ Bootstrap ត្រូវប្រាកដថាដាក់ធាតុទម្រង់នៅក្នុងថ្នាក់ជួរឈរ។
<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>
សាស
អថេរ
$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;