বুটস্ট্রাপ৩ জাভাস্ক্রিপ্ট কম্পোনেন্ট (Bootstrap3 JS Component)

Bootstrap 3 হল একটি জনপ্রিয়, ওপেন সোর্স front-end framework যা দ্রুত এবং মোবাইল-প্রথম (mobile-first) ওয়েবসাইট তৈরি করতে সাহায্য করে। এটি HTML, CSS, এবং JavaScript কম্পোনেন্টের সমন্বয়ে তৈরি যা responsive ওয়েব ডিজাইন ও ইউজার ইন্টারফেস তৈরি করার জন্য ব্যবহৃত হয়।

Bootstrap 3 JavaScript Components বেশ কিছু শক্তিশালী ইউজার ইন্টারফেস ইন্টারঅ্যাকশন তৈরি করতে ব্যবহৃত হয়। এই JS কম্পোনেন্টগুলির মধ্যে রয়েছে মোডাল, টুলটিপ, ড্রপডাউন, ক্যালেন্ডার, ক্যারousel, এবং আরও অনেক কিছু, যা সাইটের ফাংশনালিটি এবং ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করে।

Bootstrap 3 JavaScript Components:

1. Modal:

   • Modal কম্পোনেন্টের মাধ্যমে পপআপ উইন্ডো তৈরি করা হয়, যা ব্যবহারকারীর ইন্টারঅ্যাকশন এবং ইনপুটের জন্য ব্যবহৃত হয়।
   • উদাহরণ:

   <!-- Trigger the modal with a button -->
   <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
   
   <!-- Modal -->
   <div id="myModal" class="modal fade" role="dialog">
       <div class="modal-dialog">
           <div class="modal-content">
               <div class="modal-header">
                   <button type="button" class="close" data-dismiss="modal">×</button>
                   <h4 class="modal-title">Modal Header</h4>
               </div>
               <div class="modal-body">
                   <p>Some content for the modal..</p>
               </div>
               <div class="modal-footer">
                   <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
               </div>
           </div>
       </div>
   </div>
   

2. Tooltip:

   • Tooltip ব্যবহারকারীর মাউস হভার করার সময় একটি ছোট তথ্য বক্স প্রদর্শন করে, যা কোনো লিংক বা বাটনের সাথে সম্পর্কিত তথ্য বা সাহায্য প্রদর্শন করতে সহায়তা করে।
   • উদাহরণ:

   <button type="button" class="btn btn-info" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Hover me</button>
   
   <script>
       $(document).ready(function(){
           $('[data-toggle="tooltip"]').tooltip();
       });
   </script>
   

3. Popover:

   • Popover হল একটি এলার্ট বা সহায়ক তথ্য যা সাধারণত একটি বাটন বা লিংকের পাশে প্রদর্শিত হয়, যখন ব্যবহারকারী ক্লিক করে বা হভার করে।
   • উদাহরণ:

   <button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="Some content inside popover.">Click me</button>
   
   <script>
       $(document).ready(function(){
           $('[data-toggle="popover"]').popover();
       });
   </script>
   

4. Dropdowns:

   • Dropdowns হল একটি ইন্টারঅ্যাকটিভ এলিমেন্ট যা একটি লিস্ট অপশন প্রদর্শন করে, যখন ব্যবহারকারী কোনো বাটন বা লিঙ্কে ক্লিক করে।
   • উদাহরণ:

   <div class="dropdown">
       <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">Dropdown
       <span class="caret"></span></button>
       <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
           <li><a href="#">Action</a></li>
           <li><a href="#">Another action</a></li>
           <li><a href="#">Something else here</a></li>
       </ul>
   </div>
   

5. Carousel:

   • Carousel কম্পোনেন্টটি একাধিক ইমেজ বা কন্টেন্ট প্রদর্শন করতে ব্যবহৃত হয়, যা স্লাইড শো হিসাবে কাজ করে।
   • উদাহরণ:

   <div id="myCarousel" class="carousel slide" data-ride="carousel">
       <!-- Indicators -->
       <ol class="carousel-indicators">
           <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
           <li data-target="#myCarousel" data-slide-to="1"></li>
           <li data-target="#myCarousel" data-slide-to="2"></li>
       </ol>
   
       <!-- Wrapper for slides -->
       <div class="carousel-inner">
           <div class="item active">
               <img src="img1.jpg" alt="Image 1">
           </div>
           <div class="item">
               <img src="img2.jpg" alt="Image 2">
           </div>
           <div class="item">
               <img src="img3.jpg" alt="Image 3">
           </div>
       </div>
   
       <!-- Controls -->
       <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
           <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
           <span class="sr-only">Previous</span>
       </a>
       <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
           <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
           <span class="sr-only">Next</span>
       </a>
   </div>
   

6. Collapse:

   • Collapse কম্পোনেন্টটি ব্যবহারকারীর ক্লিকের মাধ্যমে কন্টেন্ট বা সেকশনগুলো গুটিয়ে বা প্রসারিত করতে ব্যবহৃত হয়।
   • উদাহরণ:

   <button class="btn btn-info" data-toggle="collapse" data-target="#demo">Toggle Collapse</button>
   <div id="demo" class="collapse">
       <p>This is some content inside the collapsible section.</p>
   </div>
   

