ইতিহাস

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

টুইটাৰৰ বহু অভিযন্তাৰ সহায় আৰু মতামতৰ সহায়ত বুটষ্ট্ৰেপে কেৱল মৌলিক শৈলীসমূহেই নহয়, অধিক মাৰ্জিত আৰু টেকসই ফ্ৰন্ট-এণ্ড ডিজাইন পেটাৰ্ণসমূহক সামৰি লৈ যথেষ্ট বৃদ্ধি পাইছে।

dev.twitter.com ত অধিক পঢ়ক ›

ব্ৰাউজাৰ সমৰ্থন

বুটষ্ট্ৰেপ Chrome, Safari, Internet Explorer, আৰু Firefox ৰ দৰে প্ৰধান আধুনিক ব্ৰাউজাৰসমূহত পৰীক্ষা আৰু সমৰ্থিত।

• শেহতীয়া ছাফাৰী
• শেহতীয়া গুগল ক্ৰ'ম
• ফায়াৰফক্স ৪+
• ইণ্টাৰনেট এক্সপ্ল’ৰাৰ 7+

কি অন্তৰ্ভুক্ত কৰা হৈছে

বুটষ্ট্ৰেপ কমপাইল কৰা CSS, অকম্পাইল কৰা, আৰু উদাহৰণ সাঁচসমূহৰ সৈতে সম্পূৰ্ণ আহে ।

• সকলো মূল .less ফাইল
• সম্পূৰ্ণৰূপে সংকলিত আৰু সংকুচিত কৰা CSS
• সম্পূৰ্ণ শৈলীগাইড নথিপত্ৰ
• উদাহৰণ পৃষ্ঠা সাঁচ (অধিক অতি সোনকালে আহিব)

অবিকল্পিত গ্ৰীড

বুটষ্ট্ৰেপৰ অংশ হিচাপে প্ৰদান কৰা অবিকল্পিত গ্ৰীড ব্যৱস্থাপ্ৰণালী এটা 940px বহল 16-স্তম্ভ গ্ৰীড । ই জনপ্ৰিয় ৯৬০ গ্ৰীড ব্যৱস্থাৰ এটা সোৱাদ, কিন্তু বাওঁ আৰু সোঁফালে অতিৰিক্ত মাৰ্জিন/পেডিং নোহোৱাকৈ।

উদাহৰণ গ্ৰীড মাৰ্কআপ

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

<div শ্ৰেণী="শাৰী"> class = "শাৰী" >
  <div class = "span6 স্তম্ভ" > 
    ...
  </div>
  <div class = "span10 স্তম্ভ" > 
    ...
  </div>
</div>

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

প্ৰায় যিকোনো চাইট বা পৃষ্ঠাৰ বাবে এটা মূল 940px বহল, কেন্দ্ৰীভূত পাত্ৰ বিন্যাস।

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

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

নূন্যতম আৰু সৰ্বোচ্চ-প্ৰস্থ আৰু এটা বাওঁফালৰ কাষবাৰৰ সৈতে এটা নমনীয় তৰল বা তৰল পৃষ্ঠা গঠন। এপ্প্ সমূহৰ বাবে অতি উত্তম।

<শৰীৰ>
  <div class = "পাত্ৰ-তৰল" > 
    <div class = "চাইডবাৰ" > 
      ...
    </div>
    <div class = "সামগ্ৰী" > 
      ...
    </div>
  </div>
</body>

শিৰোনাম আৰু কপি

আপোনাৰ ৱেবপৃষ্ঠাসমূহ গঠন কৰাৰ বাবে এটা প্ৰামাণিক টাইপোগ্ৰাফিক হাইৰাৰ্কি।

h1. শিৰোনাম ১

h2. শিৰোনাম ২

h3. শিৰোনাম ৩

h4. শিৰোনাম ৪

h৫. শিৰোনাম ৫

h6. শিৰোনাম ৬

উদাহৰণ অনুচ্ছেদ

নুল্লম কুইছ ৰিছুছ এগেট উৰ্না মলিছ অৰ্নাৰে ভেল ইউ লিও। Cum sociis natoque পেনাটিবাছ এট মেগনিছ ডি পাৰ্চুৰিয়েন্ট মন্টেছ, নাচেটাৰ ৰিডিকুলাছ মুছ। নুল্লাম আইডি ডোলৰ আইডি নিভ উল্ট্ৰিচিয়েছ ভেহিকুলা উট আইডি এলিট।

উদাহৰণ শিৰোনাম উপ-শিৰোনামা আছে...

Misc. উপাদানসমূহ

জোৰ, ঠিকনা, & সংক্ষিপ্তকৰণ ব্যৱহাৰ কৰা

<strong> <em> <address> <abbr>

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

এটা শব্দ বা বাক্যাংশৰ চাৰিওফালৰ কপিৰ তুলনাত অতিৰিক্ত গুৰুত্ব বা গুৰুত্ব সূচাবলৈ জোৰ দিয়া টেগ ( <strong>আৰু ) ব্যৱহাৰ কৰিব লাগে। গুৰুত্বৰ বাবে আৰু মানসিক চাপৰ<em> ওপৰত গুৰুত্ব দিয়াৰ বাবে ব্যৱহাৰ কৰক ।<strong><em>

এটা অনুচ্ছেদত গুৰুত্ব দিয়া হৈছে

Fusce dapibus , tellus ac cursus commodo , tortor mauris কণ্ডিমেণ্টাম নিভ , উট ফাৰ্মেণ্টাম মাছা জষ্টো বহি আমেত ৰিছুছ। মেচেনাছ ফ’চিবাছ মলিছ ইন্টাৰডাম। Nulla vitae elit libero, এটা ফেৰেট্ৰা অগু।

