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

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

2

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

ট্যাগ. আমাদের উদাহরণে, আসুন আমরা চারটি শিক্ষার্থীর নাম (সারিতে) এবং গড় শতাংশ (কলামে) সহ পাঁচটি বিষয় সহ একটি টেবিল বিন্যাসে সাধারণ মার্কশিট তৈরি করি। ডিফল্ট বুটস্ট্র্যাপ টেবিলের কোড নিচে দেওয়া হল।

ডিফল্টরূপে বুটস্ট্র্যাপ টেবিল তৈরির জন্য কেবলমাত্র CSS ক্লাসের প্রয়োজন হল "টেবিল" ক্লাসটি HTML টেবিল এলিমেন্টে সরাসরি প্রয়োগ করা হয়। আপনাকে একটি তৈরি করতে হবে না

বুটস্ট্র্যাপে টেবিল erোকানোর জন্য ট্যাগ। ডিফল্ট ট্যাগ নিম্নলিখিত ফলাফল উত্পাদন করবে:

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

টেবিলের রং উল্টানো

বুটস্ট্র্যাপ 4 আপনাকে "টেবিল-বিপরীত" যোগ করে আপনার টেবিলের রঙ উল্টাতে দেয়

ট্যাগ এটি ব্যাকগ্রাউন্ডকে অন্ধকারে এবং টেক্সটকে হালকা রঙে পরিণত করবে। কোডটি নীচের মত হওয়া উচিত:

<table class="table table-inverse"> All content remains same here similar to default table. <table>

বিপরীত টেবিলের নীচে দেখানো হিসাবে খুব অন্ধকার এবং আকর্ষণীয় পটভূমি থাকবে:

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

ইনভার্স হেডার টেবিল

পূর্ববর্তী ক্ষেত্রে "টেবিল-বিপরীত" শ্রেণীটি পুরো টেবিলে প্রয়োগ করা হয়েছিল। বুটস্ট্র্যাপ 4 শুধুমাত্র হেডার ব্যাকগ্রাউন্ড এবং টেক্সট কালার উল্টাতে দেয়। হেডার উল্টানোর জন্য শুধু "thead-inverse" ক্লাস যোগ করুন

ট্যাগ

<table class="table"> <thead class="thead-inverse"> </thead> </table>

এবং আমাদের মার্কশিট টেবিলে নিচের মত একটি কালো হেডার সারি থাকবে:

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

এটাই সব না!!! বুটস্ট্র্যাপ সহ আরো অনেক অপশন আছে। আসুন আরো কিছু বৈচিত্র তৈরি করি।

ডোরাকাটা বুটস্ট্র্যাপ 4 টেবিল

ডোরাকাটা টেবিল আপনাকে সারির জন্য বিকল্প রং তৈরি করতে দেয়। বিদ্যমান "টেবিল" শ্রেণীতে কেবল "টেবিল-ডোরাকাটা" যোগ করুন এবং টেবিলে স্ট্রিপিং প্যাটার্ন থাকবে। হালকা ধূসর পটভূমির রঙ প্রথম সারি থেকে শুরু করে সমস্ত বিজোড় সংখ্যাযুক্ত সারিতে প্রয়োগ করা হবে।

<table class="table table-striped"> </table>

ডোরাকাটা টেবিলটি সর্বাধিক সারির পার্থক্য এবং দর্শকদের কাছে বিষয়বস্তু প্রদর্শন করতে পছন্দ করা হয়।

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

বুটস্ট্র্যাপ সীমানা টেবিল

এটি ডিফল্ট টেবিলে সীমানা যুক্ত করবে। আপনার যা প্রয়োজন তা হল "টেবিল-বর্ডার" ক্লাসটি বিদ্যমান "টেবিল" ক্লাসে যুক্ত করা।

<table class="table table-bordered"> </table>

সীমানা সহ আমাদের মার্ক শীট টেবিলটি নীচের মত হওয়া উচিত:

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

আপনি সহজেই সারিতে ডোরা দিয়ে সীমানাযুক্ত টেবিল তৈরি করতে পারেন।

<table class="table table-striped table-bordered"> </table>

সারিতে হভার ইফেক্ট সহ টেবিল

