মৰাপাট

বুটষ্ট্ৰেপ এটা প্ৰতিক্ৰিয়াশীল ১২-স্তম্ভ গ্ৰীডত নিৰ্মাণ কৰা হৈছে। আমি সেই ব্যৱস্থাৰ ওপৰত ভিত্তি কৰি স্থিৰ- আৰু তৰল-প্ৰস্থৰ পৰিকল্পনাও অন্তৰ্ভুক্ত কৰিছো।

HTML5 doctype ৰ প্ৰয়োজন

বুটষ্ট্ৰেপে HTML উপাদানসমূহ আৰু CSS বৈশিষ্ট্যসমূহ ব্যৱহাৰ কৰে যি HTML5 ডক্টটাইপৰ ব্যৱহাৰৰ প্ৰয়োজন। আপোনাৰ প্ৰকল্পৰ প্ৰতিটো বুটষ্ট্ৰেপড পৃষ্ঠাৰ আৰম্ভণিতে ইয়াক অন্তৰ্ভুক্ত কৰাটো নিশ্চিত কৰক ।

<!DOCTYPE html>
<html lang = "এন" > 
  ...
</html>

টাইপোগ্ৰাফী আৰু লিংক

scaffolding.less নথিপত্ৰৰ ভিতৰত , আমি মূল গোলকীয় প্ৰদৰ্শন, টাইপোগ্ৰাফী, আৰু সংযোগ শৈলীসমূহ সংহতি কৰোঁ। বিশেষকৈ আমি:

শৰীৰৰ ওপৰত থকা মাৰ্জিন আঁতৰাই পেলাব লাগে
background-color: white;ৰ ওপৰত ছেট কৰকbody
@baseFontFamily, @baseFontSize, আৰু @baseLineHeightবৈশিষ্ট্যসমূহ আমাৰ টাইপোগ্ৰাফিক ভিত্তি হিচাপে ব্যৱহাৰ কৰক
গোলকীয় সংযোগ ৰং সংহতি কৰক @linkColorআৰু কেৱল সংযোগ আণ্ডাৰলাইন প্ৰয়োগ কৰক:hover

Normalize ৰ জৰিয়তে ৰিছেট কৰক

Bootstrap 2 ৰ পৰা, পৰম্পৰাগত CSS পুনৰায় সেট Normalize.css ৰ পৰা উপাদানসমূহ ব্যৱহাৰ কৰিবলৈ বিকশিত হৈছে, Nicolas Gallagher দ্বাৰা এটা প্ৰকল্প যি HTML5 Boilerplate ৰ শক্তিও দিয়ে ।

নতুন ৰিছেট এতিয়াও reset.less ত পোৱা যাব , কিন্তু সংক্ষিপ্ততা আৰু সঠিকতাৰ বাবে বহুতো উপাদান আঁতৰোৱা।

১

৪

৮

৬

১২

Bootstrap ত প্ৰদান কৰা অবিকল্পিত গ্ৰীড ব্যৱস্থাপ্ৰণালীয়ে 12 টা স্তম্ভ ব্যৱহাৰ কৰে যি 724px, 940px (প্ৰতিক্ৰিয়াশীল CSS অন্তৰ্ভুক্ত নকৰাকৈ অবিকল্পিত), আৰু 1170px প্ৰস্থত ৰেণ্ডাৰ কৰে। 767px দৰ্শনপৰ্টসমূহৰ তলত, স্তম্ভসমূহ তৰল হৈ উলম্বভাৱে ষ্টেক হয়।

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

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

স্তম্ভসমূহ অফছেটিং কৰা

৪

৪ অফছেট ৪

3 অফছেট 3

৮ অফছেট ৪

<div শ্ৰেণী = "শাৰী" > 
  <div শ্ৰেণী = "span4" > ... </div> 
  <div শ্ৰেণী = "span4 অফছেট4" > ... </div> 
</div>

বাহ সজা স্তম্ভ

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

উদাহৰণ

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

স্তম্ভৰ স্তৰ ১

স্তৰ ২

<div শ্ৰেণী = "শাৰী" > 
  <div শ্ৰেণী = "span6" > 
    স্তৰ ১ স্তম্ভ
    <div শ্ৰেণী = "শাৰী" > 
      <div class = "span3" > স্তৰ ২ </div> 
      <div class = "span3" > স্তৰ ২ </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>

