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

কিভাবে Weebly সাইটে বুটস্ট্র্যাপ অগ্রগতি বার যোগ করবেন?

6

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

কিভাবে Weebly বুটস্ট্র্যাপ অগ্রগতি বার যোগ করবেন?

ধাপ 1 – বুটস্ট্র্যাপ সিএসএস লিঙ্ক করুন

অগ্রগতি বার যোগ করার জন্য প্রথম ধাপ হল বুটস্ট্র্যাপ CSS কে আপনার Weebly সাইটে সংযুক্ত করা। "সেটিংস> এসইও> হেডার কোড " এর অধীনে নীচের কোডটি যোগ করুন ।

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

আপনি পৃষ্ঠার স্তরে স্টাইলশীট লিঙ্ক করতে পারেন যদি আপনি শুধুমাত্র সেই পৃষ্ঠায় অগ্রগতি বার চান।

পদক্ষেপ 2 – অগ্রগতি বারের জন্য অতিরিক্ত CSS যোগ করা

আপনি অগ্রগতি বার যোগ করতে চান এমন পৃষ্ঠার "হেডার কোড" বিভাগের অধীনে নীচের সিএসএস কোড যোগ করুন। 10px মার্জিন তৈরি করতে "। মার্জিন" ক্লাস ব্যবহার করা হয় যাতে বারগুলি ছোট করা না হয়।

