বুটস্ট্র্যাপ 3 এ গ্রিড ক্লাসগুলি (কল-স্ম- # এবং কল-এলজি- #) বোঝা

Question

আমি বুটস্ট্র্যাপ 3 এ শুরু করছি এবং গ্রিড ক্লাসগুলি কীভাবে ব্যবহার করা হচ্ছে তা বোঝার জন্য আমার কিছুটা সমস্যা হচ্ছে।

আমি এতক্ষণ যা বের করেছিলাম তা এখানে:

এটি প্রদর্শিত হয় যে ক্লাসগুলি col-sm-#এবং col-lg-#প্লেইন পুরানো থেকে পৃথক col-#যে তারা কেবল তখনই প্রয়োগ করবে যখন পর্দা নির্দিষ্ট আকারের (যথাক্রমে 768px এবং 992px) উপরে থাকে। যদি আপনি -sm- বা -lg- বাদ দেন তবে ডিভগুলি কখনই একটি কলামে পড়বে না।

যাইহোক, আমি যখন একটি সারির ভিতরে দুটি ডিভ তৈরি করি তখন উভয়ই col-sm-6মনে হয় উইন্ডোটি 768px এবং 992px প্রশস্ত থাকা অবস্থায় এগুলি কেবল পাশাপাশি থাকবে। অন্য কথায়, যদি আমি উইন্ডোটি পুরোপুরি নীচে সঙ্কুচিত করে আস্তে আস্তে এটি প্রশস্ত করি, বিন্যাসটি একক কলাম, তারপরে দুটি কলাম, তারপরে আবার একক কলামে ফিরে ।

1. এটা কি উদ্দেশ্যমূলক আচরণ?
2. যদি আমি 768px এরও বেশি কোনও কিছুর জন্য দুটি কলাম চাই, আমি কি উভয় ক্লাস প্রয়োগ করব ? ( <div class="col-sm-6 col-lg-6">)
3. করা উচিত col-6 এছাড়াও অন্তর্ভুক্ত করা?<div class="col-6 col-sm-6 col-lg-6">

Comments

সারণীটি পড়ুন: getbootstrap.com/css/#grid # 1 - এটি @mediaনির্দিষ্ট উদ্দেশ্য হিসাবে ব্যবহার করা কারণ এটি অভীষ্ট আচরণ । # 2 এবং # 3 হ্যাঁ, 'উদাহরণ: ডেস্কটপের সাথে মোবাইলের সংমিশ্রণ' এবং 'উদাহরণ: মোবাইল, ট্যাবলেট এবং ডেস্কটপ' পড়ুন

— রাফেলডিডিএল

@ রাফেলডিডিএল ধন্যবাদ পোস্ট করার পরেই আমি এটি বের করে ফেললাম। আমি মনে করি আমি v3 এর v2 এর "বুটস্ট্র্যাপ-প্রতিক্রিয়াশীল CSS" এর মতো আচরণ করার আশা করছিলাম এবং এটি তেমনটি নয়।

— এমারসন্থিস

: এছাড়াও দেখুন stackoverflow.com/questions/17919225/...

— বাস Jobsen

Answer 1

[নীচে আপডেট করুন]

আমি দস্তাবেজগুলিতে আরেকবার নজর রেখেছি এবং এটি প্রদর্শিত হচ্ছে আমি এমন একটি বিভাগকে উপেক্ষা করেছি যা এ সম্পর্কে বিশেষভাবে কথা বলে।

আমার প্রশ্নের উত্তর:

1. হ্যাঁ, এগুলি নির্দিষ্ট প্রস্থের উপরে থাকা সমস্ত কিছু না করে কেবলমাত্র নির্দিষ্ট ব্যাপ্তিতে প্রয়োগ করতে বোঝানো হয়েছে।

2. হ্যাঁ, ক্লাসগুলি সংযুক্ত করার বোঝানো হয়েছে।

3. দেখা যাচ্ছে যে এটি নির্দিষ্ট ক্ষেত্রে উপযুক্ত তবে অন্যদের ক্ষেত্রে নয় কারণ কল- # শ্রেণিটি মূলত কর্ন-এক্সএসএম- # বা, 0 পিক্সের উপরে (সমস্ত প্রস্থ) এর উপরে প্রস্থের সমতুল্য।

খুব শীঘ্রই ডক্সটি পড়া ছাড়া, আমি মনে করি আমি বিভ্রান্ত হয়ে পড়েছি কারণ আমি "বুটস্ট্র্যাপ 2 মানসিকতা" নিয়ে বুটস্ট্র্যাপ 3 এ এসেছি। বিশেষত, আমি v2 তে (alচ্ছিক) প্রতিক্রিয়াশীল স্টাইলগুলি (বুটস্ট্র্যাপ-রেসপন্সিক.এসএস) ব্যবহার করছিলাম এবং ভাল আইএমওর জন্য ভাল is

স্থিতিশীল মুক্তির জন্য আপডেট:

এই প্রশ্নটি মূলত আরসি 1 বাইরে যাওয়ার সময় লেখা হয়েছিল। তারা আরসি 2 তে কিছু বড় পরিবর্তন করেছে তাই এখন যে কেউ এটি পড়ছেন তাদের জন্য, উপরে বর্ণিত সমস্ত কিছুই এখনও প্রযোজ্য নয়।

আমি বর্তমানে এটি লিখছি যখন, col-*-#ক্লাসগুলি ডিও উপরের দিকে প্রযোজ্য বলে মনে হচ্ছে। সুতরাং উদাহরণস্বরূপ, আপনি যদি ফোনের জন্য কোনও উপাদান 12 কলাম (পূর্ণ প্রস্থ) হতে চান তবে ট্যাবলেট এবং তার জন্য দুটি 6 কলাম (অর্ধ পৃষ্ঠা) করতে চান তবে আপনি এরকম কিছু করতে পারেন:

<div class="col-xs-12 col-sm-6"> ... //NO NEED FOR col-md-6 or col-lg-6

(এই প্রশ্নটি লেখার পরে তারা একটি অতিরিক্ত এক্স-এর ব্রেক পয়েন্টও যোগ করেছিল))

