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

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

হোম-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

 

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


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

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

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


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

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


গ্রীড ক্লাস

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

  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>

প্রথমত; আপনি যে লে-আউট অর্জন করতে চান সেটি তৈরি পাওয়ার জন্য একটি কন্টেইনার তৈরি করুন ( <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>

ফলাফল

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

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>

ফলাফল