বুটস্ট্র্যাপে "কল-এমডি -4", "কোল-এক্সএস -1", "কোল-এলজি -2" এর সংখ্যার অর্থ

Question

আমি নতুন বুটস্ট্র্যাপে গ্রিড সিস্টেমের সাথে বিভ্রান্ত, বিশেষত এই শ্রেণিগুলি:

col-lg-*
col-md-*
col-xs-*

(যেখানে * কিছু সংখ্যার প্রতিনিধিত্ব করে)।

যে কেউ দয়া করে নিম্নলিখিতটি ব্যাখ্যা করতে পারেন:

1. কীভাবে সেই নম্বরটি গ্রিডগুলি সারিবদ্ধ করছে?
2. এই নম্বরগুলি কীভাবে ব্যবহার করবেন?
3. তারা আসলে কি প্রতিনিধিত্ব করে?

Comments

আপনি এখানে একটি ব্যাখ্যা পাবেন । আপনি চাইলে কলামে নম্বরটি ব্যবহার করতে পারেন তবে নিশ্চিত করুন যে একই কাতারে সমস্ত কলামের সংখ্যার যোগফল 12 এর সমান হতে হবে

— দোয়ান কুং

Answer 1

কেবল বুটস্ট্র্যাপ 3-এ প্রযোজ্য।

বর্ণ (এক্স উপেক্ষা গুলি , ছাঃ , MD , এলজি ) এখন জন্য , আমি শুধু সংখ্যা দিয়ে শুরু করব ...

• সংখ্যাগুলি (1-12) কোনও বিভাজনের মোট প্রস্থের একটি অংশকে উপস্থাপন করে
• সমস্ত ডিভ 12 টি কলামে বিভক্ত
• সুতরাং, col-*-612 টির মধ্যে 6 টি কলাম (অর্ধ প্রস্থ) col-*-12ছড়িয়ে পড়েছে, 12 টির মধ্যে 12 টি কলাম (পুরো প্রস্থ) প্রসারিত হবে

সুতরাং, যদি আপনি একটি দ্বি স্প্যান করতে দুটি সমান কলাম চান , লিখুন

<div class="col-xs-6">Column 1</div>
<div class="col-xs-6">Column 2</div>

অথবা, যদি আপনি একই প্রস্থে তিনটি অসম কলাম বিস্তৃত করতে চান তবে আপনি লিখতে পারেন:

<div class="col-xs-2">Column 1</div>
<div class="col-xs-6">Column 2</div>
<div class="col-xs-4">Column 3</div>

আপনি কলামগুলির # টি সর্বদা 12 পর্যন্ত যোগ করার বিষয়টি লক্ষ্য করবেন It এটি বারোটির চেয়ে কম হতে পারে তবে আপনার 12 টিরও বেশি বার সতর্ক থাকুন কারণ আপনার আপত্তিজনক ডিভগুলি পরবর্তী সারিতে নেমে যাবে (এটি নয় .row, যা পুরোপুরি অন্য গল্প।

আপনি কলামগুলির মধ্যে কলামগুলিতে বাসা বাঁধতে পারেন ( .rowতাদের চারপাশে একটি মোড়ক দিয়ে সেরা ) যেমন:

<div class="col-xs-6">
  <div class="row">
    <div class="col-xs-4">Column 1-a</div>
    <div class="col-xs-8">Column 1-b</div>
  </div>
</div>
<div class="col-xs-6">
  <div class="row">
    <div class="col-xs-2">Column 2-a</div>
    <div class="col-xs-10">Column 2-b</div>
  </div>
</div>