টোকা:<b> HTML5 ত আৰু টেগ ব্যৱহাৰ কৰাটো এতিয়াও ঠিকেই আছে <i>, কিন্তু ইহঁত আৰু অন্তৰ্নিহিত শৈলীৰ সৈতে নাহে। <b>অতিৰিক্ত গুৰুত্ব নিদিয়াকৈ শব্দ বা বাক্যাংশক উজ্জ্বল কৰিবলৈ বুজায়, আনহাতে <i>ই বেছিভাগেই কণ্ঠ, কাৰিকৰী শব্দ আদিৰ বাবে।

ঠিকনাসমূহ

মৌলটো ইয়াৰ <address>ওচৰৰ পূৰ্বপুৰুষৰ বাবে যোগাযোগৰ তথ্যৰ বাবে ব্যৱহাৰ কৰা হয়, বা সমগ্ৰ কামৰ শৰীৰটোৰ বাবে। ইয়াত কেনেকুৱা দেখা যায়:

টুইটাৰ, ইনকৰ্পৰেটেড
৭৯৫ ফলছম এভিনিউ, ছুইট ৬০০
ছান ফ্ৰান্সিস্কো, কে এ ৯৪১০৭
পি: (১২৩) ৪৫৬-৭৮৯০

টোকা: এটা শাৰীৰ প্ৰতিটো শাৰী <address>এটা শাৰী-বিৰতি ( <br />) ৰে শেষ কৰিব লাগিব বা এটা ব্লক-স্তৰৰ টেগত মেৰিয়াই ল'ব লাগিব (যেনে, <p>) বিষয়বস্তু সঠিকভাৱে গঠন কৰিবলে।

সংক্ষিপ্ত ৰূপ

সংক্ষিপ্তকৰণ আৰু সংক্ষিপ্ত ৰূপৰ বাবে, <abbr>টেগ ব্যৱহাৰ কৰক ( HTML5<acronym> ত অবচিত )। টেগৰ ভিতৰত চৰ্টহেণ্ড ফৰ্মটো ৰাখক আৰু সম্পূৰ্ণ নামৰ বাবে এটা শিৰোনাম নিৰ্ধাৰণ কৰক।

ব্লককোটসমূহ

<blockquote> <p> <small>

কেনেকৈ উদ্ধৃতি দিব

এটা ব্লককোট অন্তৰ্ভুক্ত কৰিবলৈ, ৰেপ কৰক আৰু <blockquote>টেগ কৰক। আপোনাৰ উৎস উদ্ধৃতি দিবলৈ উপাদানটো ব্যৱহাৰ কৰক আৰু আপুনি ইয়াৰ আগতে এটা em ডেচ পাব।<p><small><small>&mdash;

লৰেম ইপ্সম ডলৰ বহা আমেট, কনচেক্টেটাৰ এডিপিচিং এলিট। পূৰ্ণসংখ্যা posuere erat এটা ante venenatis dapibus posuere velit alicet.

ডাঃ জুলিয়াছ হিবাৰ্ট

অনাৰ্ডাৰেড<ul>

• লৰেম ইপচুম ডলৰ বহি আমেট
• Consectetur adipiscing অভিজাত
• পূৰ্ণসংখ্যা molestie lorem এ massa
• প্ৰিটিয়াম নিছল এলিকেটত ফেচিলিচিছ
• নুল্লা ভলুটপট এলিকুৱাম ভেলিট
  • ফেচেলাছ ইয়াকুলিছ নেক
  • Purus sodales ultricies
  • ভেষ্টিবুলুম লাওৰিট পৰ্টিটৰ চেম
  • 'এক ট্ৰিষ্টিক লিবেৰ' volutpat at
• ফ'চিবাছ পৰ্টা লেকাছ ফ্ৰিংজিলা ভেল
• Aenean বহি আমেট এৰত nunc
• এগেট পৰ্টটিটৰ লৰেম

আনষ্টাইল কৰা<ul.unstyled>

• লৰেম ইপচুম ডলৰ বহি আমেট
• Consectetur adipiscing অভিজাত
• পূৰ্ণসংখ্যা molestie lorem এ massa
• প্ৰিটিয়াম নিছল এলিকেটত ফেচিলিচিছ
• নুল্লা ভলুটপট এলিকুৱাম ভেলিট
  • ফেচেলাছ ইয়াকুলিছ নেক
  • Purus sodales ultricies
  • ভেষ্টিবুলুম লাওৰিট পৰ্টিটৰ চেম
  • 'এক ট্ৰিষ্টিক লিবেৰ' volutpat at
• ফ'চিবাছ পৰ্টা লেকাছ ফ্ৰিংজিলা ভেল
• Aenean বহি আমেট এৰত nunc
• এগেট পৰ্টটিটৰ লৰেম

অৰ্ডাৰ দিয়া হৈছে<ol>

1. লৰেম ইপচুম ডলৰ বহি আমেট
2. Consectetur adipiscing অভিজাত
3. পূৰ্ণসংখ্যা molestie lorem এ massa
4. প্ৰিটিয়াম নিছল এলিকেটত ফেচিলিচিছ
5. নুল্লা ভলুটপট এলিকুৱাম ভেলিট
6. ফ'চিবাছ পৰ্টা লেকাছ ফ্ৰিংজিলা ভেল
7. Aenean বহি আমেট এৰত nunc
8. এগেট পৰ্টটিটৰ লৰেম

