در حال بارگزاری...

###### از دست ندهید! به‌روزرسانی جدید منتشر شده است.

###### چیزی که دوست دارید اکنون در فروش است!

هم اکنون بخرید!

#### آکوردون

#### آکاردئون ساده

روی آکاردئون های زیر کلیک کنید تا محتوای آکاردئون را بزرگ یا کوچک کنید. از `.accordion` استفاده کنید.

##

طراحی وب اهداف یک وب سایت یا صفحه وب را شناسایی می کند و دسترسی را برای همه کاربران بالقوه ارتقا می دهد. این فرآیند شامل سازماندهی محتوا و تصاویر در یک سری از صفحات و یکپارچه سازی برنامه ها و سایر عناصر تعاملی است.

##

بهینه سازی موتور جستجو: بهینه سازی موتور جستجو (SEO) روشی برای بهبود شانس یافتن یک وب سایت توسط موتورهای جستجو است. طراحی وب اطلاعات را به گونه ای کد می کند که موتورهای جستجو بتوانند آن را بخوانند. این می تواند تجارت را تقویت کند زیرا سایت در صفحات برتر نتایج جستجو نشان داده می شود و به افراد کمک می کند آن را پیدا کنند.

پاسخگویی تلفن همراه: پاسخگویی تلفن همراه ویژگی یک وب سایت است که به آن امکان می دهد در دستگاه تلفن همراه نمایش داده شود و طرح و تناسبات آن خوانا باشد. طراحی وب تضمین می کند که سایت ها به راحتی قابل مشاهده و پیمایش از دستگاه های تلفن همراه هستند. وقتی یک وب‌سایت به خوبی طراحی شده باشد و پاسخگوی تلفن همراه باشد، مشتریان می‌توانند به راحتی به کسب و کار دسترسی پیدا کنند.

فروش بهبود یافته:افزایش تعداد اقلام فروخته شده یا به دست آوردن مشتریان فعال بیشتر از اهداف یک وب سایت متقاعد کننده است. همانطور که طراحی وب به مشتریان و موتورهای جستجوی هدف می رسد، به کسب و کار کمک می کند تا در سایت خود تبدیل و فروش خود را بهبود بخشد.

##

فرآیند طراحی وب به طراحان این امکان را می دهد تا با هر اولویتی سازگار شوند و راه حل های موثری ارائه دهند. بسیاری از اجزای استاندارد هر طراحی وب وجود دارد، از جمله:

- --> چیدمان
- --> تصاویر
- --> سلسله مراتب بصری
- --> طرح رنگ
- --> تایپوگرافی
- --> پیمایش
- --> خوانایی
- --> محتوا

    <!--You can use .accordion-collapse with .show class then show accordions.-->
    <div class="accordion dark-accordion" id="simpleaccordion">
    <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
    <button class="accordion-button collapsed accordion-light-primary txt-primary active" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">What do web designers do?<i class="svg-color" data-feather="chevron-down"></i></button>
    </h2>
    <div class="accordion-collapse collapse show" id="collapseOne" aria-labelledby="headingOne" data-bs-parent="#simpleaccordion">
    <div class="accordion-body">
    <p>
    Web design<em class="txt-danger"> identifies the goals</em> of a website or webpage and promotes accessibility for all potential users. This process involves organizing content and images across a series of pages and integrating applications and other interactive elements.</p>
    </div>
    </div>
    </div>
    <div class="accordion-item">
    <h2 class="accordion-header" id="headingTwo">
    <button class="accordion-button collapsed accordion-light-primary txt-primary active" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">What is the use of web design?<i class="svg-color" data-feather="chevron-down"></i></button>
    </h2>
    <div class="accordion-collapse collapse" id="collapseTwo" aria-labelledby="headingTwo" data-bs-parent="#simpleaccordion">
    <div class="accordion-body">
    <p class="mb-3"><strong> Search engine optimization: </strong> Search engine optimization (SEO) is a method for improving the chances for a website to be found by search engines. Web design codes information in a way that search engines can read it. It can boost business because the site shows up on the top search result pages, helping people to find it.</p>
    <p class="mb-3"><strong> Mobile responsiveness:</strong> Mobile responsiveness is the feature of a website that allows it to display on a mobile device and adapt its layout and proportions to be legible. Web design ensures sites are easy to view and navigate from mobile devices. When a website is well-designed and mobile-responsive, customers can reach the business with ease.</p>
    <p><strong> Improved sales:</strong>Increasing the number of items sold or acquiring more active customers are objectives of a compelling website. As web design reaches targeted customers and search engines, it helps the business make conversions on their site and improve its sales.</p>
    </div>
    </div>
    </div>
    <div class="accordion-item">
    <h2 class="accordion-header" id="headingThree">
    <button class="accordion-button collapsed accordion-light-primary txt-primary active" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">What are the elements of web design?<i class="svg-color" data-feather="chevron-down"></i></button>
    </h2>
    <div class="accordion-collapse collapse" id="collapseThree" aria-labelledby="headingThree" data-bs-parent="#simpleaccordion">
    <div class="accordion-body">
    <p>
    The web design process allows designers to adjust to any preferences and provide effective solutions. There are many standard components of every web design, including:
    <ul class="d-flex flex-column gap-2 accordions-content">
    <li>--> Layout</li>
    <li>--> Images</li>
    <li>--> Visual hierarchy</li>
    <li>--> Color scheme</li>
    <li>--> Typography</li>
    <li>--> Navigation</li>
    <li>--> Readability</li>
    <li>--> Content</li>
    </ul>
    </p>
    </div>
    </div>
    </div>
    </div>