7. Alert:

   • Alert কম্পোনেন্টটি ব্যবহারকারীর জন্য বার্তা প্রদর্শন করে, যেমন সফলতা, সতর্কতা, ত্রুটি ইত্যাদি। এগুলি সাধারণত রঙের মাধ্যমে বিভিন্ন বার্তা বা স্টেটাস জানাতে ব্যবহৃত হয়।
   • উদাহরণ:

   <div class="alert alert-success">
       <strong>Success!</strong> Your operation was successful.
   </div>
   
   <div class="alert alert-danger">
       <strong>Error!</strong> Something went wrong.
   </div>
   

8. Tabs:

   • Tabs কম্পোনেন্টটি একাধিক ট্যাব ব্যবহার করে একাধিক কন্টেন্ট বিভাগে ব্যবহৃত হয়।
   • উদাহরণ:

   <ul class="nav nav-tabs">
       <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
       <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
       <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
   </ul>
   
   <div class="tab-content">
       <div id="home" class="tab-pane fade in active">
           <h3>Home</h3>
           <p>Some content for Home tab.</p>
       </div>
       <div id="menu1" class="tab-pane fade">
           <h3>Menu 1</h3>
           <p>Some content for Menu 1 tab.</p>
       </div>
       <div id="menu2" class="tab-pane fade">
           <h3>Menu 2</h3>
           <p>Some content for Menu 2 tab.</p>
       </div>
   </div>
   

সারাংশ:

Bootstrap 3 JavaScript Components হল একটি সমৃদ্ধ স্যুট যা ওয়েব ডেভেলপমেন্টের জন্য প্রয়োজনীয় বেশ কিছু ইন্টারঅ্যাকটিভ উপাদান প্রদান করে। এগুলি UI উপাদানকে আরও কার্যকরী এবং ব্যবহারকারী বান্ধব করে তোলে। আপনি Modal, Tooltip, Popover, Dropdowns, Carousel, Collapse, Alert, Tabs ইত্যাদি ব্যবহার করে আপনার ওয়েব অ্যাপ্লিকেশন বা সাইটের ইন্টারফেস উন্নত করতে পারেন।

বুটস্ট্রাপ বেসিক ড্রপডাউন

বুটস্ট্রাপ ড্রপডাউন মেনু হলো একটি টোগল মেনু যেটি পূর্বনির্ধারিত লিষ্ট থেকে একটি ভ্যালু পছন্দ/সিলেক্ট করতে সাহায্য করে।

নিচের উদাহরণে একটি বেসিক ড্রপডাউন তৈরি করে দেখানো হলোঃ

kt_satt_skill_example_id=1100

উদাহরণের ব্যাখ্যা

.dropdown ক্লাসের মাধ্যমে ড্রপডাউন মেনুকে বুঝায়।

ড্রপডাউন মেনুকে অপেন করতে বাটন অথবা লিংক এর সাথে .dropdown-toggle ক্লাস এবং data-toggle="dropdown" এট্রিবিউট ব্যবহার করুন।

.caret ক্লাসের দ্বারা একটি ক্যারেট চিহ্ন তৈরি হয় (), যেটি দ্বারা বুঝা যায় যে এটি একটি ড্রপডাউন বাটন।

প্রকৃত ড্রপডাউন মেনু তৈরি করতে <ul> এলিমেন্টে .dropdown-menu ক্লাস যুক্ত করুন।

বুটস্ট্রাপ ড্রপডাউন ডিভাইডার

ড্রপডাউন মেনুর মধ্যে লিংকগুলোকে আলাদা করার জন্য .divider ক্লাস ব্যবহার করা হয়ঃ

kt_satt_skill_example_id=1101

বুটস্ট্রাপ ড্রপডাউন হেডার

ড্রপডাউন মেনুর মধ্যে হেডার যুক্ত করার জন্য .dropdown-header ক্লাস ব্যবহার করুনঃ

kt_satt_skill_example_id=1102

বুটস্ট্রাপ ডিসেবল আইটেম

ড্রপডাউন মেনুর কোনো একটি আইটেমকে ডিসেবল করার জন্য .disabled ক্লাস ব্যবহার করুন।

বুটস্ট্রাপ ড্রপডাউনের অবস্থান নির্ধারণ

ড্রপডাউন মেনুকে ডান পাশে নেওয়ার জন্য .dropdown-menu ক্লাসের সাথে .dropdown-menu-right ক্লাস ব্যবহার করুন।

যদি আপনি ড্রপডাউন মেনুকে নিচের দিকে প্রদর্শনের পরিবর্তে উপরের দিকে প্রদর্শন করতে চান, তাহলে <div> এলিমেন্টের মধ্যে "dropdown" ক্লাসের পরিবর্তে "dropup" ক্লাস ব্যবহার করুনঃ

kt_satt_skill_example_id=1103

বুটস্ট্রাপ ড্রপডাউন এক্সেসিবিলিটি

যখন ড্রপডাউন মেনু তৈরি করবেন তখন role এবং aria-* এট্রিবিউট ব্যবহার করবেন, এতে স্ক্রিন রিডারদের ব্যবহারে সুবিধা হবেঃ

kt_satt_skill_example_id=1104

একনজরে ড্রপডাউন সংক্রান্ত ক্লাসগুলো দেখে নেইঃ

বুটস্ট্রাপ বেসিক কলাপ্সিবল

বড় কোনো কন্টেন্টকে লুকিয়ে রেখে টোগল করে দেখোনোর জন্য বুটস্ট্রাপ "কলাপ্স" ব্যবহার করা হয়। নিচের উদাহরণে একটি বেসিক কলাপ্সিবল তৈরি করা দেখানো হলোঃ

kt_satt_skill_example_id=1105

উদাহরণের ব্যাখ্যা

