বুটস্ট্রাপ গ্রীড - Bootstrap Grid
বুটস্ট্রাপ গ্রীড সিস্টেম
বুটস্ট্রাপ গ্রীড সিস্টেমের মাধ্যমে ওয়েবপেজকে ১২ কলামে ভাগ করা যায়।
আপনি যদি ১২ কলামের মধ্যে সবগুলো কলাম একত্রে ব্যবহার করতে না চান, তাহলে আপনি কলামগুলোর বিভিন্ন গ্রুপ তৈরি করে অধিক প্রস্থের কলাম তৈরি করতে পারবেনঃ
span 12 span 6 span 6 span 4 span 8 span 4 span 4 span 4 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1
বুটস্ট্রাপের গ্রীড সিস্টেম সম্পূর্ণ রেসপন্সিভ এবং স্ক্রিনের আকারের উপর নির্ভর করে কলামগুলো বিন্যাসিত হয়।
বুটস্ট্রাপ গ্রীড ক্লাস
বুটস্ট্রাপ গ্রীড সিস্টেমে চারটি ক্লাস রয়েছেঃ
- xs (মোবাইলের জন্য)
- sm ( ট্যাবলেটের জন্য)
- md (ল্যাপটপের জন্য)
- 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>
প্রথমত; আপনি যে লে-আউট অর্জন করতে চান সেটি তৈরি পাওয়ার জন্য একটি কন্টেইনার তৈরি করুন ( <div
class="container"> )। তারপর, একটি সারি তৈরি করুন (<div
class="row">) এবং প্রয়োজনমতো কলামের সংখ্যা যুক্ত করুন। ( .col-*-* ক্লাসের সাহায্যে)। মনে রাখবেন প্রতি সারিতে সর্বোচ্চ ১২টি কলাম যুক্ত করা যায়।
নিচে বুটস্ট্রাপ বেসিক গ্রীড লে-আউটের কিছু উদাহরণ দেয়া হলো।
সমান প্রস্থ বিশিষ্ট তিনটি কলাম
নিম্নলিখিত উদাহরনে সমান প্রস্থের তিনটি কলাম তৈরি করা হলো যা ট্যাবলেট থেকে শুরু করে বড় ডেস্কটপে সমান তিন ভাগে ভাগ হবে কিন্তু মোবাইল ফোনের ক্ষেত্রে কলামগুলো স্বয়ংক্রিয়ভাবে একটির পর একটি নিচে নিচে অবস্থান করবেঃ
উদাহরণ
<!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>
দুইটি অসমান কলাম
নিম্নলিখিত উদাহরনে কিভাবে ভিন্ন প্রস্থ বিশিষ্ট দুইটি কলাম ট্যাবলেট থেকে শুরু করে বড় ডেস্কটপের জন্য তৈরি করা যায় তা দেখানো হলোঃ
উদাহরণ
<!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>