কিভাবে আপনার টেবিলে হোভার প্রভাব যোগ করার বিষয়ে? "টেবিল-হভার" ক্লাসটি আপনার জন্য এটি করবে। হালকা ধূসর পটভূমি রঙের সাথে সংশ্লিষ্ট সারিটি হাইলাইট করা হয়েছে তা দেখতে টেবিলের উপর মাউসটি ঘুরান।

<table class="table table-hover"> </table>

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

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

768 পিক্সেল ডিভাইসের চেয়ে ছোট রেসপন্সিভ বুটস্ট্র্যাপ টেবিল

বুটস্ট্র্যাপ 4 এ একটি প্রতিক্রিয়াশীল টেবিল তৈরি করা খুবই সহজ। আপনার অতিরিক্ত যোগ করার দরকার নেই

প্রতিক্রিয়াশীলতা যোগ করার জন্য। শুধু "টেবিল-প্রতিক্রিয়াশীল" শ্রেণী সন্নিবেশ করান, 768 পিক্সেলের স্ক্রিন সাইজের নিচে ব্রাউজারে দেখলে একটি অনুভূমিক স্ক্রোল বার স্বয়ংক্রিয়ভাবে টেবিলে যোগ হবে।

<table class="table table-responsive"> </table>

আমাদের প্রতিক্রিয়াশীল টেবিলটি কেমন হবে তা এখানে। মনে রাখবেন অনুভূমিক স্ক্রোল বারটি কেবল তখনই প্রদর্শিত হবে যখন টেবিলটি 768 পিক্সেলের চেয়ে ছোট আকারের পর্দার সাথে দেখা হবে। অন্যথায় আপনি নিয়মিত বুটস্ট্র্যাপ টেবিলের তুলনায় কোন পার্থক্য পাবেন না।

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

সংকুচিত পাঠ্য সহ বুটস্ট্র্যাপ টেবিল

কখনও কখনও দখলকৃত স্থান কমাতে টেবিলের উচ্চতা সংকুচিত করা প্রয়োজন। বুটস্ট্র্যাপ নিচে দেখানো একটি বিদ্যমান "টেবিল" ক্লাসে "টেবিল-এসএম" ক্লাস যোগ করে এটি করার অনুমতি দেয়:

<table class="table table-sm"> </table>

এটি প্যাডিং অপসারণ করবে এবং টেবিলের উচ্চতা কমপ্যাক্ট করবে।

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

ব্যাকগ্রাউন্ড কালার দিয়ে বুটস্ট্র্যাপ টেবিল তৈরি করা

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

টেবিল প্রাসঙ্গিক ক্লাস
টেবিল-সক্রিয় হালকা ধূসর হোভার রঙ
টেবিল-সাফল্য হালকা সবুজ সাফল্য বা ইতিবাচক কর্ম
টেবিল-তথ্য তথ্য বার্তার জন্য হালকা নীল
টেবিল-সতর্কতা সতর্কতা নির্দেশ করার জন্য হালকা হলুদ
টেবিল-বিপদ বিপদ নির্দেশ করার জন্য হালকা লাল
টেবিল-প্রাথমিক বুটস্ট্র্যাপে প্রাথমিক রঙ নির্দেশ করার জন্য হালকা নীল
টেবিল-মাধ্যমিক বিপদ নির্দেশ করার জন্য হালকা লাল
টেবিল-আলো কোন রং নির্দেশ করার জন্য হালকা ধূসর
টেবিল-অন্ধকার অন্ধকার নির্দেশ করার জন্য হালকা কালো
ব্যাকগ্রাউন্ড ইউটিলিটি / কনটেক্সচুয়াল ক্লাস
বিজি-প্রাথমিক প্রাথমিক রঙ হিসাবে মাঝারি নীল
bg- সাফল্য সাফল্যের জন্য বন সবুজ
বিজি-সতর্কতা

সতর্কতার জন্য মুক্ত বক্তৃতা সবুজ রঙ 

বিজি-তথ্য তথ্যের জন্য হালকা সমুদ্র সবুজ
bg- বিপদ বিপদের জন্য লাল (সিনাবর)
বিজি-লাইট আলোর জন্য নির্জনতা
বিজি-অন্ধকার অন্ধকারের জন্য মিরাজ রঙ
bg- মাধ্যমিক মাধ্যমিকের জন্য অ্যালুমিনিয়াম রঙ

