মৰাপাট

HTML5 doctype ৰ প্ৰয়োজন

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

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

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

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

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

এই শৈলীসমূহ scaffolding.less ৰ ভিতৰত পাব পাৰি ।

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

বুটষ্ট্ৰেপ ২ ৰ সৈতে, পুৰণি ৰিছেট ব্লকক Normalize.css ৰ সপক্ষে বাদ দিয়া হৈছে , নিকোলাছ গ্যালাগাৰৰ এটা প্ৰকল্প যিয়ে HTML5 বয়লাৰপ্লেটকো শক্তি প্ৰদান কৰে । আমি আমাৰ reset.less ৰ ভিতৰত Normalize ৰ বহুখিনি ব্যৱহাৰ কৰাৰ সময়ত , আমি বিশেষভাৱে Bootstrap ৰ বাবে কিছুমান উপাদান আঁতৰাই পেলাইছো ।

লাইভ গ্ৰীডৰ উদাহৰণ

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

১

২

৩

৪

৫

৯

মূল গ্ৰীড HTML

এটা সৰল দুটা স্তম্ভ বিন্যাসৰ বাবে, এটা সৃষ্টি .rowকৰক আৰু উপযুক্ত সংখ্যক .span*স্তম্ভ যোগ কৰক। যিহেতু এইটো এটা ১২-স্তম্ভৰ গ্ৰীড, প্ৰত্যেকেই .span*সেই ১২টা স্তম্ভৰ এটা সংখ্যা বিস্তৃত কৰে, আৰু প্ৰতিটো শাৰীৰ বাবে সদায় ১২টালৈকে যোগ কৰিব লাগে (বা মূলত থকা স্তম্ভৰ সংখ্যা)।

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

এই উদাহৰণটো দি, আমাৰ হাতত আছে .span4আৰু .span8, মুঠ ১২টা স্তম্ভ আৰু এটা সম্পূৰ্ণ শাৰীৰ বাবে বনাই।

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

.offset*শ্ৰেণীসমূহ ব্যৱহাৰ কৰি স্তম্ভসমূহ বাওঁফালে লৈ যাওক । প্ৰতিটো শ্ৰেণীয়ে এটা স্তম্ভৰ বাওঁফালৰ প্ৰান্ত এটা গোটেই স্তম্ভ বৃদ্ধি কৰে। উদাহৰণস্বৰূপে, চাৰিটা স্তম্ভৰ ওপৰেৰে .offset4গতি কৰে ।.span4

৪

3 অফছেট 2

3 অফছেট 1

3 অফছেট 2

৬ অফছেট ৩

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

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

অবিকল্পিত গ্ৰীডৰ সৈতে আপোনাৰ বিষয়বস্তু নেষ্ট কৰিবলে, এটা নতুন .rowআৰু .span*এটা বৰ্ত্তমানৰ স্তম্ভৰ ভিতৰত স্তম্ভসমূহৰ গোট যোগ কৰক .span*। নেষ্টেড শাৰীসমূহে স্তম্ভসমূহৰ এটা গোট অন্তৰ্ভুক্ত কৰিব লাগে যি ইয়াৰ মূলৰ স্তম্ভসমূহৰ সংখ্যালৈ যোগ কৰে।

উদাহৰণ

ইয়াত দুটা নেষ্টেড .span4স্তম্ভ এটা ৰ ভিতৰত ৰখা হৈছে .span8।

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

স্তৰ ২

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

লাইভ ফ্লুইড গ্ৰীডৰ উদাহৰণ

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

১

৪

৮

৬

১২

মূল তৰল গ্ৰীড HTML

.rowলৈ সলনি কৰি যিকোনো শাৰী "তৰল" কৰক .row-fluid। স্তম্ভ শ্ৰেণীসমূহ হুবহু একেই থাকে, যাৰ ফলত স্থিৰ আৰু তৰল গ্ৰীডৰ মাজত উলটিবলৈ সহজ হয়।

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

তৰল অফছেটিং

স্থিৰ গ্ৰীড ব্যৱস্থাপ্ৰণালীৰ অফছেটিঙৰ দৰে একে ধৰণে কাম কৰে: .offset*ইমানবোৰ স্তম্ভৰে অফছেট কৰিবলে যিকোনো স্তম্ভত যোগ কৰক।

৪

৪ অফছেট ৪

3 অফছেট 3

৬ অফছেট ৬

<div class = "শাৰী-তৰল" > 
  <div শ্ৰেণী = "span4" > ... </div> 
  <div শ্ৰেণী = "span4 অফছেট2" > ... </div> 
</div>

তৰল পদাৰ্থৰ বাহ সজা

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

তৰল পদাৰ্থ ১২

তৰল পদাৰ্থ ৬

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

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

<div class="container">কেৱল প্ৰয়োজনীয়ৰ সৈতে এটা সাধাৰণ স্থিৰ-প্ৰস্থ (আৰু বৈকল্পিকভাৱে প্ৰতিক্ৰিয়াশীল) পৰিকল্পনা প্ৰদান কৰে ।

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

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

এটা তৰল, দুটা-স্তম্ভ পৃষ্ঠা সৃষ্টি কৰক যাৰ সৈতে <div class="container-fluid">—এপ্লিকেচন আৰু নথিপত্ৰৰ বাবে অতি উত্তম।

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

প্ৰতিক্ৰিয়াশীল বৈশিষ্ট্যসমূহ সামৰ্থবান কৰা

<head>আপোনাৰ দস্তাবেজৰ ভিতৰত সঠিক মেটা টেগ আৰু অতিৰিক্ত শৈলীপত্ৰিকা অন্তৰ্ভুক্ত কৰি আপোনাৰ প্ৰকল্পত প্ৰতিক্ৰিয়াশীল CSS অন কৰক । যদি আপুনি স্বনিৰ্বাচিত পৃষ্ঠাৰ পৰা Bootstrap কমপাইল কৰিছে, আপুনি কেৱল মেটা টেগ অন্তৰ্ভুক্ত কৰিব লাগিব ।

<meta name = "viewport" content = "প্ৰস্থ=ডিভাইচ-প্ৰস্থ, প্ৰাৰম্ভিক-স্কেল=1.0" >  
<link href = "সম্পত্তি/css/বুটষ্ট্ৰেপ-প্ৰতিক্ৰিয়াশীল.css" rel = "শৈলীপত্ৰিকা" >

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

প্ৰতিক্ৰিয়াশীল বুটষ্ট্ৰেপৰ বিষয়ে

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

গ্লোবেল ছেটিংছ