#### آکاردئون فلاش

`.accordion-flush` را اضافه کنید تا `پس‌زمینه رنگ` پیش‌فرض، برخی از حاشیه‌ها و برخی گوشه‌های گرد را برای رندر کردن آکاردئون‌ها حذف کنید. لبه به لبه با ظرف والد خود.

##

- --> بوت استرپ محبوب ترین چارچوب HTML، CSS و جاوا اسکریپت برای توسعه یک وب سایت پاسخگو و سازگار با موبایل است.
- --> دانلود و استفاده از آن کاملا رایگان است.

##

- اول و مهمتر از همه، یادگیری Bootstrap آسان است. به دلیل محبوبیت آن، آموزش‌ها و انجمن‌های آنلاین زیادی برای کمک به شما در شروع کار در دسترس هستند.
- یکی از دلایل محبوبیت بوت استرپ در بین توسعه دهندگان وب و طراحان وب این است که ساختار فایل ساده ای دارد. فایل‌های آن برای دسترسی آسان کامپایل شده‌اند و برای اصلاح آن‌ها فقط به دانش اولیه HTML، CSS و JS نیاز است.
- شما همچنین می توانید از تم ها برای سیستم های مدیریت محتوای محبوب به عنوان ابزار یادگیری استفاده کنید. به عنوان مثال، اکثر تم های وردپرس با استفاده از بوت استرپ توسعه یافته اند که هر توسعه دهنده وب مبتدی می تواند به آن دسترسی داشته باشد.
- برای افزایش زمان بارگذاری صفحه سایت، بوت استرپ فایل های CSS و جاوا اسکریپت را کوچک می کند. علاوه بر این، Bootstrap یکپارچگی را در نحو بین وب سایت ها و توسعه دهندگان حفظ می کند که برای پروژه های مبتنی بر تیم ایده آل است.

##