.collapse ক্লাসের মাধ্যমে একটি কলাপ্সিবল এলিমেন্টকে বুঝানো হয়েছে। বাটনে ক্লিক করার সাথে সাথে কন্টেন্ট টি দেখা যায় আর ক্লিক করলে তা চলে যায়।

কলাপ্সিবল কন্টেন্টকে নিয়ন্ত্রন(দেখানো/লুকানো) করার জন্য, < a > অথবা < button > এলিমেন্টের মধ্যে data-toggle="collapse" এট্রিবিউট যুক্ত করুন।

তারপর বাটন বা লিংকের সাথে কলাপ্সিবল কন্টেন্টকে (< div id="collapse" >) সংযুক্ত করার জন্য করার জন্য data-target="#idName" এট্রিবিউট যুক্ত করুন।

নোটঃ < a > এলিমেন্টে data-target এট্রিবিউটের পরিবর্তে href এট্রিবিউট ব্যবহার করা যায়ঃ

kt_satt_skill_example_id=1106

ডিফল্টভাবে, কলাপ্সিবল কন্টেন্ট লুকানো অবস্থায় থাকে। ডিফল্টভাবে কন্টেন্টকে প্রদর্শিত অবস্থায় রাখার জন্য .in ক্লাস যুক্ত করতে হবেঃ

kt_satt_skill_example_id=1107

কলাপ্সিবল প্যানেল

নিচের উদাহরণে কিভাবে কলাপ্সিবল প্যানেল তৈরি করা যায় তা দেখানো হলোঃ

kt_satt_skill_example_id=1108

কলাপ্সিবল লিষ্ট গ্রুপ

নিচের উদাহরণে লিস্ট গ্রুপ সহ একটি কলাপ্সিবল প্যানেল তৈরি করা দেখানো হলোঃ

kt_satt_skill_example_id=1109

একরডিওন

নোটঃ কলাপ্সিবল আইটেমটি প্রদর্শিত হওয়ার সাথে সাথে পেরেন্ট এলিমেন্টের অন্য সব কলাপ্সিবল এলিমেন্ট ক্লোজ করে দেওয়ার জন্য data-parent এট্রিবিউট ব্যবহার করতে হবে।

kt_satt_skill_example_id=1110

বুটস্ট্রাপ কলাপ্সের সম্পূর্ণ রেফারেন্স

বুটস্ট্রাপ কলাপ্স অপশন, মেথড এবং ইভেন্টের সম্পূর্ণ রেফারেন্সের জন্য আমাদের বুটস্ট্রাপ JS কলাপ্স রেফারেন্স পেজে ভিজিট করুন।

বুটস্ট্রাপ মেনু

বেশিরভাগ ওয়েবপেজেরি মেনুবার থাকে।

এইচটিএমএলে আনওর্ডার্ড লিস্টের (< ul >) মাধ্যমে মেনু তৈরি করা হয় (স্টাইল পরবর্তী বিষয়) যেমনঃ

kt_satt_skill_example_id=1112

এছাড়া আপনি বুটস্ট্রাপের ট্যাব এবং পিলের মাধ্যমেও মেনুবার তৈরি করতে পারেন। (নিচে দেখুন)

বুটস্ট্রাপ ট্যাব

< ul class="nav nav-tabs" > এর মাধ্যমে ট্যাব তৈরি করা যায়ঃ

টিপসঃ < li class="active" > দ্বারা বর্তমান পেজটিকে হাইলাইট করা হয়েছে।

নিচের উদাহরণটিতে বুটস্ট্রাপ দ্বারা ন্যাভিগেশন ট্যাব তৈরি করে দেখানো হয়েছেঃ

kt_satt_skill_example_id=1113

বুটস্ট্রাপ ট্যাবের মধ্যে ড্রপডাউন মেনু

আপনি চাইলে ট্যাবের মধ্যেও ড্রপডাউন মেনু ব্যবহার করতে পারেন।

নিচের উদাহরণে "Service" সেকশনে একটি ড্রপডাউন ব্যবহার করা হয়েছেঃ

kt_satt_skill_example_id=1114

বুটস্ট্রাপ পিল

< ul class="nav nav-pills" > দ্বারা পিল তৈরি করা হয় এবং < li class="active" > দ্বারা বর্তমান পেজটিকে হাইলাইট করা হয়েছেঃ

kt_satt_skill_example_id=1116

বুটস্ট্রাপ ভার্টিক্যাল পিল

পিলকে ভার্টিক্যাল ভাবেও তৈরি করা যায়। এর জন্য .nav-stacked ক্লাস ব্যবহার করুনঃ

kt_satt_skill_example_id=1118

একই সারিতে ভার্টিক্যাল পিল

এখানে শেষ কলামটিতে ভার্টিক্যাল আকারে পিল ব্যবহার করা হয়েছে।
যেখানে বড় স্ক্রিনে কলামগুলো পাশাপাশি অবস্থান করে। কিন্তু ছোট স্ক্রিনের ক্ষেত্রে কলামগুলো স্বয়ংক্রিয়ভাবে একটি একক কলামে রুপান্তরিত হয়ঃ

kt_satt_skill_example_id=1120

পিলের মধ্যে ড্রপডাউন মেনুর ব্যবহার

আমরা চাইলে পিলের মধ্যেও ড্রপডাউন মেনু ব্যবহার করতে পারি।

নিচের এই উদাহরণটিতে "Service" সেকশনে ড্রপডাউন ব্যবহার করা হয়েছেঃ

kt_satt_skill_example_id=1122

সেন্টারে ট্যাব এবং পিলের ব্যবহার

