TechBlogSD - ওয়ার্ডপ্রেস এবং ওয়েব ডেভেলপমেন্টের জন্য সবকিছু
ওয়েব এবং ওয়ার্ডপ্রেস নির্দেশাবলী, খবর, থিম এবং প্লাগইনগুলির পর্যালোচনা

কিভাবে বুটস্ট্র্যাপ 5 মোডাল তৈরি করবেন?

2

বুটস্ট্র্যাপ 5 মোডাল মূলত একটি পপআপ উইন্ডো যা বাটন বা টেক্সট লিংকের মত একটি উপাদানের উপর ক্লিক করে দেখানো হয়। এটি জাভাস্ক্রিপ্ট ব্যবহার করে লাইটবক্স এফেক্ট সহ ক্লিকের বিষয়বস্তু দেখায় । মোডাল পপআপটি বন্ধ বোতামে ক্লিক করে বা মোডাল উইন্ডোর বাইরে ক্লিক করে বন্ধ করা যেতে পারে। মোডালকে পপআপ, ডায়ালগ বা সতর্কতার মতো আরও অনেক নাম দিয়ে উল্লেখ করা হয়। লক্ষ্য করুন এই পপআপ সতর্কতা মূল বুটস্ট্র্যাপ সতর্কতা উপাদান থেকে ভিন্ন

এই টিউটোরিয়ালে আসুন উপাদানটির বিশদ বোঝার জন্য কিছু মোডাল পপআপ তৈরি করি।

বুটস্ট্র্যাপ 5 মোডাল টিউটোরিয়াল

এই টিউটোরিয়ালটি নিম্নলিখিত বিষয়গুলি অন্তর্ভুক্ত করে:

  1. বোতামে ক্লিক করে মোডল ট্রিগার করা হয়েছে
  2. মোডালের ভিতরে স্ক্রোলিং কন্টেন্ট
  3. মডেলের সাইজিং
  4. টুলটিপ এবং পপওভার সহ মোডাল
  5. মোডাল কন্টেন্টের ভিতরে গ্রিড লেআউট ব্যবহার করা
  6. মোডাল উপাদান কাস্টমাইজ করা

1 বোতাম ক্লিক করে একটি সাধারণ মোডাল ট্রিগার তৈরি করা

একটি বুটস্ট্র্যাপ মোডালে দুটি উপাদান থাকে – বোতাম এবং মোডাল উইন্ডো। নীচে একটি মডেলের জন্য বোতাম কোড:

<button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#Modal1"> Click to launch modal </button>

আপনি দেখতে পাচ্ছেন, এটি অতিরিক্ত বৈশিষ্ট্য সহ একটি বোতাম উপাদান ছাড়া আর কিছুই নয় :

  • অ্যাট্রিবিউট ডেটা-টগল = "মোডাল" বোতামটিকে মোডাল কম্পোনেন্ট হিসেবে চিহ্নিত করতে ব্যবহৃত হয়।
  • এর পরে ডেটা-টার্গেট = "#মোডাল 1" যা একটি আইডি অনন্য হওয়া উচিত। এই একই আইডি মোডাল কম্পোনেন্টে ব্যবহার করা প্রয়োজন।

নীচে মোডাল পপআপের জন্য কোড রয়েছে, আপনার এই কোডটি বুটস্ট্র্যাপ স্টার্টার টেমপ্লেটের বডি সেকশনের মধ্যে ব্যবহার করা উচিত ।

<div class="modal fade" id="Modal1" tabindex="-1" role="dialog" aria-labelledby="Modal1" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="ModalLabel">Here is a Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> Here goes the content of the modal. </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-warning">Save</button> </div> </div> </div> </div>