- Bootstrap نمایش و پاسخگویی تصویر را با قوانین HTML و CSS از پیش تعریف شده خود کنترل می کند.
- افزودن کلاس .img-responsive به طور خودکار اندازه تصاویر را بر اساس اندازه صفحه نمایش کاربران تغییر می دهد. این به عملکرد وب سایت شما کمک می کند، زیرا کاهش اندازه تصویر بخشی از فرآیند بهینه سازی سایت است.
- Bootstrap همچنین کلاس های اضافی مانند .img-circle و .img-rounded را ارائه می دهد که به تغییر شکل تصاویر کمک می کند.

    <!--You can use .accordion-collapse with .show class then show accordions.-->
    <div class="accordion accordion-flush dark-accordion" id="accordionFlushExample">
    <div class="accordion-item">
    <h2 class="accordion-header" id="flush-headingOne">
    <button class="accordion-button collapsed txt-success accordion-light-success active" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">What is bootstrap?</button>
    </h2>
    <div class="accordion-collapse collapse show" id="flush-collapseOne" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
    <div class="accordion-body">
    <ul class="d-flex flex-column gap-1 accordions-content">
    <li>--> Bootstrap is the most popular HTML, CSS and JavaScript framework for developing a responsive and mobile friendly website.</li>
    <li>--> It is absolutely free to download and use.</li>
    </ul>
    </div>
    </div>
    </div>
    <div class="accordion-item">
    <h2 class="accordion-header" id="flush-headingTwo">
    <button class="accordion-button collapsed txt-success accordion-light-success" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">Why Should You Use Bootstrap?</button>
    </h2>
    <div class="accordion-collapse collapse" id="flush-collapseTwo" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
    <div class="accordion-body">
    <ul class="d-flex flex-column gap-2 accordions-content">
    <li>First and foremost, Bootstrap is easy to learn. Due to its popularity, plenty of tutorials and online forums are available to help you get started.</li>
    <li>One of the reasons why Bootstrap is so popular among web developers and web designers is that it has a simple file structure. Its files are compiled for easy access, and it only requires basic knowledge of HTML, CSS, and JS to modify them.</li>
    <li>You can also use themes for popular content management systems as learning tools. For example, most WordPress themes were developed using Bootstrap, which any beginner web developer can access. </li>
    <li>To increase the site's page load time, Bootstrap minifies the CSS and JavaScript files. Additionally, Bootstrap maintains consistency across the syntax between websites and developers, which is ideal for team-based projects.</li>
    </ul>
    </div>
    </div>
    </div>
    <div class="accordion-item">
    <h2 class="accordion-header" id="flush-headingThree">
    <button class="accordion-button collapsed txt-success accordion-light-success" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">Bootstrap Image System</button>
    </h2>
    <div class="accordion-collapse collapse" id="flush-collapseThree" aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
    <div class="accordion-body">
    <ul class="d-flex flex-column gap-2 accordions-content">
    <li>Bootstrap handles the image display and responsiveness with its predefined HTML and CSS rules.</li>
    <li>Adding the .img-responsive class will automatically resize images based on the users' screen size. This will benefit your website’s performance, as reducing image sizes is part of the site optimization process.</li>
    <li>Bootstrap also provides additional classes like .img-circle and .img-rounded, which help to modify the images' shape.</li>
    </ul>
    </div>
    </div>
    </div>
    </div>

#### آکاردئون فروپاشی چندگانه

یک `<button>` یا`<a>` می تواند چندین عنصر را با ارجاع دادن به آنها با انتخابگر در ویژگی href یا data-bs-target آن.

تغییر عنصر اول
افزونه collapse JavaScript برای نمایش و پنهان کردن محتوا استفاده می شود. دکمه‌ها یا لنگرها به‌عنوان محرک‌هایی استفاده می‌شوند که به عناصر خاصی که شما تغییر می‌دهید، نگاشت می‌شوند. جمع کردن یک عنصر، ارتفاع آن را از مقدار فعلی به 0 متحرک می کند. با توجه به اینکه CSS چگونه انیمیشن ها را مدیریت می کند، نمی توانید از padding روی یک عنصر collapse. استفاده کنید. در عوض، از کلاس به عنوان یک عنصر بسته بندی مستقل استفاده کنید.
این اولین بدنه آکاردئونی مورد است. به طور پیش فرض نشان داده می شود، تا زمانی که افزونه collapse کلاس های مناسبی را که برای استایل دادن به هر عنصر استفاده می کنیم اضافه کند. این کلاس ها ظاهر کلی و همچنین نمایش و پنهان شدن از طریق انتقال CSS را کنترل می کنند. شما می توانید هر یک از این موارد را با CSS سفارشی یا نادیده گرفتن متغیرهای پیش فرض ما تغییر دهید.

    <!--You can use .accordion-collapse with .show class then show accordions.-->
    <div class="common-flex"><a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
    <button class="btn btn-warning" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
    <button class="btn btn-success" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
    </div>
    <div class="row d-flex">
    <div class="col-xl-6">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
    <div class="card card-body mt-3 mb-0 collapse-wrapper accordion-light-primary">The collapse JavaScript plugin is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the height from it's current value to 0. Given how CSS handles animations, you cannot use padding on a .collapse element. Instead, use the class as an independent wrapping element.</div>
    </div>
    </div>
    <div class="col-xl-6">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
    <div class="card card-body mt-3 mb-0 collapse-wrapper accordion-light-warning">This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables.</div>
    </div>

#### با نمادهای آکاردئون