ট্যাব এবং পিলকে মধ্যস্থানে/জাস্টিফাই করার জন্য .nav-justified ক্লাস ব্যবহার করুন।

মনে রাখবেন ৭৬৮ পিক্সেল থেকে ছোট স্ক্রিনে লিস্ট আইটেমগুলো নিচে নিচে চলে আসবে তবে কন্টেন্টগুলো ঠিক মাঝামাঝিতেই থাকবেঃ

kt_satt_skill_example_id=1124

বুটস্ট্রাপ টোগোলেবল/ডায়নামিক ট্যাব

ট্যাবকে টোগোলেবল করার জন্য, প্রত্যেকটি লিংকে data-toggle="tab" এট্রিবিউটটি ব্যবহার করুন।
তারপর একক একটি ID 'র সাথে .tab-pane ক্লাসটি ব্যবহার করুন এবং .tab-content ক্লাসযুক্ত একটি <div> এলিমেন্টের মধ্যে সবগুলো কন্টেন্টকে রাখুন।

এছাড়াও যদি আপনি ক্লিক করার সময় ট্যাবে ফেড-ইন এবং ফেড-আউট এফেক্ট যুক্ত করতে চান তাহলে .tab-pane ক্লাসের সাথে অবশ্যই .fade ক্লাস ব্যবহার করুনঃ

kt_satt_skill_example_id=1126

বুটস্ট্রাপ টোগোলেবল/ডায়নামিক পিল

ট্যাবের মতো পিলের ক্ষেত্রে ঠিক একই কোড ব্যবহার করা হয়। শুধুমাত্র data-toggle="tab" এট্রিবিউটের জায়গায় data-toggle="pill" এট্রিবিউট ব্যবহার করতে হবেঃ

kt_satt_skill_example_id=1129

একনজরে ট্যাব এবং পিল সংক্রান্ত ক্লাসগুলো দেখে নেইঃ

বুটস্ট্রাপ ন্যাভিগেশন বার

বুটস্ট্রাপ ন্যাভিগেশন বার হলো একটি ন্যাভিগেশন হেডার যা একটি পেজের উপরে ব্যবহার করা হয়:

বুটস্ট্রাপ দ্বারা খুব সহজে ডিভাইসের স্ক্রিন সাইজের উপর নির্ভর করে একটি পেজের ন্যাভিগেশন বারকে প্রসারিত বা কলাপ্স করা যায়।

একটি স্ট্যান্ডার্ড ন্যাভিগেশন বার তৈরি করার জন্য <nav class="navbar navbar-default"> ক্লাস ব্যবহার করা হয়।

কিভাবে ন্যাভিগেশন বারকে একটি পেজের উপরে ব্যবহার করা যায় নিচের উদাহরণে দেখানো হলোঃ

kt_satt_skill_example_id=1136

ইনভার্স(Inverse) ন্যাভিগেশন বার

যদি বুটস্ট্রাপের ডিফল্ট ন্যাভিগেশন বারটি আপনার পছন্দ না হয় তাহলে আপনি চাইলে কালো কালারের ন্যাভিগেশন বার ব্যবহার করতে পারেনঃ

এর জন্য শুধুমাত্র .navbar-default ক্লাস এর পরিবর্তে .navbar-inverse ক্লাস ব্যবহার করুনঃ

kt_satt_skill_example_id=1138

ফিক্সড ন্যাভিগেশন বার

একজন ব্যবহারকারী তার ইচ্ছা মত ন্যাভিগেশন বারকে পেজের উপরে বা নিচে ফিক্সড করতে পারে।

এক্ষেত্রে ন্যাভিগেশন বারটি পেজের উপরে অথবা নিচে ফিক্সড থাকবে এমনকি যখন পেজটি স্ক্রলিং করা হয় তখনও এর অবস্থানের কোন পরিবর্তন হবে না।

ন্যাভিগেশন বারকে পেজের উপরে ফিক্সড করার জন্য .navbar-fixed-top ক্লাসটি ব্যবহার করুনঃ

kt_satt_skill_example_id=1139

ন্যাভিগেশন বারকে পেজের নিচে ফিক্সড করার জন্য .navbar-fixed-bottom ক্লাসটি ব্যবহার করুনঃ

kt_satt_skill_example_id=1140

ন্যাভিগেশন বারের সাথে ড্রপাডাউনের ব্যবহার

আমরা চাইলে একটি ন্যাভিগেশন বারের সাথে ড্রপাডাউনও ব্যবহার করতে পারি।

নিচের এই উদাহরণে "Service" মেনুর মধ্যে ড্রপাডাউন ব্যবহার করা হয়েছে:

kt_satt_skill_example_id=1141

ডানে এ্যালাইনকৃত ন্যাভিগেশন বার

ন্যাভিগেশন বারের বাটনকে ডানদিকে নেয়ার জন্য .navbar-right ক্লাস ব্যবহার করুনঃ

এই উদাহরণটিতে "Sign up" এবং "Log in" নামে দুইটি বাটনকে ন্যাভিগেশন বারের ডানদিকে ব্যবহার করা হয়েছে এবং বাটন গুলোর সাথে গ্লিফআইকনও ব্যবহার করা হয়েছেঃ

kt_satt_skill_example_id=1142

কলাপ্সিবল ন্যাভিগেশন বার

ন্যাভিগেশন বার ছোট স্ক্রিনের জন্য অনেক জায়গায় দখল করে।

