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

কিভাবে বুটস্ট্র্যাপ 5 সংকোচন তৈরি করবেন?

2

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

বুটস্ট্র্যাপ 5 টি টিউটোরিয়াল সংকোচন

  1. বুটস্ট্র্যাপ পতনের ভূমিকা
  2. Href অ্যাট্রিবিউট দিয়ে পতন তৈরি করা
  3. ডেটা-টুগলের সাথে সঙ্কুচিত করুন
  4. একাধিক লক্ষ্য পতন
  5. অ্যাকর্ডিয়ন ভেঙে পড়া
  6. সংকোচনযোগ্য সামগ্রী বডি

1 পতনের ভূমিকা

পতন উপাদান দুটি উপাদান আছে:

  • পতন দেখাতে বা লুকানোর জন্য মৌলিক উপাদান।
  • ভেঙে যাওয়া পাত্রে প্রকৃত সামগ্রী।

এটি নিম্নলিখিত তিনটি CSS ক্লাস ব্যবহার করে:

  • বিষয়বস্তু লুকানোর জন্য ".collapse" ব্যবহার করা হয়।
  • ".কল্যাপসিং" ট্রানজিশন ইফেক্ট প্রয়োগ করতে ব্যবহৃত হয়।
  • ".Collapse.show" কন্টেন্ট দেখানোর জন্য ব্যবহার করা হয়।

এখানে আমরা তিন ধরনের পতন সৃষ্টি নিয়ে আলোচনা করব-href অ্যাট্রিবিউট ব্যবহার করে, ডেটা-টগল এবং অ্যাকর্ডিয়ন স্টাইল ব্যবহার করে।

2 Href বৈশিষ্ট্যের সাথে সংকোচন করুন

এই ক্ষেত্রে নোঙ্গর ট্যাগটি ট্রিগার হিসাবে বোতাম ক্লাসের সাথে ব্যবহৃত হয় । এটিতে "ডেটা-টগল" অ্যাট্রিবিউট থাকা উচিত যার মান "পতন" হিসাবে। Href বৈশিষ্ট্যের একটি অনন্য আইডি থাকতে হবে। প্রাথমিক পৃষ্ঠা লোডে বিষয়বস্তু লুকানো আছে তা নিশ্চিত করার জন্য "আরিয়া-সম্প্রসারিত" বৈশিষ্ট্যটি "মিথ্যা" হিসাবে সেট করা হয়েছে।

পতন ট্রিগার পরে, প্রকৃত বিষয়বস্তু একটি পৃথক সঙ্গে যোগ করা উচিত

href বৈশিষ্ট্যের একই আইডি দিয়ে চিহ্নিত ট্যাগ। ডিভ ট্যাগে আপনার ".collapse" ক্লাস যোগ করা উচিত। আপনি ডিভি ট্যাগগুলির মধ্যে যে কোনও ধরণের সামগ্রী যুক্ত করতে পারেন। এই উদাহরণে আমরা পাঠ্য সহ একটি কার্ড ব্লক ব্যবহার করেছি।

Href অ্যাট্রিবিউট সহ পতনের সম্পূর্ণ কোড নিচে দেখানো হয়েছে:

<p> <a class="btn btn-primary" data-toggle="collapse" href="#linkcollapse" aria-expanded="false" aria-controls="Collapse"> Link with Href </a> </p> <div class="collapse" id="linkcollapse"> <div class="card card-block"> Here is the content for block which will be shown when the button is clicked. This uses the link with href attribute for collapsing. </div> </div>

ফলাফলটি একটি বোতামের মতো হওয়া উচিত এবং যখন আপনি বোতামে ক্লিক করেন তখন পতনযোগ্য সামগ্রী দেখানো উচিত।

কিভাবে বুটস্ট্র্যাপ 5 সংকোচন তৈরি করবেন?

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

3 ডেটা-টগল দিয়ে সঙ্কুচিত করুন

Href অ্যাট্রিবিউটের পরিবর্তে আপনি নীচে দেখানো ট্রিগার তৈরি করতে বোতাম এলিমেন্টের সাথে "data-toggle = collaps" ব্যবহার করতে পারেন:

<p> <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#buttoncollapse" aria-expanded="false" aria-controls="Collapse"> Button with data-target </button> </p> <div class="collapse" id="buttoncollapse"> <div class="card card-block"> Here is the content for block which will be shown when the button. This uses button with data-target attribute for collapsing. </div> </div>