از `.accordion` & `نمادهای پر` از طریق تغییر ظاهر آکاردئون نمادها استفاده کنید.

##

" ممکن است این صفحه آنطور که انتظار می رود رفتار نکند زیرا Windows Internet Explorer برای بارگیری کنترل های ActiveX امضا نشده پیکربندی نشده است." یا "به این صفحه اجازه نصب یک ActiveX بدون امضا داده شود." کنترل کنید؟ انجام این کار از منابع نامعتبر ممکن است به رایانه شما آسیب برساند." (هر دو به عنوان شرایطی که ممکن است مشکلاتی در آینده ایجاد کنند.)

##

- شما ویژگی‌های یکسانی را در Chat و Chat در Gmail دریافت می‌کنید، اما تجربه یکپارچه Gmail یک مکان مرکزی برای برقراری ارتباط با دوستان، خانواده یا همکاران بین ایمیل‌ها فراهم می‌کند.
- چت: زمانی استفاده کنید که تجربه چت اختصاصی را ترجیح می‌دهید و اهمیتی برای جابه‌جایی بین برنامه‌های مختلف ندارید.

##

- 1) در مورد تورفتگی تصمیم بگیرید و آن را به همین صورت نگه دارید.
- 2) نظر بدهید.
- 3) طرح نام ثابت.
- 4) کد را تکرار نکنید.
- 5) از نوشتن خطوط کد طولانی خودداری کنید.
- 6) یک کار بزرگ را به تکه های کوچکتر تقسیم کنید.
- 7) برنامه خود را در فایل های کوچکتر سازماندهی کنید.
- 8) کد هوشمندانه ای بنویسید که قابل خواندن نیز باشد.

    <!--You can use .accordion-collapse with .show class then show accordions.-->
    <div class="accordion dark-accordion" id="accordionPanelsStayOpenExample">
    <div class="accordion-item">
    <h2 class="accordion-header" id="panelsStayOpen-headingOne">
    <button class="accordion-button collapsed gap-2 accordion-light-secondary active txt-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="false" aria-controls="panelsStayOpen-collapseOne"><i class="svg-wrapper" data-feather="bell"></i>Keep in touch<i class="svg-color" data-feather="chevron-down"></i></button>
    </h2>
    <div class="accordion-collapse collapse" id="panelsStayOpen-collapseOne" aria-labelledby="panelsStayOpen-headingOne">
    <div class="accordion-body">
    <p> <em class="txt-danger"> " This page might not behave as expected because Windows Internet Explorer isn't configured to load unsigned ActiveX controls."</em> or "Allow this page to install an unsigned ActiveX Control? Doing so from untrusted sources may harm your computer." (Both phrased as conditions that may cause future problems.)</p>
    </div>
    </div>
    </div>
    <div class="accordion-item">
    <h2 class="accordion-header" id="panelsStayOpen-headingTwo">
    <button class="accordion-button collapsed gap-2 accordion-light-secondary active txt-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false" aria-controls="panelsStayOpen-collapseTwo"><i class="svg-wrapper" data-feather="message-circle"></i>Chats with others<i class="svg-color" data-feather="chevron-down"></i></button>
    </h2>
    <div class="accordion-collapse collapse" id="panelsStayOpen-collapseTwo" aria-labelledby="panelsStayOpen-headingTwo">
    <div class="accordion-body">
    <ul class="d-flex flex-column gap-2 accordions-content">
    <li>You get the same features in Chat and Chat in Gmail, but the integrated Gmail experience provides a central location to communicate with friends, family, or coworkers between emails.</li>
    <li> <strong>Chat:</strong> Use when you prefer a dedicated chat experience and don't mind switching between different apps.</li>
    </ul>
    </div>
    </div>
    </div>
    <div class="accordion-item">
    <h2 class="accordion-header" id="panelsStayOpen-headingThree">
    <button class="accordion-button collapsed gap-2 accordion-light-secondary active txt-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseThree" aria-expanded="false" aria-controls="panelsStayOpen-collapseThree"><i class="svg-wrapper" data-feather="check-square"></i>Right way to code <i class="svg-color" data-feather="chevron-down"></i></button>
    </h2>
    <div class="accordion-collapse collapse" id="panelsStayOpen-collapseThree" aria-labelledby="panelsStayOpen-headingThree">
    <div class="accordion-body">
    <ul class="d-flex flex-column gap-2 accordions-content">
    <li>1) Decide on the indentation and keep it that way.</li>
    <li>2) Make comments.</li>
    <li>3) Consistent name scheme.</li>
    <li>4) Don't repeat code.</li>
    <li>5) Avoid writing long code lines.</li>
    <li>6) Break down a big task into smaller chunks.</li>
    <li>7) Organize your program into smaller files.</li>
    <li>8) Write clever code that is also readable.</li>
    </ul>
    </div>
    </div>
    </div>
    </div>