এই সমস্যার সমাধানের জন্য ছোট স্ক্রিনের ক্ষেত্রে ন্যাভিগেশন বারকে হাইড করে রাখা যায় এবং প্রয়োজনের সময় প্রদর্শন করানো যায়।

এই উদাহরণটিতে ন্যাভিগেশন বারকে উপরে ডানদিকে বাটন আকারে রাখা হয়েছে। এক্ষেত্রে যখনই বাটনে ক্লিক করা হবে তখনই এটি প্রদর্শিত হবে অন্যথায় এটি হাইড হয়ে থাকবেঃ

kt_satt_skill_example_id=1143

বুটস্ট্রাপ ক্যারোসেল প্লাগ-ইন

বুটস্ট্রাপ ক্যারোসেল প্লাগ-ইন হলো এলিমেন্টের মধ্যে চক্রাকারে ঘুরার জন্য একটি কম্পোনেন্ট(component), যেমনঃ একটি ক্যারোসেল (স্লাইডসো)।

কিভেবে একটি ক্যারোসেল তৈরি করবেন

কিভাবে একটি বেসিক ক্যারোসেল তৈরি করা যায় তা নিচের উদাহরণে দেখানো হলো:

kt_satt_skill_example_id=1146

উদাহরণের ব্যাখ্যা

আউটারমোস্ট <div>:

ফাংশনের মাধ্যমে ক্যারোসেলকে নিয়ন্ত্রন করার জন্য ক্যারোসেলে একটি আইডি ব্যবহার করা হয় (এক্ষেত্রে ব্যবহার করা হয়েছে id="carouselId")।

class="carousel" দ্বারা বুঝানো হয়েছে যে এই < div > টি একটি ক্যারোসেল বহন করছে।

.slide ক্লাসের মাধ্যমে সিএসএস এর ট্রানজিশন এবং এ্যানিমেশন ইফেক্ট যুক্ত করা হয়েছে। নতুন আইটেমটিকে দেখানোর সময় এটিকে স্লাইড আকারে প্রদর্শন করে।
যদি আপনার এই ইফেক্টটির প্রয়োজন না হয়, তবে আপনি চাইলে এই ক্লাসটি বাদ দিতে পারেন।

data-ride="carousel" এট্রিবিউটটি বুটস্ট্রাপকে পেজ লোড হওয়ার সাথে সাথে এ্যানিমেশন শুরু করার নির্দেশনা প্রদান করে।

"Indicators" পার্ট:

ইন্ডিকেটর হলো প্রত্যেকটি স্লাইডের নিচের ছোট গোল বৃত্ত (যার দ্বারা বুঝানো হয় যে, ক্যারোসেলে কতোগুলো স্লাইড রয়েছে এবং ইউজার বর্তমানে কোন স্লাইডটি দেখছে)।

ইন্ডিকেটরগুলো একটি অর্ডার লিস্টে নির্দিষ্ট করে দেওয়া হয়, যাতে .carousel-indicators ক্লাস ব্যবহার করা হয়।

data-target এট্রিবিউটের মাধ্যমে ক্যারোসেলের আইডিকে লক্ষ্য করা হয়।

যখন ইউজার নির্দিষ্ট ডটে ক্লিক করে তখন কোন স্লাইডে যাবে তা নির্দিষ্ট করার জন্য data-slide-to এট্রিবিউট ব্যবহার করা হয়।

"Wrapper for slides" পার্ট:

স্লাইডগুলো .carousel-inner ক্লাস যুক্ত < div > এলিমেন্টের মধ্যে রাখতে হবে।

প্রত্যেকটি স্লাইডের কন্টেন্টগুলো .item ক্লাস যুক্ত < div > এলিমেন্টের মধ্যে রাখতে হবে। কন্টেন্ট টেক্সট হতে পারে আবার ইমেজও হতে পারে।

যেকোন একটি স্লাইডে অবশ্যই .active ক্লাস যুক্ত করতে হবে। অন্যথায় ক্যারোসেলটি দৃশ্যমান হবে না।

"Left এবং right কন্ট্রোল" পার্ট:

এই কোডগুলোর মাধ্যমে "পূর্ববর্তী" এবং "পরবর্তী" বুঝায়, যার মাধ্যমে একজন ইউজার ইচ্ছে করলে পূর্বের এবং পরের স্লাইডগুলো ম্যানুয়েললি দেখতে পারে।

data-slide এট্রিবিউট "prev" অথবা "next" কী-ওয়ার্ড গ্রহন করে, যেটি স্লাইডকে রিলেটিভ অবস্থান থেকে বর্তমান অবস্থানে পরিবর্তন করে।

স্লাইডে ক্যাপশন যুক্ত করা

প্রতিটি স্লাইডে ক্যাপশন তৈরি করার জন্য প্রত্যেকটি < div class="item" > এর মধ্যে < div class="carousel-caption" > যুক্ত করুনঃ

kt_satt_skill_example_id=1148

বুটস্ট্রাপ ক্যারোসেলের সম্পূর্ণ রেফারন্স

বুটস্ট্রাপ ক্যারেসেলের অপশন, মেথড এবং ইভেন্টের সম্পূর্ণ রেফারেন্সের জন্য আমাদের বুটস্ট্রাপ JS ক্যারেসেল রেফারেন্স পেজে ভিজিট করুন।

বুটস্ট্রাপ মোডাল প্লাগ-ইন

বুটস্ট্রাপ মোডাল প্লাগ-ইন হলো ডায়ালগ বক্স/পপ-আপ উইন্ডো যা বর্তমান পেজের উপরে প্রদর্শিত হয়ঃ

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
 ওপেন করতে মডাল এ ক্লিক করুন 
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
 <div class="modal-dialog">
   <div class="modal-content">
     <div class="modal-header">
       <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
       <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
     </div>
     <div class="modal-body">
       ...
     </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>

কিভাবে মোডাল তৈরি করবেন?

কিভাবে একটি বেসিক মোডাল তৈরি করা যায় তা নিম্নলিখিত উদাহরণে দেখানো হলোঃ

kt_satt_skill_example_id=1167

উদাহরণের ব্যাখ্যা

"ট্রিগার" পার্টঃ

মোডাল উইন্ডোকে ট্রিগার করার জন্য, আপনাকে অবশ্যই একটি বাটন বা লিংক ব্যবহার করতে হবে।

তারপর বাটন বা লিংকের মধ্যে নিম্নলিখিত দুটি data-* এট্রিবিউট অন্তর্ভুক্ত করুনঃ

• data-toggle="modal" এটি মোডাল উইন্ডো ওপেন করে
• data-target="#myModal" এটির মাধ্যমে মোডালের আইডিকে লক্ষ্য করা হয়

"মোডাল" পার্টঃ

মোডালের পেরেন্ট < div > এ অবশ্যই একটি আইডি থাকতে হবে এবং এর ভ্যালু অবশ্যই data-target এট্রিবিউটের মতো হবে, যেটি মোডালকে ট্রিগার করার জন্য ব্যবহার করা হয় ("myModal")।

.modal ক্লাস < div > এলিমেন্টের কন্টেন্টকে মোডাল হিসেবে আইডেন্টিফাই করে এবং এর মধ্যে ফোকাস তৈরি করে।

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

role="dialog" এট্রিবিউটটি ব্যবহার করা হয় স্ক্রিন রিডারদের এক্সেসিবিলিটি ইম্প্রুভ করার জন্য।

.modal-dialog ক্লাসের মাধ্যমে মোডালের জন্য যথাযথ প্রস্থ এবং মার্জিন নিশ্চিত করা হয়।

"মোডাল কন্টেন্ট" পার্টঃ

class="modal-content" যুক্ত < div > এলিমেন্ট মোডালকে স্টাইল (border, background-color, etc.) করে। এই < div > এলিমেন্টের মধ্যেই মোডাল হেডার, মোডাল বডি এবং মোডাল ফুটার যুক্ত করতে হবে।

মোডালের হেডারকে স্টাইল করার জন্য .modal-header ক্লাস ব্যবহার করা হয়। হেডারের < button > এলিমেন্টের মধ্যে data-dismiss="modal" এট্রিবিউট থাকে যেটিতে ক্লিক করে মোডালটি ক্লোজ করা যায়। .close ক্লাসটি ক্লোজ বাটনকে স্টাইল করে এবং .modal-title ক্লাসটি মোডাল হেডারকে যথাযথ লাইন উচ্চতাসহকারে স্টাইল করে।

মোডালের বডিকে স্টাইল করার জন্য .modal-body ক্লাস ব্যবহার করা হয়। হেডারের মধ্যে আপনার প্রয়োজন মতো এইচটিএমএল মার্কআপ ট্যাগ ব্যবহার করতে পারেবেন। যেমন; প্যারাগ্রাফ, ইমেজ, ভিডিও ইত্যাদি।

মোডালের ফুটারকে স্টাইল করার জন্য .modal-footer ক্লাস ব্যবহার করা হয়। মনে রাখবেন এই অংশটি ডিফল্টভাবে ডানে এ্যালাইন অবস্থায় থাকে।

মোডালের আকার

ছোট আকারের মোডালের জন্য .modal-sm ক্লাস এবং বড় আকারের মোডালের জন্য .modal-lg ক্লাস ব্যবহার করুন।

মোডালের আকার নির্ধারণের জন্য সাইজ ক্লাস গুলো .modal-dialog ক্লাস যুক্ত  < div > এলিমেন্টের মধ্যে ব্যবহার করুনঃ

ছোট আকারঃ 

kt_satt_skill_example_id=1168

বড় আকারঃ 

kt_satt_skill_example_id=1169

বুটস্ট্রাপ টুলটিপ প্লাগ-ইন

বুটস্ট্রাপ টুলটিপ প্লাগ-ইন হলো ছোট পপ-আপ বক্স। যখন ইউজার কোন এলিমেন্টের উপর মাউস পয়েন্টার নিয়ে আসে তখন এটি প্রদর্শিত হয়ঃ

কিভাবে টুলটিপ তৈরি করবেন

1. যেই এলিমেন্টটিতে টুলটিপ তৈরি করতে চান, সেই এলিমেন্টের মধ্যে data-toggle="tooltip" এট্রিবিউটটি যুক্ত করুন।
2. টুলটিপ হিসেবে যেই টেক্সটি প্রদর্শন করতে চান সেটি title এট্রিবিউটের ভ্যালু হিসেবে যুক্ত করুনঃ

kt_satt_skill_example_id=1170

নোটঃ টুলটিপ অবশ্যই জেকুয়েরির মাধ্যমে সক্রিয় করে দিতে হবে। জেকুয়েরির মাধ্যমে সক্রিয় করার জন্য প্রথমে নির্দিষ্ট এলিমেন্টটিকে সিলেক্ট করুন এবং তারপর tooltip() মেথডটি কল করুন।

একটি ডকুমেন্টে অবস্থিত সকল টুলটিপকে সক্রিয় করার জন্য নিম্নলিখিত কোডটি ব্যবহার করুনঃ