বিৱৰণdl

বিৱৰণ তালিকাসমূহ

শব্দ সংজ্ঞায়িত কৰাৰ বাবে এটা বিৱৰণ তালিকা নিখুঁত।

ইউইস্মোড

ভেষ্টিবুলাম আইডি লিগুলা পৰ্টা ফেলিছ ইউইজমড চেম্পাৰ এগেট লেচিনিয়া অডিঅ' চেম নেক এলিট।

ডনেক আইডি এলিট নন মি পৰ্টা গ্ৰেভিডা এট এগেট মেটাছ।

মালেসুয়াডা পোর্টা

ইটিয়াম পৰ্টা ছেম মালেছুয়াডা মেগনা মলিছ ইউইস্মোড।

টেবুল নিৰ্মাণ কৰা

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

টেবুলবোৰ বৰ ভাল—বহু কামৰ বাবে। গ্ৰেট টেবুলসমূহ, অৱশ্যে, উপযোগী, স্কেলেবল, আৰু পঢ়িব পৰা (ক'ড স্তৰত) হ'বলৈ অলপ মাৰ্কআপ প্ৰেমৰ প্ৰয়োজন। সহায়ক হোৱাকৈ কেইটামান টিপছ আগবঢ়োৱা হ’ল।

আপোনাৰ স্তম্ভ হেডাৰসমূহ সদায় <thead>এনেদৰে ৰেপ কৰক যে হাইৰাৰ্কি <thead>> <tr>> হয় <th>।

স্তম্ভ হেডাৰসমূহৰ দৰেই, আপোনাৰ টেবুলৰ সকলো মূখ্য বিষয়বস্তু এটা ত ৰেপ কৰিব লাগে <tbody>যাতে আপোনাৰ হাইৰাৰ্কি <tbody>> <tr>> হয় <td>।

উদাহৰণ: অবিকল্পিত টেবুল শৈলীসমূহ

সকলো টেবুল স্বয়ংক্ৰিয়ভাৱে কেৱল প্ৰয়োজনীয় সীমাসমূহৰ সৈতে ষ্টাইল কৰা হ'ব যাতে পঠনযোগ্যতা নিশ্চিত কৰিব পাৰি আৰু গঠন ৰক্ষণাবেক্ষণ কৰিব পাৰি। অতিৰিক্ত শ্ৰেণী বা বৈশিষ্ট্য যোগ কৰাৰ প্ৰয়োজন নাই।

#	প্ৰথম নাম	উপাধি	ভাষা
১	কিছুমান	এক	ইংৰাজী
২	জো	ছিক্সপেক	ইংৰাজী
৩	Stu	ডেন্ট	ক'ড

<table class="সাধাৰণ-টেবুল"> class = "সাধাৰণ-তালিকা" >
  ...
</table>

উদাহৰণ: জেব্ৰা-ষ্ট্ৰাইপড

জেব্ৰা-ষ্ট্ৰাইপিং যোগ কৰি আপোনাৰ টেবুলসমূহৰ সৈতে অলপ আড়ম্বৰপূৰ্ণ হওক—মাত্ৰ .zebra-stripedক্লাছটো যোগ কৰক।

#	প্ৰথম নাম	উপাধি	ভাষা
১	কিছুমান	এক	ইংৰাজী
২	জো	ছিক্সপেক	ইংৰাজী
৩	Stu	ডেন্ট	ক'ড

টোকা: Zebra-striping এটা প্ৰগতিশীল উন্নয়ন IE8 আৰু তলৰ দৰে পুৰণি ব্ৰাউজাৰৰ বাবে উপলব্ধ নহয়।

<table class="সাধাৰণ-টেবুল জেব্ৰা-ষ্ট্ৰাইপড"> class = "সাধাৰণ-টেবুল জেব্ৰা-ষ্ট্ৰাইপড" >
...
</table>

উদাহৰণ: জেব্ৰা-ষ্ট্ৰাইপড w/ TableSorter.js

পূৰ্বৰ উদাহৰণটো লৈ, আমি jQuery আৰু Tablesorter প্লাগইনৰ যোগেদি সজাই পৰাই তোলা কাৰ্য্যকৰীতা প্ৰদান কৰি আমাৰ টেবুলসমূহৰ উপযোগিতা উন্নত কৰোঁ । সজাই পৰাই তুলিবলৈ যিকোনো স্তম্ভৰ হেডাৰত ক্লিক কৰক।

#	প্ৰথম নাম	উপাধি	ভাষা
১	আপোনাৰ	এক	ইংৰাজী
২	জো	ছিক্সপেক	ইংৰাজী
৩	Stu	ডেন্ট	ক'ড

<script src="js/jquery/jquery.টেবুলসৰ্টাৰ.মিন.জেএছ"></script> src = "js/jquery/jquery.টেবুলসৰ্টাৰ.মিনিট.js" ></script>
<স্ক্রিপ্ট > 
  $ ( ফাংচন () { 
    $ ( "টেবুল#sortটেবুলউদাহৰণ" ). টেবুলছৰ্টাৰ ({ সৰ্টলিষ্ট : [[ 1 , 0 ]] });  
  });
</script>
<table class = "সাধাৰণ-টেবুল জেব্ৰা-ষ্ট্ৰাইপড" > 
  ...
</table>

অবিকল্পিত শৈলীসমূহ

সকলো প্ৰপত্ৰক অবিকল্পিত শৈলী দিয়া হৈছে সিহতক এটা পঢ়িব পৰা আৰু স্কেলেবল ধৰণে উপস্থাপন কৰিবলে। লিখনী ইনপুটসমূহ, নিৰ্ব্বাচন তালিকাসমূহ, লিখনী অঞ্চলসমূহ, ৰেডিঅ' বুটামসমূহ আৰু চেকবাকচসমূহ, আৰু বুটামসমূহৰ বাবে শৈলীসমূহ প্ৰদান কৰা হৈছে।

উদাহৰণ ৰূপ কিংবদন্তি

X-বৃহৎ ইনপুট

চয়ন কৰা

১ ২ ৩ ৪ ৫

চয়ন কৰা

১ ২ ৩ ৪ ৫

সম্পাদনা কৰিব নোৱাৰা ইনপুট

কিছুমান মূল্য ইয়াত

নিষ্ক্ৰিয় ইনপুট

X-বৃহৎ ইনপুট

সহায় লিখনীৰ সৰু স্নিপেট

উদাহৰণ ৰূপ কিংবদন্তি

প্ৰিপেণ্ডেড টেক্সট

@

প্ৰিপেণ্ডেড চেকবক্স

সংযুক্ত চেকবক্স

ফাইল ইনপুট

উদাহৰণ ৰূপ কিংবদন্তি

বিকল্পসমূহৰ তালিকা

• বিকল্প এটা হ’ল এইটো আৰু সেইটো—ই কিয় ভাল সেইটো নিশ্চিতভাৱে অন্তৰ্ভুক্ত কৰক
• বিকল্প দুটাও পৰীক্ষা কৰি প্ৰ-পত্ৰৰ ফলাফলত অন্তৰ্ভুক্ত কৰিব পাৰি
• বিকল্প তৃতীয়টোও—হয়, আপুনি অনুমান কৰিছে—পৰীক্ষা কৰি ফৰ্মৰ ফলাফলত অন্তৰ্ভুক্ত কৰিব পাৰি
• বিকল্প চতুৰ্থটো নিষ্ক্ৰিয় হোৱাৰ বাবে পৰীক্ষা কৰিব নোৱাৰি।

টোকা: লেবেলসমূহে বহুত ডাঙৰ ক্লিক অঞ্চল আৰু এটা অধিক ব্যৱহাৰযোগ্য প্ৰপত্ৰৰ বাবে সকলো বিকল্পক আগুৰি থাকে।

তাৰিখৰ পৰিসৰ

লৈ সকলো সময় প্ৰশান্ত মহাসাগৰীয় মানক সময় (GMT -08:00) হিচাপে দেখুওৱা হৈছে।

টেক্সট এৰিয়া

প্ৰয়োজন হ'লে ওপৰৰ ক্ষেত্ৰখন বৰ্ণনা কৰিবলৈ সহায় লিখনীৰ ব্লক।

বিকল্পসমূহৰ তালিকা

• বিকল্প এটা হ’ল এইটো আৰু সেইটো—ই কিয় ভাল সেইটো নিশ্চিতভাৱে অন্তৰ্ভুক্ত কৰক
• বিকল্প দুটাও পৰীক্ষা কৰি প্ৰ-পত্ৰৰ ফলাফলত অন্তৰ্ভুক্ত কৰিব পাৰি

পৰিবৰ্তনসমূহ সংৰক্ষণ কৰক  বাতিল কৰক

ষ্টেক কৰা ফৰ্ম

আপোনাৰ প্ৰপত্ৰৰ HTML ত যোগ কৰক .form-stackedআৰু আপুনি তেওঁলোকৰ বাওঁফালে নহয়, তেওঁলোকৰ ক্ষেত্ৰসমূহৰ ওপৰত লেবেলসমূহ পাব। আপোনাৰ প্ৰপত্ৰসমূহ চুটি হ'লে বা গধুৰ প্ৰপত্ৰসমূহৰ বাবে আপোনাৰ ইনপুটৰ দুটা স্তম্ভ থাকিলে ই অতি উত্তম কাম কৰে।

উদাহৰণ ৰূপ কিংবদন্তি

X-বৃহৎ ইনপুট

চয়ন কৰা

১ ২ ৩ ৪ ৫

উদাহৰণ ৰূপ কিংবদন্তি

X-বৃহৎ ইনপুট

সহায় লিখনীৰ সৰু স্নিপেট

বিকল্পসমূহৰ তালিকা

• বিকল্প এটা হ’ল এইটো আৰু সেইটো—ই কিয় ভাল সেইটো নিশ্চিতভাৱে অন্তৰ্ভুক্ত কৰক
• বিকল্প দুটাও পৰীক্ষা কৰি প্ৰ-পত্ৰৰ ফলাফলত অন্তৰ্ভুক্ত কৰিব পাৰি

টোকা: লেবেলসমূহে বহুত ডাঙৰ ক্লিক অঞ্চল আৰু এটা অধিক ব্যৱহাৰযোগ্য প্ৰপত্ৰৰ বাবে সকলো বিকল্পক আগুৰি থাকে।

পৰিবৰ্তনসমূহ সংৰক্ষণ কৰক  বাতিল কৰক

বুটামসমূহ

এটা নিয়ম হিচাপে, বুটামসমূহ কাৰ্য্যসমূহৰ বাবে ব্যৱহাৰ কৰা হয় আনহাতে সংযোগসমূহ বস্তুসমূহৰ বাবে ব্যৱহাৰ কৰা হয়। উদাহৰণস্বৰূপে, "ডাউনলোড" এটা বুটাম হ'ব পাৰে আৰু "শেহতীয়া কাৰ্য্যকলাপ" এটা সংযোগ হ'ব পাৰে।

সকলো বুটাম অবিকল্পিতভাৱে এটা পাতল ধূসৰ শৈলীলৈ, কিন্তু এটা নীলা .primaryশ্ৰেণী উপলব্ধ। প্লাছ, নিজৰ ষ্টাইল ৰোলিং কৰাটো সহজ peasy।

উদাহৰণ বুটাম

বুটাম শৈলীসমূহ প্ৰয়োগ কৰা যিকোনো বস্তুত প্ৰয়োগ কৰিব পাৰি .btn। <a>সাধাৰণতে আপুনি এইবোৰ কেৱল , <button>, আৰু নিৰ্ব্বাচন <input>উপাদানসমূহত প্ৰয়োগ কৰিব বিচাৰিব । ইয়াত কেনেকুৱা দেখা যায়:

বিকল্প আকাৰ

ডাঙৰ বা সৰু বুটামৰ আড়ম্বৰপূৰ্ণ? ইয়াত আছে!

অক্ষম অৱস্থা

যিবোৰ বুটাম সক্ৰিয় নহয় বা এটা বা আন এটা কাৰণত এপটোৱে নিষ্ক্ৰিয় কৰিছে, সেইবোৰৰ বাবে নিষ্ক্ৰিয় অৱস্থা ব্যৱহাৰ কৰক। সেইটো .disabledলিংকৰ বাবে আৰু উপাদানৰ :disabledবাবে ।<button>

লিংকসমূহ

বুটামসমূহ

কি হৈছে

আমাৰ টপবাৰ হৈছে এটা স্থিৰ বাৰ য'ত এটা ৱেবছাইটৰ ল'গ' বা নাম, প্ৰাথমিক নেভিগেচন, আৰু সন্ধান প্ৰপত্ৰ থাকে।

কাষ্টমাইজেবল

ভিতৰৰ সকলো উপাদান, আৰু সম্পূৰ্ণ টপবাৰটোও, বৈকল্পিক। আপুনি এটা ল'গ'/নাম, nav, সন্ধান, আৰু এটা গৌণ nav—বা তাৰ যিকোনো সংমিশ্ৰণ অন্তৰ্ভুক্ত কৰিবলৈ নিৰ্ব্বাচন কৰিব পাৰে।

ড্ৰপডাউন অন্তৰ্ভুক্ত

মূল নেভিগেচনৰ অংশ হিচাপে, আমি আপোনাৰ বাবে আপোনাৰ নেভত ড্ৰপডাউন যোগ কৰাৰ ক্ষমতা অন্তৰ্ভুক্ত কৰিছো। ওপৰৰ গৌণ nav টো চাওক (সোঁফালে প্ৰান্তিককৃত) কেনেকৈ কৰা হৈছে চাবলৈ।

টেব আৰু বড়ি

এটা ৰ সৈতে সৰল গৌণ নেভিগেচন সৃষ্টি কৰক <ul>। উপযুক্ত শ্ৰেণী যোগ কৰি টেব বা বড়িৰ মাজত শ্বেপ কৰক।

আমাৰ একাউণ্ট ছেটিংছ পৃষ্ঠা আৰু একে ধৰণৰ বিষয়বস্তুৰ পৃষ্ঠাৰ মাজত টগল কৰাৰ বাবে ব্যৱহাৰকাৰীৰ সময়ৰেখাৰ দৰে বিষয়বস্তুৰ উপ-অংশসমূহৰ বাবে অতি উত্তম। টেবযুক্ত বা পিল শৈলীত উপলব্ধ।

• গৃহ
• ৰূপৰেখা
• বাৰ্তাসমূহ
• ছেটিংছ
• যোগাযোগ কৰক

<ul শ্ৰেণী = "টেবসমূহ" > 
  <li class = "সক্ৰিয়" ><a href = "#" > ঘৰ </a></li>  
  <li><a href = "#" > আলেখ্যন </a></li> 
  <li><a href = "#" > বাৰ্তাসমূহ </a></li> 
  <li><a href = "#" > সংহতিসমূহ </a></li> 
  <li><a href = "#" > যোগাযোগ কৰক </a></li> 
</ul>

• গৃহ
• ৰূপৰেখা
• বাৰ্তাসমূহ
• ছেটিংছ
• যোগাযোগ কৰক

<ul class = "বড়ি" > 
  <li class = "সক্ৰিয়" ><a href = "#" > ঘৰ </a></li>  
  <li><a href = "#" > আলেখ্যন </a></li> 
  <li><a href = "#" > বাৰ্তাসমূহ </a></li> 
  <li><a href = "#" > সংহতিসমূহ </a></li> 
  <li><a href = "#" > যোগাযোগ কৰক </a></li> 
</ul>

পেজিনেচন

Rdio দ্বাৰা অনুপ্ৰাণিত আল্ট্ৰা সৰল আৰু নূন্যতম শৈলীৰ পৃষ্ঠাকৰণ। ডাঙৰ ব্লকটো মিছ কৰাটো কঠিন, সহজে স্কেলেবল, আৰু ডাঙৰ ক্লিক এৰিয়া প্ৰদান কৰে।

<div class = "পৃষ্ঠাকৰণ" > 
  <ul>
    <li class = "পূৰ্বৰ নিষ্ক্ৰিয় কৰা হৈছে" ><a href = "#" > ← পূৰ্বৰ </a></li>  
    <li class = "সক্ৰিয়" ><a href = "#" > ১ </a></li>  
    <li><a href = "#" > ২ </a></li> 
    <li><a href = "#" > ৩ </a></li> 
    <li><a href = "#" > ৪ </a></li> 
    <li><a href = "#" > ৫ </a></li> 
    <li class = "পৰৱৰ্তী" ><a href = "#" > পৰৱৰ্তী → </a></li>  
  </ul>
</div>

মূল সতৰ্কবাণীসমূহ

এটা কাৰ্য্যৰ বিফলতা, সম্ভাৱ্য বিফলতা, বা সফলতা আলোকপাত কৰাৰ বাবে এক-শাৰী বাৰ্তাসমূহ। বিশেষকৈ ফৰ্মৰ বাবে উপযোগী।

বাৰ্তাসমূহ ব্লক কৰক

যিবোৰ বাৰ্তাৰ বাবে অলপ ব্যাখ্যাৰ প্ৰয়োজন হয়, সেইবোৰৰ বাবে আমাৰ ওচৰত অনুচ্ছেদ শৈলী সতৰ্কবাণী আছে। এইবোৰ দীঘলীয়া ভুল বাৰ্তাসমূহ বাবল আপ কৰাৰ বাবে, এটা ব্যৱহাৰকাৰীক এটা বাকী থকা কাৰ্য্যৰ বিষয়ে সতৰ্ক কৰি দিয়াৰ বাবে, বা কেৱল পৃষ্ঠাত অধিক জোৰ দিয়াৰ বাবে তথ্য উপস্থাপন কৰাৰ বাবে নিখুঁত।

মডালসমূহ

মডালসমূহ—সংলাপসমূহ বা লাইটবক্সসমূহ—প্ৰসংগভিত্তিক কাৰ্য্যসমূহৰ বাবে অতি উত্তম যিবোৰ পৰিস্থিতিত পটভূমি প্ৰসংগ ৰক্ষণাবেক্ষণ কৰাটো গুৰুত্বপূৰ্ণ।

সঁজুলিৰ টিপছ

Twipsies এটা বিভ্ৰান্ত ব্যৱহাৰকাৰীক সহায় আৰু সঠিক দিশত আঙুলিয়াই দিয়াৰ বাবে ছুপাৰ উপযোগী।

Popovers

বিন্যাসত কোনো প্ৰভাৱ নেপেলোৱাকৈ এটা পৃষ্ঠালৈ উপপাঠ্য তথ্য প্ৰদান কৰিবলৈ popovers ব্যৱহাৰ কৰক।

বুটষ্ট্ৰেপক Preboot ৰ সৈতে নিৰ্মাণ কৰা হৈছিল , এটা মুক্ত-উৎস পেক মিক্সিন আৰু চলকসমূহৰ সৈতে ব্যৱহাৰ কৰিবলে Less , দ্ৰুত আৰু সহজ ৱেব বিকাশৰ বাবে এটা CSS প্ৰিপ্ৰচেছৰ ।

আমি Bootstrap ত Preboot কেনেকৈ ব্যৱহাৰ কৰিছিলোঁ আৰু আপুনি ইয়াক কেনেকৈ ব্যৱহাৰ কৰিব পাৰে চাওক যদি আপুনি আপোনাৰ পৰৱৰ্তী প্ৰকল্পত Less চলাবলৈ নিৰ্ব্বাচন কৰে ।

কেনেকৈ ব্যৱহাৰ কৰিব

এই বিকল্প ব্যৱহাৰ কৰক Bootstrap ৰ Less চলকসমূহ, মিক্সিনসমূহ, আৰু আপোনাৰ ব্ৰাউজাৰত জাভাস্ক্রিপ্টৰ যোগেদি CSS ত নেষ্টিংৰ সম্পূৰ্ণ ব্যৱহাৰ কৰিবলে ।

<link rel = "শৈলীপত্ৰিকা/কম" href = "কম/বুটষ্ট্ৰেপ.কম"    মাধ্যম = "সকলো" /> 
<স্ক্রিপ্ট  src = "js/কম-১.০.৪১.মিনিট.js" ></script>

.js সমাধান অনুভৱ কৰা নাই? Less Mac এপটো চেষ্টা কৰক বা আপুনি আপোনাৰ ক'ড মোতায়েন কৰাৰ সময়ত কম্পাইল কৰিবলৈ Node.js ব্যৱহাৰ কৰক।

কি অন্তৰ্ভুক্ত কৰা হৈছে

বুটষ্ট্ৰেপৰ অংশ হিচাপে টুইটাৰ বুটষ্ট্ৰেপত কি অন্তৰ্ভুক্ত কৰা হৈছে তাৰ কিছুমান উল্লেখযোগ্য দিশ ইয়াত দিয়া হ'ল। ডাউনলোড কৰিবলে আৰু অধিক জানিবলৈ Bootstrap ৱেবছাইট বা Github প্ৰকল্প পৃষ্ঠালৈ যাওক।

ৰঙৰ চলকসমূহ

কমত চলকসমূহ আপোনাৰ CSS মূৰৰ বিষমুক্ত ৰক্ষণাবেক্ষণ আৰু আপডেইট কৰাৰ বাবে নিখুঁত। যেতিয়া আপুনি এটা ৰঙৰ মান বা এটা সঘনাই ব্যৱহৃত মান সলনি কৰিব বিচাৰে, ইয়াক এটা ঠাইত আপডেইট কৰক আৰু আপুনি সংহতি কৰা হৈছে।

// সংযোগসমূহ
@linkColor :          #8b59c2
@linkColorHover :     অন্ধকাৰ কৰক ( @linkColor , 10 ); 
 
// ধূসৰ
@ক'লা : #০০০;             
@grayDark :           পোহৰ কৰক ( @ক'লা , ২৫ %); 
@ধূসৰ :               পাতল কৰক ( @ক'লা , ৫০ %); 
@grayLight :          পাতল কৰক ( @ক'লা , ৭০ %); 
@grayLighter :        লঘু কৰক ( @black ,  90 %);
@বগা : #fff ;             
 
// উচ্চাৰণ ৰং
@নীলা :               #০৮b৫fb
@সেউজীয়া :              #৪৬a৫৪৬
@ৰঙা :                #9d261d
@হালধীয়া :             #ffc40d
@কমলা :             #f89406
@গোলাপী :               #c3325f
@বেঙুনীয়া : #7a43b6 ;            
 
// ভিত্তিৰেখা
@ ভিত্তি ৰেখা : 20px ;          

মন্তব্য কৰি আছে

/* ... */Less এ CSS ৰ সাধাৰণ বাক্যবিন্যাসৰ উপৰিও মন্তব্যৰ অন্য শৈলীও প্ৰদান কৰে ।

// এইটো এটা মন্তব্য
/* এইটোও এটা মন্তব্য */

মিক্সিন আপ ৱাজু

মিক্সিনসমূহ মূলতঃ CSS ৰ বাবে অন্তৰ্ভুক্ত বা আংশিক, আপোনাক ক'ডৰ এটা ব্লক এটাত একত্ৰিত কৰাৰ অনুমতি দিয়ে। বিক্ৰেতা উপসৰ্গযুক্ত বৈশিষ্ট্যৰ বাবে সিহঁত অতি উত্তম যেনেbox-shadowবিক্ৰেতা উপসৰ্গযুক্ত বৈশিষ্ট্য যেনে , ক্ৰছ-ব্ৰাউজাৰ গ্ৰেডিয়েন্ট, ফন্ট ষ্টেক, আৰু অধিক ৰতলত Bootstrap ৰ সৈতে অন্তৰ্ভুক্ত কৰা মিক্সিনসমূহৰ এটা নমুনা দিয়া হৈছে ।

ফন্ট ষ্টেকসমূহ

#ফন্ট {
  . চৰ্টহেণ্ড ( @ ওজন : সাধাৰণ , @ আকাৰ : 14px , @lineHeight : 20px ) {     
    ফন্ট - আকাৰ : @size ; 
    ফন্ট - ওজন : @weight ; 
    ৰেখা - উচ্চতা : @lineHeight ; 
  }
  . sans - serif ( @ ওজন : স্বাভাৱিক , @আকাৰ : ১৪px , @lineHeight : 20px ) {     
    font - family : "হেলভেটিকা ​​নিউ" , হেলভেটিকা ​​, এৰিয়াল , sans - serif ;   
    ফন্ট - আকাৰ : @size ; 
    ফন্ট - ওজন : @weight ; 
    ৰেখা - উচ্চতা : @lineHeight ; 
  }
  . serif ( @ ওজন : স্বাভাৱিক , @আকাৰ : 14px , @lineHeight : 20px ) {     
    font - family : "জৰ্জিয়া" , টাইমছ নিউ ৰোমান , টাইমছ , sans - serif ;     
    ফন্ট - আকাৰ : @size ; 
    ফন্ট - ওজন : @weight ; 
    ৰেখা - উচ্চতা : @lineHeight ; 
  }
  . monospace ( @ ওজন : স্বাভাৱিক , @আকাৰ : 12px , @lineHeight : 20px ) {     
    font - family : "মনাকো" , কুৰিয়ৰ নতুন , একস্থান ;   
    ফন্ট - আকাৰ : @size ; 
    ফন্ট - ওজন : @weight ; 
    ৰেখা - উচ্চতা : @lineHeight ; 
  }
}

গ্ৰেডিয়েন্ট

#গ্ৰেডিয়েন্ট {
  . অনুভূমিক ( @আৰম্ভৰ ৰং : #৫৫৫, @অন্তৰ ৰং: #৩৩৩) { 
    পটভূমি - ৰং : @endColor ; 
    পটভূমি - পুনৰাবৃত্তি : পুনৰাবৃত্তি - x ;
    পটভূমি - ছবি : - khtml - গ্ৰেডিয়েন্ট ( ৰৈখিক , বাওঁ ওপৰ , সোঁ ওপৰ , ( @startColor ) ৰ পৰা ( @endColor ) ); // কনকুৱেৰ   
    পটভূমি - চিত্ৰ : - moz- ৰৈখিক - গ্ৰেডিয়েন্ট ( বাওঁফালে , @startColor , @endColor ) ; // এফ এফ ৩.৬+    
    পটভূমি - চিত্ৰ : - ms- ৰৈখিক - গ্ৰেডিয়েন্ট ( বাওঁফালে , @startColor , @endColor ) ; // আই ই ১০    
    পটভূমি - ছবি : - webkit - গ্ৰেডিয়েন্ট ( ৰৈখিক , বাওঁ ওপৰ , সোঁ ওপৰ , ৰং - বন্ধ ( 0 %, @startColor ), ৰং - বন্ধ ( 100 %, @endColor )); // ছাফাৰী ৪+, ক্ৰ’ম ২+    
    পটভূমি - চিত্ৰ : -ৱেবকিট - ৰৈখিক - গ্ৰেডিয়েন্ট ( বাওঁফালে , @startColor , @endColor ) ; // ছাফাৰী ৫.১+, ক্ৰ’ম ১০+    
    পটভূমি - চিত্ৰ : - o- ৰৈখিক - গ্ৰেডিয়েন্ট ( বাওঁফালে , @startColor , @endColor ) ; // অপেৰা ১১.১০    
    - ms - ফিল্টাৰ : %( "progid:DXImageTransform.Microsoft.gradient(আৰম্ভৰ ৰং='%d', শেষৰং='%d', গ্ৰেডিয়েণ্টপ্ৰকাৰ=1)" , @আৰম্ভৰ ৰং , @শেষৰং ) ; // IE8+  
    ফিল্টাৰ : e (%( "progid:DXImageTransform.Microsoft.gradient(আৰম্ভৰ ৰং='%d', শেষৰং='%d', গ্ৰেডিয়েণ্টপ্ৰকাৰ=1)" , @আৰম্ভৰ ৰং , @শেষৰং ) ); // IE6 আৰু IE7 
    পটভূমি - চিত্ৰ : ৰৈখিক - গ্ৰেডিয়েন্ট ( বাওঁফালে , @startColor , @endColor ); // লে মানক   
  }
  . উলম্ব ( @আৰম্ভৰ ৰং : #৫৫৫, @অন্তৰ ৰং: #৩৩৩) { 
    পটভূমি - ৰং : @endColor ; 
    পটভূমি - পুনৰাবৃত্তি : পুনৰাবৃত্তি - x ;
    background - image : - khtml - gradient ( ৰৈখিক , বাওঁফালৰ ওপৰত , বাওঁফালৰ তলত , ( @startColor ) ৰ পৰা ( @endColor ) লৈ ); // কনকুৱেৰ   
    পটভূমি - ছবি : - moz - ৰৈখিক - গ্ৰেডিয়েন্ট ( @startColor , @endColor ); // এফ এফ ৩.৬+   
    পটভূমি - ছবি : - ms - ৰৈখিক - গ্ৰেডিয়েন্ট ( @startColor , @endColor ); // আই ই ১০   
    পটভূমি - ছবি : - webkit - গ্ৰেডিয়েন্ট ( ৰৈখিক , বাওঁ ওপৰ , বাওঁ তল , ৰং - বন্ধ ( 0 %, @startColor ), ৰং - বন্ধ ( 100 %, @endColor )); // ছাফাৰী ৪+, ক্ৰ’ম ২+    
    পটভূমি - ছবি : - ৱেবকিট - ৰৈখিক - গ্ৰেডিয়েন্ট ( @startColor , @endColor ); // ছাফাৰী ৫.১+, ক্ৰ’ম ১০+   
    পটভূমি - ছবি : - o - ৰৈখিক - গ্ৰেডিয়েন্ট ( @startColor , @endColor ); // অপেৰা ১১.১০   
    - ms - ফিল্টাৰ : %( "progid:DXImageTransform.Microsoft.gradient(আৰম্ভৰ ৰং='%d', শেষৰং='%d', গ্ৰেডিয়েণ্টপ্ৰকাৰ=0)" , @আৰম্ভৰ ৰং , @শেষৰং ) ; // IE8+  
    ফিল্টাৰ : e (%( "progid:DXImageTransform.Microsoft.gradient(আৰম্ভৰ ৰং='%d', শেষৰং='%d', গ্ৰেডিয়েণ্টপ্ৰকাৰ=0)" , @আৰম্ভৰ ৰং , @শেষৰং ) ); // IE6 আৰু IE7 
    পটভূমি - ছবি : ৰৈখিক - গ্ৰেডিয়েন্ট ( @startColor , @endColor ); // প্ৰামাণিক  
  }
  . দিশগত ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . উলম্ব - তিনিটা - ৰং ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) { 
    ...
  }
}

অপাৰেচন আৰু গ্ৰীড ব্যৱস্থা

তলৰটোৰ দৰে নমনীয় আৰু শক্তিশালী মিক্সিন সৃষ্টি কৰিবলৈ আড়ম্বৰপূৰ্ণ হওক আৰু কিছুমান গণিত সম্পন্ন কৰক।

// গ্ৰীডিটুড
@gridColumns : ১৬ ;       
@গ্ৰিডস্তম্ভৰ প্ৰস্থ : ৪০px ;   
@গ্ৰিডগাটাৰপ্ৰস্থ : ২০px ;   
 
// গ্ৰীড ব্যৱস্থা
. পাত্ৰ {
  width : @ছাইটৰ প্ৰস্থ ; 
  margin : 0 স্বয়ংক্ৰিয় ;  
  . ক্লিয়াৰফিক্স ();
}
. স্তম্ভসমূহ ( @columnSpan : 1 ) {  
  প্ৰদৰ্শন : ইনলাইন ; 
  float : বাওঁফালে ;
  width : ( @গ্ৰিডস্তম্ভপ্ৰস্থ * @স্তম্ভস্পেন ) + ( @গ্ৰিডগাটাৰপ্ৰস্থ * ( @স্তম্ভস্পেন - 1 ));         
  margin - বাওঁফালে : @gridGutterWidth ; 
  &: প্ৰথম - সন্তান {
    মাৰ্জিন - বাওঁফালে : 0 ; 
  }
}
. অফছেট ( @columnOffset : 1 ) {  
  margin - left : ( @গ্ৰিডস্তম্ভৰ প্ৰস্থ * @স্তম্ভ অফছেট ) + ( @গ্ৰিডগাটাৰ প্ৰস্থ * ( @স্তম্ভ অফছেট - 1 )) ! গুৰুত্বপূৰ্ণ ;          
}