বুটষ্ট্ৰেপৰ অংশ হিচাপে প্ৰদান কৰা অবিকল্পিত গ্ৰীড ব্যৱস্থাপ্ৰণালী এটা 940px-বহল, 12-স্তম্ভ গ্ৰীড ।

ইয়াৰ বিভিন্ন ডিভাইচ আৰু ৰিজ'লিউচনৰ বাবে চাৰিটা প্ৰতিক্ৰিয়াশীল ভিন্নতাও আছে: ফোন, টেবলেট প'ৰ্ট্ৰেইট, টেবুল লেণ্ডস্কেপ আৰু সৰু ডেস্কটপ, আৰু ডাঙৰ ৱাইডস্ক্ৰীণ ডেস্কটপ।

<div শ্ৰেণী = "শাৰী" > 
  <div শ্ৰেণী = "span4" > ... </div> 
  <div শ্ৰেণী = "span8" > ... </div> 
</div>

ইয়াত দেখুওৱাৰ দৰে, দুটা "স্তম্ভ"ৰ সৈতে এটা মূল পৰিকল্পনা সৃষ্টি কৰিব পাৰি, প্ৰত্যেকেই আমি আমাৰ গ্ৰীড ব্যৱস্থাৰ অংশ হিচাপে সংজ্ঞায়িত কৰা ১২টা মূল স্তম্ভৰ এটা সংখ্যাক সামৰি লৈছে।

বুটষ্ট্ৰেপত স্থিতিশীল (অ-তৰল) গ্ৰীড ব্যৱস্থাপ্ৰণালীৰ সৈতে, নেষ্টিং সহজ। আপোনাৰ বিষয়বস্তু নেষ্ট কৰিবলে, মাত্ৰ এটা বৰ্ত্তমানৰ স্তম্ভৰ ভিতৰত এটা নতুন .rowআৰু স্তম্ভৰ গোট যোগ কৰক ।.span*.span*

উদাহৰণ

নেষ্টেড শাৰীসমূহে স্তম্ভসমূহৰ এটা গোট অন্তৰ্ভুক্ত কৰিব লাগে যি ইয়াৰ মূলৰ স্তম্ভসমূহৰ সংখ্যালৈ যোগ কৰে। উদাহৰণস্বৰূপ, দুটা নেষ্টেড .span3স্তম্ভ এটা ৰ ভিতৰত ৰাখিব লাগে .span6।

<div শ্ৰেণী = "শাৰী" > 
  <div শ্ৰেণী = "span12" > 
    স্তম্ভৰ স্তৰ ১
    <div শ্ৰেণী = "শাৰী" > 
      <div class = "span6" > স্তৰ ২ </div> 
      <div class = "span6" > স্তৰ ২ </div> 
    </div>
  </div>
</div>

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

তৰল গ্ৰীড ব্যৱস্থাই স্থিৰ পিক্সেলৰ পৰিৱৰ্তে স্তম্ভৰ প্ৰস্থৰ বাবে শতাংশ ব্যৱহাৰ কৰে। ইয়াৰ আমাৰ স্থিৰ গ্ৰীড ব্যৱস্থাপ্ৰণালীৰ দৰে একে প্ৰতিক্ৰিয়াশীল ভিন্নতাও আছে, চাবি পৰ্দাৰ ৰিজ'লিউচন আৰু ডিভাইচসমূহৰ বাবে সঠিক অনুপাত নিশ্চিত কৰে।

তৰল শাৰী

যিকোনো শাৰী তৰল কৰক .rowকেৱল .row-fluid. স্তম্ভবোৰ হুবহু একেই থাকে, যাৰ ফলত ফিক্সড আৰু ফ্লুইড লেআউটৰ মাজত ফ্লিপ কৰাটো ছুপাৰ ষ্ট্ৰেইটফৰৱাৰ্ড হৈ পৰে।

মাৰ্কআপ

<div class = "শাৰী-তৰল" > 
  <div শ্ৰেণী = "span4" > ... </div> 
  <div শ্ৰেণী = "span8" > ... </div> 
