ভারা

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

HTML5 ডকটাইপ প্রয়োজন

বুটস্ট্র্যাপ এইচটিএমএল উপাদান এবং সিএসএস বৈশিষ্ট্য ব্যবহার করে যার জন্য HTML5 ডকটাইপ ব্যবহার করা প্রয়োজন। আপনার প্রকল্পের প্রতিটি বুটস্ট্র্যাপড পৃষ্ঠার শুরুতে এটি অন্তর্ভুক্ত করতে ভুলবেন না।

<!DOCTYPE html>
<html lang = "en" > 
  ...
</html>

টাইপোগ্রাফি এবং লিঙ্ক

scaffolding.less ফাইলের মধ্যে , আমরা মৌলিক গ্লোবাল ডিসপ্লে, টাইপোগ্রাফি এবং লিঙ্ক শৈলী সেট করি। বিশেষ করে, আমরা:

শরীরের মার্জিন সরান
উপর সেট background-color: white;করুনbody
আমাদের টাইপোগ্রাফিক বেস হিসাবে @baseFontFamily, @baseFontSize, এবং গুণাবলী ব্যবহার করুন@baseLineHeight
এর মাধ্যমে বিশ্বব্যাপী লিঙ্কের রঙ সেট করুন @linkColorএবং শুধুমাত্র লিঙ্ক আন্ডারলাইন প্রয়োগ করুন:hover

নরমালাইজের মাধ্যমে রিসেট করুন

বুটস্ট্র্যাপ 2 থেকে, ঐতিহ্যগত CSS রিসেটটি Normalize.css থেকে উপাদান ব্যবহার করার জন্য বিকশিত হয়েছে , নিকোলাস গ্যালাঘারের একটি প্রকল্প যা HTML5 বয়লারপ্লেটকেও ক্ষমতা দেয় ।

নতুন রিসেটটি এখনও reset.less- এ পাওয়া যেতে পারে , কিন্তু সংক্ষিপ্ততা এবং নির্ভুলতার জন্য অনেক উপাদান মুছে ফেলা হয়েছে৷

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

প্রতিক্রিয়াশীল ডিভাইস

তারা কি করে

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

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

মিডিয়া প্রশ্নগুলিকে দায়িত্বের সাথে ব্যবহার করুন এবং শুধুমাত্র আপনার মোবাইল শ্রোতাদের জন্য শুরু করুন৷ বৃহত্তর প্রকল্পগুলির জন্য, ডেডিকেটেড কোড বেস বিবেচনা করুন এবং মিডিয়া প্রশ্নের স্তরগুলি নয়।

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

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

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

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

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

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

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

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

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

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

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

প্রতিক্রিয়াশীল ইউটিলিটি ক্লাস

তারা কি

দ্রুত মোবাইল-বান্ধব বিকাশের জন্য, ডিভাইস দ্বারা সামগ্রী দেখানো এবং লুকানোর জন্য এই মৌলিক ইউটিলিটি ক্লাসগুলি ব্যবহার করুন৷

কখন ব্যবহার করতে হবে

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

উদাহরণস্বরূপ, আপনি <select>মোবাইল লেআউটে nav-এর জন্য একটি উপাদান দেখাতে পারেন, কিন্তু ট্যাবলেট বা ডেস্কটপে নয়।

সাপোর্ট ক্লাস

আমরা যে ক্লাসগুলিকে সমর্থন করি এবং একটি প্রদত্ত মিডিয়া ক্যোয়ারী লেআউটে (ডিভাইস দ্বারা লেবেলযুক্ত) তাদের প্রভাবের একটি সারণী এখানে দেখানো হয়েছে৷ তারা পাওয়া যাবে responsive.less.

ক্লাস	ফোন480px এবং নীচে	ট্যাবলেট767px এবং নীচে	ডেস্কটপ768px এবং তার উপরে
`.visible-phone`	দৃশ্যমান	গোপন	গোপন
`.visible-tablet`	গোপন	দৃশ্যমান	গোপন
`.visible-desktop`	গোপন	গোপন	দৃশ্যমান
`.hidden-phone`	গোপন	দৃশ্যমান	দৃশ্যমান
`.hidden-tablet`	দৃশ্যমান	গোপন	দৃশ্যমান
`.hidden-desktop`	দৃশ্যমান	দৃশ্যমান	গোপন

পরীক্ষা ক্ষেত্রে

উপরের ক্লাসগুলি পরীক্ষা করতে আপনার ব্রাউজারের আকার পরিবর্তন করুন বা বিভিন্ন ডিভাইসে লোড করুন।

এতে দৃশ্যমান...

ফোন✔ ফোন
ট্যাবলেট✔ ট্যাবলেট
ডেস্কটপ✔ ডেস্কটপ

লুকিয়ে আছে...

ফোন✔ ফোন
ট্যাবলেট✔ ট্যাবলেট
ডেস্কটপ✔ ডেস্কটপ