নেস্টেড ডিভগুলির প্রতিটি সেট তাদের পিতামাতার ডিভের 12 টি কলাম পর্যন্ত বিস্তৃত। দ্রষ্টব্য: যেহেতু প্রতিটি .colশ্রেণীর উভয় পক্ষের 15px প্যাডিং রয়েছে, আপনার সাধারণত .rowএকটিতে নেস্টেড কলামগুলি আবৃত করা উচিত , যার -15px মার্জিন রয়েছে। এটি প্যাডিংয়ের সদৃশ এড়ানো এবং নেস্টেড এবং অ-নেস্টেড কোল ক্লাসের মধ্যে কন্টেন্ট রেখাযুক্ত রাখে।

- আপনি বিশেষভাবে xs, sm, md, lgব্যবহার সম্পর্কে জিজ্ঞাসা করেননি , তবে তারা হাতছাড়া হয়ে যায় তাই আমি সাহায্য করতে পারি না তবে এটি স্পর্শ করতে পারি ...

সংক্ষেপে, তারা শ্রেণীর কোন স্ক্রিনের আকার প্রয়োগ করতে হবে তা নির্ধারণ করতে ব্যবহৃত হয় :

• xs = অতিরিক্ত ছোট পর্দা (মোবাইল ফোন)
• এসএম = ছোট পর্দা (ট্যাবলেট)
• এমডি = মাঝারি পর্দা (কিছু ডেস্কটপ)
• lg = বড় পর্দা (অবশিষ্ট ডেস্কটপগুলি)

আরও তথ্যের জন্য অফিসিয়াল বুটস্ট্র্যাপ ডকুমেন্টেশন থেকে " গ্রিড বিকল্পগুলি " অধ্যায়টি পড়ুন ।

আপনার একাধিক কলামের ক্লাস ব্যবহার করে সাধারণত একটি ডিভি শ্রেণিবদ্ধ করা উচিত যাতে এটি পর্দার আকারের উপর নির্ভর করে আলাদাভাবে আচরণ করে (এটি বুটস্ট্র্যাপকে প্রতিক্রিয়াশীল করে তোলে এমন হৃদয়)। উদাহরণস্বরূপ: ক্লাসগুলির সাথে একটি ডিভ col-xs-6এবং col-sm-4মোবাইল ফোনে অর্ধেক পর্দা (xs) এবং ট্যাবলেটগুলিতে (এসএম) এর স্ক্রিনের 1/3 অংশ বিস্তৃত হবে।

<div class="col-xs-6 col-sm-4">Column 1</div> <!-- 1/2 width on mobile, 1/3 screen on tablet) -->
<div class="col-xs-6 col-sm-8">Column 2</div> <!-- 1/2 width on mobile, 2/3 width on tablet -->

উল্লেখ্য: নিচের মন্তব্য অনুযায়ী, একজন প্রদত্ত স্ক্রিন সাইজ জন্য গ্রিড ক্লাস স্ক্রিন সাইজ ক্ষেত্রে প্রযোজ্য এবং বড় যদি না অন্য ঘোষণা ওভাররাইড এটা (অর্থাত col-xs-6 col-md-4ধারন 6 কলাম xs এবংsm , এবং 4 কলাম md এবংlg , যদিও smএবং lgস্পষ্টভাবে ঘোষণা না হয়)

উল্লেখ্য: যদি আপনি সংজ্ঞায়িত করেন না xs, এটা ডিফল্ট করবে col-xs-12(যেমন col-sm-6উপর অর্ধেক প্রস্থ হয় sm, mdএবং lgউপর পর্দা কিন্তু পূর্ণ- প্রস্থের xsপর্দা)।

দ্রষ্টব্য: যদি আপনার .row12 টিরও বেশি কলস অন্তর্ভুক্ত থাকে তবে যতক্ষণ না আপনি জানেন যে তারা কীভাবে প্রতিক্রিয়া জানাবে it's - এটি একটি বিতর্কিত বিষয়, এবং সবাই একমত নয়।

Comments

এটি আরও লক্ষণীয় যে কোনও প্রদত্ত স্ক্রিন আকারের গ্রিড ক্লাসগুলি সেই আকার এবং বৃহত্তর পর্দার ক্ষেত্রে প্রযোজ্য , যদি না আরও অগ্রাহ্য করা হয়। উদাহরণস্বরূপ, .col-xs-2.col-sm-2.col-lg-7সমান। col-xs-2.col-lg-7

