در این بخش با آکاردئون در بوت استرپ آشنا می‌شوید. آکاردئون، عناصر را به صورت عمودی باز و بسته می‌کند و این کار را با تغییر کلاس ها انجام می‌دهد. اگر می‌خواهید آکاردئون هایی با قابلیت جمع شدن عمودی بسازید، باید از افزونه JavaScript با نام collapse استفاده کنید.
از آکاردئون در بوت استرپ کجا استفاده کنیم؟
آکاردئون یکی از بهترین ابزارهای طراحی برای زمانی است که می‌خواهید محتوای زیادی را در فضای محدود نمایش دهید. این کامپوننت کمک می‌کند تا صفحه سایت شما منظم‌تر باشد و کاربر بدون اسکرول زیاد، به اطلاعات دلخواهش برسد. از آکاردئون معمولاً در این موقعیت‌ها استفاده می‌شود:
-
سوالات متداول (FAQ): یکی از رایج‌ترین کاربردها. هر سؤال یک بخش از آکاردئون است و با کلیک روی آن، پاسخ نمایش داده می‌شود.
-
محتوای دسته‌بندی شده: اگر مقاله‌ای دارید که شامل چند بخش جداگانه است، میتوانید هر بخش را در یک آیتم آکاردئون قرار دهید.
- نمایش جزئیات محصول: در فروشگاه‌های اینترنتی، میتوانید توضیحات، مشخصات فنی، نظرات کاربران و سؤالات متداول را در قالب آکاردئون دسته‌بندی کنید تا کاربران راحت‌تر به بخش مورد نظرشان برسند.
نحوه عملکرد
آکاردئون برای باز و بسته شدن، از قابلیت collapse استفاده می‌کند. وقتی کلاس .open را به عنصر .accordion اضافه می‌کنید، آکاردئون در حالت باز نمایش داده می‌شود.
مثال:
|
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 35 36 37 38 39 40 41 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Accordion</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> <style> </style> </head> <body> <div class="accordion" id="basicAccordion"> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#firstCollapse" aria-expanded="true" aria-controls="firstCollapse"> Bootstrap - Accordian </button> </h2> <div id="firstCollapse" class="accordion-collapse collapse show" data-bs-parent="#basicAccordion"> <div class="accordion-body"> The <b>accordion</b> collapses elements vertically, shown and hidden by class change. </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#secondCollapse" aria-expanded="false" aria-controls="secondCollapse"> Bootstrap - Buttons </button> </h2> <div id="secondCollapse" class="accordion-collapse collapse" data-bs-parent="#basicAccordion"> <div class="accordion-body"> You can use Bootstraps custom button styles for actions in forms, dialogs and many more. </div> </div> </div> </div> </body> </html> |
کلاس Flush
اگر می‌خواهید آکاردئون ها بدون حاشیه و گوشه‌های گرد نمایش داده شوند و از لبه تا لبه گسترش پیدا کنند، از کلاس .accordion-flush استفاده کنید. این کلاس باعث حذف حاشیه ها و گوشه های گرد آکاردئون می‌شود و ظاهر یکپارچه‌تری به آن می‌دهد.
|
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 35 36 37 38 39 40 41 42 43 44 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Accordion</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> <style> </style> </head> <body> <div class="accordion accordion-flush" id="flushAccordion"> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flushCollapseOne" aria-expanded="false" aria-controls="flushCollapseOne"> Bootstrap - Accordian </button> </h2> <div id="flushCollapseOne" class="accordion-collapse collapse" data-bs-parent="#flushAccordion"> <div class="accordion-body"> The <b>accordion</b> collapses elements vertically, shown and hidden by class change. </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flushCollapseTwo" aria-expanded="false" aria-controls="flushCollapseTwo"> Bootstrap - Buttons </button> </h2> <div id="flushCollapseTwo" class="accordion-collapse collapse" data-bs-parent="#flushAccordion"> <div class="accordion-body"> You can use Bootstraps custom button styles for actions in forms, dialogs and many more. </div> </div> </div> </div> </div> </body> </html> |
باز بودن همزمان چند بخش
اگر می‌خواهید چند بخش از آکاردئون به طور همزمان باز بمانند و با باز شدن یک بخش، بخش دیگر بسته نشود، کافی است ویژگی data-bs-parent را از هر عنصر .accordion-collapse حذف کنید. این تکنیک یکی از نکاتی است که در آموزش پروژه محور بوت استرپ به آن پرداخته می‌شود، با انجام این کار، محدودیت باز بودن تنها یک بخش برداشته می‌شود و کاربران می‌توانند چند بخش را به صورت همزمان مشاهده کنند.
|
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 35 36 37 38 39 40 41 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Accordion</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> <style> </style> </head> <body> <div class="accordion" id="alwaysOpenAccordion"> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#firstCollpaseofAlwaysOpen" aria-expanded="true" aria-controls="firstCollpaseofAlwaysOpen"> Bootstrap - Accordian </button> </h2> <div id="firstCollpaseofAlwaysOpen" class="accordion-collapse collapse show"> <div class="accordion-body"> The <b>accordion</b> collapses elements vertically, shown and hidden by class change. </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#secondCollpaseofAlwaysOpen" aria-expanded="false" aria-controls="secondCollpaseofAlwaysOpen"> Bootstrap - Buttons </button> </h2> <div id="secondCollpaseofAlwaysOpen" class="accordion-collapse collapse"> <div class="accordion-body"> The <b>accordion</b> collapses elements vertically, shown and hidden by class change. </div> </div> </div> </div> </body> </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
- اچ تی ام ال
- بانک اطلاعاتی
- برنامه نویسی سوکت
- برنامه نویسی موبایل
- پاسکال
- پایان نامه
- پایتون
- جاوا
- جاوا اسکریپت
- جی کوئری
- داده کاوی
- دلفی
- رباتیک
- سئو
- سایر کتاب ها
- سخت افزار
- سی اس اس
- سی پلاس پلاس
- سی شارپ
- طراحی الگوریتم
- فتوشاپ
- مقاله
- مهندسی نرم افزار
- هک و امنیت
- هوش مصنوعی
- ویژوال بیسیک
- نرم افزار و ابزار برنامه نویسی
- وردپرس