kt_satt_skill_example_id=1172

টুলটিপের অবস্থান নির্ধারণ

ডিফল্টভাবে টুলটিপ সাধারনত এলিমেন্টের উপরে প্রদর্শিত হয়।

টুলটিপের অবস্থান উপর, নিচ, বামে অথবা ডানে যেকোনো স্থানেই নির্ধারণ করা যায়। টুলটিপের অবস্থান নির্ধারণ করার জন্য data-placement এট্রিবিউট ব্যবহার করুনঃ

kt_satt_skill_example_id=1174

বুটস্ট্রাপ পপ-ওভার প্লাগ-ইন

বুটস্ট্রাপ পপ-ওভার প্লাগ-ইন টুলটিপের মতোই; এটি হলো একটি পপ-আপ বক্স, যখন একজন ইউজার কোন এলিমেন্টের ক্লিক করে তখন এটি প্রদর্শিত হয়। পার্থক্য হলো পপ-ওভার টুলটিপের চেয়ে বেশি কন্টেন্ট ধারণ করতে পারে।

কিভাবে পপ-ওভার তৈরি করবেন

1. যেই এলিমেন্টটিতে পপ-ওভার তৈরি করতে চান, সেই এলিমেন্টটিতে data-toggle="popover" এট্রিবিউট ব্যবহার করুন।
2. পপ-ওভারের হেডার নির্ধারণ করার জন্য title এট্রিবিউট ব্যবহার করুন এবং পপ-ওভারের বডি নির্ধারণ করার জন্য data-content এট্রিবিউট ব্যবহার করুনঃ

kt_satt_skill_example_id=1182

নোটঃ পপ-ওভার অবশ্যই জেকুয়েরির মাধ্যমে সক্রিয় করে দিতে হবে। জেকুয়েরির মাধ্যমে সক্রিয় করার জন্য প্রথমে নির্দিষ্ট এলিমেন্টটিকে সিলেক্ট করুন এবং তারপর popover() মেথড কল করুন।

একটি ডকুমেন্টের সবকটি পপ-ওভারকে কল করে একসাথে একটিভ করার জন্য নিম্নলিখিত কোড ব্যবহার করুনঃ

kt_satt_skill_example_id=1184

পপ-ওভারের অবস্থান নির্ধারণ

ডিফল্টভাবে, পপ-ওভার সাধারণত ডান পাশে প্রদর্শিত হয়।

পপ-ওভারকে উপর, নিচ, বাম অথবা ডানে যোকোনো স্থানেই প্রদর্শন করানো যায়। পপ-ওভারের অবস্থান নির্দিষ্ট করার জন্য data-placement এট্রিবিউট ব্যবহার করুনঃ

kt_satt_skill_example_id=1187

পপ-ওভার ক্লোজ করা

ডিফল্টভাবে, আপনি যখন ঐ এলিমেন্টের উপর পূনরায় ক্লিক করবেন তখন পপ-ওভারটি ক্লোজ হয়ে যাবে। যাইহোক, আপনি যদি চান এলিমেন্টের বাহিরেও ক্লিক করলে পপ-ওভারটি ক্লোজ হয়ে যাক তাহলে data-trigger="focus" এট্রিবিউটটি ব্যবহার করুনঃ

kt_satt_skill_example_id=1189

টিপস: যদি আপনি এলিমেন্টের উপর মাউস হোভারের মাধ্যমে পপ-ওভার প্রদর্শন করতে চান তাহলে, data-trigger="hover" এট্রিবিউট ব্যবহার করুনঃ

kt_satt_skill_example_id=1190

বুটস্ট্রাপ স্ক্রলস্পাই প্লাগ-ইন

বুটস্ট্রাপ স্ক্রলস্পাই প্লাগ-ইন স্ক্রল পজিশনের উপর ভিত্তি করে ন্যাভিগেশন লিস্টে স্বয়ংক্রিয়ভাবে আপডেট পাঠানোর জন্য ব্যবহার করা হয়।

কিভাবে বুটস্ট্রাপ স্ক্রলস্পাই তৈরি করবেন

কিভাবে বুটস্ট্রাপ স্ক্রলস্পাই তৈরি করা যায় তা নিচের উদাহরণে দেখানো হলোঃ

kt_satt_skill_example_id=1192

উদাহরণের ব্যাখ্যা

যেই এলিমেন্টটিকে স্ক্রলযোগ্য এরিয়া করতে চান ঐ এলিমেন্টটিতে data-spy="scroll" এট্রিবিউট যুক্ত করুন (এক্ষেত্রে সাধারণত < body > এলিমেন্টই ব্যবহার করা হয়)।

তারপর data-target এট্রিবিউট যুক্ত করুন যার ভ্যালু হবে ন্যাভিগেশন বারের আইডি বা ক্লাস (.navbar)। এর মাধ্যমে ন্যাভবারের সাথে স্ক্রলযোগ্য এরিয়ার লিংক করা হয়।

মনে রাখবেন অবশ্যই স্ক্রলযোগ্য এলিমেন্টের আইডির সাথে ন্যাভিগেশন লিংকের আইডির সাথে মিল হতে হবে (< div id="section1" > সাথে < a href="#section1" >) মিল থাকতে হবে।

data-offset এট্রিবিউটের মাধ্যমে এটা নির্দিষ্ট করা হয় যে কতো পিক্সেলের মধ্যে স্ক্রলিং একটিভ হবে। ডিফল্ট ভ্যালু হলো 10px।

উলম্ব(Vertical) স্ক্রলস্পাই মেনু

