Advertisement

বুটস্ট্রাপ গ্রীড - Bootstrap Grid

by - MD ABDUR RAHMAN on - জুলাই ১৮, ২০২১

 

বুটস্ট্রাপ গ্রীড সিস্টেম

বুটস্ট্রাপ গ্রীড সিস্টেমের মাধ্যমে ওয়েবপেজকে ১২ কলামে ভাগ করা যায়।

আপনি যদি ১২ কলামের মধ্যে সবগুলো কলাম একত্রে ব্যবহার করতে না চান, তাহলে আপনি কলামগুলোর বিভিন্ন গ্রুপ তৈরি করে অধিক প্রস্থের কলাম তৈরি করতে পারবেনঃ




span 12
span 6span 6
span 4span 8
 span 4 span 4 span 4
span 1span 1span 1span 1span 1span 1span 1span 1span 1span 1span 1span 1

বুটস্ট্রাপের গ্রীড সিস্টেম সম্পূর্ণ রেসপন্সিভ এবং স্ক্রিনের আকারের উপর নির্ভর করে কলামগুলো বিন্যাসিত হয়।

বুটস্ট্রাপ গ্রীড ক্লাস

বুটস্ট্রাপ গ্রীড সিস্টেমে চারটি ক্লাস রয়েছেঃ

  1. xs (মোবাইলের জন্য)
  2. sm ( ট্যাবলেটের জন্য)
  3. md (ল্যাপটপের জন্য)
  4. lg (বড় ডেস্কটপের জন্য)

অধিক ডায়নামিক এবং ফ্লেক্সিবল লে-আউট তৈরি করার জন্য উপরের ক্লাস গুলো একত্রে বিভিন্ন কম্বিনেশনে ব্যবহার করা যায়।

বুটস্ট্রাপ গ্রীডের সিস্টেমের বেসিক গঠন

নিচে বুটস্ট্রাপ গ্রীডের বেসিক গঠন দেখানো হলোঃ

উদাহরণ

   <div class="row">
      <div class="col-*-*"></div>
   </div>
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>
   </div>
   <div class="row">...</div>


Copy

প্রথমত; আপনি যে লে-আউট অর্জন করতে চান সেটি তৈরি পাওয়ার জন্য একটি কন্টেইনার তৈরি করুন ( <div class="container"> )। তারপর, একটি সারি তৈরি করুন (<div class="row">) এবং প্রয়োজনমতো কলামের সংখ্যা যুক্ত করুন। ( .col-*-* ক্লাসের সাহায্যে)। মনে রাখবেন প্রতি সারিতে সর্বোচ্চ ১২টি কলাম যুক্ত করা যায়।

নিচে বুটস্ট্রাপ বেসিক গ্রীড লে-আউটের কিছু উদাহরণ দেয়া হলো।

সমান প্রস্থ বিশিষ্ট তিনটি কলাম

four column
four column
four column

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

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Grid Example</title>
	  <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.1.1/jquery.min.js"></script>
	  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   </head>

<body>

  <div class="container">
    <h1>Hello Learners!</h1>
    <p>প্রতিক্রিয়া দেখার জন্য ব্রাউজারের স্ক্রিন ছোট বড় করুন।</p>
    <div class="row">
        <div class="col-sm-4" style="background-color:#ff9999;color:white;">four column</div>
        <div class="col-sm-4" style="background-color:#c299ff;color:white;">four column</div>
        <div class="col-sm-4" style="background-color:#b3ffb3;color:white;">four column</div>
      </div>
  </div>

</body>
</html>


Copy
ফলাফল

দুইটি অসমান কলাম

nine column
three column

নিম্নলিখিত উদাহরনে কিভাবে ভিন্ন প্রস্থ বিশিষ্ট দুইটি কলাম ট্যাবলেট থেকে শুরু করে বড় ডেস্কটপের জন্য তৈরি করা যায় তা দেখানো হলোঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Grid Example</title>
	  <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.1.1/jquery.min.js"></script>
	  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   </head>

<body>

  <div class="container">
    <h1>Hello Learners!</h1>
    <p>প্রতিক্রিয়া দেখার জন্য ব্রাউজারের স্ক্রিন ছোট বড় করুন।</p>
    <div class="row">
          <div class="col-sm-9" style="background-color:#ff9999;color:white;">four column</div>
          <div class="col-sm-3" style="background-color:#b3ffb3;color:white;">four column</div>
      </div>
  </div>

</body>
</html>


Copy
ফলাফল
Tags
Reactions

একটি মন্তব্য পোস্ট করুন

0 মন্তব্যসমূহ