• March 27, 2021
Bootstrap Accordion

Bootstrap Accordion(Collapse Data)

 

Bootstrap Accordion(Collapsing Data) মুলত কাজ করে।যেটা সাধারণত প্রশ্ন এবং উত্তরের ক্ষেত্রে কাজ করে। বুটস্ট্রাপ cdn লিঙ্ক এবং class এর মাধ্যমে এই সুবিধা দিয়ে থাকে।এটি সচরাচর দেখা যায় কোন কোন কোম্পানি ওয়েবসাইটে । তারা ভিজিটরদের জন্য কিছু প্রশ্ন এবং এর উত্তর দিয়ে থাকে।যেটাকে Faq question বলে।

Bootstrap Accordion

 

 

 

Bootstrap Accordion Source Code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Accordion</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>

<body>
    <div class="accordion" id="accordionExample">
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingOne">
                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
              Accordion Item #1
            </button>
            </h2>
            <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                <div class="accordion-body">
                    <strong>This is the first item's accordion body.</strong> It is hidden 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. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition
                    does limit overflow.
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingTwo">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
              Accordion Item #2
            </button>
            </h2>
            <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
                <div class="accordion-body">
                    <strong>This is the second item's accordion body.</strong> It is hidden 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. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the
                    transition does limit overflow.
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingThree">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
              Accordion Item #3
            </button>
            </h2>
            <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
                <div class="accordion-body">
                    <strong>This is the third item's accordion body.</strong> It is hidden 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. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition
                    does limit overflow.
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
</body>

</html>

বিঃদ্রঃ Bootstrap মুলত কাজ class নিয়ে । যদি class এর নাম ভূল হয় ।

তাহলে এটি কাজ করবে না।তাই এর সঠিকভাবে ব্যবহার করবেন।

 Accordion এর ক্ষেত্রে javascript কাজ করে আর এর জন্য id ব্যবহার করা হয়েছে। এখানে ব্যবহার করা হয়েছে যেটা ডিফল্টভাবে এ ব্যবহার করা হয়েছে।

Bootstrap Basics Part-I (বুটস্ট্রাপ বেসিকস পার্ট -১)

Flutter App Development Introduction

14 thoughts on “Bootstrap Accordion(Collapse Data)

  1. Приглашаем Ваше предприятие к взаимовыгодному сотрудничеству в сфере производства и поставки Пруток молибденовый МБВП.

    – Поставка катализаторов, и оксидов
    – Поставка изделий производственно-технического назначения (экран).
    – Любые типоразмеры, изготовление по чертежам и спецификациям заказчика.
    – Поставка изделий из сплавов: МЧ, МЧВП, МД-8,5, МД-25, МД-30, МД-40, МД-50, МД-55, МД-60, ЦМ1, ВМ1, ВМ2, ВМ3, ЦМ3, ЦМ5 ЦМ6, МЛТ, ТСМ4, ЦМВ30, МР47ВП, МР-10, МР47ВП, ТСМ3
    Mo, TZM, TZC, Mo-W30, Mo-Cu70, Mo-Cu60, Mo-Cu50, Mo-Cu40, Mo-Cu30, Mo-Cu20, Mo-Cu10, Mo-LaMo-Cu70, Mo-Cu60, Mo-Cu50, Mo-La.
    Молибденовый порошок: ПМ-99.95, ПМ-М, ПМЧ, ДМ-1, ДМИ 7, КМФ-6, МВЧ, МО, МОSI, МПВ, МР-47

    Проволока молибденовая ЦМ3
    Молибден ОЧМ
    Фольга молибденовая ЦМ-2А
    Пруток молибденовый МС
    Молибден ОЧМ
    6c45e76

Leave a Reply

Your email address will not be published. Required fields are marked *