উপরের কোডের ফলাফলটি href উদাহরণের মতো দেখতে নীচের মত হবে।

কিভাবে বুটস্ট্র্যাপ 5 সংকোচন তৈরি করবেন?

4 একাধিক ট্যাগেট সংকোচন

উপরের উদাহরণটিতে একটি বোতাম ব্যবহার করে একক পতনের উপাদান রয়েছে। আপনি একক উপাদান ব্যবহার করে একাধিক পতন উপাদান টগল করতে পারেন। উদাহরণস্বরূপ, নীচের কোডটিতে তিনটি বোতাম রয়েছে। প্রথম এবং দ্বিতীয় বোতাম যথাক্রমে প্রথম এবং দ্বিতীয় পতন টগল করতে ব্যবহৃত হয়। তৃতীয় বাটন একসাথে প্রথম এবং দ্বিতীয় ধসে টগল করতে ব্যবহৃত হয়।

<p> <a class="btn btn-primary" data-toggle="collapse" href="#multipleCollapse1" aria-expanded="false" aria-controls="multipleCollapse1">Toggle First Element</a> <button class="btn btn-secondary" type="button" data-toggle="collapse" data-target="#multipleCollapse2" aria-expanded="false" aria-controls="multipleCollapse2">Toggle Second Element</button> <button class="btn btn-success" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multipleCollapse1 multipleCollapse2">Toggle Both Elements</button> </p> <div class="row"> <div class="col"> <div class="collapse multi-collapse" id="multipleCollapse1"> <div class="card card-body"> Here is the content for block which will be shown when the first button is clicked. This uses button with data-target attribute for collapsing. </div> </div> </div> <div class="col"> <div class="collapse multi-collapse" id="multipleCollapse2"> <div class="card card-body"> Here is the content for block which will be shown when the second button is clicked. This uses button with data-target attribute for collapsing. </div> </div> </div> </div>

এটি আপনার সাইটে নীচের মত দেখতে হবে:

কিভাবে বুটস্ট্র্যাপ 5 সংকোচন তৈরি করবেন?

বুটস্ট্র্যাপ সংকোচনের উদাহরণ

5 অ্যাকর্ডিয়ন সংকোচন

চূড়ান্ত এবং সর্বাধিক জনপ্রিয় বৈচিত্র হল পতন উপাদান ব্যবহার করে অ্যাকর্ডিয়ন তৈরি করা। নীচে অ্যাকর্ডিয়ন কোডের তিনটি স্লাইডার রয়েছে – প্রথমটিতে কার্ড গ্রুপ লেআউট এবং বাকি দুটিতে কিছু টেক্সট কন্টেন্ট সহ কার্ড হেডিং আছে ।

<div id="accordion" role="tablist" aria-multiselectable="true"> <div class="card"> <div class="card-header" role="tab" id="Firstheading"> <h5 class="mb-0"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="true" aria-controls="collapse1"> Heading 1 </a> </h5> </div> <div id="collapse1" class="collapse show" role="tabpanel" aria-labelledby="Firstheading"> <div style="margin:20px;"> <div class="card-group"> <div class="card"> <img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Flex Card Image 1"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">Here is a longer description of the card and the height will be auto aligned with flex box.</p> </div> <div class="card-footer"> <small class="text-muted">Here is a footer</small> </div> </div> <div class="card"> <img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Flex Card Image 2"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">Here is a shorter description of the card.</p> </div> <div class="card-footer"> <small class="text-muted">Here is a footer</small> </div> </div> </div> </div> </div> </div> <div class="card"> <div class="card-header" role="tab" id="secondheading"> <h5 class="mb-0"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="false" aria-controls="collapse2"> Heading 2 </a> </h5> </div> <div id="collapse2" class="collapse" role="tabpanel" aria-labelledby="secondheading"> <div class="card-body"> Here is the content for the second section. </div> </div> </div> <div class="card"> <div class="card-header" role="tab" id="headingThree"> <h5 class="mb-0"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse3" aria-expanded="false" aria-controls="collapse3"> Heading 3 </a> </h5> </div> <div id="collapse3" class="collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="card-body"> Here is the content for the third section. </div> </div> </div> </div>

এটি লম্বা কোড ব্লক প্রধানত প্রথম ধসের জন্য কার্ড গ্রুপ বিভাগের কারণে। আসুন আমরা এই কোডের সমস্ত উপাদান অংশের মধ্য দিয়ে যাই:

5.1। অ্যাকর্ডিয়ন

  • অ্যাকর্ডিয়ন একটি অনন্য আইডি (এই উদাহরণে #accordion) সঙ্গে ভিতরে DIV আছে ট্যাগ জড়িয়ে রাখা হয়েছে। এবং ভূমিকা বৈশিষ্ট্যটি ট্যাবলিস্ট হিসাবে ব্যবহার করা উচিত।
  • সম্পূর্ণরূপে তিনটি সংকোচনযোগ্য বিভাগ ব্যবহার করা হয় এবং প্রতিটি বিভাগ তার নিজস্ব div দিয়ে শুরু করা উচিত। আমরা এই প্রতিটি বিভাগে ".card" ক্লাস ব্যবহার করেছি।
  • প্রতিটি কার্ড বিভাগ একটি শিরোনাম এবং একটি সংক্ষিপ্ত সামগ্রী দিয়ে গঠিত।

5.2। শিরোনাম

  • ক্লাস "। কার্ড-হেডার" একটি অনন্য আইডি (ফার্স্টহেডিং) এবং ট্যাব হিসাবে মান সহ ভূমিকা বৈশিষ্ট্য সহ শিরোনামের জন্য ব্যবহৃত হয়।
  • হেডারের ভিতরে, হেডিং ট্যাগ যোগ করুন, আমরা এই ক্ষেত্রে h5 ব্যবহার করেছি।
  • আবার, শিরোনাম ট্যাগের ভিতরে, নিম্নলিখিত শ্রেণী/বৈশিষ্ট্যগুলির সাথে অ্যাঙ্কর লিঙ্ক যোগ করুন:

    • অ্যাকর্ডিয়নের জন্য ".ক্ল্যাপ্সড" ক্লাস যোগ করুন।

    • সংকোচন হিসাবে মান সহ ডেটা-টগল বৈশিষ্ট্য যোগ করুন।

    • প্রথম আইডি ব্যবহার করে ডেটা-প্যারেন্ট অ্যাট্রিবিউট যোগ করুন

      (এই ক্ষেত্রে#একর্ডন)।

    • Href অ্যাট্রিবিউটটিতে সংকোচনযোগ্য সামগ্রীর একটি আইডি থাকা উচিত যা "#পতন 1"।

    • আরিয়া-এক্সপেন্ডেডকে সত্যে সেট করুন যাতে পৃষ্ঠাটি লোড হওয়ার সময় বিভাগটি খোলা হবে (আপনার এটি দ্বিতীয় এবং পরবর্তী বিভাগগুলির জন্য মিথ্যাতে সেট করা উচিত যাতে লোড করার সময় সেগুলি বন্ধ থাকে)।

    • Href অ্যাট্রিবিউট ভ্যালু (পতন ১) এর একই আইডি দিয়ে আরিয়া-কন্ট্রোলস অ্যাট্রিবিউট মান সেট করুন।

6 সংক্ষিপ্ত কন্টেন্ট বডি

  • একটি নতুন খুলুন

    হেডারের পরে ট্যাগ করুন হেডার href অ্যাট্রিবিউট মান (পতন 1) এর সাথে একই আইডি

  • বিষয়বস্তু খোলা দেখানোর জন্য ".ক্ল্যাপস শো" ক্লাস যোগ করুন। আপনার বাকি অংশগুলির জন্য ".show" ব্যবহার করা উচিত নয় কারণ সেগুলি বন্ধ করা উচিত।

  • ট্যাবপ্যানেল হিসাবে ভূমিকা যোগ করুন এবং কার্ড হেডার আইডি (ফার্স্টহেডিং) এর সমান মান সহ aria-labelledby অ্যাট্রিবিউট বরাদ্দ করুন।

  • এখন আপনি যে সামগ্রী যোগ করতে চান তা যোগ করতে পারেন। এই ক্ষেত্রে আমরা প্রথম বিভাগ এবং বাকি দুটি বিভাগের জন্য কার্ড ব্লকগুলির জন্য আরেকটি ডিভ এবং যোগ কার্ড কার্ড খুলেছি।

অন্যান্য দুটি বিভাগের জন্য একই প্রক্রিয়া অনুসরণ করুন এবং চূড়ান্ত অ্যাকর্ডিয়নটি নীচের মতো দেখতে হবে:

কিভাবে বুটস্ট্র্যাপ 5 সংকোচন তৈরি করবেন?


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


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

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