SNDP BAG 4 YOU
কম্পিউটার প্রোগ্রামিং শিখুন


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

বুটস্ট্র্যাপ Accordion সম্পর্কে জানার আগে Collapse সম্পর্কে জানুন এখানে ক্লিক করে

Facebook

The full name of HTML is Hyper Text Markup Language , meaning HTML is a type of markup language. For example, Microsoft Word, WordPad, Notepad, etc. can be written in a text editor, the color of the text can be changed, images can be added, etc. But the documents written in all these editors cannot be published on the web. This text document needs a markup language to display on the web. HTML is the type of markup language that can be used to display or publish any text or image on a web page

Youtube

The full name of HTML is Hyper Text Markup Language , meaning HTML is a type of markup language. For example, Microsoft Word, WordPad, Notepad, etc. can be written in a text editor, the color of the text can be changed, images can be added, etc. But the documents written in all these editors cannot be published on the web. This text document needs a markup language to display on the web. HTML is the type of markup language that can be used to display or publish any text or image on a web page

Twitter

The full name of HTML is Hyper Text Markup Language , meaning HTML is a type of markup language. For example, Microsoft Word, WordPad, Notepad, etc. can be written in a text editor, the color of the text can be changed, images can be added, etc. But the documents written in all these editors cannot be published on the web. This text document needs a markup language to display on the web. HTML is the type of markup language that can be used to display or publish any text or image on a web page

pay

The full name of HTML is Hyper Text Markup Language , meaning HTML is a type of markup language. For example, Microsoft Word, WordPad, Notepad, etc. can be written in a text editor, the color of the text can be changed, images can be added, etc. But the documents written in all these editors cannot be published on the web. This text document needs a markup language to display on the web. HTML is the type of markup language that can be used to display or publish any text or image on a web page



উপরের প্রোজেক্ট এর কোডএর জন্য ক্লিক করুন


প্রথম ধাপ :

প্রথমে একটি <div> ট্যাগ লিখবেন । এই ট্যাগ এর একটি id এর নাম লিখবেন । এখানে id এর নাম দিলাম #sndp। উদাহরণ স্বরূপ - id="sndp" মনে রাখবেন এই Div ট্যাগ এর ভিতরে সমস্ত কনটেন্ট লিখা হবে ।

দ্বিতীয় ধাপ :

প্রথম <div> ট্যাগের ভিতরে একটি <div> ট্যাগ লিখবেন । এই <div> ট্যাগের ক্লাস দেবেন .card । উদাহরণ স্বরূপ - class="card".

তৃতীয় ধাপ :

দ্বিতীয় ধাপে card নামে যে ক্লাস div টি নেওয়া হয়েছে তার ভিতরে আর একটি div ট্যাগ নিতে হবে। এই div এর ক্লাস নাম হবে .card-headerউদাহরণ স্বরূপ class="card-header" । এখানে আপনি ব্যাকগ্রাউন্ড রং ব্যাবহার করতে পারেন সুন্দর দেখানোর জন্য।

চতুর্থ ধাপ :

তৃতীয় ধাপে ক্লাস .card-header নামে যে div টি লেখা হয়েছে তার ভিতরে একটি <a> ট্যাগ লিখতে হবে । এই এঙ্কার ট্যাগের একটি href="" নাম অ্যাট্রিবিউট লিখতে হবে । এই href=" " এর ভিতরে পঞ্চম ধাপের div এর id কে # দ্বারা টার্গেট করতে হবে । । এই <a> ট্যাগের ভিতরে একটি অ্যাট্রিবিউট লিখতে হবে data-toggle="collapse" নামে ।

পঞ্চম ধাপ :

এই ধাপে একটি <div> ট্যাগ লিখতে হবে। এই div ট্যাগটি প্রথম ধাপের div ট্যাগের ভিতরে লিখতে হবে । এই div ট্যাগের একটি ক্লাস লিখতে হবে .collapse নামে। একটি id লিখে তার নাম দিতে হবে। এই id টিকে চতুর্থ ধাপে যে <a> ট্যাগ ব্যবহার করা হহেছে তার herf="" অ্যাট্রিবিউটে # দ্বারা টার্গেট করতে হবে । সর্ব শেষে এই div ট্যাগের একটি অ্যাট্রিবিউট লিখতে হবে data-parent="#sndp"। এই data-parent=" " অ্যাট্রিবিউট এর ভিতরে প্রথম ধাপে যে div এর id লেখা আছে সেটি লেখা হয়েছে ।

ষষ্ঠ ধাপ :

পঞ্চম ধাপে যে div টি তৈরি করা হয়েছে এবং ক্লাস নাম দেওয়া হয়েছে collapse । এই div এর ভিতরে আর একটি <div> ট্যাগ লিখতে হবে । এই div ট্যাগের ক্লাস নাম দিতে হবে Card-body । এই div টি Accordion এর বডি .। এই div ট্যাগের ভিতরে সব কিছু লিখতে হয় যে টা আপনি দেখাতে চায়ছেন ।

Note : এখন accordion তৈরি । যত গুলো বক্স লাগবে তত গুলো কপি পেস্ট করলে হয়ে যাবে । দ্বিতীয় ধাপ থেকে ষষ্ট ধাপের সমস্ত কোড গুলো ডুপ্লিকেট করে প্রথম div এর ভিতরে পেস্ট করুন । এখানে মনে রাখবেন সমস্ত id গুলো আলাদা লিখবেন ।

Write here text, picture, video etc............
Write here text, picture, video etc............
Write here text, picture, video etc............