ধারক-তরল বনাম। কনটেনার

Question

সবেমাত্র 3.1 ডাউনলোড করে ডক্সে পাওয়া গেছে ...

একটি পূর্ণ প্রস্থ বিন্যাস মধ্যে আপনার দূরতম পরিবর্তন করে কোনো স্থায়ী-প্রস্থের গ্রিড লেআউট চালু .containerকরার .container-fluid।

সন্ধান bootstrap.cssকরলে দেখা যাচ্ছে যে .container-fluidএটি অভিন্ন .container। উভয়ের একই সিএসএস রয়েছে এবং প্রতিটি ঘটনাই .container-fluidজোড় করে তৈরি করা হয়েছে .containerএবং সমস্ত কলামের ক্লাস শতাংশে নির্দিষ্ট করা হয়েছে।

উদাহরণগুলিতে ঘোরাফেরা করার সময় আমি কোনও তফাত দেখতে পেলাম না, কারণ সবকিছু তরল মনে হয়েছিল।

আমি যেমন বুটস্ট্র্যাপে নতুন, আমি ধরে নিই যে আমি কিছু মিস করছি। কেউ কি এক মিনিট সময় নিয়ে আমাকে আলোকিত করতে পারে?

Comments

আমি এটা দেখেছি। এটি কয়েক রিভ ফিরে পোস্ট করা হয়েছিল। ধারক-তরল 3.0 এর জন্য নেওয়া হয়েছিল এবং আবার 3.1-এ যোগ করা হয়েছিল।

— ফ্যাটফিনজার্স 8:14 '

@ রণভীর অবশ্যই নকল নয় যেহেতু এটি> BS3.3 যা BS2.3- কে বোঝায় - যেহেতু এই প্রশ্নের উত্তর দেয় না আপনি দয়া করে ভবিষ্যতের ব্যবহারকারীদের বিভ্রান্ত না করার জন্য অপসারণ করতে পারেন

— পিডব্লু কাদ

ডক্স থেকে তরল পুরো ভিউপোর্টের প্রস্থ জুড়ে। (বা এটি কি পুরো বর্তমান ধারক বা উপাদান রয়েছে?) যে কোনও ক্ষেত্রে নামটির তরল পদার্থ কেন? অ-তরল ধারকটির বিপরীতে তরল কী?

— প্যাসুটে

Answer 1

দ্রুত সংস্করণ: .container বুটস্ট্র্যাপের প্রতিটি পর্দার আকারের জন্য একটি নির্দিষ্ট প্রস্থ রয়েছে (এক্সএস, এসএম, এমডি, এলজি); .container-fluidউপলব্ধ প্রস্থ পূরণ করতে প্রসারিত।

---

মধ্যে পার্থক্য containerএবং container-fluidCSS এর এই লাইন থেকে আসে:

@media (min-width: 568px) {
  .container {
    width: 550px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

ওয়েবপৃষ্ঠায় যে ভিউপোর্টটি দেখা হচ্ছে তার প্রস্থের উপর নির্ভর করে containerবর্গটি তার ডিভকে একটি নির্দিষ্ট নির্দিষ্ট প্রস্থ দেয়। এই রেখাগুলি কোনও ফর্মের জন্য অস্তিত্বহীন container-fluid, তাই এর বারের প্রস্থের ভিউপোর্টের প্রস্থ পরিবর্তিত হয়।

সুতরাং উদাহরণস্বরূপ, বলুন আপনার ব্রাউজার উইন্ডোটি 1000px প্রশস্ত। এটি 992px এর ন্যূনতম প্রস্থের চেয়ে বেশি, আপনার .containerউপাদানটির দৈর্ঘ্য 970px হবে। তারপরে আপনি ধীরে ধীরে আপনার ব্রাউজার উইন্ডোটি প্রশস্ত করুন। .containerআপনি 1200px না পাওয়া পর্যন্ত আপনার প্রস্থের পরিবর্তন হবে না, যেখানে এটি 1170px প্রশস্ত হবে এবং কোনও বৃহত্তর ব্রাউজারের প্রশস্ততার জন্য সেভাবেই থাকবে।

তোমার .container-fluidউপাদান অন্যদিকে ক্রমাগত যেমন আপনি এমনকি আপনার ব্রাউজার প্রস্থের সাথে ক্ষুদ্রতম পরিবর্তন করতে মাপ পরিবর্তন করতে হবে।

Comments

@ জকিলিয়ান এর অর্থ যদি আমি পুরো প্রস্থের বিন্যাসটি তৈরি করতে চাই তবে আমার ব্যবহার করা উচিত .container-fluidএবং .containerবাক্সযুক্ত প্রস্থের জন্য, এটি কি ঠিক?

— হাং পিডি

@ দ্য হুং 'পূর্ণ প্রস্থ' বলতে আপনার অর্থ ঠিক কী তা নির্ভর করে তবে container-fluidআমি যতটা বলতে পারি আপনার ক্ষেত্রে আমি যাচ্ছি

— জে কিলিয়ান

@ জিল্কিয়ানিয়ান আজকাল অনেক থিম রয়েছে, তাদের সর্বদা 2 টি লেআউট রয়েছে: বাক্সযুক্ত এবং প্রশস্ত বিন্যাস। আশা করি আপনি যা বুঝাচ্ছেন তা বুঝতে পারবেন। খারাপ ইংরাজির জন্য দুঃখিত

— হাং পিডি

@ জে কিলিয়ান কিছু ক্ষেত্রে। কনটেনার এবং। কনটেনার-তরল কীভাবে ব্যবহার করবেন? প্রাক্তন .: ( ডিজাইন.ডাভিডরোজানডো . com / ড্রু- html-v1.1/… )।

— ব্রাইটওয়েব

@ জকিলিয়ান তাহলে কেন ধারক তরল এমনকি প্রয়োজনীয়?

Answer 2

আমি মনে করি আপনি বলছেন যে একটি containerবনাম container-fluidগ্রিডের প্রতিক্রিয়াশীল এবং অ-প্রতিক্রিয়াশীল মধ্যে পার্থক্য। এটি সত্য নয় ... যা বলছে তা প্রস্থ স্থির নয় ... এর সম্পূর্ণ প্রস্থ!

এটি ব্যাখ্যা করা শক্ত তাই উদাহরণগুলি দেখুন

---

একটি উদাহরণ

container-fluid:

http://www.bootply.com/119981

সুতরাং আপনি দেখতে পাচ্ছেন যে ধারকটি কীভাবে পুরো পর্দা নেয় ... এটি একটি container-fluid।

এখন অন্যটিকে সাধারণ containerদেখতে এবং প্রাকদর্শনটির প্রান্তগুলি দেখতে দিন

উদাহরণ দুটি

container

http://www.bootply.com/119982

এখন আপনি উদাহরণে সাদা স্থান দেখতে পাচ্ছেন? কারণ এটির একটি নির্দিষ্ট প্রস্থ container! উভয় উদাহরণ দুটি পৃথক ট্যাবে খোলার এবং পিছনে পিছনে স্যুইচ করা আরও বোধগম্য হতে পারে।

সম্পাদনা

উভয় পাত্রে একবারে একই সাথে এখানে আরও ভাল উদাহরণ! এখন আপনি সত্যিই পার্থক্য বলতে পারেন!

http://www.bootply.com/119983

আমি আশা করি এটি কিছুটা পরিষ্কার করতে সহায়তা করেছে!

Comments

উভয় ধরণের পাত্রে উদাহরণ সহ আইটেম রয়েছে যা উভয় প্রস্থ পরিবর্তন করে।

— অহনিবিজ্যাকড

এমনকি পার্থক্য কী তা জেনেও আমি শেডের কারণে "উভয়" উদাহরণটি বিভ্রান্তিকর পেয়েছি। কারওর কাছে এটির আরও পরিষ্কার উদাহরণ হতে পারে তা করার জন্য আমি আপনার কোডটি তৈরি করেছিলাম : বুটপ্লি / ১১৯৯৮৮৩ (এছাড়াও, বুটস্ট্র্যাপে। অ্যারো-ফ্লুয়েডের প্রয়োজন হয় না Just. শুধু আপনার ব্যবহার করুন। আপনার ধারকটি তরল কিনা কিনা তা ব্যবহার করুন।)

— কার্ল বুসেমা

কার্ল, আপনার লিঙ্কটি মূল হিসাবে একই উদাহরণে যায়। এখনও যদি আপনার কাঁটাযুক্ত সংস্করণ থাকে তবে আপনি কি লিঙ্কটি পোস্ট করতে পারবেন?

— মাইক টি

ভবিষ্যতে অন্য কেউ যদি এর সাথে চালিত হয় সে ক্ষেত্রে এখানে একটি ভাল কাঁটাচামড়ার উদাহরণ লিঙ্ক ।

— মাইক কলিন্স

ধন্যবাদ মাইক অন্য উদাহরণ হিসাবে তারা আমার ব্রাউজারে ঠিক একই দেখতে পেয়েছিল।

— এরিক

Answer 3

উভয়ই .containerএবং .container-fluidপ্রতিক্রিয়াশীল (যেমন তারা স্ক্রিনের প্রস্থের ভিত্তিতে লেআউটটি পরিবর্তন করে) তবে বিভিন্ন উপায়ে (আমি জানি, নামকরণটি সেভাবে শব্দ করে না)।

সংক্ষিপ্ত উত্তর:

.container হতাশাজনক / চম্পি রিসাইজিং, এবং

.container-fluid প্রস্থে ক্রমাগত / সূক্ষ্ম আকার পরিবর্তন: 100%।

কার্যকারিতা দৃষ্টিকোণ থেকে:

.container-fluidআপনি যে কোনও পরিমাণে আপনার উইন্ডো / ব্রাউজারের প্রস্থ পরিবর্তন করে নিরন্তর পুনরায় আকার পরিবর্তন করেন, পক্ষগুলির পক্ষে কোনও অতিরিক্ত খালি স্থান কখনই রেখে দেয় না .containerতার বিপরীতে । (অতএব নামকরণ: "তরল" "ডিজিটাল", "বিচ্ছিন্ন", "ছিন্নমূল" বা "কোয়ান্টাইটিসড") এর বিপরীতে।

.containerবিভিন্ন নির্দিষ্ট প্রস্থে খণ্ডে পুনরায় আকার দেয়। অন্য কথায়, এটি স্ক্রিনের প্রস্থের বিভিন্ন নির্দিষ্ট সীমা "নির্দিষ্ট" প্রস্থের বিভিন্ন বিস্তৃত হবে।

শব্দার্থবিজ্ঞান: "নির্দিষ্ট প্রস্থ"

নামকরণের বিভ্রান্তি কীভাবে তৈরি হতে পারে তা আপনি দেখতে পাবেন can প্রযুক্তিগতভাবে, আমরা বলতে পারি .container"স্থির প্রস্থ", তবে এটি কেবলমাত্র এই অর্থে স্থির করা হয়েছে যে এটি প্রতিটি দানাদার প্রস্থে আকার পরিবর্তন করে না। এটি আসলে এই অর্থে "স্থির" নয় যে এটি সর্বদা নির্দিষ্ট পিক্সেলের প্রস্থে থাকে, যেহেতু এটি আসলে আকার পরিবর্তন করতে পারে।

একটি মৌলিক দৃষ্টিকোণ থেকে:

.container-fluidসিএসএস সম্পত্তি রয়েছে width: 100%;তাই এটি প্রতিটি স্ক্রিনের প্রস্থের গ্রানুলারিটিতে ক্রমাগত রিডজাস্ট করে।

.container-fluid {
  width: 100%;
}

.container"প্রস্থ = 800px" (বা ইম, রিম ইত্যাদি) এর মতো কিছু রয়েছে, বিভিন্ন স্ক্রিনের প্রস্থে একটি নির্দিষ্ট পিক্সেলের প্রস্থের মান। অবশ্যই এটি হ'ল কারণ যখন পর্দার প্রস্থ একটি স্ক্রিন প্রস্থের চৌম্বকটি অতিক্রম করবে তখন উপাদানগুলির প্রস্থটি হঠাৎ করেই একটি ভিন্ন প্রস্থে লাফিয়ে উঠতে পারে। এবং এই প্রান্তিকতা CSS3 মিডিয়া ক্যোয়ারী দ্বারা পরিচালিত হয়, যা আপনাকে বিভিন্ন অবস্থার জন্য যেমন বিভিন্ন স্ক্রিনের প্রস্থের ব্যাপ্তি প্রয়োগ করতে দেয়।

@media screen and (max-width: 400px){
  .container {
    width: 123px;
  }
}
@media screen and (min-width: 401px) and (max-width: 800px){

  .container {
    width: 456px;
  }
}
@media screen and (min-width: 801px){
  .container {
    width: 789px;
  }
}

তার পরেও

মিডিয়া কোয়েরিগুলির মাধ্যমে আপনি যে কোনও স্থির প্রস্থ উপাদানকে প্রতিক্রিয়াশীল করতে পারেন, কেবলমাত্র .containerউপাদানগুলি নয়, কারণ মিডিয়া প্রশ্নগুলি ঠিক কীভাবে .containerপটভূমিতে বুটস্ট্র্যাপের মাধ্যমে প্রয়োগ করা হয় (কোডটির জন্য জে কিলিয়ান এর উত্তর দেখুন)।

Comments

.containerপ্রতিক্রিয়াশীল বিরোধী হিসাবে অভিযোজিত আরও সঠিক আচরণ না ?

— অজয়

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

— অহনিবিজ্যাকড

@ayjay Adaptive ক্লায়েন্টটি কী ধরণের ডিভাইস সনাক্ত করে এবং সেগুলি সার্ভার-সাইডকে সরবরাহ করে। প্রতিক্রিয়াশীল ক্লায়েন্ট কি ডিভাইস টাইপ যত্নশীল না; এটি কেবল প্রস্থের বিষয়ে চিন্তা করে (মিডিয়া প্রশ্নের কারণে)। যেমন, প্রতিক্রিয়াশীল ক্লায়েন্ট সাইড (সিএসএস, জাভাস্ক্রিপ্ট) রেন্ডার করা হয়। দেখতে huffingtonpost.com/garrett-goodman/... এবং amberweinberg.com/is-it-adaptive-or-responsive-web-design আইএমও প্রতিক্রিয়াশীল অনেক সহজ বজায় রাখার জন্য এবং বিভিন্ন ডিভাইসের জন্য আপনার সাইটের সম্পূর্ণ ভিন্ন সংস্করণ থাকার চেয়ে বিল্ড। তবে আপনার সিএসএসে সমস্ত ব্রাউজারের জন্য অ্যাকাউন্ট করতে হবে।

— আহ্নবিজক্যাড

@ জায়ে অ্যাডাপিটিভ বনাম প্রতিক্রিয়াশীল এর অর্থসূচক প্রশ্নের পুনরায় পর্যালোচনা করুন ... যেহেতু অভিযোজিত মানে ডিভাইসটি সনাক্ত করা এবং সেই অনুসারে বিভিন্ন এইচটিএমএল / সিএসএস / জেএসকে থুতু দেওয়া ... এটি অনুমেয় যে এইচটিএমএল / সিএসএস / জেএসএসে একটি CSS শৈলী থাকতে পারে প্রস্থের: 100%;। এবং এটি প্রতিটি ডিভাইসের জন্য হতে পারে। এই ক্ষেত্রে, এটি সমস্ত অভিযোজিত, তবে এখনও খণ্ডগুলিতে আকস্মিকভাবে পরিবর্তে ক্রমাগত আকার পরিবর্তন করে ... সুতরাং এটিকে অ্যাডাপটিভ বনাম প্রতিক্রিয়াশীল বলা

— অর্থহীনভাবে

Answer 4

.container-fluidআপনি যখন নিজের পৃষ্ঠাটির ভিউপোর্টের আকারের প্রতিটি সামান্য পার্থক্য সহ শেপশিফ্ট করতে চান তখন ব্যবহার করুন।

.containerআপনি যখন নিজের পৃষ্ঠাটি কেবলমাত্র 4 ধরণের আকারের শেপশিফ্ট করতে চান তখন ব্যবহার করুন , যা "ব্রেকপয়েন্টস" হিসাবেও পরিচিত ।

তাদের আকারের সাথে সম্পর্কিত ব্রেকপয়েন্টগুলি হ'ল:

• অতিরিক্ত ছোট: (কেবলমাত্র মোবাইল রেজোলিউশন)
• ছোট: 768px (ট্যাবলেট)
• মাঝারি: 992px (ল্যাপটপ)
• বৃহত্তর: 1200px (ল্যাপটপ / ডেস্কটপ)

Answer 5

আপডেট হয়েছে 2019

মূল পার্থক্য হ'ল containerপ্রতিক্রিয়াশীলভাবে স্কেল, container-fluidসর্বদা থাকে width:100%। সুতরাং মূলের সিএসএস সংজ্ঞাগুলিতে সেগুলি একই দেখা যায়, তবে আপনি যদি আরও তাকান তবে আপনি দেখতে পাবেন যে .containerএটি মিডিয়া প্রশ্নের সাথে আবদ্ধ।

বুটস্ট্র্যাপ 4

container5 প্রস্থ আছে ...

.container {
  width: 100%;
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

বুটস্ট্র্যাপ 3

container4 আকার রয়েছে। xsস্ক্রিনে সম্পূর্ণ প্রস্থ এবং তারপরে নীচের মিডিয়া প্রশ্নের উপর ভিত্তি করে প্রস্থের পরিবর্তিত হয় ..

    @media (min-width: 1200px) {
        .container {
            width: 1170px;
        }
    }
    @media (min-width: 992px) {
        .container {
            width: 970px;
        }
    }
    @media (min-width: 768px) {
        .container {
            width: 750px;
        }
    }

ধারক বনাম ধারক-তরল ডেমো

Comments

এই প্রশ্নের সাথে কোন সম্পর্ক নেই। সুন্দর তথ্য তবে এখানে প্রাসঙ্গিক নয়।

— BeNice

জিম তিনি জিজ্ঞাসা করছিলেন যে মধ্যে .container-fluidএবং এর মধ্যে বিচ্ছিন্নতা কী ছিল .container। এই তথ্যটি আমি খুঁজছিলাম। আপনার তথ্য আকর্ষণীয় তবে, যখন আমি উত্তরটির সন্ধান করতে এসেছিলাম তখন কয়েক মিনিটের জন্য হ্যাকটি আমার থেকে বিভ্রান্ত করে ফেলেছিল। যদি এটি উত্তরগুলির পরে তালিকাভুক্ত করা হয় তবে উত্তরে যে প্রশ্নের উত্তরের উত্তরটি দেওয়া হয়েছিল তা দুর্দান্ত তবে এসও আমাদের নিজস্ব অর্ডারটি সাজানোর পরামর্শ দেয় না বলে মনে হয়। এবং আমার মূল মন্তব্যটি পড়তে আমি যতটা পরিষ্কার হতে পারতাম তা পরিষ্কার ছিল না। তথ্যের জন্য যাইহোক ধন্যবাদ।

— BeNice

সংক্ষেপে, .containerমিডিয়া ক্যোয়ারী অনুসারে প্রস্থ .container-fluidপরিবর্তন হয় এবং রিয়েল টাইমে প্রস্থের পরিবর্তন (ভিউ-পোর্ট প্রস্থ অনুসারে)

— হাসান তারেক

Answer 6

.containerসর্বাধিক প্রস্থের পিক্সেল মান রয়েছে, যেখানে .container-fluidসর্বোচ্চ-প্রস্থ 100%।

.container-fluid আপনি যে কোনও পরিমাণ দ্বারা আপনার উইন্ডো / ব্রাউজারের প্রস্থ পরিবর্তন করার সাথে ক্রমাগত আকার পরিবর্তন করে।

.container মিডিয়া কোয়েরি দ্বারা নিয়ন্ত্রিত কয়েকটি নির্দিষ্ট প্রস্থের অংশগুলিতে আকার পরিবর্তন করে (প্রযুক্তিগতভাবে আমরা এটির "নির্দিষ্ট প্রস্থ" বলতে পারি কারণ পিক্সেলের মানগুলি নির্দিষ্ট করা হয়, তবে আপনি যদি সেখানে থামেন, লোকেরা ধারণা করতে পারে যে এটি আকার পরিবর্তন করতে পারে না - যেমন প্রতিক্রিয়াশীল নয়) ।)

Comments

সামগ্রিক ধারক-তরল ভালো বলে মনে হচ্ছে? মোবাইল ফোনে আরও প্রতিক্রিয়াশীল যা আজকাল বিশাল জিনিস ...

Answer 7

ডিসপ্লে দৃষ্টিকোণ থেকে .containerব্যবহারকারীরা যা দেখছেন তার উপর আপনাকে আরও নিয়ন্ত্রণ প্রদান করে এবং ব্যবহারকারীরা আপনার প্রদর্শন হিসাবে কেবলমাত্র 4 টি পরিবর্তন (বুটস্ট্র্যাপ 5 এর ক্ষেত্রে 5) থাকায় ব্যবহারকারীরা কী দেখতে পাবে তা আরও সহজ করে তোলে কারণ আকারগুলি সম্পর্কিত গ্রিড আকার হিসাবে একই। যেমন .col-xs, .col-sm, .col, এবং .col-lg।

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

ব্যবহার করার সময় যখন .container-fluidউইথএইচটি ভিউপোর্টের প্রস্থের সাথে সম্পর্কিত ডিসপ্লেটি গতিশীল, তাই ভেরিয়েশনগুলি অনেক বেশি এবং খুব বড় স্ক্রিন বা অস্বাভাবিক স্ক্রিন প্রস্থ সহ ব্যবহারকারীরা এমন ফলাফল দেখতে পাবেন যা আপনি প্রত্যাশা করেননি।

Answer 8

আপনি ঠিক ঠিক 3.1। কনটেইনার-ফ্লুয়েড এবং। কনটেনারটি একই এবং কনটেইনারটির মতো কাজ করেন তবে আপনি যদি এগুলি সরিয়ে থাকেন তবে এটি। কনটেনার-তরল (সম্পূর্ণ প্রস্থ) এর মতো কাজ করে। তারা "মোবাইল ফার্স্ট অ্যাপ্রোচ" এর জন্য কনটেনার-তরল সরিয়ে নিয়েছিল, তবে এখন এটি 3.3.4 এ ফিরে এসেছে (এবং তারা আলাদাভাবে কাজ করবে)

সর্বশেষতম বুটস্ট্র্যাপ পেতে দয়া করে এই পোস্টটি স্ট্যাকওভারফ্লোতে পড়ুন এটি এটি পরীক্ষা করে দেখতে সহায়তা করবে ।