Comments

হাইপারলিঙ্কটি বর্তমানে কোনও অস্তিত্বহীন পৃষ্ঠাতে প্রদর্শিত হবে। আমি নিশ্চিত না যে @ রাফেলডিডিএল - getbootstrap.com/css/#grid - বা অন্য কোনও লিঙ্কে দেওয়া লিঙ্কটি নির্দেশ করতে আপডেট করা উচিত কিনা ?

— জন স্নাইডার

প্রশ্ন এবং উত্তরের জন্য ধন্যবাদ। আমি কোনও সিএসএস লোক নই, গ্রিড সেটআপটি প্রথমে আমার কাছেও বিভ্রান্ত হয়েছিল। তবে আপনি যদি যা বলছেন তা যদি সত্য হয় তবে কেবল xs ব্যবহার করা এবং সবকিছুকে wardর্ধ্বমুখীভাবে প্রয়োগ করা ভাল বলে মনে হয়।

— মাইক পার্সেল

Answer 2

এখানে আপনার খুব ভাল টিউটোরিয়াল রয়েছে, যা বুটস্ট্র্যাপ 3-এ নতুন গ্রিড ক্লাস কীভাবে ব্যবহার করবে তা ব্যাখ্যা করে।

এতে মিক্সিন ইত্যাদিও রয়েছে

Comments

ব্লগ লিঙ্কটি বুটস্ট্র্যাপ 3 এর গ্রিডকে বিশদভাবে 4 মাপের ক্লাস যেমন কল-এক্সএস- * সহ বর্ণনা করে describes ভাল কোড উদাহরণ আছে।

— ক্যাটো

এটি খুব ভাল, বিশেষত তাঁর স্টাইল আপনাকে ক্রমাগত অধ্যবসায়ী করতে উত্সাহিত করে; "দরকারী ঠিক? না? জানেন না? চলুন চলুন!" পাশাপাশি যথাযথ বাক্যগুলিতে জিনিসগুলি ব্যাখ্যা করে: "এটি মূলত বলেছে : " আমাকে পুরোপুরি ফোনের আকারে 6 কলামের প্রস্থে রাখুন, আমাকে কখনও স্ট্যাকড মোবাইল বিন্যাসে স্যুইচ করবেন না। "" । পোস্ট করার জন্য ধন্যবাদ