</div>

তৰল গ্ৰীডৰ সৈতে নেষ্টিং কৰাটো অলপ বেলেগ: নেষ্ট কৰা স্তম্ভৰ সংখ্যা অভিভাৱকৰ সৈতে মিল থকাৰ প্ৰয়োজন নাই। ইয়াৰ পৰিবৰ্তে, আপোনাৰ স্তম্ভসমূহ প্ৰতিটো স্তৰত পুনৰায় সেট কৰা হয় কাৰণ প্ৰতিটো শাৰীই মূল স্তম্ভৰ ১০০% লয়।

<div class = "শাৰী-তৰল" > 
  <div শ্ৰেণী = "span12" > 
    স্তম্ভৰ স্তৰ ১
    <div class = "শাৰী-তৰল" > 
      <div class = "span6" > স্তৰ ২ </div> 
      <div class = "span6" > স্তৰ ২ </div> 
    </div>
  </div>
</div>

LESS ত চলকসমূহ

বুটষ্ট্ৰেপত নিৰ্মিত অবিকল্পিত 940px গ্ৰীড ব্যৱস্থাপ্ৰণালী স্বনিৰ্বাচিত কৰাৰ বাবে এটা মুষ্টিমেয় চলক আছে, ওপৰত নথিভুক্ত কৰা হৈছে । গ্ৰীডৰ বাবে সকলো চলক variables.less ত সংৰক্ষণ কৰা হয়।

কেনেকৈ কাষ্টমাইজ কৰিব

গ্ৰীড পৰিবৰ্তন কৰাৰ অৰ্থ হৈছে তিনিটা @grid*চলক সলনি কৰা আৰু বুটষ্ট্ৰেপ পুনৰায় কম্পাইলিং কৰা । grid চলকসমূহ variables.less ত সলনি কৰক আৰু পুনৰ সংকলন কৰিবলে নথিভুক্ত চাৰিটা উপায়ৰ এটা ব্যৱহাৰ কৰক । যদি আপুনি অধিক স্তম্ভ যোগ কৰিছে, grid.less ত থকাসকলৰ বাবে CSS যোগ কৰাটো নিশ্চিত কৰক।

প্ৰতিক্ৰিয়াশীল হৈ থকা

গ্ৰীডৰ স্বনিৰ্বাচনে কেৱল অবিকল্পিত স্তৰত কাম কৰে, 940px গ্ৰীডত। Bootstrap ৰ প্ৰতিক্ৰিয়াশীল দিশসমূহ ৰক্ষণাবেক্ষণ কৰিবলে, আপুনি responsive.less ত গ্ৰীডসমূহো স্বনিৰ্বাচিত কৰিব লাগিব।

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

এটাই প্ৰদান কৰা প্ৰায় যিকোনো ৱেবছাইট বা পৃষ্ঠাৰ বাবে অবিকল্পিত আৰু সহজ 940px-ব্যাপী, কেন্দ্ৰীভূত বিন্যাস <div class="container">।

<শৰীৰ>
  <div class = "পাত্ৰ" > 
    ...
  </div>
</body>

তৰল পদাৰ্থৰ বিন্যাস

<div class="container-fluid">নমনীয় পৃষ্ঠা গঠন, নূন্যতম- আৰু সৰ্বোচ্চ-প্ৰস্থ, আৰু এটা বাওঁ-হাতৰ চাইডবাৰ দিয়ে। এপ আৰু ডক্সৰ বাবে ই অতি উত্তম।

<div class = "পাত্ৰ-তৰল" > 
  <div class = "শাৰী-তৰল" > 
    <div শ্ৰেণী = "span2" > 
      <!--চাইডবাৰৰ বিষয়বস্তু-->
    </div>
    <div শ্ৰেণী = "span10" > 
      <!--শৰীৰৰ বিষয়বস্তু-->
    </div>
  </div>
</div>

সমৰ্থিত ডিভাইচসমূহ

