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

কিভাবে বুটস্ট্র্যাপ দিয়ে ব্যবহারকারীর প্রোফাইল কার্ড উইজেট তৈরি করবেন?

1

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

এটা দেখতে কেমন?

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

কিভাবে বুটস্ট্র্যাপ দিয়ে ব্যবহারকারীর প্রোফাইল কার্ড উইজেট তৈরি করবেন?

উইজেটের নিম্নলিখিত অংশ রয়েছে:

  • নাম, প্রোফাইল, দক্ষতা এবং প্ল্যাটফর্মের বিবরণ
  • প্রোফাইল ছবি
  • তিনটি সামাজিক প্রোফাইলের বিবরণ (আপনি বিভিন্ন উদ্দেশ্যেও ব্যবহার করতে পারেন)

আসুন উইজেট তৈরি করি

নিচে উইজেটের সম্পূর্ণ কোড দেওয়া হল।

<div class="container-fluid"> <div class="row"> <div class="col-12"> <div class="card card-inverse" style="background-color: #333; border-color: #333;"> <div class="card-block"> <div class="row"> <div class="col-md-8 col-sm-8"> <h2 class="card-title">Name: Stffanie Osterich</h2> <p class="card-text"><strong>Profile: </strong> Web Developer </p> <p class="card-text"><strong>Skills: </strong> Theme, plugin and website development </p> <p><strong>Platform: </strong> <span class="badge bg-primary">WordPress</span> <span class="badge bg-info">Weebly</span> <span class="badge bg-warning">Bootstrap</span> <span class="badge bg-success">Wix</span> </p> </div> <div class="col-md-4 col-sm-4 text-center"> <img class="btn-md" src="assets/images/card-image.png" alt="" style="border-radius:50%;"> </div> <div class="col-md-4 col-sm-4 text-center"> <h2><strong> 5.2K </strong></h2> <p><small>Fans</small></p> <button class="btn btn-primary btn-block btn-md"><span class="fa fa-facebook-square"></span> Like </button> </div> <div class="col-md-4 col-sm-4 text-center"> <h2><strong>1.4K</strong></h2> <p><small>Following</small></p> <button class="btn btn-success btn-block btn-md"><span class="fa fa-twitter-square"></span> Tweet </button> </div> <div class="col-md-4 col-sm-4 text-center"> <h2><strong>3.8K</strong></h2> <p><small>Followers</small></p> <button type="button" class="btn btn-danger btn-block btn-md"><span class="fa fa-google-plus-square"></span> Follow </button> </div> </div> </div> </div> </div> </div> </div>

"কন্টেইনার-ফ্লুইড", "সারি" এবং "কল -12" সহ প্রথম তিনটি ডিভি ট্যাগগুলি আদর্শভাবে একক উইজেটের জন্য প্রয়োজন হয় না। মার্জিন

উইজেটের মূল অংশটি মূলত উপ-বিভাগ সহ একটি কার্ড উপাদান। আমরা "বিপরীত-কার্ড" সহ ডিফল্ট কার্ড ব্যবহার করেছি এবং #333 হিসাবে পটভূমি এবং সীমানা রং নির্ধারণের জন্য ইনলাইন স্টাইল ব্যবহার করেছি। পরবর্তীটি একটি "সারি" উপাদান সহ একটি "কার্ড-ব্লক" বিভাগ যা নীচের মত গ্রিডে বিভক্ত:

কিভাবে বুটস্ট্র্যাপ দিয়ে ব্যবহারকারীর প্রোফাইল কার্ড উইজেট তৈরি করবেন?

মূলত 5 টি গ্রিড আছে, একটি "col-md-8 col-sm-8" এবং বাকিগুলি "col-md-4 col-sm-4" শ্রেণী দিয়ে এলাকা বিভক্ত করা হয়। উপরের অংশে 8+4 গ্রিড এবং নীচের সামাজিক বিভাগে 4+4+4 গ্রিড রয়েছে।

মনে রাখবেন, আমরা গ্রিড ক্লাসে "col-md-8" এবং "col-sm-8" হিসাবে "md" এবং "sm" ব্যবহার করেছি। এটি প্রতিক্রিয়াশীলতার জন্য মাঝারি এবং ছোট ডিভাইসে ব্রেকপয়েন্ট তৈরি করবে।

এখন মৌলিক বিন্যাস প্রস্তুত এবং পরবর্তী ধাপ হল বিষয়বস্তু যোগ করা এবং এটি সুন্দর করা।

শীর্ষ বিভাগ

  • প্রথম কল -8 বিভাগের অধীনে, আপনি নাম এবং প্রোফাইলের বিবরণ হিসাবে "কার্ড-শিরোনাম" এবং "কার্ড-পাঠ্য" যোগ করতে পারেন। প্ল্যাটফর্ম বিভাগটি বিভিন্ন রঙে ট্যাগগুলি হাইলাইট করার জন্য ডিফল্ট ব্যাজ উপাদান ব্যবহার করে।
  • দ্বিতীয় কল -4 বিভাগে 128 × 128 পিক্সেল আকারের একটি প্রোফাইল পিকচার ইমেজ রয়েছে।

নিচের অংশ

  • নীচের অংশে তিনটি "কোল -4" বিভাগ রয়েছে যেখানে সামাজিক প্রোফাইল লিঙ্ক এবং বিবরণ রয়েছে।

অতিরিক্ত সিএসএস

বোতামগুলিতে আইকনগুলি দেখানোর জন্য আপনাকে ফন্টের দুর্দান্ত আইকনগুলির সিডিএন লিঙ্ক অন্তর্ভুক্ত করা উচিত। এছাড়াও আমরা অতিরিক্ত CSS ব্যবহার করে বোতাম উপাদানটি কাস্টমাইজ করেছি:

<style> .btn{ border-radius: 0; } .btn-md { border-width: 0; outline: none; border-radius: 0; box-shadow: 2px 2px 2px rgba(0, 0, 0, .6); cursor: pointer; } </style>

প্রোফাইল ইমেজ পিকচারের সাথে একই সিএসএস ক্লাস ব্যবহার করা হয় ছায়া প্রভাব এবং ইনলাইন স্টাইল "বর্ডার-ব্যাসার্ধ: 50%" প্রোফাইল পিকচারে ব্যবহার করা হয় যাতে এটি বৃত্তের আকৃতিতে পরিবর্তিত হয়।

বৈচিত্র্য

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

বাম ছবি সহ প্রোফাইল কার্ড

কিভাবে বুটস্ট্র্যাপ দিয়ে ব্যবহারকারীর প্রোফাইল কার্ড উইজেট তৈরি করবেন?

সাদা পটভূমি সহ ব্যবহারকারীর প্রোফাইল কার্ড

কিভাবে বুটস্ট্র্যাপ দিয়ে ব্যবহারকারীর প্রোফাইল কার্ড উইজেট তৈরি করবেন?

প্রাথমিক পটভূমি সহ প্রোফাইল কার্ড (আপনি তথ্য, সতর্কতা, বিপদ বা সাফল্যের রং সেট করতে পারেন)

কিভাবে বুটস্ট্র্যাপ দিয়ে ব্যবহারকারীর প্রোফাইল কার্ড উইজেট তৈরি করবেন?

দুই কলাম সহ ইউজার কার্ড

কিভাবে বুটস্ট্র্যাপ দিয়ে ব্যবহারকারীর প্রোফাইল কার্ড উইজেট তৈরি করবেন?

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

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