বুটস্ট্রাপ সিএসএস এইচটিএমএল জাভাস্ক্রিপ্ট জেকুয়েরি পিএইচপি এসকিউএল এঙ্গুলার জেএস
ফোরাম
×

বুটস্ট্রাপ টিউটোরিয়াল

হোম-Home শুরু করুন-Get Started গ্রীড বেসিক-Grid Basic

সিএসএস কম্পোনেন্ট

টাইপোগ্রাফী-Typography টেবিল-Table ইমেজ-Image জামবোর্টন-Jumbotron বুটস্ট্রাপ Well এলার্ট-Alert বাটন-Button বাটন গ্রুপ-Button Group গ্লিফআইকন-Glypicon ব্যাজ/লেভেল-Badge/Label প্রোগ্রেস বার-Progress Bar পেজিনেশন-Pagination পেজার-Pager লিস্ট গ্রুপ-List Group প্যানেল-Panel ফরম-Form ইনপুট-Input ইনপুট(২)-Input(2) ইনপুটের আকার-Input Sizing সাহায্যকারী-Helper

JS কম্পোনেন্ট

ড্রপডাউন-Dropdown কলাপ্স-Collapse ট্যাব/পিল-Tab/Pill ন্যাভবার-Navbar ক্যারোসেল-Carousel মোডাল-Modal টুলটিপ-Tooltip পপওভার-Popover স্ক্রলস্পাই-Scrollspy এফিক্স-Affix

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

গ্রীড সিস্টেম-Grid System বুটস্ট্রাপ Stacked/Horizontal গ্রীড ছোট-Grid Small গ্রীড মিডিয়াম-Grid Medium গ্রীড বড়-Grid Large গ্রীড উদাহরণ-Grid Example

বুটস্ট্রাপ রেফারেন্স

ড্রপডাউন-Dropdown কলাপ্স-Collapse ট্যাব-Tab বাটন-Button ক্যারোসেল-Carousel মোডাল-Modal স্ক্রলস্পাই-Scrollspy এফিক্স-Affix

 

বুটস্ট্রাপ গ্রীড - ছোট ডিভাইস


বুটস্ট্রাপ গ্রীড উদাহরণ: ছোট ডিভাইস

মনে করুন, আমাদের কাছে দুটি কলাম যুক্ত একটি সাধারণ লে-আউট রয়েছে। এবং আমরা চাই যে লে-আউটটি ছোট ডিভাইসের ক্ষেত্রে দুটি কলামের জন্য যথাক্রমে ৫০% এবং ৫০% অনুপাতে ভাগ হবে।

টিপসঃ ছোট ডিভাইস বলতে ৭৬৮ পিক্সেল থেকে ৯৯২ পিক্সেল রেজুলেশনের স্ক্রিনযুক্ত ডিভাইসকে(মূলত ট্যাবলেট) বুঝায়।

ছোট ডিভাইসের জন্য আমরা .col-sm-* ক্লাস ব্যবহার করবো।

উপরে যে দুটি কলামের কথা বলা হয়েছে তার জন্য আমরা নিম্নলিখিত ক্লাসগুলো ব্যবহার করিঃ

উদাহরণ

<div class="col-sm-6">content</div>
<div class="col-sm-6">content</div>

এই উদাহরণটি ছোট (এবং মিডিয়াম এবং বড়) স্ক্রিনের জন্য ৫০% এবং ৫০% অনুপাতে দুটি কলাম তৈরি করবে। অতিরিক্ত ছোট ডিভাইসে(মোবাইল) কলামগুলো নিচে নিচে অবস্থান করবে। অর্থাৎ মোবাইল স্ক্রিনের ক্ষেত্রে প্রত্যেকটি কলাম স্বয়ংক্রিয়ভাবে ১০০% প্রস্থ নিয়ে নেবেঃ

উদাহরণ

<!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>
	  <div class="row">
	    <div class="col-sm-6" style="background-color:#ff9999;color:white;">
	      <p>Bootstrap is a popular free frontend framework on html, css and javascript.</p>
	    </div>
	    <div class="col-sm-6" style="background-color:#c299ff;color:white;">
	      <p>Bootstrap is fun! We hope you are enjoying this.</p>
	    </div>
	  </div>
	</div>

</body>
</html>

ফলাফল



Note নোটঃ এটা নিশ্চিত করুন যে কলামের যোগফল ১২টি যৌক্তিক কলামের বেশি নয়।


২৫%/৭৫% অনুপাতে কলামের জন্য .col-sm-3 এবং .col-sm-9 ক্লাস ব্যবহার করুনঃ

উদাহরণ

<!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-3" style="background-color:#ff9999;color:white;">
	      <p>Bootstrap is a popular free frontend framework on html, css and javascript.</p>
	    </div>
	    <div class="col-sm-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.</p>
	    </div>
	  </div>
	</div>

</body>
</html>

ফলাফল



মিডিয়াম ডিভাইসের জন্য কিভাবে ভিন্ন অনুপাতের কলাম তৈরি করা যায় তা পরবর্তী অধ্যায়ে দেখানো হয়েছে।