একটি মোডাল কম্পোনেন্টে একাধিক CSS ক্লাস ব্যবহার করা হয়:

  • বাইরের ডিভ রেপারে একটি ".modal" CSS ক্লাস থাকতে হবে। অতিরিক্ত "। ফেড" ক্লাসটি মোডাল বক্স ফেইড করার জন্য ব্যবহৃত হয় যা alচ্ছিক।

  • আইডি বোতাম কম্পোনেন্টের জন্য আইডি ভ্যালু সেটের মতো হওয়া উচিত।

  • ট্যাবিনেক্স, ভূমিকা এবং আরিয়া-লুকানো অন্যান্য গুণাবলী যোগ করা নিশ্চিত করুন।

  • মোডাল কন্টেন্ট এর মধ্যে যোগ করা উচিত

    ".modal-dialog" শ্রেণীর সাথে চিহ্নিত ট্যাগগুলি।

  • মোডালের কন্টেন্ট, হেডার, টাইটেল, বডি এবং ফুটার ক্লাস সহ একটি প্যানেল বা কার্ড স্ট্রাকচার রয়েছে।

  • মোডালের সমস্ত অংশ ক এর ভিতরে মোড়ানো উচিত

    ".modal-content" ক্লাস সহ।

  • শিরোনাম বিভাগটি ".modal-header" শ্রেণী দ্বারা চিহ্নিত করা হয়েছে এবং এর দুটি উপাদান রয়েছে-শিরোনাম এবং বোতাম। শিরোনাম উপাদানটি। মোডাল ডায়ালগ বক্স বন্ধ করার জন্য বোতামের উপাদানগুলি ক্লোজ আইকন (X) সহ ব্যবহার করা হয়।

  • মোডাল বডি ক্লাসটি ".modal-body" ব্যবহার করে এবং এতে মডেলের বডি থাকে যা টেক্সট, বোতাম, টুলটিপ বা পপওভারের মতো যেকোনো উপাদান হতে পারে।

  • পাদলেখ বিভাগটি ".modal-footer" ব্যবহার করে এবং দুটি বোতাম রয়েছে-একটি বন্ধ করার জন্য এবং অন্যটি সংরক্ষণের জন্য। বন্ধ বোতামটি আসলে মোডাল পপআপ বন্ধ করবে। কিন্তু সেভ বাটন একটি ডামি বাটন এবং সার্ভারে ডকুমেন্ট সেভ করার জন্য আপনার নিজের কোড যোগ করা উচিত।

চূড়ান্ত আউটপুটটি কেবল একটি বোতামের মতো দেখাবে এবং এটিতে ক্লিক করলে একটি পপআপ মোডাল বক্স ট্রিগার হবে।

কিভাবে বুটস্ট্র্যাপ 5 মোডাল তৈরি করবেন?

বুটস্ট্র্যাপ মোডাল

আপনি মোডাল বডি সেকশনের ভিতরে যেকোন ধরনের কন্টেন্ট যোগ করতে পারেন এবং হেডার এবং ফুটার সেকশনেও ভিন্নতা থাকতে পারে।

2 স্ক্রোলিং সামগ্রী দিয়ে মোডাল তৈরি করা

যখন বিষয়বস্তুর দৈর্ঘ্য লম্বা হয়, তখন বাইরের পৃষ্ঠাটি স্ক্রোল না করেই এটি মোডালের মধ্যে স্ক্রোল করা যায়। স্ক্রোলযোগ্য মোডাল পপআপ তৈরির কোড নিচে দেওয়া হল।

<button type="button" class="btn btn-danger btn-md" data-toggle="modal" data-target="#Modal2"> Open modal </button> <div class="modal fade" id="Modal2" tabindex="-1" role="dialog" aria-labelledby="Modal2" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="ModalLabel">Modal with Scrolling Content</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> Here is the content for modal, enter lengthy content so that you can see the scrolling effect. </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary btn-md" data-dismiss="modal">Close</button> <button type="button" class="btn btn-info btn-md">Save</button> </div> </div> </div> </div>

স্ক্রোলিং মোডালটি নীচের মত দেখাবে:

কিভাবে বুটস্ট্র্যাপ 5 মোডাল তৈরি করবেন?

স্ক্রোলযোগ্য মোডাল সামগ্রী

3 মডেলের সাইজিং

এখানে সাইজ করা মোডালের প্রস্থ নির্দেশ করে। আপনি।

সম্পূর্ণ কোড বড় মোডাল বক্স নিচে দেওয়া হল:

<button class="btn btn-primary" data-toggle="modal" data-target=".example-modal-lg">Large modal</button> <div class="modal fade example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="LargeModal" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="ModalLabel">Large Modal Title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> Here goes the content of large modal. </div> <div class="modal-footer"> <button type="button" class="btn btn-info" data-dismiss="modal">Close</button> <button type="button" class="btn btn-danger">Save</button> </div> </div> </div> </div>

একইভাবে ছোট মোডাল বক্সের সম্পূর্ণ কোড নিচে দেওয়া হল:

