HTML রেসপনসিভ ওয়েব ডিজাইন

কি হল রেসপন্সিভ ওয়েব ডিজাইন?

  • RWD হল রেসপন্সিভ ওয়েব ডিজাইন (Responsive Web Design)
  • RWD ওয়েবপেজকে বদলানো মাপে পাঠাতে পারে
  • RWD প্যাডলেট এবং মোবাইল ডিভাইসের জন্য অপরিহার্য

আপনার নিজস্ব রেসপন্সিভ ডিজাইন তৈরি করুন

রেসপন্সিভ ডিজাইন তৈরির একটি পদ্ধতি হল একদিকে স্বনির্মিত করা:

!DOCTYPE html
<html lang="en-US">
<head>
<style>
.city {
float: left;
margin: 5px;
padding: 15px;
width: 300px;
height: 300px;
border: 1px solid black;
} 
</style>
</head>
<body>
<h1>CodeW3C.com ডেমো</h1>
<h2>এই রেসপন্সিভ পেজটিকে রেসাইজ করুন!</h2>
<br>
<div class="city">
<h2>লন্ডন</h2>
<p>লন্ডন ইংল্যান্ডের রাজধানী শহর
<p>এটি যুক্তরাজ্যের সর্ববৃহৎ শহর
<p>১৩ মিলিয়নেরও বেশি মেট্রোপলিটান জনসংখ্যা নিয়ে
</div>
<div class="city">
<h2>প্যারিস</h2>
<p>প্যারিস ফ্রান্সের রাজধানী এবং সর্ববৃহৎ জনসংখ্যাসম্পন্ন শহর
</div>
<div class="city">
<h2>টোকিও</h2>
<p>টোকিও জাপানের রাজধানী, মহানগরী টোকিও অঞ্চলের কেন্দ্র
এবং বিশ্বের সর্ববৃহৎ জনসংখ্যাসম্পন্ন মেট্রোপলিটান অঞ্চল
</div>
</body>
</html>

স্বয়ং চেষ্টা করুন

Bootstrap ব্যবহার করুন

রেসপন্সিভ ডিজাইন তৈরির একটি অন্য পদ্ধতি হল প্রস্তুত হওয়া CSS ফ্রেমওয়ার্ক ব্যবহার করা

Bootstrap হল সবচেয়ে জনপ্রিয় রেসপন্সিভ ওয়েব ডেভেলপমেন্টের HTML, CSS, এবং JS ফ্রেমওয়ার্ক

Bootstrap একটি সাইট বিভিন্ন মাপের জন্য সুপ্রাণীয় দেখাবে: প্রদর্শক, কম্পিউটার, ট্যাবলেট এবং মোবাইল ফোন:

!DOCTYPE html
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" 
  href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="jumbotron">
  <h1>CodeW3C.com ডেমো</h1> 
  <p>এই প্রতিক্রিয়াশীল পৃষ্ঠা মাপ করুন! 
</div>
</div>
<div class="container">
<div class="row">
  <div class="col-md-4">
    <h2>লন্ডন</h2>
    <p>লন্ডন ইংল্যান্ডের রাজধানী শহর
    <p>এটি যুক্তরাজ্যের সর্ববৃহৎ শহর
    <p>১৩ মিলিয়নেরও বেশি মেট্রোপলিটান জনসংখ্যা নিয়ে
  </div>
  <div class="col-md-4">
    <h2>প্যারিস</h2>
    <p>প্যারিস ফ্রান্সের রাজধানী এবং সর্ববৃহৎ জনসংখ্যাসম্পন্ন শহর
  </div>
  <div class="col-md-4">
    <h2>টোকিও</h2>
    <p>টোকিও জাপানের রাজধানী, মহানগরী টোকিও অঞ্চলের কেন্দ্র
    এবং বিশ্বের সর্ববৃহৎ জনসংখ্যাসম্পন্ন মেট্রোপলিটান অঞ্চল
  </div>
</div>
</div>
</body>
</html>

স্বয়ং চেষ্টা করুন

Bootstrap-এর বিষয়ে আরও জানতে চান, আমাদের Bootstrap শিক্ষানুশীলন。