در این بخش به منوی انتخاب در فرم بوت استرپ پرداخته می‌شود. با استفاده از CSS سفارشی می‌توان ظاهر پیش‌فرض عناصر <select> را تغییر داد.
حالت پیش فرض منوی انتخاب در فرم بوت استرپ
برای استفاده از منوهای انتخاب سفارشی در فرم، باید کلاس .form-select را به عنصر <select> اضافه کرد. این کلاس باعث فعال شدن استایل‌های سفارشی بوت استرپ می‌شود.
با توجه به محدودیت‌هایی که در مرورگرها وجود دارد، امکان سفارشی‌سازی کامل برای گزینه‌های درون <select> (یعنی تگ‌های <option>) وجود ندارد. در واقع، فقط می‌توان ظاهر کلی عنصر <select> را تغییر داد و نه گزینه‌های داخلی آن.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Select Menu</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> <select class="form-select" aria-label="Default select example"> <option selected>Select Menu</option> <option value="1">Item 1</option> <option value="2">Item 2</option> <option value="3">Item 3</option> </select> </body> </html> |
تعیین اندازه منوی انتخاب در فرم بوت استرپ
برای هماهنگ‌سازی با فیلدهای متنی با اندازه‌های مختلف، می‌توان از منوی انتخاب در فرم با اندازه کوچک یا بزرگ استفاده کرد. بوت استرپ این امکان را فراهم می‌کند که متناسب با طراحی رابط کاربری، منوی انتخاب را در ابعاد مختلف تنظیم کنید.
|
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 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Select Menu</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> <select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example"> <option selected>Large Sized Select Menu</option> <option value="1">Item 1</option> <option value="2">Item 2</option> <option value="3">Item 3</option> </select> <select class="form-select form-select-sm" aria-label=".form-select-sm example"> <option selected>Small Sized Select Menu</option> <option value="1">Item 1</option> <option value="2">Item 2</option> <option value="3">Item 3</option> </select> </body> </html> |
با استفاده از ویژگی multiple میتوانید در منوی کشویی، امکان انتخاب چند گزینه را برای کاربر فراهم کنید. این قابلیت، به‌ویژه در فرم‌های پیشرفته کاربرد دارد و در آموزش پروژه محور بوت استرپ برای ساخت فرم‌های چندگزینه‌ای مورد استفاده قرار می‌گیرد.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Select Menu</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> <select class="form-select" multiple aria-label="multiple select example"> <option selected>Select Menu</option> <option value="1">Item 1</option> <option value="2">Item 2</option> <option value="3">Item 3</option> </select> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
ویژگی size تعداد گزینه‌های قابل نمایش در منوی کشویی را محدود می‌کند.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Select Menu</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> <select class="form-select" size="4" aria-label="size 3 select example"> <option selected>Select Menu</option> <option value="1">Item 1</option> <option value="2">Item 2</option> <option value="3">Item 3</option> <option value="3">Item 4</option> </select> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
غیرفعال سازی منوی انتخاب
برای اینکه منوی انتخاب در فرم به صورت غیرفعال نمایش داده شود (رنگ آن خاکستری شود و امکان کلیک یا انتخاب گزینه‌ای از آن وجود نداشته باشد)، باید ویژگی بولی disabled را به عنصر <select> اضافه کنید. این ویژگی باعث می‌شود تعامل کاربر با منو کاملاً غیرفعال شود.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Form - Select Menu</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> <select class="form-select" aria-label="Disabled select example" disabled> <option selected>Select Menu</option> <option value="1">Item 1</option> <option value="2">Item 2</option> <option value="3">Item 3</option> </select> </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
- اچ تی ام ال
- بانک اطلاعاتی
- برنامه نویسی سوکت
- برنامه نویسی موبایل
- پاسکال
- پایان نامه
- پایتون
- جاوا
- جاوا اسکریپت
- جی کوئری
- داده کاوی
- دلفی
- رباتیک
- سئو
- سایر کتاب ها
- سخت افزار
- سی اس اس
- سی پلاس پلاس
- سی شارپ
- طراحی الگوریتم
- فتوشاپ
- مقاله
- مهندسی نرم افزار
- هک و امنیت
- هوش مصنوعی
- ویژوال بیسیک
- نرم افزار و ابزار برنامه نویسی
- وردپرس
