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

বুটস্ট্র্যাপ প্রাইসিং টেবিল উইজেট

2

বুটস্ট্র্যাপ হল একটি ফ্রেমওয়ার্ক যা গ্রিড লেআউটের উপর ভিত্তি করে কাজ করে যা দেখার এলাকার প্রস্থকে বারোটি সমান অংশে ভাগ করে। অনেকগুলি ডিফল্ট উপাদান রয়েছে যেমন টেবিল, সতর্কতা, মোডাল ইত্যাদি যা কোনও কোডিং দক্ষতা ছাড়াই যুক্ত করা যেতে পারে। কিন্তু বুটস্ট্র্যাপ সাইটে কাস্টমাইজড উপাদান যোগ করার জন্য কাঠামো থেকে উপলব্ধ বৈশিষ্ট্যগুলি ব্যবহারের জ্ঞানের সাথে মৌলিক CSS এবং HTML জ্ঞান প্রয়োজন । প্রাইসিং টেবিল এমন একটি উপাদান যা বুটস্ট্র্যাপ সাইট মালিকদের অধিকাংশের প্রয়োজন। এই নিবন্ধে আসুন কাস্টম CSS সহ একটি বুটস্ট্র্যাপ প্রাইসিং টেবিল উইজেট তৈরি করি।

নীচে বুটস্ট্র্যাপ ব্যবহার করে সহজ এবং মার্জিত CSS মূল্যের টেবিল।

বুটস্ট্র্যাপ প্রাইসিং টেবিল উইজেট

বুটস্ট্র্যাপ প্রাইসিং টেবিল উইজেট

মূল্যের টেবিলটি বিশুদ্ধ CSS দিয়ে তৈরি করা হয়েছে তাই জাভাস্ক্রিপ্ট ফাইলের প্রয়োজন হবে না। মূল্য সারণী যোগ করার জন্য আপনাকে আপনার পৃষ্ঠায় CSS এবং HTML কোড সন্নিবেশ করতে হবে।

প্রাইসিং টেবিল উইজেটের জন্য CSS

আপনার পৃষ্ঠার… ট্যাগের মধ্যে শিরোনাম বিভাগের অধীনে নীচের CSS কোড যুক্ত করুন। আপনি হয়ত পৃষ্ঠায় কাস্টম CSS যোগ করতে পারেন…

টেবিলে দুটি বিভাগ রয়েছে – শিরোনাম এবং বিবরণ। শিরোলেখ বিভাগে রয়েছে বড় ফন্ট সাইজ দেখানো দামের পরিমাণ, সুপারস্ক্রিপ্ট ব্যবহার করে $ চিহ্ন andোকানো হয়েছে এবং প্রতি মাসে ছোট ফন্ট সাইজ ব্যবহার করে দেখানো হয়েছে। বিস্তারিত বিভাগ গুলি অপসারণের জন্য "তালিকা-শৈলী: কোনটি না" সহ একটি অনিয়ন্ত্রিত তালিকা।

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> <style> #price-section { background-color: #fafafa; } .pricing .pricing-head { position: relative; background: rgb(158, 188, 133); color: #ffffff; text-align: center; font-weight: bold; } .pricing .price { display: inline-block; position: relative; } .pricing .price sup { position: absolute; top: 50px; left: -10px; font-size: 24px; } .pricing .price .price-amount { font-size: 108px; letter-spacing: -4px; } .pricing .price small { position: relative; left: -10px; font-size: 18px; } .pricing ul { list-style: none; margin: 0; background: #eee; text-align: center; padding-left: 0px; } .pricing ul li { border-bottom: solid 1px #e1e1e1; padding-top: 20px; padding-bottom: 20px; } .pricing .pricing-grab { display: block; text-align: center; font-size: 20px; font-weight: bold; padding: 20px 12px; color: #ffffff; background: rgb(211, 123, 123); } </style>

প্রাইসিং টেবিল উইজেটের জন্য এইচটিএমএল

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

<div class="row row main-low-margin"> <!-- Details for Plan 1 --> <div class="col-md-4 col-sm-4"> <div class="pricing"> <div class="pricing-head"> <span class="price"> <sup>$</sup> <span class="price-amount">12 </span> <small>per month</small> </span> </div> <ul> <li><strong>BASIC PLAN</strong></li> <li><strong>1 GB </strong> Data</li> <li>10 <strong>Emails</strong></li> <li>Limit Of <strong>10</strong> Users</li> <li><strong>24x7</strong> Support</li> <li><strong>Online</strong> Access Available</li> <li><strong>Online</strong> Management Tool</li> </ul> <a href="#" class="pricing-grab">GET IT NOW</a> </div> </div> <!-- Details for Plan 2 --> <div class="col-md-4 col-sm-4"> <div class="pricing"> <div class="pricing-head"> <span class="price"> <sup>$</sup> <span class="price-amount">15 </span> <small>per month</small> </span> </div> <ul> <li><strong>MEDIUM PLAN</strong></li> <li><strong>5 GB </strong> Data</li> <li>15 <strong>Emails</strong></li> <li>Limit Of <strong>15</strong> Users</li> <li><strong>24x7</strong> Support</li> <li><strong>Online</strong> Access Available</li> <li><strong>Online</strong> Management Tool</li> </ul> <a href="#" class="pricing-grab">GET IT NOW</a> </div> </div> <!-- Details for Plan 3 --> <div class="col-md-4 col-sm-4"> <div class="pricing"> <div class="pricing-head"> <span class="price"> <sup>$</sup> <span class="price-amount">18 </span> <small>per month</small> </span> </div> <ul> <li><strong>ADVANCE PLAN</strong></li> <li><strong>10 GB </strong> Data</li> <li>20 <strong>Emails</strong></li> <li>Limit Of <strong>20</strong> Users</li> <li><strong>24x7</strong> Support</li> <li><strong>Online</strong> Access Available</li> <li><strong>Online</strong> Management Tool</li> </ul> <a href="#" class="pricing-grab">GET IT NOW</a> </div> </div> </div>

এটাই!!! আপনার পরিবর্তনগুলি সংরক্ষণ করুন এবং ব্রাউজারে পৃষ্ঠাটি দেখুন তিনটি পরিকল্পনা সহ একটি সুন্দর মূল্যের টেবিল দেখতে। আপনার নিজের সঙ্গে বিষয়বস্তু প্রতিস্থাপন নিশ্চিত করুন। আপনি যদি আরও প্ল্যান ব্যবহার করতে চান তাহলে আপনার প্রয়োজনীয় কলামের উপর ভিত্তি করে "col-md-4" এবং "col-sm-4" গ্রিড ক্লাস সমন্বয় করুন।

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

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