— স্লগম্যান্ড্রু

Answer 3

"আমি যদি 768px এরও বেশি কোনও কিছুর জন্য দুটি কলাম চাই, আমি কি উভয় শ্রেণি প্রয়োগ করব?"

এটি যেমন সহজ হতে হবে:

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

col-lg-6খুব যোগ করার প্রয়োজন নেই ।

ডেমো: http://www.bootply.com/73119

Comments

যে কারণে আমি এখনও ব্যাখ্যা করতে পারি না, এটি আমার পক্ষে এভাবে কাজ করছে না। .col-sm-6কেবলমাত্র সেই নির্দিষ্ট প্রস্থের (উপরের সমস্ত কিছু নয়) প্রযোজ্য বলে মনে হচ্ছে

— এমারসন্থিস

Answer 4

বোঝার সর্বোত্তম উপায় হ'ল কেবল উপরে থেকে নীচে (বড় ডেস্কটপগুলি মোবাইল ফোনগুলিতে) চিন্তা করা

প্রথমত, বি 3 যেমন প্রথম মোবাইল তাই আপনি যদি এক্স ব্যবহার করেন তবে কলামগুলি বড় ডেস্কটপ থেকে শুরু করে এক্স-এর মতো হবে (আমি এক্স বা এসএম ব্যবহার করার পরামর্শ দিচ্ছি কারণ এটি প্রতিটি পর্দার আকারে আপনার পছন্দ মতো রাখে)

দ্বিতীয়ত আপনি যদি একাধিক ক্লাস যুক্ত করতে পারেন তার চেয়ে বিভিন্ন ডিভাইস বা রেজোলিউশনে কলামগুলিকে আলাদা প্রস্থ দিতে চান

উপরের স্ক্রিন রেজোলিউশন অনুসারে প্রস্থ পরিবর্তন করবে, আমি প্রতিটি শ্রেণিতে মোট কলামগুলি রাখছি = 12

আমি আশা করি আমার উত্তরটি সাহায্য করবে!

Answer 5

উপরে আভ্যন্তরীন উৎপাদন এর উত্তর সংশোধন করার জন্য, আপনাকে ডিক্লেয়ার করার প্রয়োজন হবে না col-xs-12যে <div class="col-xs-12 col-sm-6">। বুটস্ট্র্যাপ 3 মোবাইল প্রথম, সুতরাং প্রতিটি ডিভ কলামটি ডিফল্টরূপে 100% প্রস্থের ডিভ হিসাবে ধরে নেওয়া হয় - যার অর্থ "xs" আকারে এটি 100% প্রস্থ হয়, আপনি যা সেট করেছেন তা নির্বিশেষে এটি সর্বদা সেই আচরণে ডিফল্ট হবে sm, md, lg। যদি আপনি চান যে আপনার xsকলামগুলি 100% না হয়ে থাকে তবে আপনি সাধারণত একটি করেন col-xs-(1-11)।

Answer 6

এই হিসাবে দেরি হতে পারে কারণ আমি মনে করি আমাদের বেশিরভাগ লোক BS4 ব্যবহার করছে। এই নিবন্ধটি আপনি জিজ্ঞাসিত সমস্ত প্রশ্নকে বিশদ এবং সাধারণ পদ্ধতিতে ব্যাখ্যা করেছেন যখন কখন কী করা উচিত includes বিএস 4 বা ব্যবহারের জন্য বিশদ গাইডbootstrap

https://uxplanet.org/how-the-bootstrap-4-grid-works-a1b04703a3b7

Comments

উত্তরের জন্য সরবরাহিত স্থানটিতে আপনার লিঙ্ক থেকে প্রাসঙ্গিক তথ্য স্থাপন বিবেচনা করুন।

— সাও

আমি লিঙ্কটি অন্তর্ভুক্ত করার একমাত্র কারণটি ছিল যে শীর্ষস্থান থেকে নিবন্ধটি পড়া শুরু করা আমার পক্ষে সহায়ক। এটি যখন তখন বোধগম্য হয়।

— এএএ