— cvrebert

বাসা বাঁধার বিষয়ে আপনার উদাহরণকে সংশোধন করতে হবে। বাসা বাঁধার জন্য কলামটিতে একটি সারি সন্নিবেশ করা দরকার যা আপনি অন্য কলামগুলিকে ভিতরে রেখেছেন। একটি সারি যোগ না করা আপনাকে ডাবল প্যাডিংয়ের কারণ করবে। : এই ভাল করে বুঝতে জন্য, এখানে আমার উত্তর ডায়াগ্রাম দেখতে stackoverflow.com/questions/23899715/...

— jme11

খুব সুন্দর ব্যাখ্যা, ধন্যবাদ। আমি মোড়কে সম্পর্কে বিট ভালবাসেন .colsমধ্যে .rowএড়াতে এবং প্যাডিং cacel। আমি সর্বদা ভাবছিলাম যে সারিটি কীভাবে ব্যবহার করতে হবে এবং এতে কী তফাত হয়।

— ishষিরাজ পুরোহিত

তবে ডকুমেন্টেশনে এটি মনে হয় যে 'xs' এর জন্য ডিভসের মোট প্রস্থটি 12-এরও বেশি হয়ে গেছে। অনুগ্রহ করে 'মিশ্রিত: মোবাইল এবং ডেস্কটপ' বিভাগটি দেখুন এবং কেন এটি? getbootstrap.com/docs/3.3/example/grid

— মিশেল

@ মিশেল দেখে মনে হচ্ছে আপনি তাদের ডকুমেন্টেশনগুলিকে ভুল বুঝছেন। তারা সেখানে দুটি পৃথক এক্স বিকল্প দেখায় - একটি 12 কলামের জন্য (পূর্ণ প্রস্থ) এবং একটি 6 কলামের (অর্ধ-প্রস্থ)। আপনি দেখতে পাবেন যে এই কলামগুলিও lg-8 এবং lg-4 দেখায় - তারা আপনাকে যা দেখায় তা হ'ল তারা বড় ডিসপ্লেতে 8 এবং 4 কলাম (মোট প্রস্থের প্রস্থের 2/3 + 1/3) এবং 12 টি স্প্যান করবে 12 এবং 6 প্রদর্শন (নিম্নলিখিত প্রান্তের সম্পূর্ণ প্রস্থ + 1/2) following আশা করি এইটি কাজ করবে!

— শন টেলর

Answer 2

বুটস্ট্র্যাপ গ্রিড সিস্টেমে চারটি ক্লাস রয়েছে:
এক্স (ফোনের জন্য) এসএম (
ট্যাবলেটগুলির জন্য)
এমডি (ডেস্কটপগুলির জন্য)
এলজি (বৃহত্তর ডেস্কটপগুলির জন্য)

উপরের ক্লাসগুলিকে আরও গতিশীল এবং নমনীয় লেআউট তৈরি করতে একত্রিত করা যেতে পারে।

টিপ: প্রতিটি শ্রেণি স্কেল আপ করে, সুতরাং আপনি যদি xs এবং sm এর জন্য একই প্রস্থ সেট করতে চান তবে আপনাকে কেবল xs নির্দিষ্ট করতে হবে।

ঠিক আছে, উত্তরটি সহজ, তবে পড়ুন:

কল-এলজি- কলাম বড় ≥ 1200px
কলাম-এমডি- এর জন্য কলাম মাঝারি ≥ 992px
কল-এক্সএস- এর অর্থ কলাম অতিরিক্ত ছোট≥ 768px

পিক্সেল সংখ্যাগুলি ব্রেকপয়েন্টস, সুতরাং উদাহরণস্বরূপ col-xsযখন উইন্ডো 768px (সম্ভবত মোবাইল ডিভাইস) এর চেয়ে ছোট হয় তখন উপাদানটিকে লক্ষ্য করে তোলা হয় ...

