গ্রিড সিস্টেম
একটি বারো কলাম সিস্টেম, পাঁচটি ডিফল্ট প্রতিক্রিয়াশীল স্তর, Sass ভেরিয়েবল এবং মিক্সিন এবং কয়েক ডজন পূর্বনির্ধারিত ক্লাসের জন্য সমস্ত আকার এবং আকারের লেআউট তৈরি করতে আমাদের শক্তিশালী মোবাইল-প্রথম ফ্লেক্সবক্স গ্রিড ব্যবহার করুন।
বুটস্ট্র্যাপের গ্রিড সিস্টেম কন্টেন্ট লেআউট এবং সারিবদ্ধ করার জন্য কন্টেইনার, সারি এবং কলামের একটি সিরিজ ব্যবহার করে। এটি ফ্লেক্সবক্স দিয়ে তৈরি এবং সম্পূর্ণ প্রতিক্রিয়াশীল। নীচে একটি উদাহরণ এবং গ্রিড কিভাবে একত্রিত হয় তার একটি গভীরভাবে দেখুন।
ফ্লেক্সবক্সে নতুন বা অপরিচিত? পটভূমি, পরিভাষা, নির্দেশিকা এবং কোড স্নিপেটের জন্য এই CSS ট্রিক্স ফ্লেক্সবক্স গাইড পড়ুন ।
উপরের উদাহরণটি আমাদের পূর্বনির্ধারিত গ্রিড ক্লাস ব্যবহার করে ছোট, মাঝারি, বড় এবং অতিরিক্ত বড় ডিভাইসে তিনটি সমান-প্রস্থ কলাম তৈরি করে। এই কলামগুলি পৃষ্ঠায় অভিভাবকের সাথে কেন্দ্রীভূত হয় .container
৷
এটি ভেঙে ফেলা, এটি কীভাবে কাজ করে তা এখানে:
- কন্টেইনারগুলি আপনার সাইটের বিষয়বস্তু কেন্দ্রে এবং অনুভূমিকভাবে প্যাড করার একটি উপায় প্রদান করে।
.container
একটি প্রতিক্রিয়াশীল পিক্সেল প্রস্থের.container-fluid
জন্য বাwidth: 100%
সমস্ত ভিউপোর্ট এবং ডিভাইসের আকারের জন্য ব্যবহার করুন। - সারি কলামের জন্য মোড়ক। প্রতিটি কলাম
padding
তাদের মধ্যে স্থান নিয়ন্ত্রণ করার জন্য অনুভূমিক (একটি নর্দমা বলা হয়) আছে। এটিpadding
তখন নেতিবাচক মার্জিন সহ সারিগুলিতে প্রতিহত করা হয়। এইভাবে, আপনার কলামের সমস্ত বিষয়বস্তু বাম পাশে দৃশ্যতভাবে সারিবদ্ধ করা হয়েছে। - একটি গ্রিড লেআউটে, বিষয়বস্তু অবশ্যই কলামের মধ্যে স্থাপন করা উচিত এবং শুধুমাত্র কলামগুলি সারিগুলির অবিলম্বে শিশু হতে পারে৷
- ফ্লেক্সবক্সের জন্য ধন্যবাদ, নির্দিষ্ট করা ছাড়া গ্রিড কলামগুলি
width
স্বয়ংক্রিয়ভাবে সমান প্রস্থের কলাম হিসাবে লেআউট করবে। উদাহরণস্বরূপ,.col-sm
ইচ্ছার চারটি দৃষ্টান্ত স্বয়ংক্রিয়ভাবে ছোট ব্রেকপয়েন্ট থেকে 25% প্রশস্ত হবে আরও উদাহরণের জন্য স্বয়ংক্রিয়-লেআউট কলাম বিভাগটি দেখুন। - কলাম ক্লাসগুলি প্রতি সারি সম্ভাব্য 12টির মধ্যে আপনি যে কলামগুলি ব্যবহার করতে চান তার সংখ্যা নির্দেশ করে৷ সুতরাং, আপনি যদি তিনটি সমান-প্রস্থ কলাম জুড়ে চান, আপনি ব্যবহার করতে পারেন
.col-4
। - কলামগুলি
width
শতাংশে সেট করা হয়, তাই সেগুলি সর্বদা তরল এবং তাদের মূল উপাদানের তুলনায় আকারের হয়৷ padding
পৃথক কলামগুলির মধ্যে নর্দমা তৈরি করার জন্য কলামগুলি অনুভূমিক থাকে, তবে, আপনিmargin
সারিpadding
থেকে এবং কলামগুলি থেকে.no-gutters
অন দিয়ে অপসারণ করতে পারেন.row
।- গ্রিডকে প্রতিক্রিয়াশীল করার জন্য, পাঁচটি গ্রিড ব্রেকপয়েন্ট রয়েছে, প্রতিটি প্রতিক্রিয়াশীল ব্রেকপয়েন্টের জন্য একটি : সমস্ত ব্রেকপয়েন্ট (অতিরিক্ত ছোট), ছোট, মাঝারি, বড় এবং অতিরিক্ত বড়।
- গ্রিড ব্রেকপয়েন্টগুলি ন্যূনতম প্রস্থের মিডিয়া কোয়েরির উপর ভিত্তি করে তৈরি করা হয়, যার অর্থ তারা সেই একটি ব্রেকপয়েন্ট এবং তার উপরে থাকা সমস্ত ক্ষেত্রে প্রযোজ্য (যেমন,
.col-sm-4
ছোট, মাঝারি, বড় এবং অতিরিক্ত বড় ডিভাইসগুলিতে প্রযোজ্য, তবে প্রথমxs
ব্রেকপয়েন্ট নয়)। - আপনি আরও শব্দার্থিক মার্কআপের জন্য পূর্বনির্ধারিত গ্রিড ক্লাস (যেমন
.col-4
) বা Sass মিক্সন ব্যবহার করতে পারেন।
ফ্লেক্সবক্সের আশেপাশের সীমাবদ্ধতা এবং বাগ সম্পর্কে সচেতন থাকুন , যেমন ফ্লেক্স কন্টেইনার হিসাবে কিছু HTML উপাদান ব্যবহার করতে না পারা ।
যখন বুটস্ট্র্যাপ বেশিরভাগ মাপ নির্ধারণের জন্য em
s বা s ব্যবহার করে, s ব্যবহার করা হয় গ্রিড ব্রেকপয়েন্ট এবং কন্টেইনার প্রস্থের জন্য। কারণ ভিউপোর্টের প্রস্থ পিক্সেলে এবং ফন্টের আকারের সাথে পরিবর্তন হয় না ।rem
px
বুটস্ট্র্যাপ গ্রিড সিস্টেমের দিকগুলি একটি সহজ টেবিলের সাথে একাধিক ডিভাইস জুড়ে কীভাবে কাজ করে তা দেখুন।
অতিরিক্ত ছোট <576px |
ছোট ≥576px |
মাঝারি ≥768px |
বড় ≥992px |
অতিরিক্ত বড় ≥1200px |
|
---|---|---|---|---|---|
সর্বোচ্চ ধারক প্রস্থ | কোনটিই নয় (স্বয়ংক্রিয়) | 540px | 720px | 960px | 1140px |
ক্লাস প্রিফিক্স | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
# কলাম | 12 | ||||
নর্দমার প্রস্থ | 30px (একটি কলামের প্রতিটি পাশে 15px) | ||||
নেস্টেবল | হ্যাঁ | ||||
কলাম ক্রম | হ্যাঁ |
একটি সুস্পষ্ট সংখ্যাযুক্ত ক্লাস ছাড়াই সহজ কলামের আকারের জন্য ব্রেকপয়েন্ট-নির্দিষ্ট কলাম ক্লাসগুলি ব্যবহার করুন .col-sm-6
।
উদাহরণস্বরূপ, এখানে দুটি গ্রিড লেআউট রয়েছে যা প্রতিটি ডিভাইস এবং ভিউপোর্টে প্রযোজ্য, থেকে xs
পর্যন্ত xl
। আপনার প্রয়োজনীয় প্রতিটি ব্রেকপয়েন্টের জন্য যেকোন সংখ্যক ইউনিট-কম ক্লাস যোগ করুন এবং প্রতিটি কলাম একই প্রস্থ হবে।
সমান-প্রস্থের কলামগুলি একাধিক লাইনে বিভক্ত করা যেতে পারে, তবে একটি সাফারি ফ্লেক্সবক্স বাগflex-basis
ছিল যা এটিকে একটি স্পষ্ট বা ছাড়া কাজ করতে বাধা দেয় border
। পুরানো ব্রাউজার সংস্করণগুলির জন্য সমাধান রয়েছে, তবে আপনি যদি আপ-টু-ডেট থাকেন তবে সেগুলির প্রয়োজন হবে না।
ফ্লেক্সবক্স গ্রিড কলামগুলির জন্য স্বয়ংক্রিয়-লেআউটের অর্থ হল আপনি একটি কলামের প্রস্থ সেট করতে পারেন এবং সহোদর কলামগুলি স্বয়ংক্রিয়ভাবে এর চারপাশে পুনরায় আকার দিতে পারেন। আপনি পূর্বনির্ধারিত গ্রিড ক্লাস (নিচে দেখানো হয়েছে), গ্রিড মিক্সিন বা ইনলাইন প্রস্থ ব্যবহার করতে পারেন। মনে রাখবেন যে কেন্দ্র কলামের প্রস্থ যাই হোক না কেন অন্যান্য কলামের আকার পরিবর্তন হবে।
col-{breakpoint}-auto
তাদের বিষয়বস্তুর স্বাভাবিক প্রস্থের উপর ভিত্তি করে কলামের আকারের জন্য ক্লাস ব্যবহার করুন ।
.w-100
আপনি যেখানে কলামগুলিকে একটি নতুন লাইনে ভাঙতে চান সেখানে সন্নিবেশ করে একাধিক সারি বিস্তৃত সমান-প্রস্থের কলাম তৈরি করুন । .w-100
কিছু প্রতিক্রিয়াশীল প্রদর্শন ইউটিলিটিগুলির সাথে মিশ্রিত করে বিরতিগুলিকে প্রতিক্রিয়াশীল করুন ।
বুটস্ট্র্যাপের গ্রিড জটিল প্রতিক্রিয়াশীল লেআউট তৈরির জন্য পূর্বনির্ধারিত ক্লাসের পাঁচটি স্তর অন্তর্ভুক্ত করে। অতিরিক্ত ছোট, ছোট, মাঝারি, বড় বা অতিরিক্ত বড় ডিভাইসে আপনার কলামের আকার কাস্টমাইজ করুন যদিও আপনি উপযুক্ত মনে করেন।
গ্রিডগুলির জন্য যেগুলি ছোট থেকে বড় ডিভাইসগুলির মধ্যে একই, .col
এবং .col-*
ক্লাসগুলি ব্যবহার করুন৷ যখন আপনার একটি বিশেষ আকারের কলামের প্রয়োজন হয় তখন একটি সংখ্যাযুক্ত শ্রেণি নির্দিষ্ট করুন; অন্যথায়, বিনা দ্বিধায় লেগে থাকুন .col
।
ক্লাসের একটি একক সেট ব্যবহার করে .col-sm-*
, আপনি একটি মৌলিক গ্রিড সিস্টেম তৈরি করতে পারেন যা স্ট্যাক করা শুরু হয় এবং ছোট ব্রেকপয়েন্ট ( sm
) এ অনুভূমিক হয়ে যায়।
আপনার কলামগুলি কেবল কিছু গ্রিড স্তরে স্ট্যাক করতে চান না? প্রয়োজন অনুসারে প্রতিটি স্তরের জন্য বিভিন্ন শ্রেণীর সংমিশ্রণ ব্যবহার করুন। এটি কীভাবে কাজ করে তার আরও ভাল ধারণার জন্য নীচের উদাহরণটি দেখুন।
কলামগুলি উল্লম্ব এবং অনুভূমিকভাবে সারিবদ্ধ করতে flexbox প্রান্তিককরণ ইউটিলিটিগুলি ব্যবহার করুন৷
আমাদের পূর্বনির্ধারিত গ্রিড ক্লাসের কলামগুলির মধ্যে থাকা গটারগুলি দিয়ে সরানো যেতে পারে .no-gutters
৷ এটি সমস্ত তাৎক্ষণিক শিশু কলাম থেকে নেতিবাচক margin
গুলি .row
এবং অনুভূমিকগুলিকে সরিয়ে দেয়।padding
এই শৈলী তৈরির জন্য উৎস কোড এখানে. মনে রাখবেন যে কলাম ওভাররাইডগুলি শুধুমাত্র প্রথম শিশু কলামগুলিতে স্কোপ করা হয় এবং বৈশিষ্ট্য নির্বাচকের মাধ্যমে লক্ষ্য করা হয় । যদিও এটি একটি আরও নির্দিষ্ট নির্বাচক তৈরি করে, কলাম প্যাডিং এখনও স্পেসিং ইউটিলিটিগুলির সাথে আরও কাস্টমাইজ করা যেতে পারে ।
একটি প্রান্ত থেকে প্রান্ত নকশা প্রয়োজন? অভিভাবক .container
বা বাদ দিন .container-fluid
।
অনুশীলনে, এটি দেখতে কেমন তা এখানে। মনে রাখবেন আপনি এটিকে অন্যান্য পূর্বনির্ধারিত গ্রিড ক্লাসের সাথে ব্যবহার করা চালিয়ে যেতে পারেন (কলামের প্রস্থ, প্রতিক্রিয়াশীল স্তর, পুনঃক্রম এবং আরও অনেক কিছু সহ)।
যদি একটি একক সারির মধ্যে 12টির বেশি কলাম স্থাপন করা হয়, তবে অতিরিক্ত কলামের প্রতিটি গ্রুপ, একটি ইউনিট হিসাবে, একটি নতুন লাইনে মোড়ানো হবে।
যেহেতু 9 + 4 = 13 > 12, এই 4-কলাম-ওয়াইড ডিভটি একটি সংলগ্ন একক হিসাবে একটি নতুন লাইনে মোড়ানো হয়।
পরবর্তী কলামগুলি নতুন লাইন বরাবর চলতে থাকে।
ফ্লেক্সবক্সে একটি নতুন লাইনে কলাম ভাঙার জন্য একটি ছোট হ্যাক প্রয়োজন: width: 100%
আপনি যেখানেই আপনার কলামগুলিকে একটি নতুন লাইনে মোড়ানো করতে চান সেখানে একটি উপাদান যুক্ত করুন৷ সাধারণত এটি একাধিক .row
s দিয়ে সম্পন্ন করা হয়, তবে প্রতিটি বাস্তবায়ন পদ্ধতি এটির জন্য দায়ী হতে পারে না।
আপনি আমাদের প্রতিক্রিয়াশীল প্রদর্শন ইউটিলিটিগুলির সাথে নির্দিষ্ট ব্রেকপয়েন্টগুলিতে এই বিরতিটি প্রয়োগ করতে পারেন ৷
আপনার বিষয়বস্তুর ভিজ্যুয়াল ক্রম.order-
নিয়ন্ত্রণ করার জন্য ক্লাস ব্যবহার করুন । এই ক্লাসগুলি প্রতিক্রিয়াশীল, তাই আপনি ব্রেকপয়েন্ট দ্বারা সেট করতে পারেন (যেমন, )। সমস্ত পাঁচটি গ্রিড স্তর জুড়ে সমর্থন অন্তর্ভুক্ত করে ।order
.order-1.order-md-2
1
12
এছাড়াও প্রতিক্রিয়াশীল .order-first
এবং .order-last
শ্রেণী রয়েছে যেগুলি যথাক্রমে এবং ( ) order
প্রয়োগ করে একটি উপাদানের পরিবর্তন করে। এই ক্লাসগুলিকে প্রয়োজন অনুসারে সংখ্যাযুক্ত ক্লাসের সাথে মিশ্রিত করা যেতে পারে।order: -1
order: 13
order: $columns + 1
.order-*
আপনি দুটি উপায়ে গ্রিড কলাম অফসেট করতে পারেন: আমাদের প্রতিক্রিয়াশীল .offset-
গ্রিড ক্লাস এবং আমাদের মার্জিন ইউটিলিটি । গ্রিড ক্লাসের আকার কলামের সাথে মেলে যখন মার্জিনগুলি দ্রুত লেআউটের জন্য বেশি উপযোগী যেখানে অফসেটের প্রস্থ পরিবর্তনশীল।
.offset-md-*
ক্লাস ব্যবহার করে ডানদিকে কলাম সরান । এই ক্লাসগুলি কলাম দ্বারা একটি কলামের বাম মার্জিন বৃদ্ধি করে *
। উদাহরণস্বরূপ, চারটি কলামের উপর .offset-md-4
চলে যায়।.col-md-4
প্রতিক্রিয়াশীল ব্রেকপয়েন্টে কলাম ক্লিয়ারিং ছাড়াও, আপনাকে অফসেটগুলি পুনরায় সেট করতে হতে পারে। গ্রিড উদাহরণে এটি কর্মে দেখুন ।
v4 এ ফ্লেক্সবক্সে যাওয়ার সাথে, আপনি মার্জিন ইউটিলিটিগুলি ব্যবহার করতে পারেন যেমন .mr-auto
ভাইবোন কলামগুলি একে অপরের থেকে দূরে রাখতে।
আপনার সামগ্রীকে ডিফল্ট গ্রিডের সাথে নেস্ট করতে, একটি বিদ্যমান কলামের মধ্যে একটি নতুন .row
এবং কলামের সেট যোগ করুন । নেস্টেড সারিগুলিতে 12 বা তার কম পর্যন্ত যোগ করা কলামগুলির একটি সেট অন্তর্ভুক্ত করা উচিত (এটি প্রয়োজনীয় নয় যে আপনি উপলব্ধ 12টি কলাম ব্যবহার করুন)৷.col-sm-*
.col-sm-*
বুটস্ট্র্যাপের উত্স Sass ফাইলগুলি ব্যবহার করার সময়, আপনার কাছে কাস্টম, শব্দার্থিক, এবং প্রতিক্রিয়াশীল পৃষ্ঠা বিন্যাস তৈরি করতে Sass ভেরিয়েবল এবং মিক্সিন ব্যবহার করার বিকল্প রয়েছে। আমাদের পূর্বনির্ধারিত গ্রিড ক্লাসগুলি দ্রুত প্রতিক্রিয়াশীল লেআউটগুলির জন্য ব্যবহারের জন্য প্রস্তুত ক্লাসগুলির একটি সম্পূর্ণ স্যুট প্রদান করতে একই ভেরিয়েবল এবং মিক্সিনগুলি ব্যবহার করে৷
ভেরিয়েবল এবং মানচিত্র কলামের সংখ্যা, নর্দমার প্রস্থ এবং মিডিয়া ক্যোয়ারী পয়েন্ট নির্ধারণ করে যেখানে ভাসমান কলাম শুরু হবে। আমরা এগুলি উপরে নথিভুক্ত পূর্বনির্ধারিত গ্রিড ক্লাস তৈরি করতে ব্যবহার করি, সেইসাথে নীচে তালিকাভুক্ত কাস্টম মিক্সিনের জন্য।
মিক্সিনগুলি পৃথক গ্রিড কলামগুলির জন্য শব্দার্থিক CSS তৈরি করতে গ্রিড ভেরিয়েবলের সাথে একত্রে ব্যবহৃত হয়।
আপনি ভেরিয়েবলগুলিকে আপনার নিজস্ব কাস্টম মানগুলিতে পরিবর্তন করতে পারেন, অথবা শুধুমাত্র তাদের ডিফল্ট মানগুলির সাথে মিক্সিনগুলি ব্যবহার করতে পারেন। এর মধ্যে একটি ব্যবধান সহ একটি দ্বি-কলাম বিন্যাস তৈরি করতে ডিফল্ট সেটিংস ব্যবহার করার একটি উদাহরণ এখানে।
আমাদের অন্তর্নির্মিত গ্রিড Sass ভেরিয়েবল এবং মানচিত্র ব্যবহার করে, পূর্বনির্ধারিত গ্রিড ক্লাসগুলি সম্পূর্ণরূপে কাস্টমাইজ করা সম্ভব। স্তরের সংখ্যা, মিডিয়া ক্যোয়ারী মাত্রা এবং কন্টেইনার প্রস্থ পরিবর্তন করুন—তারপর পুনরায় কম্পাইল করুন।
Sass ভেরিয়েবলের মাধ্যমে গ্রিড কলামের সংখ্যা পরিবর্তন করা যেতে পারে। $grid-columns
প্রতিটি পৃথক কলামের প্রস্থ (শতাংশে) তৈরি করতে ব্যবহৃত হয় যখন $grid-gutter-width
কলামের গটারগুলির প্রস্থ নির্ধারণ করে।
নিজেরাই কলামের বাইরে গিয়ে, আপনি গ্রিড স্তরের সংখ্যাও কাস্টমাইজ করতে পারেন। আপনি যদি মাত্র চারটি গ্রিড স্তর চান তবে আপনি এইরকম কিছু আপডেট $grid-breakpoints
করবেন :$container-max-widths
Sass ভেরিয়েবল বা মানচিত্রে কোন পরিবর্তন করার সময়, আপনাকে আপনার পরিবর্তনগুলি সংরক্ষণ করতে হবে এবং পুনরায় কম্পাইল করতে হবে। এটি করার ফলে কলামের প্রস্থ, অফসেট এবং অর্ডারের জন্য পূর্বনির্ধারিত গ্রিড ক্লাসের একটি একেবারে নতুন সেট আউটপুট হবে। কাস্টম ব্রেকপয়েন্ট ব্যবহার করার জন্য প্রতিক্রিয়াশীল দৃশ্যমানতা ইউটিলিটিগুলিও আপডেট করা হবে। px
(না rem
, em
, বা %
) এ গ্রিড মান সেট করা নিশ্চিত করুন ।