এই উদাহরণে মেনু হিসেবে আমরা বুটস্ট্রাপের vertical ন্যাভিগেশন পিল ব্যবহার করেছি।

kt_satt_skill_example_id=1193

বুটস্ট্রাপ এফিক্স প্লাগ-ইন

বুটস্ট্রাপ এফিক্স প্লাগ-ইনের মাধ্যমে একটি এলিমেন্টকে পেজের একটি জায়গায় আবদ্ধ করা যায়। এটি প্রায়ই ন্যাভিগেশন মেনু অথবা সামাজিক মাধ্যমের আইকন বাটনে ব্যবহার করা হয় যেন উপর-নিচ স্ক্রলিংয়ের সময়ে এগুলো একটি স্থানে গিয়ে অবদ্ধ বা থেমে যায়।

স্ক্রল পজিশনের উপর ভিত্তি করে প্লাগ-ইনটি এর আচরনকে on এবং off এ টোগল (সিএসএস position প্রোপার্টিকে static থেকে fixed) করে।

এফিক্সের মাধ্যমে যখন আমরা পেজ উপর-নিচ স্ক্রলিং করি, মেনুটি সবসময় দৃশ্যমান থাকে এবং এর অবস্থানে গিয়ে থেমে যায়।

কিভাবে একটি এফিক্স মেনুবার তৈরি করবেন

কিভাবে একটি horizontal এফিক্স মেনুবার তৈরি করা যায় তা নিম্নলিখিত উদাহরণে দেখানো হলো:

kt_satt_skill_example_id=1198

কিভাবে একটি vertical এফিক্স মেনুবার তৈরি করা যায় তা নিম্নলিখিত উদাহরণে দেখানো হলো:

kt_satt_skill_example_id=1199

উদাহরণের ব্যাখ্যা

যেই এলিমেন্টে আপনি এফিক্স করতে চান সেটিতে data-spy="affix" এট্রিবিউট যুক্ত করুন।

স্ক্রলের অবস্থান হিসেব করার জন্য data-offset-top|bottom এট্রিবিউট ব্যবহার করুন (অপশনাল) ।

এটি কিভাবে কাজ করে

এফিক্স প্লাগ-ইন তিনটি ক্লাসের মধ্যে টোগল তৈরি করে: .affix, .affix-top, এবং .affix-bottom । প্রত্যেকটি ক্লাসই নির্দিষ্ট স্টেটকে রিপ্রেজেন্ট করে। আসল অবস্থান মোকাবেলা করার জন্য আপনাকে অবশ্যই সিএসএস প্রোপার্টি ব্যবহার করতে হবে। শুধুমাত্র ব্যতিক্রম এক্ষেত্রেই, .affix ক্লাসে শুধুমাত্র position:fixed ব্যবহার করতে হবে।

• এই প্লাগ-ইনটি এলিমেন্টকে এর সর্বোচ্চ উপরে অথবা সর্বোচ্চ নিচে অবস্থান নির্ধারন করার জন্য .affix-top অথবা .affix-bottom ক্লাস যুক্ত করে নেয়। এক্ষেত্রে সিএসএসের মাধ্যমে অবস্থান নির্ধারন করার প্রয়োজন নেই।
• স্ক্রলিংয়ের পূর্বে এফিক্স এলিমেন্ট আসল এফিক্সকে ট্রিগার করবে - এটা হলো সেই জায়গা যেখানে প্লাগ-ইন .affix ক্লাসের (sets position:fixed) মাধ্যমে .affix-top অথবা .affix-bottom ক্লাসকে রিপ্লেস করে। পেজের কোন স্থানে এফিক্স এলিমেন্টটির স্থান হবে এটা অবশ্যই আপনাকে সিএসএসের top অথবা bottom প্রোপার্টির মাধ্যমে নির্ধারণ করে দিতে হবে।
• যদি নিম্ন অফসেট ডিফাইন করা হয়, এক্ষেত্রে .affix-bottom ক্লাসের মাধ্যমে .affix ক্লাস রিপ্লেস হবে। যেহেতু অফসেট হলো অপশনাল, প্রথম সেটিং এ যথাযথ সিএসএস ব্যবহার করতে হবে। এই ক্ষেত্রে, যখন প্রয়োজন হবে তখন position:absolute ব্যবহার করবে।

উপরের প্রথম উদাহরণে, যখন আমরা উপর থেকে ১৯৭ পিক্সেল স্ক্রলিং করি তখন এফিক্স প্লাগ-ইন <nav> এলিমেন্টে .affix ক্লাস (position:fixed) যুক্ত করে নেয়। আপনি যদি উদাহরণটি ওপেন করেন, এর পাশাপাশি আপনি আরো দেখতে পাবেন যে, আমরা .affix ক্লাসের মধ্যে সিএসএস top প্রোপার্টি ব্যবহার করেছি যার ভ্যালু হলো ০(শুন্য) । এর মাধ্যমে এটা নিশ্চিত করা হয় যে, যখন আমরা উপর থেকে ১৯৭ পিক্সেল স্ক্রলিং করবো তখনই ন্যাভিগেশন বারটি পেজের উপরে অবস্থান নিশ্চিত করবে।

স্ক্রলস্পাই এবং এফিক্স

স্ক্রলস্পাই প্লাগ-ইনের সাথে এফিক্স প্লাগ-ইনের ব্যবহার:

Horizontal মেনু (ন্যাভবার)

kt_satt_skill_example_id=1200

Vertical মেনু (সাইডবার)

kt_satt_skill_example_id=1202