#### آکاردئون طرح کلی

از کلاس سفارشی `.accordion-wrapper` برای آوردن حاشیه سمت چپ استفاده کنید.

##

طراحی وب اهداف یک وب سایت یا صفحه وب را شناسایی می کند و دسترسی را برای همه کاربران بالقوه ارتقا می دهد. این فرآیند شامل سازماندهی محتوا و تصاویر در یک سری از صفحات و یکپارچه سازی برنامه ها و سایر عناصر تعاملی است.

##

- بهینه سازی موتور جستجو: بهینه سازی موتور جستجو (SEO) روشی برای بهبود شانس یافتن یک وب سایت توسط موتورهای جستجو است. طراحی وب اطلاعات را به گونه ای کد می کند که موتورهای جستجو بتوانند آن را بخوانند. این می تواند تجارت را تقویت کند زیرا سایت در صفحات برتر نتایج جستجو نشان داده می شود و به افراد کمک می کند آن را پیدا کنند.
- پاسخگویی تلفن همراه: پاسخگویی تلفن همراه ویژگی یک وب سایت است که به آن امکان می دهد در دستگاه تلفن همراه نمایش داده شود و طرح و نسبت های آن را خوانا تنظیم کند. طراحی وب تضمین می کند که سایت ها به راحتی قابل مشاهده و پیمایش از دستگاه های تلفن همراه هستند. وقتی یک وب‌سایت به خوبی طراحی شده و پاسخگوی تلفن همراه باشد، مشتریان می‌توانند به راحتی به کسب و کار دسترسی پیدا کنند.
- فروش بهبود یافته:افزایش تعداد اقلام فروخته شده یا به دست آوردن مشتریان فعال بیشتر از اهداف یک وب سایت متقاعد کننده است. همانطور که طراحی وب به مشتریان و موتورهای جستجوی هدف می‌رسد، به کسب‌وکار کمک می‌کند تا در سایت خود تبدیل‌هایی داشته باشد و فروش آن را بهبود بخشد.

##

