Materialize CSS ফ্রেমওয়ার্ক ব্যবহার করে আপনি সহজে ওয়েবসাইটে টেক্সটের alignment (সাজানো) এবং transformation (রূপান্তর) করতে পারেন। এর মাধ্যমে আপনি আপনার ওয়েব পেজের টেক্সটকে আরও সুন্দর ও ব্যবহারকারী-বান্ধব করতে পারবেন। নিচে Materialize CSS এর মাধ্যমে টেক্সটের alignment এবং transformation কিভাবে করা যায়, তা বিস্তারিতভাবে আলোচনা করা হলো।
Text Alignment
Text Alignment এর মাধ্যমে আপনি টেক্সটকে বাম, মাঝখানে বা ডানদিকে সাজাতে পারেন। Materialize CSS এ এটি খুবই সহজ এবং text-align ক্লাসের মাধ্যমে আপনি এই কাজটি করতে পারবেন।
Materialize এ Text Alignment ব্যবহার
Left Align (বাম পাশে টেক্সট সাজানো):
- আপনি টেক্সটকে বাম পাশে সাজাতে
left-alignক্লাস ব্যবহার করতে পারেন।
<p class="left-align">এটি বাম পাশে সাজানো টেক্সট।</p>- আপনি টেক্সটকে বাম পাশে সাজাতে
Center Align (মাঝে টেক্সট সাজানো):
- আপনি টেক্সটকে মাঝখানে সাজাতে
center-alignক্লাস ব্যবহার করতে পারেন।
<p class="center-align">এটি মাঝখানে সাজানো টেক্সট।</p>- আপনি টেক্সটকে মাঝখানে সাজাতে
Right Align (ডান দিকে টেক্সট সাজানো):
- আপনি টেক্সটকে ডানদিকে সাজাতে
right-alignক্লাস ব্যবহার করতে পারেন।
<p class="right-align">এটি ডান দিকে সাজানো টেক্সট।</p>- আপনি টেক্সটকে ডানদিকে সাজাতে
উদাহরণ HTML কোড
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Alignment Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
<div class="container">
<h3 class="center-align">এটি মাঝখানে সাজানো শিরোনাম</h3>
<p class="left-align">এটি বাম দিকে সাজানো টেক্সট।</p>
<p class="center-align">এটি মাঝখানে সাজানো টেক্সট।</p>
<p class="right-align">এটি ডান দিকে সাজানো টেক্সট।</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
Text Transformation
Text Transformation এর মাধ্যমে আপনি টেক্সটের কেস (uppercase, lowercase, capitalized) পরিবর্তন করতে পারেন। Materialize CSS এ টেক্সট ট্রান্সফর্ম করার জন্য কিছু প্রস্তুত ক্লাস আছে, যা খুব সহজেই ব্যবহৃত হয়।
Materialize এ Text Transformation ব্যবহার
Uppercase (সব বড় হাতের অক্ষরে টেক্সট):
- আপনি টেক্সটকে সব বড় হাতের অক্ষরে পরিণত করতে
uppercaseক্লাস ব্যবহার করতে পারেন।
<p class="uppercase">এটি বড় হাতের অক্ষরে রূপান্তরিত টেক্সট।</p>- আপনি টেক্সটকে সব বড় হাতের অক্ষরে পরিণত করতে
Lowercase (সব ছোট হাতের অক্ষরে টেক্সট):
- আপনি টেক্সটকে সব ছোট হাতের অক্ষরে পরিণত করতে
lowercaseক্লাস ব্যবহার করতে পারেন।
<p class="lowercase">এটি ছোট হাতের অক্ষরে রূপান্তরিত টেক্সট।</p>- আপনি টেক্সটকে সব ছোট হাতের অক্ষরে পরিণত করতে
Capitalize (প্রতিটি শব্দের প্রথম অক্ষর বড় হাতের):
- আপনি টেক্সটের প্রতিটি শব্দের প্রথম অক্ষর বড় হাতের করতে
capitalizeক্লাস ব্যবহার করতে পারেন।
<p class="capitalize">এটি ক্যাপিটালাইজড টেক্সট।</p>- আপনি টেক্সটের প্রতিটি শব্দের প্রথম অক্ষর বড় হাতের করতে
উদাহরণ HTML কোড
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Transformation Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
<div class="container">
<p class="uppercase">এটি বড় হাতের অক্ষরে রূপান্তরিত টেক্সট।</p>
<p class="lowercase">এটি ছোট হাতের অক্ষরে রূপান্তরিত টেক্সট।</p>
<p class="capitalize">এটি ক্যাপিটালাইজড টেক্সট।</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
উপসংহার
Materialize CSS এর মাধ্যমে আপনি সহজে টেক্সটের alignment এবং transformation করতে পারেন। এর text-align ক্লাস ব্যবহার করে টেক্সটকে বাম, মাঝখানে বা ডান দিকে সাজানো সম্ভব এবং text-transform ক্লাস ব্যবহার করে আপনি টেক্সটের কেস পরিবর্তন করতে পারবেন। এই ফিচারগুলো ওয়েব ডিজাইনে টেক্সটের উপস্থাপন আরও সুন্দর এবং কার্যকরী করে তোলে।
Read more
