ভারা

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

ডিফল্ট 940px গ্রিড

বুটস্ট্র্যাপের অংশ হিসেবে প্রদত্ত ডিফল্ট গ্রিড সিস্টেম হল একটি 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*

উদাহরণ

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

স্তর 2

<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 থেকে 940px	44px	20px
ডিফল্ট	940px এবং তার বেশি	60px	20px
বড় ডিসপ্লে	1210px এবং তার বেশি	70px	30px

তারা কি করে

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

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

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

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

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

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

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