باز و بسته شدن
قابلیت مشاهده محتوا را با چند کلاس و افزونه های جاوا اسکریپت بوت استرپ تغییر دهید.
در Bootstrap ببینیدمثال
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است
<p>
<a class="btn btn-falcon-default mt-2" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">Link with href</a>
<button class="btn btn-falcon-default ms-sm-2 mt-2" 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" id="collapseExample">
<div class="border p-card rounded">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</div>
</div>
اهداف چندگانه
A button
یا a
می تواند چندین عنصر را با ارجاع به آنها با یک selecotro JQuery در ویژگی href
یا data-bs-target
ویژگی خود نشان دهد و پنهان کند.
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است
<p><a class="btn btn-falcon-default mt-2 me-2" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a><button class="btn btn-falcon-default mt-2 me-2" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button><button class="btn btn-falcon-default mt-2" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button></p>
<div class="row">
<div class="col-sm-6">
<div class="collapse multi-collapse mb-3 mb-sm-0" id="multiCollapseExample1">
<div class="card card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</div>
</div>
</div>
<div class="col-sm-6">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</div>
</div>
</div>
</div>