বুটস্ট্রাপ গ্রীড - মিডিয়াম ডিভাইস
বুটস্ট্রাপ গ্রীড উদাহরণ: মিডিয়াম ডিভাইস(সাধারণ ডেক্সটপ/ল্যাপটপ)
বুটস্ট্রাপ গ্রীড: পূর্ববর্তী অধ্যায়ে আমরা ছোট ডিভাইসের জন্য গ্রীড উদাহরণ দেখিয়েছি। 50%/50 অনুপাতে ভাগ করার জন্য আমরা দুটি div ব্যবহার করেছি:
<div class="col-sm-6">content</div>
<div class="col-sm-6">content</div>
মিডিয়াম ডিভাইসে হয়তো ডিজাইনটি 33.3%/66.6% অনুপাতে ভাল হবে।
টিপস: ছোট ডিভাইস বলতে ৯৯২ পিক্সেল থেকে ১১৯৯ পিক্সেল রেজুলেশনের স্ক্রিনযুক্ত ডিভাইসকে বুঝায়।
মিডিয়াম ডিভাইসের জন্য আমরা .col-md-* ক্লাস ব্যবহার করবো।
এখন আমরা মিডিয়াম ডিভাইসের জন্য কলাম প্রস্থ যুক্ত করবো:
<div class="col-md-4">content</div>
<div class="col-md-8">content</div>
এক্ষেত্রে ছোট ডিভাইসের জন্য col-sm-* ক্লাস গুলো কাজ করবে এবং মিডিয়াম ডিভাইসের জন্য col-md-* ক্লাস কাজ করবে।
এই উদাহরণে আমরা ছোট ডিভাইসের জন্য 50%/50% এবং মিডিয়াম ডিভাইসের জন্য 33.3%/66.6% অনুপাতে কলাম তৈরি করবো। কিন্তু অতিরিক্ত ছোট (মোবাইল) ডিভাইসের ক্ষেত্রে কলামগুলো নিচে নিচে দেখাবে। কারন মোবাইল ডিভাইসের জন্য আমরা কলাম লে-আউট নির্দিষ্ট করে দেইনি:
উদাহরণ
<!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-fluid">
<h1>Hello Learners!</h1>
<div class="row">
<div class="col-sm-6 col-md-4" style="background-color:#ff9999;color:white;">
<p>Bootstrap is a popular free frontend framework on html, css and javascript.<br>
Bootstrap is a popular free frontend framework on html, css and javascript.</p>
</div>
<div class="col-sm-6 col-md-8" style="background-color:#c299ff;color:white;">
<p>Bootstrap is fun! We hope you are enjoying this.<br>Bootstrap is fun! We hope you
are enjoying this.<br>Bootstrap is fun! We hope you are enjoying this.</p>
</div>
</div>
</div>
</body>
</html>
ফলাফল
 |
নোটঃ এটা নিশ্চিত করুন যে কলামগুলোর যোগফল ১২ এর বেশি নয়! |
|---|
শুধুমাত্র মিডিয়াম ডিভাইসের জন্য
এই উদাহরণে শুধুমাত্র .col-md-4 এবং .col-md-8 ক্লাস নির্দিষ্ট করে দিয়েছি (.col-sm-* ব্যাতীত)। এর মানে মিডিয়াম এবং বড় ডিভাইসে 50%/50% অনুপাতে কলাম তৈরি হবে কারন কলাম ক্লাসগুলো ছোট ডিভাইসের ক্লাসগুলোকে বেশি প্রাধান্য দেয়। এক্ষেত্রে ছোট দুটি ডিভাইসে কলামগুলো ভার্টিক্যাল আকারে দেখাবেঃ
উদাহরণ
<!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-fluid">
<h1>Hello Learners!</h1>
<div class="row">
<div class="col-md-6" style="background-color:#ff9999;color:white;">
<p>Bootstrap is a popular free frontend framework on html, css and javascript.<br>
Bootstrap is a popular free frontend framework on html, css and javascript.</p>
</div>
<div class="col-md-6" style="background-color:#c299ff;color:white;">
<p>Bootstrap is fun! We hope you are enjoying this.<br>Bootstrap is fun! We hope you
are enjoying this.<br>Bootstrap is fun! We hope you are enjoying this.</p>
</div>
</div>
</div>
</body>
</html>
ফলাফল
বড় ডিভাইসের জন্য কিভাবে ভিন্ন অনুপাতের কলাম তৈরি করা যায় তা পরবর্তী অধ্যায়ে দেখানো হয়েছে।