<style> .margin { margin: 10px; } .progress { background-color: #FFFFFF; box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); } .progress-label { font-size: 18px; padding: 8px 0; } .progress-xxs { height: 3px; } .progress-xs { height: 8px; } .progress-sm { height: 12px; } .progress-bar-red { background: #8b2626; } .progress-bar-blue { background: #43668c; } .progress-bar-green { background: #649f2b; } .progress-bar-aqua { background: #86b998; } .progress-bar-yellow { background: #d0b426; } .progress-bar-brown { background: #6f6f55; } .progress-bar-violet { background: #8270a4; } .progress-bar-orange { background: #ae6926; } .sr-only { position: relative !important </style>

ধাপ 3 – অগ্রগতি বারের জন্য HTML যোগ করা

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

পাতলা অগ্রগতি বার

কিভাবে Weebly সাইটে বুটস্ট্র্যাপ অগ্রগতি বার যোগ করবেন?

<!-- Thin Size Progress Bars --> <div class="margin"> <h3 class="progress-label">Bootstrap <span class="pull-right">92%</span> </h3> <div class="progress progress-xxs"> <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="92" aria-valuemin="0" aria-valuemax="100" style="width: 92%"> </div> </div> <h3 class="progress-label">CoffeeScript <span class="pull-right">68%</span> </h3> <div class="progress progress-xxs"> <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="68" aria-valuemin="0" aria-valuemax="100" style="width: 68%"> </div> </div> <h3 class="progress-label">HTML/CSS <span class="pull-right">78%</span> </h3> <div class="progress progress-xxs"> <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="78" aria-valuemin="0" aria-valuemax="100" style="width: 78%"> </div> </div> </div> <!-- End Thin Size Progress Bars -->

মধ্যম মাপের

কিভাবে Weebly সাইটে বুটস্ট্র্যাপ অগ্রগতি বার যোগ করবেন?

<!-- Medium Size Progress Bars --> <div class="margin"> <h3 class="progress-label">Bootstrap <span class="pull-right">92%</span> </h3> <div class="progress progress-xs"> <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="92" aria-valuemin="0" aria-valuemax="100" style="width: 92%"> </div> </div> <h3 class="progress-label">CoffeeScript <span class="pull-right">68%</span> </h3> <div class="progress progress-xs"> <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="68" aria-valuemin="0" aria-valuemax="100" style="width: 68%"> </div> </div> <h3 class="progress-label">HTML/CSS <span class="pull-right">78%</span> </h3> <div class="progress progress-xs"> <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="78" aria-valuemin="0" aria-valuemax="100" style="width: 78%"> </div> </div> </div> <!-- End Medium Size Progress Bars -->

মোটা সাইজ

কিভাবে Weebly সাইটে বুটস্ট্র্যাপ অগ্রগতি বার যোগ করবেন?

<!-- Thick Size Progress Bars --> <div class="margin"> <h3 class="progress-label">Bootstrap <span class="pull-right">92%</span> </h3> <div class="progress progress-sm"> <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="92" aria-valuemin="0" aria-valuemax="100" style="width: 92%"> </div> </div> <h3 class="progress-label">CoffeeScript <span class="pull-right">68%</span> </h3> <div class="progress progress-sm"> <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="68" aria-valuemin="0" aria-valuemax="100" style="width: 68%"> </div> </div> <h3 class="progress-label">HTML/CSS <span class="pull-right">78%</span> </h3> <div class="progress progress-sm"> <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="78" aria-valuemin="0" aria-valuemax="100" style="width: 78%"> </div> </div> </div> <!-- End Thick Size Progress Bars -->

ডিফল্ট সাইজ

কিভাবে Weebly সাইটে বুটস্ট্র্যাপ অগ্রগতি বার যোগ করবেন?

<!-- Default Size Progress Bars --> <div class="margin"> <h3 class="progress-label">Bootstrap <span class="pull-right">92%</span> </h3> <div class="progress"> <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="92" aria-valuemin="0" aria-valuemax="100" style="width: 92%"> </div> </div> <h3 class="progress-label">CoffeeScript <span class="pull-right">68%</span> </h3> <div class="progress"> <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="68" aria-valuemin="0" aria-valuemax="100" style="width: 68%"> </div> </div> <h3 class="progress-label">HTML/CSS <span class="pull-right">78%</span> </h3> <div class="progress"> <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="78" aria-valuemin="0" aria-valuemax="100" style="width: 78%"> </div> </div> </div> <!-- End Default Size Progress Bars -->

রঙিন বার

ধাপ 2 -এ অতিরিক্ত সিএসএস -এ রঙগুলি সংজ্ঞায়িত করা হয়েছে এবং আপনি যে কোনও রঙ যুক্ত করতে পারেন।

কিভাবে Weebly সাইটে বুটস্ট্র্যাপ অগ্রগতি বার যোগ করবেন?

বারগুলি "col-md-6" ক্লাস ব্যবহার করে দুটি কলামে স্থাপন করা হয়েছে, আপনি বারগুলিকে সম্পূর্ণ প্রস্থ করতে এই ক্লাসটি সরিয়ে দিতে পারেন।

<div class="col-md-6"> <!-- Red --> <h3 class="progress-label">Red <span class="pull-right">92%</span> </h3> <div class="progress progress-sm"> <div class="progress-bar progress-bar-red" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%"> </div> </div> <!-- End Red --> <!-- Blue --> <h3 class="progress-label">Blue <span class="pull-right">68%</span> </h3> <div class="progress progress-sm"> <div class="progress-bar progress-bar-blue" role="progressbar" aria-valuenow="82" aria-valuemin="0" aria-valuemax="100" style="width: 82%"> </div> </div> <!-- End Blue --> <!-- Green --> <h3 class="progress-label">Green <span class="pull-right">78%</span> </h3> <div class="progress progress-sm"> <div class="progress-bar progress-bar-green" role="progressbar" aria-valuenow="74" aria-valuemin="0" aria-valuemax="100" style="width: 74%"> </div> </div> <!-- End Green --> <!-- Aqua --> <h3 class="progress-label">Aqua <span class="pull-right">78%</span> </h3> <div class="progress progress-sm"> <div class="progress-bar progress-bar-aqua" role="progressbar" aria-valuenow="78" aria-valuemin="0" aria-valuemax="100" style="width: 78%"> </div> </div> <!-- End Aqua --> </div> <div class="col-md-6"> <!-- Yellow --> <h3 class="progress-label">Yellow <span class="pull-right">92%</span> </h3> <div class="progress progress-sm"> <div class="progress-bar progress-bar-yellow" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%"> </div> </div> <!-- End Yellow --> <!-- Brown --> <h3 class="progress-label">Brown <span class="pull-right">68%</span> </h3> <div class="progress progress-sm"> <div class="progress-bar progress-bar-brown" role="progressbar" aria-valuenow="82" aria-valuemin="0" aria-valuemax="100" style="width: 82%"> </div> </div> <!-- End Brown --> <!-- Violet --> <h3 class="progress-label">Violet <span class="pull-right">78%</span> </h3> <div class="progress progress-sm"> <div class="progress-bar progress-bar-violet" role="progressbar" aria-valuenow="74" aria-valuemin="0" aria-valuemax="100" style="width: 74%"> </div> </div> <!-- End Violet --> <!-- Orange --> <h3 class="progress-label">Orange <span class="pull-right">78%</span> </h3> <div class="progress progress-sm"> <div class="progress-bar progress-bar-orange" role="progressbar" aria-valuenow="78" aria-valuemin="0" aria-valuemax="100" style="width: 78%"> </div> </div> <!-- End Orange --> </div> <!-- End Colored Progress Bars -->

তার উপর টেক্সট সহ রঙিন বার

কিভাবে Weebly সাইটে বুটস্ট্র্যাপ অগ্রগতি বার যোগ করবেন?

<!-- Colored Progress Bars with Text --> <div class="margin"> <div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 90%;"> <span class="sr-only">90% Complete (Sucess)</span> </div> </div> <div class="progress"> <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 70%;"> <span class="sr-only">70% Complete (info)</span> </div> </div> <div class="progress"> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60%Complete (warning)</span> </div> </div> <div class="progress"> <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 50%;"> <span class="sr-only">50% Complete (danger)</span> </div> </div> </div> <!-- End Colored Progress Bars with Text -->

ডোরাকাটা বার

কিভাবে Weebly সাইটে বুটস্ট্র্যাপ অগ্রগতি বার যোগ করবেন?

<!-- Striped Progress Bars --> <div class="margin"> <div class="progress progress-striped"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 90%;"> <span class="sr-only">90% Complete (Sucess)</span> </div> </div> <div class="progress progress-striped"> <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 80%;"> <span class="sr-only">80% Complete (info)</span> </div> </div> <div class="progress progress-striped"> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60%Complete (warning)</span> </div> </div> <div class="progress progress-striped"> <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 50%;"> <span class="sr-only">50% Complete (danger)</span> </div> </div> </div> <!-- End Striped Progress Bars -->

অ্যানিমেটেড বার

কিভাবে Weebly সাইটে বুটস্ট্র্যাপ অগ্রগতি বার যোগ করবেন?

<!-- Animated Progress Bars --> <div class="margin"> <div class="progress progress-striped active"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 90%;"> <span class="sr-only">90% Complete (Sucess)</span> </div> </div> <div class="progress progress-striped active"> <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 50%;"> <span class="sr-only">50% Complete (info)</span> </div> </div> <div class="progress progress-striped active"> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 80%;"> <span class="sr-only">80%Complete (warning)</span> </div> </div> <div class="progress progress-striped active"> <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 70%;"> <span class="sr-only">70% Complete (danger)</span> </div> </div> </div> <!-- End Animated Progress Bars -->

দ্রষ্টব্য: যেহেতু বুটস্ট্র্যাপ একটি কাঠামো, এটি Weebly সাইটে অন্যান্য শৈলীর সাথে বিরোধ করতে পারে। অতএব, আমরা পৃষ্ঠা স্তরে উইজেট কোডগুলি ব্যবহার করার পরামর্শ দিচ্ছি যাতে আপনি সহজেই সেই পৃষ্ঠার সমস্ত উপাদানগুলি পরীক্ষা করতে পারেন।

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

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