আমিও প্রদর্শনী কিভাবে গ্রিড সিস্টেম কাজ, এই উদাহরণ আমি তাদের 3 ব্যবহার করেন, মতো নিচের ছবিটি নির্মিত col-lg-6আপনাকে দেখাতে কিভাবে পৃষ্ঠা থেকে গ্রিড সিস্টেম কাজ, বর্ণন কেমন lg, mdএবং xsউইন্ডোর আকার প্রতিক্রিয়াশীল আছেন:

Comments

col-xs-*বুটস্ট্র্যাপ ৪-এর পক্ষে বাদ পড়েছেনcol-*

— জোহাব আলি

আপনি কি দয়া করে এইচটিএমএল ভাগ করবেন (এবং কোনও সিএসএস সম্ভব)? ধন্যবাদ।

— NoChance

Answer 3

মূল কথাটি হ'ল:

col-lg-* col-md-* col-xs-* col-sm এই বিভিন্ন স্ক্রিন আকারে কয়টি কলাম থাকবে তা নির্ধারণ করুন।

উদাহরণ: আপনি যদি ডেস্কটপ স্ক্রিনে এবং ফোনের স্ক্রিনগুলিতে দুটি কলাম থাকতে চান তবে আপনি আপনার কলামগুলিতে দুটি col-md-6এবং দুটি col-xs-6ক্লাস রেখেছেন ।

আপনি যদি ডেস্কটপ স্ক্রিনে দুটি কলাম থাকতে চান এবং ফোন স্ক্রিনে কেবল একটি কলাম থাকতে পারেন (অর্থাত্ দুটি সারি একে অপরের উপরে সজ্জিত) এবং আপনি আপনার কলামগুলিতে two col-md-6দুটি রেখেছেন এবং col-xs-12সমষ্টি 24 হবে কারণ তারা প্রতিটিটির উপরে স্বয়ংক্রিয়ভাবে স্ট্যাক করবে অন্যান্য, বা কেবল xsস্টাইল ছেড়ে দিন।

Answer 4

থেকে টুইটার বুটস্ট্র্যাপ ডকুমেন্টেশন :

• ছোট গ্রিড (68 768px) = .col-sm-*,
• মাঝারি গ্রিড (≥ 992px) = .col-md-*,
• বড় গ্রিড (≥ 1200px) = .col-lg-*।

আরও পড়তে ...

Answer 5

আপনি এখানে যান

কল-এলজি -২: স্ক্রীনটি যদি বড় হয় ( এলজি ) তবে এই উপাদানটি 2 টি উপাদানের স্থান নেবে পুরো সারিটি 12 টি উপাদান ফিট করতে পারে তা বিবেচনা করে (সুতরাং আপনি দেখতে পাবেন যে বড় স্ক্রিনে এই উপাদানটি একটি সারির 16% স্থান নেয়)

কল-এলজি -6: স্ক্রিনটি যদি বড় হয় ( এলজি ) তবে এই উপাদানটি 12 টি উপাদানগুলির মধ্যে 12 টি উপাদান ফিট করতে পারে তা বিবেচনা করে 6 উপাদানগুলির স্থান নেবে - প্রয়োগ করার সময় আপনি দেখতে পাবেন যে উপাদানটি সারিটির অর্ধে উপলব্ধ স্থান গ্রহণ করেছে।

উপরের নিয়মটি কেবল তখনই প্রয়োগ করা হয় যখন পর্দা বড় হয়। যখন স্ক্রিন ছোট হয় তখন এই নিয়মটি বাতিল করা হয় এবং প্রতি সারিতে কেবল একটি উপাদান প্রদর্শিত হয়।

চিত্রের নীচে বিভিন্ন স্ক্রিন আকারের প্রস্থগুলি দেখায়: