ভারা

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

বুটস্ট্র্যাপের অংশ হিসেবে প্রদত্ত ডিফল্ট গ্রিড সিস্টেম হল একটি 940px-প্রশস্ত, 12-কলামের গ্রিড ।

এটিতে বিভিন্ন ডিভাইস এবং রেজোলিউশনের জন্য চারটি প্রতিক্রিয়াশীল বৈচিত্র রয়েছে: ফোন, ট্যাবলেট পোর্ট্রেট, টেবিল ল্যান্ডস্কেপ এবং ছোট ডেস্কটপ এবং বড় ওয়াইডস্ক্রিন ডেস্কটপ।

<div ক্লাস = "সারি" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

এখানে দেখানো হিসাবে, দুটি "কলাম" দিয়ে একটি মৌলিক লেআউট তৈরি করা যেতে পারে, প্রতিটি 12টি ভিত্তিগত কলামের একটি সংখ্যা বিস্তৃত করে যা আমরা আমাদের গ্রিড সিস্টেমের অংশ হিসাবে সংজ্ঞায়িত করেছি।

অফসেটিং কলাম

4 অফসেট 4

3 অফসেট 3

8 অফসেট 4

<div ক্লাস = "সারি" > 
  <div class = "span4" > ... </div> 
  <div class = "span4 offset4" > ... </div> 
</div>

নেস্টিং কলাম

বুটস্ট্র্যাপে স্ট্যাটিক (অ-তরল) গ্রিড সিস্টেমের সাথে, বাসা বাঁধা সহজ। আপনার কন্টেন্ট নেস্ট করতে, বিদ্যমান কলামের মধ্যে শুধু একটি নতুন .rowএবং কলামের সেট যোগ করুন ।.span*.span*

উদাহরণ

নেস্টেড সারিগুলিতে কলামগুলির একটি সেট অন্তর্ভুক্ত করা উচিত যা এটির প্যারেন্টের কলামগুলির সংখ্যা পর্যন্ত যোগ করে৷ উদাহরণস্বরূপ, দুটি নেস্টেড .span3কলাম একটি এর মধ্যে স্থাপন করা উচিত .span6।

কলামের লেভেল 1

স্তর 2

<div ক্লাস = "সারি" > 
  <div class = "span12" > 
    কলামের লেভেল 1
    <div ক্লাস = "সারি" > 
      <div class = "span6" > লেভেল 2 </div> 
      <div class = "span6" > লেভেল 2 </div> 
    </div>
  </div>
</div>

তরল কলাম

শতাংশ, পিক্সেল নয়

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

তরল সারি

.rowসহজভাবে পরিবর্তন করে যেকোন সারি তরল তৈরি করুন .row-fluid। কলামগুলি ঠিক একই রকম থাকে, এটিকে স্থির এবং তরল লেআউটগুলির মধ্যে ফ্লিপ করা খুব সহজ করে তোলে৷

মার্কআপ

<div ক্লাস = "সারি-তরল" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

তরল বাসা বাঁধে

তরল গ্রিডের সাথে নেস্টিং একটু আলাদা: নেস্টেড কলামের সংখ্যা প্যারেন্টের সাথে মেলে না। পরিবর্তে, আপনার কলামগুলি প্রতিটি স্তরে পুনরায় সেট করা হয়েছে কারণ প্রতিটি সারি মূল কলামের 100% দখল করে৷

তরল 12

তরল 6

<div ক্লাস = "সারি-তরল" > 
  <div class = "span12" > 
    কলামের লেভেল 1
    <div ক্লাস = "সারি-তরল" > 
      <div class = "span6" > লেভেল 2 </div> 
      <div class = "span6" > লেভেল 2 </div> 
    </div>
  </div>
</div>

পরিবর্তনশীল	ডিফল্ট মান	বর্ণনা
`@gridColumns`	12	কলামের সংখ্যা
`@gridColumnWidth`	60px	প্রতিটি কলামের প্রস্থ
`@gridGutterWidth`	20px	কলামের মধ্যে নেতিবাচক স্থান
`@siteWidth`	সমস্ত কলাম এবং নর্দমার গণনা করা যোগফল	`.container-fixed()`মিক্সিনের প্রস্থ সেট করতে কলাম এবং নর্দমার সংখ্যা গণনা করে

কম মধ্যে ভেরিয়েবল

বুটস্ট্র্যাপে অন্তর্নির্মিত ডিফল্ট 940px গ্রিড সিস্টেম কাস্টমাইজ করার জন্য কয়েকটি ভেরিয়েবল রয়েছে, উপরে নথিভুক্ত করা হয়েছে। গ্রিডের জন্য সমস্ত ভেরিয়েবল variables.less এ সংরক্ষণ করা হয়।

কিভাবে কাস্টমাইজ করা যায়

গ্রিড পরিবর্তন করা মানে তিনটি @grid*ভেরিয়েবল পরিবর্তন করা এবং বুটস্ট্র্যাপ পুনরায় কম্পাইল করা। variables.less এ গ্রিড ভেরিয়েবল পরিবর্তন করুন এবং পুনরায় কম্পাইল করার জন্য নথিভুক্ত চারটি উপায়ের একটি ব্যবহার করুন । আপনি যদি আরও কলাম যোগ করেন, তাহলে grid.less-এ যাদের জন্য CSS যোগ করতে ভুলবেন না।

