Bootstrap তাদের modal component এর code এ কোন কোন class কেন ব্যবহার করেছে সেটা আমরা আজকে এখানে কিছুটা আলোচনা করার চেষ্টা করব।
<div class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
modal -> Normally কোনও website এ modal যেরকম হয় সেরকম type একটা styling দেওয়ার জন্য এই class দেওয়া হয়েছে। চাইলে এই ক্লাস টা রিমুভ করে দেখুন অউটপুট কিরকম আসে।
modal-dialog -> কোনও button এ click করার পর যেই pop-up box টা modal hisebe open হওয়ার কথা সেটাই আসবেনা, full screen টা just blur হয়ে থাকবে।
modal-content -> modal এর whole content এই class এর under এ রাখা হয়।
modal-header -> modal এর content কে styling সুবিধার জন্য ৩ ভাগে ভাগ করা হয়েছে। header, body, footer. Header এর content গুলো এই class এর under এ রাখা হয়েছে।
modal-title -> header এর মধ্যে title দিতে এটা ব্যাবহার করা হয়েছে।
modal-body -> body র content গুলো এর মধ্যে রাখা হয়েছে।
modal-footer -> footer এর content গুলো এর মধ্যে রাখা হয়েছে।
~let's_code_your_career
~happy_coding!
Top comments (0)