<button type="button" class="btn btn-warning" data-toggle="modal" data-target=".example-modal-sm">Small modal</button> <div class="modal fade example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="SmallModal" aria-hidden="true"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="ModalLabel">Small Modal Title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> Here goes the content of small modal. </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-secondary">Save</button> </div> </div> </div> </div>

আপনি নীচের হিসাবে বড়, ডিফল্ট এবং ছোট মোডাল আকার দেখতে পারেন।

কিভাবে বুটস্ট্র্যাপ 5 মোডাল তৈরি করবেন?

বড় মোডাল

কিভাবে বুটস্ট্র্যাপ 5 মোডাল তৈরি করবেন?

ডিফল্ট মোডাল

কিভাবে বুটস্ট্র্যাপ 5 মোডাল তৈরি করবেন?

ছোট মোডাল

4 টুলটিপ এবং পপওভার সহ মোডাল

মোডাল বিষয়বস্তুর ভিতরে টুলটিপস এবং পপওভার সন্নিবেশ করাও সম্ভব। নিচে এটি করার জন্য কোড দেওয়া হল:

<!-- Button trigger for modal --> <button type="button" class="btn btn-secondary btn-md" data-toggle="modal" data-target="#Modaltooltip"> Modal with Popover and Tooltip </button> <!-- Modal --> <div class="modal fade" id="Modaltooltip" tabindex="-1" role="dialog" aria-labelledby="Modaltooltip" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="ModalLabel">Here is a Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <h5>Popover in Modal</h5> <p>Click button for popover. <a href="#" role="button" class="btn btn-dark" title="Popover Title" data-content="Enter content to be shown inside popover" data-toggle="popover">button</a></p> <hr> <h5>Tooltip in Modal</h5> <p>Hover over <a href="#" title="Tooltip on Top" data-toggle="tooltip">this hyperlink</a> to see a tooltip.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary btn-md" data-dismiss="modal">Close</button> <button type="button" class="btn btn-warning btn-md">Save</button> </div> </div> </div> </div>

টুলটিপ এবং পপওভার নিচের মত দেখাবে। টুলটিপ হোভারে শীর্ষ প্রদর্শনীতে থাকবে এবং পপওভার বাম দিকে ক্লিক করে দেখাবে।

কিভাবে বুটস্ট্র্যাপ 5 মোডাল তৈরি করবেন?

পপওভার এবং টুলটিপ ইনসাইড মোডাল কন্টেন্ট

দ্রষ্টব্য: মনে রাখবেন টুলটিপ এবং পপওভারের জন্য বুটস্ট্র্যাপ স্ক্রিপ্ট ফাইল সহ অতিরিক্ত পপার জাভাস্ক্রিপ্ট প্রয়োজন। বুটস্ট্র্যাপ টুলটিপস এবং বুটস্ট্র্যাপ পপওভার উপাদান সম্পর্কে আরও জানুন ।

5 মোডাল কন্টেন্টের ভিতরে গ্রিড লেআউট োকানো

বুটস্ট্র্যাপে শক্তিশালী ফ্লেক্সবক্স গ্রিড লেআউট সিস্টেম রয়েছে। আপনি গ্রিড লেআউট কলামগুলি ব্যবহার করে সহজেই মোডালের ভিতরে সামগ্রী সন্নিবেশ করতে পারেন। নীচে একটি মডেলের মধ্যে বিভিন্ন ধরণের গ্রিড কলাম সন্নিবেশ করার একটি উদাহরণ।

<button type="button" class="btn btn-dark btn-md" data-toggle="modal" data-target="#Modalgrid"> Modal with Grid </button> <div class="modal fade" id="Modalgrid" tabindex="-1" role="dialog" aria-labelledby="Modalgrid" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="ModalLabel">Here is a Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div class="container-fluid"> <div class="gridmodal"> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div> </div> <div class="row"> <div class="col-md-3 ml-auto">.col-md-3 .ml-auto</div> <div class="col-md-2 ml-auto">.col-md-2 .ml-auto</div> </div> <div class="row"> <div class="col-md-6 ml-auto">.col-md-6 .ml-auto</div> </div> <div class="row"> <div class="col-sm-9"> .col-sm-9 <div class="row"> <div class="col-8 col-sm-6"> .col-8 .col-sm-6 </div> <div class="col-4 col-sm-6"> .col-4 .col-sm-6 </div> </div> </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary btn-md" data-dismiss="modal">Close</button> <button type="button" class="btn btn-warning btn-md">Save</button> </div> </div> </div> </div>

