ফ্রেমওয়ার্ক - Frameworks
রেস্পন্সিভ ডিজাইন করার ফ্রেমওয়ার্কের ব্যবহার করা বুদ্ধিমানের কাজ। বর্তমানে অনেক ধরনের সিএসএস ফ্রেমওয়ার্ক রয়েছে।
সেগুলো বিনামূল্যে পাওয়া যায় এবং ব্যবহার করা সহজ।
W3.CSS ব্যবহার
রেস্পন্সিভ ডিজাইন তৈরি করার একটি সহজ উপায় হলো একটি রেস্পন্সিভ স্টাইল শীট ব্যবহার করা, যেমন W3.CSS
W3.CSS ব্যবহার অনেক সহজ। আপনি ইচ্ছা করলে আজকেই চেষ্টা করে দেখুনঃ
W3.CSS ডেমো
পেজটির আকার পরিবর্তন করে দেখুন ইহা রেস্পন্সিভ কিনা!
ঢাকা
ঢাকা বাংলাদেশের রাজধানী
ঢাকা মহানগর এলাকার জনসংখ্যা প্রায় ১ কোটি ৫০ লক্ষ।
চট্টগ্রাম
চট্টগ্রাম বাংলাদেশের দ্বিতীয় বৃহত্তম শহর।
এটি এশিয়ায় ৭ম এবং বিশ্বের ১০ম দ্রুততম ক্রমবর্ধমান শহর।
সিলেট
সিলেট উত্তর পূর্ব বাংলাদেশের একটি প্রধান শহর, একই সাথে এই শহরটি সিলেট বিভাগের বিভাগীয় শহর।
সিলেট বাংলাদেশের সবচেয়ে ধনী জেলা হিসেবে পরিচিত।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল উদাহরণ</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../css_examples/w3.css/w3.css">
<body>
<div class="w3-container w3-green">
<h1>স্যাট ডেমো</h1>
<p>রেস্পন্সিভ পেজের মাপ পরিবর্তন করুণ! </p>
</div>
<div class="w3-row-padding">
<div class="w3-third">
<h2>লন্ডন </h2>
<p>লন্ডন ইংলেন্ডের রাজধানী।
</p>
<p>এটি সারা যুক্তরাজ্য জুড়ে অনেক জনপ্রিয় শহর।
সাথে ১৩ মিলিয়ন নগরবাসিদের কাছে এটি জনপ্রিয় স্থান।
</p>
</div>
<div class="w3-third">
<h2>প্যারিস</h2>
<p>প্যারিস ফ্রান্সের রাজধানী।
</p>
<p>প্যারিস ইউরোপের অন্যতম বড় জনবহুল শহর,যাতে ১২ মিলিয়ন লোকের বাস।
</p>
</div>
<div class="w3-third">
<h2>টোকিও</h2>
<p>টোকিও জাপানের রাজধানী।
</p>
<p> এটি টোকিও শহরের মধ্যখানে অবস্থিত ,যা বিশ্বের অন্যতম জনপ্রিয় স্থান। </p>
</div>
</div>
</body>
</html>
ফলাফল
বুটস্ট্রাপ
আরেকটি জনপ্রিয় ফ্রেমওয়ার্ক বুটস্ট্রাপ। ইহা এইচটিএমএল, সিএসএস এবং জেকুয়েরি ব্যবহার করে রেস্পন্সিভ ওয়েব পেজ তৈরি করার জন্য জনপ্রিয়ঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল উদাহরণ</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="../../ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="../../maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>আমার প্রথম বুটস্ট্রেপ পেজ।</h1>
<p>প্রতিক্রিয়া জানার জন্য রেসপন্সিভ পেজের মাপ পরিবর্তন করুন!</p>
</div>
<div class="row">
<div class="col-sm-4">
<h3>কলাম ১</h3>
<p>ঢাকা বাংলাদেশের রাজধানী। দেশের কাজ কর্মের সিংহ ভাগই এখানে সম্পূর্ন হয়।</p>
<p>জনবহুল শহর হিসাবে বিশ্বে ২য়। প্রাচীন স্থাপত্য সহ বহু ঐতিহ্যবাহী স্থান দেখা যায় এই ছোট্ট শহরে। ...</p>
</div>
<div class="col-sm-4">
<h3>কলাম ২</h3>
<p>ঢাকা বাংলাদেশের রাজধানী। দেশের কাজ কর্মের সিংহ ভাগই এখানে সম্পূর্ন হয়।
ঢাকাকে মসজিদ ও রিক্সার শহর হিসাবেও ডাকা হয়।...</p>
<p>জনবহুল শহর হিসাবে বিশ্বে ২য়। প্রাচীন স্থাপত্য সহ বহু ঐতিহ্যবাহী স্থান দেখা যায় এই ছোট্ট শহরে। ...</p>
</div>
<div class="col-sm-4">
<h3>কলাম ৩</h3>
<p>ঢাকা বাংলাদেশের রাজধানী। দেশের কাজ কর্মের সিংহ ভাগই এখানে সম্পূর্ন হয়।
ঢাকাকে মসজিদ ও রিক্সার শহর হিসাবেও ডাকা হয়।...</p>
<p> জনবহুল শহর হিসাবে বিশ্বে ২য়। প্রাচীন স্থাপত্য সহ বহু ঐতিহ্যবাহী স্থান দেখা যায় এই ছোট্ট শহরে। </p>
</div>
</div>
</div>
</body>
</html>
ফলাফল
বুটস্ট্রাপ সম্পর্কে আরো জানতে, আমাদের বুটস্ট্রাপ টিউটোরিয়াল পড়ুন।