প্রতিক্রিয়াশীল থাকা

গ্রিডের কাস্টমাইজেশন শুধুমাত্র ডিফল্ট স্তরে কাজ করে, 940px গ্রিড। বুটস্ট্র্যাপের প্রতিক্রিয়াশীল দিকগুলি বজায় রাখার জন্য, আপনাকে প্রতিক্রিয়াশীল.লেসে গ্রিডগুলিও কাস্টমাইজ করতে হবে।

স্থির বিন্যাস

ডিফল্ট এবং সহজ 940px-প্রশস্ত, কেন্দ্রীভূত বিন্যাস শুধুমাত্র একটি একক দ্বারা প্রদত্ত যেকোন ওয়েবসাইট বা পৃষ্ঠার জন্য <div class="container">।

<body>
  <div class = "container" > 
    ...
  </div>
</body>

তরল লেআউট

<div class="container-fluid">নমনীয় পৃষ্ঠা গঠন, সর্বনিম্ন- এবং সর্বোচ্চ-প্রস্থ, এবং একটি বাম দিকের সাইডবার দেয়। এটি অ্যাপ এবং ডক্সের জন্য দুর্দান্ত৷

<div class = "container-fluid" > 
  <div ক্লাস = "সারি-তরল" > 
    <div class = "span2" > 
      <!--সাইডবার সামগ্রী-->
    </div>
    <div class = "span10" > 
      <!--শারীরিক বিষয়বস্তু-->
    </div>
  </div>
</div>

সমর্থিত ডিভাইসের

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

লেবেল	লেআউট প্রস্থ	কলাম প্রস্থ	নর্দমার প্রস্থ
স্মার্টফোন	480px এবং নীচে	তরল কলাম, কোন নির্দিষ্ট প্রস্থ নেই
পোর্ট্রেট ট্যাবলেট	480px থেকে 768px	তরল কলাম, কোন নির্দিষ্ট প্রস্থ নেই
ল্যান্ডস্কেপ ট্যাবলেট	768px থেকে 979px	42px	20px
ডিফল্ট	980px এবং তার বেশি	60px	20px
বড় ডিসপ্লে	1210px এবং তার বেশি	70px	30px

মেটা ট্যাগ প্রয়োজন

ডিভাইসগুলি সঠিকভাবে প্রতিক্রিয়াশীল পৃষ্ঠাগুলি প্রদর্শন করে তা নিশ্চিত করতে, ভিউপোর্ট মেটা ট্যাগ অন্তর্ভুক্ত করুন।

<মেটা নাম = "ভিউপোর্ট" সামগ্রী = "প্রস্থ=ডিভাইস-প্রস্থ, প্রাথমিক-স্কেল=1.0" >

তারা কি করে

মিডিয়া ক্যোয়ারীগুলি বেশ কয়েকটি শর্তের উপর ভিত্তি করে কাস্টম CSS-এর জন্য অনুমতি দেয়—অনুপাত, প্রস্থ, প্রদর্শনের ধরন ইত্যাদি—কিন্তু সাধারণত চারপাশে min-widthএবং ফোকাস করে max-width।

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

মিডিয়া প্রশ্ন ব্যবহার করে

বুটস্ট্র্যাপ স্বয়ংক্রিয়ভাবে এই মিডিয়া প্রশ্নগুলিকে অন্তর্ভুক্ত করে না, তবে সেগুলি বোঝা এবং যোগ করা খুব সহজ এবং ন্যূনতম সেটআপের প্রয়োজন৷ বুটস্ট্র্যাপের প্রতিক্রিয়াশীল বৈশিষ্ট্যগুলি অন্তর্ভুক্ত করার জন্য আপনার কাছে কয়েকটি বিকল্প রয়েছে:

কম্পাইল করা প্রতিক্রিয়াশীল সংস্করণ, bootstrap-responsive.css ব্যবহার করুন
@import যোগ করুন "responsive.less" এবং বুটস্ট্র্যাপ পুনরায় কম্পাইল করুন
একটি পৃথক ফাইল হিসাবে responsive.less পরিবর্তন এবং পুনরায় কম্পাইল করুন

কেন শুধু এটা অন্তর্ভুক্ত না? সত্য বলা, সবকিছু প্রতিক্রিয়াশীল হতে হবে না. এই বৈশিষ্ট্যটি সরাতে বিকাশকারীদের উত্সাহিত করার পরিবর্তে, আমরা এটিকে সক্ষম করা সবচেয়ে ভাল মনে করি।

  // ল্যান্ডস্কেপ ফোন এবং ডাউন
  @ মিডিয়া ( সর্বোচ্চ - প্রস্থ : 480px ) { ... }     
 
  // ল্যান্ডস্কেপ ফোন থেকে প্রতিকৃতি ট্যাবলেট
  @মিডিয়া ( সর্বোচ্চ - প্রস্থ : 768px ) { ... }     
 
  // ল্যান্ডস্কেপ এবং ডেস্কটপে প্রতিকৃতি ট্যাবলেট
  @মিডিয়া ( ন্যূনতম - প্রস্থ : 768px ) এবং ( সর্বোচ্চ - প্রস্থ : 980px ) { ... }        
 
  // বড় ডেস্কটপ
  @মিডিয়া ( মিনিট - প্রস্থ : 1200px ) { .. }