টুইটার বুটস্ট্র্যাপের উপর ভিত্তি করে প্রতিক্রিয়াশীল ডিজাইনে তরল বা স্থির গ্রিড সিস্টেম

399

টুইটার বুটস্ট্র্যাপ গ্রিডের বিভিন্ন বিকল্প এবং তারা কীভাবে একসাথে যায় সে সম্পর্কে আমি বিভ্রান্ত হয়ে পড়ছি ।

শুরুতে, আপনি একটি সাধারণ স্থির করতে পারেন container, বা এ container-fluid।

তারপরে যে কোনও একটি সাধারণ rowবা তরল সারি, অন্তর্ভুক্ত করতে পারে row-fluid। এটি হল, আপনি একটি তরল সারি সহ একটি ধারক ধারক, বা একটি ধারক-তরল ... একটি নির্দিষ্ট সারি সহ থাকতে পারেন?

তারপরে, আপনি 'প্রতিক্রিয়াশীল' মিডিয়া প্রশ্নগুলি অন্তর্ভুক্ত করতে পারেন, না not

এই বিষয়গুলি কীভাবে ইন্টারঅ্যাক্ট করে তা নিয়ে আমি বিভ্রান্ত হয়ে পড়ছি। তবে আসুন একটি স্পষ্ট উদাহরণ দিয়ে শুরু করা যাক।

উপর উদাহরণ পৃষ্ঠা নিজেই সেখানে কি উভয় একটি একটি উদাহরণ হিসাবে উপস্থাপন করছে সংশোধন গ্রিড এবং একটি তরল গ্রিড

তবে, আমার ব্রাউজারে, সেই উদাহরণ পৃষ্ঠায় নিজেই - উভয় গ্রিড একইরকম আচরণ করে। সম্ভবত কারণ উদাহরণ পৃষ্ঠাটি optionচ্ছিক প্রতিক্রিয়াশীল মিডিয়া ক্যোয়ারী ব্যবহার করে? ইন উভয় গ্রিড উদাহরণ, যদি আমি ধীরে ধীরে আমার ব্রাউজার উইন্ডোতে সংকীর্ণ করা শুরু করেন, গ্রিড উপাদান না না ধীরে ধীরে সংকীর্ণ পেতে - একবার একটি নির্দিষ্ট (প্রতিক্রিয়াশীল) সীমানা প্রস্থ উপনিত, তারা আরও সীমানা প্রস্থ এ ছোট সাইজ স্ন্যাপ করা, এবং আবার। তবে উভয় সাধারণ 'স্থির' উদাহরণ এবং 'তরল' উদাহরণ এখানে ঠিক একই রকম আচরণ করে - তাই হেকের পার্থক্য কী?

— jrochkind
সূত্র

6

সম্ভবত এই তরল বিন্যাস শৈলী একটি ভাল উদাহরণ?

— কোডি গ্রে

442

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

যথাযথ নির্দিষ্ট প্রস্থের উদাহরণ এখানে । সঠিক তরল প্রস্থ উদাহরণ এখানে ।

স্থির প্রস্থের উদাহরণটি পর্যবেক্ষণ করার সময়, যখন আপনার ব্রাউজারটি 960px এর চেয়ে বেশি প্রশস্ত হয় তখন আপনাকে সামগ্রীগুলি আকার পরিবর্তন করতে দেখা উচিত নয়। এটি পৃষ্ঠার সর্বাধিক (স্থির) প্রস্থ। একটি নির্দিষ্ট-প্রস্থের নকশায় মিডিয়া প্রশ্নগুলি নির্দিষ্ট শৈলীর জন্য সর্বনিম্ন প্রস্থকে মনোনীত করবে। আপনি যখন নিজের ব্রাউজার উইন্ডোটি সঙ্কুচিত করবেন এবং ভিন্ন আকারে বিন্যাসের স্ন্যাপটি দেখবেন তখন আপনি এটিকে অ্যাকশনে দেখবেন।

বিপরীতে, তরল প্রস্থের লেআউটটি সর্বদা আপনার ব্রাউজার উইন্ডোটিকে ফিট করার জন্য প্রসারিত করবে , যতই প্রশস্ত হোক না কেন। শৈলীগুলি পরিবর্তিত হলে মিডিয়া অনুসন্ধানগুলি সূচিত করে তবে ধারকগুলির প্রস্থটি সর্বদা আপনার ব্রাউজার উইন্ডোটির একটি শতাংশ (স্থির সংখ্যক পিক্সেলের পরিবর্তে) are

'প্রতিক্রিয়াশীল' মিডিয়া ক্যোয়ারীগুলি সমস্ত প্রস্তুত রয়েছে ready আপনি কেবলমাত্র আপনার পৃষ্ঠার জন্য একটি নির্দিষ্ট প্রস্থ বা তরল প্রস্থের লেআউট ব্যবহার করতে চান কিনা তা সিদ্ধান্ত নেওয়া দরকার।

পূর্বে, বুটস্ট্র্যাপ 2-এ আপনাকে row-fluidএকটি তরল ধারক এবং rowএকটি স্থির ধারকটির ভিতরে ব্যবহার করতে হয়েছিল । বুটস্ট্র্যাপ 3 প্রবর্তনের সাথে সাথে row-fluidসরানো হয়েছে, এটি আর ব্যবহার করবেন না ।

সম্পাদনা : মতামত অনুসারে, কিছু জেএসফিডেল :

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

— eterps
সূত্র

1

হুম, ঠিক আছে, ডক্সটি আমার কাছে মনে হয়েছিল যে আপনি মিশ্রিত করতে পারেন এবং তরল মিশ্রিত করতে পারেন এবং স্থির করতে পারেন, তবে আমার ধারণা যে উন্নত ব্যবহারের জন্য আমি প্রস্তুত নই। :) আমি এখনও বুঝতে পারি না যে responsiveযথাক্রমে স্থির এবং তরল উভয় কীভাবে পরিবর্তন হয় - আপনি স্থির এবং তরল উভয়ের সাথে প্রতিক্রিয়াশীল (বা না) ব্যবহার করতে পারেন, তাই না? আপনি কীভাবে তাদের প্রত্যেককে প্রতিক্রিয়াশীল প্রতিক্রিয়া ব্যাখ্যা করতে পারেন?

— জ্রোকাইন্ড ২

8

আমার কাছে বিভ্রান্তিকর বিষয়টি রয়ে গেছে যে 'যথাযথ নির্দিষ্ট প্রস্থ' উদাহরণ ব্রাউজার উইন্ডো পরিবর্তন হিসাবে আকারের কলামগুলিকে পরিবর্তন করে (কারণ এটি প্রতিক্রিয়াশীল?) এবং ঠিক তরল প্রস্থের যথাযথ উদাহরণও রয়েছে। তবে আমি অনুমান করি যে তরল প্রস্থের উদাহরণটি এটি অবিচ্ছিন্নভাবে করে এবং স্থির প্রস্থের প্রতিক্রিয়াশীল উদাহরণটি এটি পৃথক আকারের লাফের পাশাপাশি সর্বোচ্চ আকারে পৌঁছায়? এইটাই কি সেইটা? তরল প্রতিক্রিয়াশীল বনাম প্রতিক্রিয়াশীল সম্পর্কে কীভাবে?

— জ্রোচাইন্ড

16

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

— eterps

3

এবং আপনি যখন তরল-প্রস্থের বিন্যাসটি দেখছেন, কলামের আকারগুলি সর্বদা আপনার ব্রাউজারের প্রস্থের সাথে মেলে বদলে যাবে। নির্দিষ্ট-প্রস্থের লেআউটের মতো মিডিয়া ক্যোয়ারী অনুসারে লেআউটটি নিজেই পরিবর্তন হবে।

— eterps

12

সবচেয়ে গুরুত্বপূর্ণ বিষয়টি মনে রাখতে হবে তা হ'ল স্থির প্রস্থ = পিক্সেল এবং তরল প্রস্থ = শতাংশ। প্রতিক্রিয়াটি বুটস্ট্রেপ-রেসপন্টিকএসএসএস-এ সংজ্ঞায়িত সমস্ত অভিনব সিএসএস বিধি থেকে আসে এবং এই নিয়মগুলি উভয় বিন্যাসে প্রয়োগ হয়।

— eterps

21

আকর্ষণীয় আলোচনা। আমি নিজেও এই প্রশ্নটি জিজ্ঞাসা করছিলাম। তরল এবং স্থির মধ্যে প্রধান পার্থক্যটি কেবলমাত্র হ'ল ওয়েবসাইটের পুরো বিন্যাসের (ভিউপোর্ট) শর্তে স্থির বিন্যাসের একটি নির্দিষ্ট প্রস্থ রয়েছে। আপনার যদি 960px প্রস্থের ভিউপোর্ট হয় প্রতিটি কলমের একটি নির্দিষ্ট প্রস্থ থাকে যা কখনই পরিবর্তন হবে না।

তরল বিন্যাসটি ভিন্ন আচরণ করে। কল্পনা করুন যে আপনি আপনার প্রধান বিন্যাসের প্রস্থকে 100% প্রস্থে সেট করেছেন। এখন প্রতিটি কলাম কেবল তার আপেক্ষিক আকারে (অর্থাৎ 25%) গণনা করা হবে এবং ব্রাউজার হিসাবে প্রসারিতকে পুনরায় আকার দেওয়া হবে। সুতরাং আপনার বিন্যাসের ভিত্তিতে আপনি কীভাবে আপনার বিন্যাসটি আচরণ করে তা নির্বাচন করতে পারেন।

ফ্লুয়েড বনাম ফ্লেক্স সম্পর্কে এখানে একটি ভাল নিবন্ধ ।

— Lido আপনার
সূত্র

7

উত্স - http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-what-the-াইট-one - for - you/

পেশাদাররা

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

কনস

একটি নির্দিষ্ট-প্রস্থের বিন্যাস বৃহত্তর স্ক্রিন রেজোলিউশন সহ ব্যবহারকারীদের জন্য অতিরিক্ত সাদা স্থান তৈরি করতে পারে, ফলে "divineশ্বরিক অনুপাত", "তৃতীয়গুলির নিয়ম" সামগ্রিক ভারসাম্য এবং অন্যান্য নকশার নীতিগুলি বিপর্যস্ত করে।
ছোট পর্দার রেজোলিউশনের স্থির লেআউটের প্রস্থের উপর নির্ভর করে একটি অনুভূমিক স্ক্রোল বারের প্রয়োজন হতে পারে।
বিবিধ রেজোলিউশনের সাথে সমন্বিত করার জন্য বিজোড় টেক্সচার, নিদর্শন এবং চিত্রের ধারাবাহিকতা প্রয়োজন।
স্থিত-প্রস্থের লেআউটগুলির ব্যবহারের ক্ষেত্রে আসে সাধারণত সামগ্রিক স্কোর কম।

— থিলঙ্কা দে সিলভা
সূত্র

6

বুটস্ট্র্যাপ 3 এ তরল বিন্যাস।

বুস্ট্র্যাপ 2 এর বিপরীতে, বুটস্ট্র্যাপ 3 এ তরল ধারক তৈরি করতে একটি কনটেনার-ফ্লুয়েড মিক্সিন নেই। .Container একটি নির্দিষ্ট প্রস্থের প্রতিক্রিয়াশীল গ্রিড বিন্যাস। একটি বড় স্ক্রিনে, কারও ওয়েব পৃষ্ঠার সামগ্রীর উভয় পক্ষে অতিরিক্ত সাদা স্পেস রয়েছে।

container-fluid বুটস্ট্র্যাপ ৩.১-এ আবার যুক্ত করা হয়েছে

একটি তরল গ্রিড বিন্যাস সমস্ত পর্দার প্রস্থ ব্যবহার করে এবং বড় স্ক্রিনে আরও ভাল কাজ করে। দেখা যাচ্ছে যে বুটস্ট্র্যাপ 3 মিক্সিন ব্যবহার করে তরল গ্রিড লেআউট তৈরি করা সহজ। নিম্নলিখিত লাইনটি একটি তরল প্রতিক্রিয়াশীল গ্রিড বিন্যাস তৈরি করে:

.container-সংশোধন;

। কনটেনার-ফিক্সড মিক্সিনটি সামগ্রীটিকে স্ক্রিনের কেন্দ্রস্থলে সেট করে এবং প্যাডিংগুলি যুক্ত করে। এটি কোনও নির্দিষ্ট পৃষ্ঠার প্রস্থ নির্দিষ্ট করে না।

আরেকটি পদ্ধতি হ'ল এরিক ফুলের সিএসএস স্টাইল ব্যবহার করা

.my-fluid-container {
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
}

— ইং
সূত্র

2

আমি বুঝতে পারছি না কেন লোকেরা বলে যে 'কনটেইনার-ফ্লুয়েড' বুটস্ট্র্যাপ 3 তে সমর্থিত নয়, যদিও এটি রয়েছে। আমি কেবল ডাবল চেক করেছি এবং বুটস্ট্র্যাপ ৩.১.০ এ এটি পরিষ্কারভাবে সংজ্ঞায়িত করেছি।

— বার্ট

10

এর কারণ এটি 3 এ অপসারণ করা হয়েছিল আবার 3.1 এ যুক্ত হয়েছিল ।

— স্টিভ ক্লিস্টার্স

-2

আপনি এটি ব্যবহার করতে পারেন - https://github.com/chanakyachatterjee/JSLightGrid ..JSLightGrid। একবার দেখুন .. আমি এটি সত্যিই খুব দরকারী। ভাল পারফরম্যান্স, খুব হালকা ওজন, সমস্ত গুরুত্বপূর্ণ ব্রাউজার বান্ধব এবং নিজেই তরল, যাতে আপনার গ্রিডের জন্য সত্যিকারের বুটস্ট্র্যাপের প্রয়োজন হয় না।

— কৌতূহলী ব্যক্তি
সূত্র

1

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

— piet.t

আমি সম্মত হই .. তবে এটি উত্তরের কোনও রেফারেন্স নয়, এটি প্লাগইনের একটি লিঙ্ক, যেখানে ফাইলগুলি ডাউনলোড করা যেতে পারে, আমি অনুমান করি যে আমি এখানে উত্তর দিয়ে ফাইলগুলি সংযুক্ত করতে পারি না ..

— উত্সাহী