বর্তমানে সম্পূর্ণ বিনামূল্যে অর্থাৎ free তে অনেক রেস্পন্সিভ ফ্রেমওয়ার্ক পাওয়া যায়, এদের মধ্যে কিছু কিছু আবার বেশ জনপ্রিয়, যেমন - BOOTSTRAP, W3CSS ইত্যাদি। রেসপন্সিভ ফ্রেমওয়ার্ক হল, ওয়েব পেজে ব্যাবহৃত সকল এলিমেন্টকে রেসপন্সিভ করার স্টাইল যুক্ত ডকুমেন্ট।
রেস্পন্সিভ ওয়েবসাইট ডিজাইন করার জন্য ফ্রেমওয়ার্কের ব্যবহার করাই বুদ্ধিমানের কাজ। বর্তমানে অনেক ধরনের সিএসএস ফ্রেমওয়ার্ক রয়েছে। এগুলো বিনামূল্যেই পাওয়া যায় এবং এর ব্যবহারও অনেক সহজ।
জনপ্রিয় একটি ফ্রেমওয়ার্ক হল বুটস্ট্র্যাপ, এটি এইচটিএমএল, সিএসএস এবং jQuery ব্যবহার করে রেসপন্সিভ ওয়েব পেজ তৈরি করে। বুটস্ট্র্যাপ ফ্রি ডাউনলোড করতে নিচের লিংক ব্রাউজ করুন।
Bootstrap ফ্রেমওয়ার্ক ব্যবহার করে নিচে একটি ওয়েব পেজের উদাহরন দেখুন।
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>My First Bootstrap Page</h1>
</div>
<div class="row">
<div class="col-sm-4">
. . .
</div>
<div class="col-sm-4">
. . .
</div>
<div class="col-sm-4">
. . .
</div>
</div>
</div>
</body>
</html>
রেস্পন্সিভ ওয়েবসাইট ডিজাইন তৈরি করার অন্য একটি জনপ্রিয় ও সহজ উপায় হলো একটি রেস্পন্সিভ স্টাইল শীট ব্যবহার করা, যেমন W3.CSS. W3.CSS ডাউনলোড করতে নিচের লিংক ব্রাউজ করুন।
W3.CSS ব্যবহার করে নিচে একটি উদাহরন দেখুন।
<!DOCTYPE html>
<html>
<head>
<title>W3CSS Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div class="w3-container w3-green">
<h1>W3CSS Demo</h1>
<p>It's a responsive page!</p>
</div>
<div class="w3-row-padding">
<div class="w3-third">
<h2>Fruits</h2>
<p>A text about Fruits.</p>
<p>This is a simple and details paragraph about testy fruites of Africa.</p>
</div>
<div class="w3-third">
<h2>Flowers</h2>
<p>A text about Flowers.</p>
<p>This is a simple and details paragraph about beautiful flowers of Africa.</p>
</div>
<div class="w3-third">
<h2>Birds</h2>
<p>A text about Birds.</p>
<p>This is a simple and details paragraph about beautiful birds of Africa.</p>
</div>
</div>
</body>
</html>
শেয়ার করুন
