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

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

হোম-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 (বড় আকারের ডেস্কটপের জন্য)

অধিক ডায়নামিক এবং ফ্লেক্সিবল লে-আউট তৈরি করার জন্য উপরের ক্লাস গুলো একত্রে বিভিন্ন কম্বিনেশনে ব্যবহার করা যায়।

টিপসঃ আপনি যদি xs, sm এবং md আকারের ডিভাইসের জন্য একই লে-আউট নির্ধারন করতে চান, তাহলে শুধুমাত্র xs এর জন্য লে-আউট নির্ধারণ করলেই সকল স্ক্রিনে একই রকম দেখাবে।


গ্রীড সিস্টেম রুলস

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

  1. যথাযথ এ্যালাইনমেন্ট এবং প্যাডিংয়ের জন্য .row কে অবশ্যই .container (fixed-width) অথবা .container-fluid (full-width) এর মধ্যে রাখতে হবে।
  2. আনুভূমিক গ্রুপ কলাম তৈরি করার জন্য সারি ব্যবহার করুন।
  3. কন্টেন্টগুলো কলামের মধ্যে এবং কলামগুলো সারির পরপরই রাখতে হবে।
  4. পূর্ব-নির্ধারিত ক্লাস যেমন; .row এবং .col-sm-4 মাধ্যমে সহজে এবং দ্রুততার সহিত গ্রীড লে-আউট তৈরি করা যায়।
  5. কলামগুলো প্যাডিংয়ের মাধ্যমে গাটার (কলাম কন্টেন্টের মধ্যে ফাকাস্থান) তৈরি করে। একটি .rows এর প্রথম এবং শেষ কলামে নেগেটিভ মার্জিন ব্যবহৃত হয়।
  6. গ্রীড কলাম ১২ টি কলামের মাধ্যমে তৈরি করা হয়েছে। উদাহরণস্বরুপ, যদি সমান তিনটি কলাম চান তাহলে .col-sm-4 ক্লাস ব্যবহার করতে হবে।

একটি বুটস্ট্রাপ গ্রীডের বেসিক গঠন

নিচে বুটস্ট্রাপ গ্রীডের একটি বেসিক গঠন দেখানো হলোঃ

<div class="container">
      <div class="row">
        <div class="col-*-*"></div>
        <div class="col-*-*"></div>
        <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>


তাহলে, আপনি যে লে-আউট চান সেটি তৈরি করার জন্য প্রথমে একটি কন্টেইনার তৈরি করুন (<div class="container">)। তারপর, একটি সারি(row) তৈরি করুন (<div class="row">)। তারপর প্রয়োজন অনুযায়ী কলামের সংখ্যা যুক্ত করুন। ( .col-*-* ক্লাসের সাহায্য)। মনে রাখবেন প্রতি সারিতে সর্বোচ্চ ১২টি কলাম যুক্ত করতে পারবেন।


গ্রীড অপশন

নিম্নলিখিত টেবিলে দেখানো হলো কিভাবে বিভিন্ন ডিভাইসে বুটস্ট্রাপ গ্রীড সিস্টেম কাজ করেঃ

  অতি ছোট ডিভাইস
ফোন (<768px)
ছোট ডিভাইস
ট্যাবলেট (>=768px)
মিডিয়াম ডিভাইস
ডেস্কটপ (>=992px)
বৃহদাকার ডিভাইস
বড় ডেস্কটপ (>=1200px)
গ্রীডের আচরন সবক্ষেত্রেই আনুভূমিক হয় Collapsed to start, horizontal above breakpoints Collapsed to start, horizontal above breakpoints Collapsed to start, horizontal above breakpoints
Container width নেই (auto) 750px 970px 1170px
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
Number of columns 12 12 12 12
Column width Auto ~62px ~81px ~97px
গাটারের প্রশস্ততা 30px (প্রতি কলামের উভয়পাশে 15px করে) 30px (প্রতি কলামের উভয়পাশে 15px করে) 30px (প্রতি কলামের উভয়পাশে 15px করে) 30px (প্রতি কলামের উভয়পাশে 15px করে)
নেস্টেবল হ্যাঁ হ্যাঁ হ্যাঁ হ্যাঁ
অফসেট হ্যাঁ হ্যাঁ হ্যাঁ হ্যাঁ
কলাম ওর্ডারিং হ্যাঁ হ্যাঁ হ্যাঁ হ্যাঁ

উদাহরণ

পরবর্তী অধ্যায়গুলোতে বিভিন্ন ডিভাইসের জন্য গ্রীড সিস্টেমের উদাহরণ দেয়া হয়েছে:

  1. Stacked-to-Horizontal
  2. ছোট ডিভাইস
  3. মিডিয়াম ডিভাইস
  4. বড় ডিভাইস