Bootstrap এ এটা নথিপত্ৰত এটা মুষ্টিমেয় মাধ্যম প্ৰশ্ন সমৰ্থন কৰে আপোনাৰ প্ৰকল্পসমূহক বিভিন্ন ডিভাইচসমূহ আৰু পৰ্দ্দা ৰিজোলিউচনসমূহত অধিক উপযুক্ত কৰাত সহায় কৰিবলে। ইয়াত কি কি অন্তৰ্ভুক্ত কৰা হৈছে:

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

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

<meta name = "viewport" content = "প্ৰস্থ=ডিভাইচ-প্ৰস্থ, প্ৰাৰম্ভিক-মাপকাঠি=1.0" >  

তেওঁলোকে কি কৰে

মিডিয়া প্ৰশ্নসমূহে বহুতো চৰ্তৰ ওপৰত ভিত্তি কৰি স্বনিৰ্বাচিত CSS ৰ অনুমতি দিয়ে—অনুপাত, প্ৰস্থ, প্ৰদৰ্শন ধৰণ, ইত্যাদি—কিন্তু সাধাৰণতে min-widthআৰু ৰ চাৰিওফালে ফোকাচ কৰে max-width।

• আমাৰ গ্ৰীডত স্তম্ভৰ প্ৰস্থ পৰিবৰ্তন কৰক
• য'তেই প্ৰয়োজন হয় তাতেই ভাঁহি থকাৰ পৰিৱৰ্তে উপাদানসমূহ ষ্টেক কৰক
• ডিভাইচসমূহৰ বাবে অধিক উপযুক্ত হ'বলৈ শিৰোনাম আৰু লিখনীৰ আকাৰ সলনি কৰক

বুটষ্ট্ৰেপে স্বয়ংক্ৰিয়ভাৱে এই মাধ্যম প্ৰশ্নসমূহ অন্তৰ্ভুক্ত নকৰে, কিন্তু সিহতক বুজা আৰু যোগ কৰাটো অতি সহজ আৰু নূন্যতম প্ৰতিষ্ঠাৰ প্ৰয়োজন । Bootstrap ৰ প্ৰতিক্ৰিয়াশীল বৈশিষ্ট্যসমূহ অন্তৰ্ভুক্ত কৰাৰ বাবে আপোনাৰ ওচৰত কেইটামান বিকল্প আছে:

1. কমপাইল কৰা প্ৰতিক্ৰিয়াশীল সংস্কৰণ, bootstrap-responsive.css ব্যৱহাৰ কৰক
2. @import "responsive.less" যোগ কৰক আৰু বুটষ্ট্ৰেপ পুনৰায় কম্পাইল কৰক
3. responsive.less এটা পৃথক নথিপত্ৰ হিচাপে পৰিবৰ্তন আৰু পুনৰ সংকলন কৰক

কেৱল অন্তৰ্ভুক্ত নকৰি কিয়? সঁচা কথা ক’বলৈ গ’লে সকলো কথাই সঁহাৰি জনোৱাৰ প্ৰয়োজন নাই। ডেভেলপাৰসকলক এই বৈশিষ্ট্য আঁতৰাবলৈ উৎসাহিত কৰাৰ পৰিৱৰ্তে, আমি ইয়াক সামৰ্থবান কৰাটো সৰ্বোত্তম বুলি ভাবো।

  // লেণ্ডস্কেপ ফোন আৰু তললৈ
  @media ( সৰ্বোচ্চ - প্ৰস্থ : ৪৮০px ) { ... }     
 
  // টেবলেট প'ৰ্ট্ৰেইটলৈ লেণ্ডস্কেপ ফোন
  @media ( সৰ্বোচ্চ - প্ৰস্থ : 768px ) { ... }     
 
  // লেণ্ডস্কেপ আৰু ডেস্কটপলৈ টেবলেট প'ৰ্ট্ৰেইট কৰক
  @media ( নূন্যতম - প্ৰস্থ : 768px ) আৰু ( সৰ্বোচ্চ - প্ৰস্থ : 980px ) { ... }        
 
  // ডাঙৰ ডেস্কটপ
  @media ( নূন্যতম - প্ৰস্থ : 1200px ) { .. }