এটি ব্রাউজারে নীচের মত হওয়া উচিত:

কিভাবে বুটস্ট্র্যাপ 5 মোডাল তৈরি করবেন?

গ্রিড লেআউট সামগ্রী সহ মোডাল

6 বুটস্ট্র্যাপ মোডাল কম্পোনেন্ট কাস্টমাইজ করা

আপনি দেখতে পাচ্ছেন, সর্বশেষ বুটস্ট্র্যাপ সংস্করণ আপনাকে মোডাল পপআপের ভিতরে যেকোনো ধরনের সামগ্রী যুক্ত করতে দেয়। আপনি মোডালের মধ্যে প্রতিটি আইটেমের রঙ, সীমানা এবং চেহারা কাস্টমাইজ করতে পারেন অতিরিক্ত অতিরিক্ত CSS দ্বারা আপনার নিজের উপর। উদাহরণস্বরূপ, উপরের গ্রিডের উদাহরণে আমরা নীচের মত ব্যাকগ্রাউন্ড, বর্ডার এবং স্পেসিং যোগ করার জন্য একটি কাস্টম CSS ক্লাস “.gridmodal" ব্যবহার করেছি।

<style> .gridmodal .row>[class^=col-] { padding-top: .75rem; padding-bottom: .75rem; margin-bottom: .75em; background-color: rgba(86,61,124,.15); border: 1px solid rgba(86,61,124,.2); } </style>

আপনি ডিফল্ট বুটস্ট্র্যাপ ক্লাসে CSS ক্লাস যোগ করতে পারেন। উদাহরণস্বরূপ, যখন আপনি মোডাল বোতামে ছায়া প্রভাব যোগ করতে চান তখন আপনি নীচের মত "btn-md" শ্রেণী যোগ করতে পারেন।

<!-- Button trigger for modal --> <button type="button" class="btn btn-secondary btn-md" data-toggle="modal" data-target="#Modal1"> Click to launch modal </button> <!-- Modal --> <div class="modal fade" id="Modal1" tabindex="-1" role="dialog" aria-labelledby="Modal1" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="ModalLabel">Here is a Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> Here goes the content of the modal. </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary btn-md" data-dismiss="modal">Close</button> <button type="button" class="btn btn-warning btn-md">Save</button> </div> </div> </div> </div>

আমরা তিনটি বোতাম উপাদানগুলিতে কাস্টম "btn-md" শ্রেণী যুক্ত করেছি এবং ফলাফলটি ব্রাউজারে নীচের মত দেখানো হবে:

কিভাবে বুটস্ট্র্যাপ 5 মোডাল তৈরি করবেন?

ছায়া প্রভাব সঙ্গে বোতাম

"Btn-md" ক্লাসের জন্য কাস্টম CSS নিচে দেওয়া আছে যা HTML পৃষ্ঠার হেডার অংশের ভিতরে… ট্যাগের মধ্যে যোগ করা যাবে। অথবা আপনি বাহ্যিক CSS ফাইলে কোড যোগ করতে পারেন (সম্ভবত আপনার থিম এর style.css “এবং হেডারে CSS লিঙ্ক করুন।

.btn-md { border-width: 0; outline: none; border-radius: 2px; box-shadow: 0 1px 4px rgba(0, 0, 0, .6); cursor: pointer; }

মোড়ক উম্মচন

পপআপ ডায়ালগ বক্সে কন্টেন্ট দেখানোর জন্য মোডাল একটি সহজ উপায়। এটি পৃষ্ঠায় দেওয়া মূল বিষয়বস্তুর উপর ফোকাস করতে অনেক সাহায্য করে। আগ্রহী ব্যবহারকারীরা লিংক বা বোতামে ক্লিক করে মোডাল উইন্ডো চালু করতে পারেন এবং আরও পড়তে পারেন।


বুটস্ট্র্যাপ 5 শিখুন (সূচক )


রেকর্ডিং উত্স: webnots.com
Leave A Reply

এই ওয়েবসাইট আপনার অভিজ্ঞতা উন্নত করতে কুকি ব্যবহার করে। আমরা ধরে নেব যে আপনি এটির সাথে ঠিক আছেন, তবে আপনি ইচ্ছা করলে অপ্ট-আউট করতে পারেন। আমি স্বীকার করছি আরো বিস্তারিত