বুটস্ট্রাপ গ্রীড - বড় ডিভাইস
বুটস্ট্রাপ গ্রীড উদাহরণঃ বড় ডিভাইস
বুটস্ট্রাপ গ্রীড: পূর্ববর্তী অধ্যায়ে আমরা ছোট ও মাঝারি ডিভাইসের জন্য ক্লাস দ্বারা একটি গ্রীড উদাহরণ তৈরি করেছিলাম। আমরা সেখানে দুইটি div (কলাম) ব্যবহার করেছি এবং তাদের ছোট ডিভাইসে 50%/50% কলামে এবং মাঝারি ডিভাইসে 33.3%/66.6% কলামে বিভক্ত করেছিঃ
<div class="col-sm-6 col-md-4">content</div>
<div class="col-sm-6 col-md-8">content</div>
কিন্তু বড় ডিভাইসের ডিজাইনের ক্ষেত্রে লে-আউটটি 25%/75% লে-আউটে বিভক্ত হলে ভাল দেখাবে।
টিপসঃ বড় ডিভাইস বলতে ১২০০ পিক্সেল বা তার বেশি রেজুলেশনের স্ক্রিন যুক্ত ডিভাইসকে বুঝায়।
বড় ডিভাইসের জন্য আমরা .col-lg-* ক্লাস ব্যবহার করবো।
সুতরাং এখন আমরা বড় ডিভাইসের জন্য কলাম প্রস্থ নির্ধারন করবোঃ
<div class="col-sm-6 col-md-4 col-lg-3">content</div>
<div class="col-sm-6 col-md-8 col-lg-9">content</div>
এক্ষেত্রে ছোট ডিভাইসের জন্য col-sm-* ক্লাস, মিডিয়াম ডিভাইসের জন্য col-md-* ক্লাস এবং বড় ডিভাইসের জন্য col-lg-* ক্লাস কাজ করবে।
নিম্নলিখিত উদাহরণে ছোট ডিভাইসের জন্য 50%/50% কলাম, মাঝারি ডিভাইসের জন্য 33.%/66.6% কলাম, এবং বড় ডিভাইসের 25%/75% কলাম তৈরি করা হয়েছেঃ
উদাহরণ
<!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 col-lg-3" 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 col-lg-9" 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-lg-6 ক্লাস উল্লেখ করেছি (.col-md-* এবং/অথবা .col-sm-* ছাড়া)। এর মানে হল যে বড় ডিভাইসে কলামগুলো ৫০%/৫০% অনুপাতে বিভক্ত হবে। কিন্তু, মিডিয়াম ও ছোট ডিভাইসের ক্ষেত্রে কলামগুলো নিচে নিচে অবস্থান করবে। কারন আমরা মিডিয়াম এবং ছোট ডিভাইসের জন্য কলাম লে-আউট উল্লেখ করিনিঃ
উদাহরণ
<!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-lg-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-lg-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>
ফলাফল