- فرآیند طراحی وب به طراحان اجازه می دهد تا با هر اولویتی سازگار شوند و راه حل های موثری ارائه دهند. بسیاری از اجزای استاندارد هر طراحی وب وجود دارد، از جمله:
- --> چیدمان
- --> تصاویر
- --> سلسله مراتب بصری
- --> طرح رنگ
- --> تایپوگرافی
- --> پیمایش
- --> خوانایی
- --> محتوا

    <!--You can use .accordion-collapse with .show class then show accordions.-->
    <div class="accordion dark-accordion" id="outlineaccordion">
    <div class="accordion-item accordion-wrapper">
    <h2 class="accordion-header" id="outlineaccordionone">
    <button class="accordion-button collapsed accordion-light-primary txt-primary" type="button" data-bs-toggle="collapse" data-bs-target="#left-collapseOne" aria-expanded="true" aria-controls="left-collapseOne">What do web designers do?<i class="svg-color" data-feather="chevron-down"></i></button>
    </h2>
    <div class="accordion-collapse collapse" id="left-collapseOne" aria-labelledby="outlineaccordionone" data-bs-parent="#outlineaccordion">
    <div class="accordion-body">
    <p>
    Web design<em class="txt-danger"> identifies the goals</em> of a website or webpage and promotes accessibility for all potential users. This process involves organizing content and images across a series of pages and integrating applications and other interactive elements.</p>
    </div>
    </div>
    </div>
    <div class="accordion-item accordion-wrapper">
    <h2 class="accordion-header" id="outlineaccordiontwo">
    <button class="accordion-button collapsed accordion-light-primary txt-primary" type="button" data-bs-toggle="collapse" data-bs-target="#left-collapseTwo" aria-expanded="false" aria-controls="left-collapseTwo">What is the use of web design?<i class="svg-color" data-feather="chevron-down"></i></button>
    </h2>
    <div class="accordion-collapse collapse" id="left-collapseTwo" aria-labelledby="outlineaccordiontwo" data-bs-parent="#outlineaccordion">
    <div class="accordion-body">
    <ul class="d-flex flex-column gap-2 accordions-content">
    <li><strong> Search engine optimization: </strong>Search engine optimization (SEO) is a method for improving the chances for a website to be found by search engines. Web design codes information in a way that search engines can read it. It can boost business because the site shows up on the top search result pages, helping people to find it.</li>
    <li><strong> Mobile responsiveness:</strong> Mobile responsiveness is the feature of a website that allows it to display on a mobile device and adapt its layout and proportions to be legible. Web design ensures sites are easy to view and navigate from mobile devices. When a website is well-designed and mobile-responsive, customers can reach the business with ease.</li>
    <li> <strong> Improved sales:</strong>Increasing the number of items sold or acquiring more active customers are objectives of a compelling website. As web design reaches targeted customers and search engines, it helps the business make conversions on their site and improve its sales.</li>
    </ul>
    </div>
    </div>
    </div>
    <div class="accordion-item accordion-wrapper">
    <h2 class="accordion-header" id="outlineaccordionthree">
    <button class="accordion-button collapsed accordion-light-primary txt-primary" type="button" data-bs-toggle="collapse" data-bs-target="#left-collapseThree" aria-expanded="false" aria-controls="left-collapseThree">What are the elements of web design?<i class="svg-color" data-feather="chevron-down"></i></button>
    </h2>
    <div class="accordion-collapse collapse" id="left-collapseThree" aria-labelledby="outlineaccordionthree" data-bs-parent="#outlineaccordion">
    <div class="accordion-body">
    <ul class="d-flex flex-column gap-2 accordions-content">
    <li> The web design process allows designers to adjust to any preferences and provide effective solutions. There are many standard components of every web design, including:</li>
    <li>--> Layout</li>
    <li>--> Images</li>
    <li>--> Visual hierarchy</li>
    <li>--> Color scheme</li>
    <li>--> Typography</li>
    <li>--> Navigation</li>
    <li>--> Readability</li>
    <li>--> Content</li>
    </ul>
    </div>
    </div>
    </div>
    </div>

#### آکاردئون افقی

کلاس اصلاح کننده `.collapse-horizontal` را برای انتقال عرض به جای ارتفاع اضافه کنید و یک عرض را روی عنصر فرزند فوری تنظیم کنید.

افزونه collapse از جمع شدن افقی نیز پشتیبانی می کند. کلاس اصلاح کننده .collapse-horizontal را برای انتقال عرض به جای ارتفاع اضافه کنید و یک عرض را روی عنصر فرزند فوری تنظیم کنید. راحت باشید Sass سفارشی خود را بنویسید، از سبک های درون خطی استفاده کنید یا از ابزارهای عرض ما استفاده کنید.

    <!--You can use .accordion-collapse with .show class then show accordions.-->
    <div class="common-flex">
    <button class="btn btn-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">Toggle width collapse</button>
    </div>
    <div class="row">
    <div class="col-sm-5">
    <div class="collapse collapse-horizontal mt-3" id="collapseWidthExample">
    <div class="card card-body bg-secondary-light accordion-h-space mb-0">The collapse plugin also supports horizontal collapsing. Add the .collapse-horizontal modifier class to transition the width instead of height and set a width on the immediate child element. Feel free to write your own custom Sass, use inline styles, or use our width utilities.</div>
    </div>
    </div>

#### آکاردئون فرو بریزد

همچنین می‌توانید از پیوندی با ویژگی href`(and a role="button") استفاده کنید.`در هر دو مورد، `da- bs-toggle="collapse"` مورد نیاز است.

پیوند با href دکمه

برخی از محتوای نگهدارنده برای مؤلفه کوچک کردن. این پانل به طور پیش‌فرض پنهان است، اما زمانی که کاربر ماشه مربوطه را فعال می‌کند، آشکار می‌شود.

    <!--You can use .accordion-collapse with .show class then show accordions.-->
    <p class="common-flex">
    <a class="btn btn-dark" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">Link with href</a>
    <button class="btn btn-dark" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Button with data-bs-target</button>
    </p>
    <div class="collapse btn-dark" id="collapseExample">
    <div class="card card-body mb-0">Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.</div>
    </div>