ស្លាកអណ្តែត
បង្កើតស្លាកទម្រង់សាមញ្ញដ៏ស្រស់ស្អាត ដែលអណ្តែតលើវាលបញ្ចូលរបស់អ្នក។
ឧទាហរណ៍
រុំមួយគូ <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>
ប្លង់
នៅពេលធ្វើការជាមួយប្រព័ន្ធក្រឡាចត្រង្គ 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" 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;