মনে রাখবেন এই ক্লাসগুলি পৃথক সারি এবং বুটস্ট্র্যাপ টেবিলের কোষে যে কোনও সংমিশ্রণে প্রয়োগ করা যেতে পারে।

প্রাসঙ্গিক ক্লাস সহ রঙিন সারি

আসুন আমরা তাদের মার্কশিট টেবিলে প্রাসঙ্গিক ক্লাসগুলি প্রয়োগ করি যাতে সেগুলি কর্মে দেখা যায়। নীচের কোডটি পটভূমির রঙ হালকা ধূসরতে পরিবর্তন করার জন্য টেবিলের প্রথম সারিতে "টেবিল-সক্রিয়" শ্রেণী প্রয়োগ করে।

<table class="table"> <tr class="table-active"> <td>Thomas</td> <td>80</td> <td>90</td> <td>70</td> <td>80</td> <td>75</td> <td>79</td> </tr> <tr> </table>

আপনি যখন "টেবিল-সাফল্য", "টেবিল-সতর্কতা" এবং "টেবিল-বিপদ" ক্লাসগুলি দ্বিতীয়, তৃতীয় এবং চতুর্থ শ্রেণীতে প্রয়োগ করবেন তখন সম্পূর্ণ টেবিলটি কেমন হবে তা নিচে দেওয়া হল

টেবিলের উপাদান।

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

ব্যাকগ্রাউন্ড কালার সহ রঙিন সারি

টেবিল প্রাসঙ্গিক ক্লাসের অনুরূপ, আপনি ব্যাকগ্রাউন্ড প্রাসঙ্গিক ক্লাস ব্যবহার করে সারিতে ব্যাকগ্রাউন্ড রং প্রয়োগ করতে পারেন।

<table class="table"> <tr class="bg-success"> <td>Thomas</td> <td>80</td> <td>90</td> <td>70</td> <td>80</td> <td>75</td> <td>79</td> </tr> <tr> </table>

নীচে একটি আকর্ষণীয় টেবিলে "বিজি-সাফল্য", "বিজি-বিপদ", "বিজি-সতর্কতা", "বিজি-তথ্য" এবং অন্যান্য ব্যাকগ্রাউন্ড ইউটিলিটি ক্লাস সারিতে প্রয়োগ করা হয়েছে।

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

প্রাসঙ্গিক ক্লাস সহ রঙিন কোষ

একটি বুটস্ট্র্যাপ টেবিলের প্রতিটি কোষ অন্য কোষ থেকে হাইলাইট করার জন্য একটি প্রাসঙ্গিক ক্লাসের সাথে প্রয়োগ করা যেতে পারে। এটি সত্যিই কার্যকর হবে যখন আপনার বড় টেবিল থাকবে এবং শুধুমাত্র কয়েকটি ঘর হাইলাইট করতে চাইবে। নীচের কোডটি টেবিল ঘরে "টেবিল-সক্রিয়" প্রাসঙ্গিক ক্লাস প্রয়োগ করে দেখায়।

<table class="table"> <tr> <td>Thomas</td> <td class="table-active">80</td> <td>90</td> <td>70</td> <td>80</td> <td>75</td> <td>79</td> </tr> <tr> </table>

নীচের টেবিলে এলোমেলোভাবে বিভিন্ন ব্যাকগ্রাউন্ড কালার দিয়ে চারটি সেল প্রয়োগ করা হয়েছে।

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

রঙিন সারি এবং ব্যাকগ্রাউন্ড রং এবং প্রাসঙ্গিক ক্লাস সহ ঘর

অবশেষে আপনি সারি এবং কোষের জন্য বিভিন্ন পটভূমির রঙ তৈরি করতে যেকোনো সংমিশ্রণে সারণির প্রাসঙ্গিক শ্রেণী এবং পটভূমির প্রাসঙ্গিক শ্রেণী প্রয়োগ করতে পারেন।

<table class="table"> <tr class="table-active"> <td>Thomas</td> <td class="table-info">80</td> <td>90</td> <td>70</td> <td>80</td> <td>75</td> <td class="bg-success">79</td> </tr> <tr> </table>

সারি এবং কোষের জন্য প্রয়োগ করা বিভিন্ন রঙের সাথে উদাহরণ টেবিলটি কেমন হবে তা এখানে।

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


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


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

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