লৰৃ - চৰ হৈ থকা	অবিকল্পিত মান	বিৱৰণ
`@gridColumns`	১২	স্তম্ভৰ সংখ্যা
`@gridColumnWidth`	৬০পিক্সেল	প্ৰতিটো স্তম্ভৰ প্ৰস্থ
`@gridGutterWidth`	২০পিক্সেল	স্তম্ভৰ মাজত ঋণাত্মক স্থান

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>

প্ৰতিক্ৰিয়াশীল ডিভাইচসমূহ

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

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

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

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

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

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

লেবেল	বিন্যাসৰ প্ৰস্থ	স্তম্ভৰ প্ৰস্থ	নালাৰ প্ৰস্থ
স্মাৰ্টফোন	480px আৰু তাৰ তলৰ	তৰল স্তম্ভ, কোনো নিৰ্দিষ্ট প্ৰস্থ নাই
স্মাৰ্টফোনৰ পৰা টেবলেটলৈ	767px আৰু তলৰ	তৰল স্তম্ভ, কোনো নিৰ্দিষ্ট প্ৰস্থ নাই
প'ৰ্ট্ৰেইট টেবলেট	768px আৰু তাৰ ওপৰৰ	৪২পিক্সেল	২০পিক্সেল
ডিফল্ট	980px আৰু ওপৰৰ	৬০পিক্সেল	২০পিক্সেল
ডাঙৰ ডিছপ্লে	1200px আৰু ওপৰৰ	৭০px	৩০পিক্সেল

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

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

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

মাধ্যমৰ প্ৰশ্নসমূহ ব্যৱহাৰ কৰি

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

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

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

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

ৰেচপন্সিভ ইউটিলিটি ক্লাছ

কি কি সেইবোৰ

দ্ৰুত মোবাইল-বন্ধুত্বপূৰ্ণ বিকাশৰ বাবে, ডিভাইচ অনুসৰি বিষয়বস্তু দেখুৱাবলৈ আৰু লুকুৱাবলৈ এই মৌলিক উপযোগীতা শ্ৰেণীসমূহ ব্যৱহাৰ কৰক।

কেতিয়া ব্যৱহাৰ কৰিব লাগে

সীমিত ভিত্তিত ব্যৱহাৰ কৰক আৰু একেটা চাইটৰ সম্পূৰ্ণ বেলেগ সংস্কৰণ সৃষ্টি কৰাটো এৰক। ইয়াৰ পৰিৱৰ্তে, প্ৰতিটো ডিভাইচৰ উপস্থাপনৰ পৰিপূৰক হিচাপে সেইবোৰ ব্যৱহাৰ কৰক।

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

সমৰ্থন শ্ৰেণীসমূহ

ইয়াত দেখুওৱা হৈছে আমি সমৰ্থন কৰা শ্ৰেণীসমূহৰ এটা টেবুল আৰু এটা প্ৰদত্ত মাধ্যম প্ৰশ্ন পৰিকল্পনাত ইয়াৰ প্ৰভাৱ (ডিভাইচৰ দ্বাৰা লেবেল কৰা)। ত পোৱা যাব responsive.less.

শ্ৰেণী	ফোনসমূহ480px আৰু তাৰ তলৰ	টেবলেট767px আৰু তলৰ	ডেস্কটপসমূহ768px আৰু তাৰ ওপৰৰ
`.visible-phone`	দৃশ্যমান	লুকাই থকা	লুকাই থকা
`.visible-tablet`	লুকাই থকা	দৃশ্যমান	লুকাই থকা
`.visible-desktop`	লুকাই থকা	লুকাই থকা	দৃশ্যমান
`.hidden-phone`	লুকাই থকা	দৃশ্যমান	দৃশ্যমান
`.hidden-tablet`	দৃশ্যমান	লুকাই থকা	দৃশ্যমান
`.hidden-desktop`	দৃশ্যমান	দৃশ্যমান	লুকাই থকা

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

ওপৰৰ শ্ৰেণীসমূহ পৰীক্ষা কৰিবলৈ আপোনাৰ ব্ৰাউজাৰৰ আকাৰ সলনি কৰক বা বিভিন্ন ডিভাইচত লোড কৰক।

উপর দৃশ্যমান...

সেউজীয়া চেকমাৰ্কসমূহে ইংগিত দিয়ে যে শ্ৰেণী আপোনাৰ বৰ্তমান দৰ্শনপৰ্টত দৃশ্যমান।

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

লুকানো উপর...

ইয়াত, সেউজীয়া চেকমাৰ্কসমূহে সূচায় যে শ্ৰেণী আপোনাৰ বৰ্তমান দৰ্শনপৰ্টত লুকাই আছে।

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