این بخش به معرفی برچسب های شناور در بوت استرپ می‌پردازد. منظور از برچسب شناور، همان label فرم است که هنگام تایپ کاربر، به بالای فیلد ورودی منتقل می‌شود. این برچسب همچنان قابل مشاهده باقی می‌ماند.
مثال پایه برچسب های شناور در بوت استرپ
برای فعال‌سازی این قابلیت در فرم های متنی بوت استرپ، باید از یک <input class="form-control"> و یک <label> استفاده کنید. این دو عنصر باید درون یک عنصر با کلاس .form-floating قرار بگیرند.
وجود ویژگی placeholder برای هر input ضروری است. چرا که برچسب های شناور با استفاده از CSS و شبه‌کلاس :placeholder-shown پیاده سازی می‌شوند.
همچنین ترتیب قرارگیری عناصر اهمیت دارد. ابتدا باید عنصر input و سپس label نوشته شود. این ترتیب امکان استفاده از سِلِکتور هم‌سطح (مثل ~) را فراهم می‌کند و باعث اعمال صحیح استایل می‌شود.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Floating Labels</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="form-floating mb-3 mt-2"> <input type="text" class="form-control" id="floatingUsername" placeholder="tutorialspoint@example.com"> <label for="floatingUsername">Username</label> </div> <div class="form-floating"> <input type="password" class="form-control" id="floatingPassword" placeholder="Password"> <label for="floatingPassword">Password</label> </div> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
وقتی یک مقدار از قبل به فیلد ورودی اختصاص داده شده باشد، عنصر <label> به‌طور خودکار موقعیت خود را تنظیم می‌کند و به حالت شناور در بالای فیلد قرار می‌گیرد.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Floating Labels</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <form class="form-floating mt-2"> <input type="email" class="form-control" id="floatingInputValue" placeholder="tutorialspoint@example.com" value="sourcebaran@example.com"> <label for="floatingInputValue">Username</label> </form> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
با استفاده از استایل‌های اعتبارسنجی فرم مانند is-invalid، میتوانید هنگام ارسال داده های نادرست، بازخورد بصری مناسبی به کاربر نمایش دهید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Floating Labels</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <form class="form-floating"> <input type="text" class="form-control is-invalid" id="floatingInvalidInput" placeholder="Password" value="Password"> <label for="floatingInvalidInput">Invalid Password</label> </form> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
برچسب های شناور در ناحیه های متنی (Textarea)
ارتفاع عنصر <textarea> که دارای کلاس .form-control باشد، به‌صورت خودکار برابر با ارتفاع عنصر <input> تنظیم می‌شود. این ویژگی باعث هماهنگی بصری بین فیلدهای ورودی مختلف در فرم می‌شود.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Floating Labels</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="form-floating"> <textarea class="form-control" placeholder="Text Here" id="floatingTextarea"></textarea> <label for="floatingTextarea">Text Here</label> </div> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
اگر قصد دارید ارتفاع عنصر <textarea> را به‌صورت سفارشی تنظیم کنید، از ویژگی rows استفاده نکنید. در عوض، بهتر است ارتفاع را به‌طور مستقیم با استفاده از استایل دهی سفارشی مشخص کنید؛ چه به‌صورت درون خطی (inline) و چه از طریق فایل CSS. به‌عنوان مثال، در کد زیر از روش درون خطی برای تعیین ارتفاع استفاده شده است:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Floating Labels</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="form-floating"> <textarea class="form-control" placeholder="Add a comment" id="floatingTextarea" style="height: 100px"></textarea> <label for="floatingTextarea">Add a comment</label> </div> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
برچسب های شناور در فهرست های کشویی (Selects)
برچسب های شناور علاوه بر فیلدهای متنی با کلاس .form-control، برای فهرست های کشویی با کلاس .form-select نیز قابل استفاده هستند.
مفهوم استفاده از برچسب شناور در اینجا نیز مشابه قبل است. با این حال، برخلاف <input> که برچسب فقط هنگام وارد کردن داده یا وجود مقدار شناور می‌شود، در مورد <select>، برچسب همیشه به‌صورت شناور نمایش داده می‌شود.
نکته مهم این است که برچسب شناور از فهرست های چندگزینه ای (multiple select) و فهرست هایی که اندازه خاصی دارند (size-based select) پشتیبانی نمی‌کند. بنابراین برای استفاده از این قابلیت، تنها باید از حالت پیش‌فرض <select> استفاده کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Floating Labels</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="form-floating"> <select class="form-select" id="floatingSelect" aria-label="Floating label select menu"> <option selected>Language</option> <option value="1">English</option> <option value="2">Hindi</option> <option value="3">Marathi</option> </select> <label for="floatingSelect">Others</label> </div> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
غیرفعال کردن فیلدها (Disabled)
برای غیرفعال کردن یک فیلد، کافی است ویژگی بولی disabled را به عنصر موردنظر اضافه کنید. این ویژگی را می‌توان روی فیلدهای <input>، <textarea> و <select> اعمال کرد. با اعمال این ویژگی، فیلد موردنظر به حالت غیرفعال درمی‌آید. در نتیجه، ظاهر آن خاکستری می‌شود، امکان کلیک یا focus روی آن وجود ندارد و هیچ رویداد اشاره گری (pointer events) نیز ثبت نمی‌شود. این قابلیت زمانی کاربرد دارد که بخواهید برخی گزینه ها را به‌صورت موقت یا دائم از دسترس کاربر خارج کنید.
برای یادگیری دقیق‌تر این مفاهیم در قالب پروژه‌های عملی، پیشنهاد می‌کنیم سری به صفحه آموزش پروژه محور بوت استرپ بزنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Floating Labels</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="form-floating mb-3"> <input type="email" class="form-control" id="floatingInputDisabled" placeholder="name" disabled> <label for="floatingInputDisabled">Name</label> </div> <div class="form-floating mb-3"> <textarea class="form-control" placeholder="tutorialspoint@example.com" id="floatingEmailDisabled" disabled></textarea> <label for="floatingEmailDisabled">Email Id</label> </div> <div class="form-floating mb-3"> <textarea class="form-control" placeholder="Add a comment" id="floatingTextareaDisabled" style="height: 120px" disabled></textarea> <label for="floatingTextareaDisabled">Add a comment</label> </div> <div class="form-floating"> <select class="form-select" id="floatingSelectDisabled" aria-label="Floating label disabled select example" disabled> <option selected>Select Language</option> <option value="1">English</option> <option value="2">Hindi</option> <option value="3">Marathi</option> </select> <label for="floatingSelectDisabled">Others</label> </div> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
نمایش فقط خواندنی (Readonly Plaintext)
در مواقعی که می‌خواهید یک فیلد ورودی را از حالت قابل ویرایش خارج کنید، اما همچنان مقدار آن به‌صورت متنی و در چارچوب طراحی فرم نمایش داده شود، استفاده از کلاس .form-control-plaintext بسیار مفید است. این کلاس امکان می‌دهد عنصر <input> به‌صورت فقط خواندنی (readonly) نمایش داده شود، بدون اینکه چینش کلی صفحه یا ظاهر فرم تغییر کند. به این ترتیب، میتوانید داده‌ای را به‌صورت واضح به کاربر نشان دهید، بدون اینکه اجازه ویرایش آن را بدهید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Floating Labels</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="form-floating mb-3 mt-2"> <input type="text" readonly class="form-control" id="floatingEmptyPlaintextInput" style="height: 80px" placeholder="Block the comment" value="Block the comment"> <label for="floatingEmptyPlaintextInput">Block the comment</label> </div> <div class="form-floating mb-3"> <input type="text" readonly class="form-control" id="floatingPlaintextInput" style="height: 80px" placeholder="Add a comment" value="Add a comment"> <label for="floatingPlaintextInput">Add a comment</label> </div> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
برچسب های شناور در گروه های ورودی (Input Groups)
برچسب های شناور با ساختارهای ترکیبی مانند .input-group نیز سازگار هستند. به بیان دیگر، میتوانید از برچسب های شناور در کنار دکمه ها، آیکون ها یا متن های کمکی داخل فیلد ورودی استفاده کنید، بدون آنکه نظم و ظاهر فرم به‌هم بخورد. این ویژگی باعث می‌شود حتی در فرم های پیچیده تر نیز طراحی مدرن و کاربرپسند حفظ شود.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Floating Labels</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="input-group mb-3"> <div class="form-floating"> <input type="email" class="form-control" id="floatingInputGroup" placeholder="email"> <label for="floatingInputGroup">Email Id</label> </div> <span class="input-group-text">tutorialspoint@example.com</span> </div> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
زمانی که از برچسب های شناور (.form-floating) و گروه های ورودی (.input-group) در کنار سیستم اعتبارسنجی فرم استفاده می‌کنید، باید کلاس های مربوط به بازخورد کاربر مانند -feedback را در جای درستی قرار دهید. در این حالت، کلاس -feedback (مانند .invalid-feedback یا .valid-feedback) باید خارج از .form-floating قرار گیرد، اما همچنان درون .input-group باقی بماند. این ساختار باعث می‌شود پیام‌های خطا یا تأیید به‌درستی نمایش داده شوند و تداخل ظاهری بین اجزای فرم به وجود نیاید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Floating Labels</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="input-group has-validation"> <div class="form-floating is-invalid"> <input type="text" class="form-control is-invalid" id="floatingInputGroup" placeholder="Password" required> <label for="floatingInputGroup">Password</label> </div> <div class="invalid-feedback"> Wrong Password </div> </div> </body> </html> |
برچسب های شناور در چیدمان (Layout)
هنگام استفاده از سیستم شبکه بندی (Grid System) بوت استرپ، بهره‌گیری از برچسب‌های شناور می‌تواند بسیار مفید باشد. زیرا این امکان را فراهم می‌کند که عناصر فرم را به‌راحتی درون ستون های مشخص‌شده قرار دهید و یک چیدمان منظم و واکنش گرا ایجاد کنید.
با این حال، بوت استرپ برای این نوع چیدمان، کلاس های از پیش‌تعریف‌شده‌ای ارائه نمی‌دهد. بنابراین لازم است از کلاس های مربوط به فرم استفاده کنید و عناصر را مطابق با نیاز پروژه، درون ستون های دلخواه قرار دهید و موقعیت‌دهی کنید. این انعطاف‌پذیری به شما اجازه می‌دهد فرم‌هایی با ساختار حرفه‌ای و متناسب با طراحی کلی صفحه ایجاد کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Floating Labels</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="row g-2"> <div class="col-md"> <div class="form-floating"> <input type="email" class="form-control" id="floatingGrid" placeholder="sourcebaran@example.com" value="sourcebaran@example.com"> <label for="floatingGrid">Email Id</label> </div> </div> <div class="col-md"> <div class="form-floating"> <select class="form-select" id="floatingSelectGrid"> <option selected>Language</option> <option value="1">English</option> <option value="2">Hindi</option> <option value="3">Marathi</option> </select> <label for="floatingSelectGrid">Others</label> </div> </div> </div> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.
- انتشار: ۵ تیر ۱۴۰۴
دسته بندی موضوعات
- آموزش ارز دیجیتال
- آموزش برنامه نویسی
- آموزش متنی برنامه نویسی
- اطلاعیه و سایر مطالب
- پروژه برنامه نویسی
- دوره های تخصصی برنامه نویسی
- رپورتاژ
- فیلم های آموزشی
- ++C
- ADO.NET
- Adobe Flash
- Ajax
- AngularJS
- apache
- ARM
- Asp.Net
- ASP.NET MVC
- AVR
- Bootstrap
- CCNA
- CCNP
- CMD
- CSS
- Dreameaver
- EntityFramework
- HTML
- IOS
- jquery
- Linq
- Mysql
- Oracle
- PHP
- PHPMyAdmin
- Rational Rose
- silver light
- SQL Server
- Stimulsoft Reports
- Telerik
- UML
- VB.NET&VB6
- WPF
- Xml
- آموزش های پروژه محور
- اتوکد
- الگوریتم تقریبی
- امنیت
- اندروید
- اندروید استودیو
- بک ترک
- بیسیک فور اندروید
- پایتون
- جاوا
- جاوا اسکریپت
- جوملا
- دلفی
- دوره آموزش Go
- دوره های رایگان پیشنهادی
- زامارین
- سئو
- ساخت CMS
- سی شارپ
- شبکه و مجازی سازی
- طراحی الگوریتم
- طراحی بازی
- طراحی وب
- فتوشاپ
- فریم ورک codeigniter
- فلاتر
- کانستراکت
- کریستال ریپورت
- لاراول
- معماری کامپیوتر
- مهندسی اینترنت
- هوش مصنوعی
- یونیتی
- کتاب های آموزشی
- Android
- ASP.NET
- AVR
- LINQ
- php
- Workflow
- اچ تی ام ال
- بانک اطلاعاتی
- برنامه نویسی سوکت
- برنامه نویسی موبایل
- پاسکال
- پایان نامه
- پایتون
- جاوا
- جاوا اسکریپت
- جی کوئری
- داده کاوی
- دلفی
- رباتیک
- سئو
- سایر کتاب ها
- سخت افزار
- سی اس اس
- سی پلاس پلاس
- سی شارپ
- طراحی الگوریتم
- فتوشاپ
- مقاله
- مهندسی نرم افزار
- هک و امنیت
- هوش مصنوعی
- ویژوال بیسیک
- نرم افزار و ابزار برنامه نویسی
- وردپرس
