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

বুটষ্ট্ৰেপৰ অংশ হিচাপে প্ৰদান কৰা অবিকল্পিত গ্ৰীড ব্যৱস্থাপ্ৰণালী এটা 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 পেনাটিবাছ এট মেগনিছ ডি পাৰ্চুৰিয়েন্ট মন্টেছ, নাচেটাৰ ৰিডিকুলাছ মুছ। নুল্লাম আইডি ডোলৰ আইডি নিভ উল্ট্ৰিচিয়েছ ভেহিকুলা উট আইডি এলিট।

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

<strong>আপুনি আৰু ৰ সৈতে উপশিৰোনামাও যোগ কৰিব পাৰে<em>

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

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

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

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

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

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

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

ঠিকনাসমূহ

উপাদানটো addressব্যৱহাৰ কৰা হয়—আপুনি অনুমান কৰিলে!—ঠিকনাৰ বাবে। ইয়াত কেনেকুৱা দেখা যায়:

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

টোকা: কোনো শৈলী প্ৰয়োগ নকৰাকৈ বাস্তৱ জীৱনত পঢ়াৰ দৰে বিষয়বস্তু সঠিকভাৱে গঠন কৰিবলৈ এটা শাৰীৰ প্ৰতিটো শাৰী addressএটা শাৰী-বিৰতি ( ) ৰে শেষ কৰিব লাগিব ।<br />

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

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

ব্লককোটসমূহ

<blockquote> <p> <cite>

blockquoteআপোনাৰ চাৰিওফালে paragraphআৰু citeটেগসমূহ নিশ্চিতভাৱে ৰেপ কৰক । উৎসৰ উদ্ধৃতি দিওঁতে citeউপাদানটো ব্যৱহাৰ কৰক। CSS এ স্বয়ংক্ৰিয়ভাৱে এটা নামৰ আগত এটা em ডেচ (—) দিব।

Lorem ipsum dolor বসা amet, consectetur adipisicing অভিজাত, sed eusmod কালিক incididunt উট labore এট dolore magna aliqua...

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

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

• জেৰেমি বিক্সবি
• ৰবাৰ্ট ডেজুৰ
• জোছ ৱাশ্বিংটন
• এণ্টন কেপ্ৰেছি
• মোৰ টিম মেটছ
  • জৰ্জ কাষ্টান্জা
  • জেৰী ছেইনফেল্ড
  • কচমো ক্ৰেমাৰ
  • ইলেইন বেনিছ
  • নিউমেন
• জন জেকব
• পল পিয়ৰ্চ
• কেভিন গাৰ্নেট

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

• জেৰেমি বিক্সবি
• ৰবাৰ্ট ডেজুৰ
• জোছ ৱাশ্বিংটন
• এণ্টন কেপ্ৰেছি
• মোৰ টিম মেটছ
  • জৰ্জ কাষ্টান্জা
  • জেৰী ছেইনফেল্ড
  • কচমো ক্ৰেমাৰ
  • ইলেইন বেনিছ
  • নিউমেন
• জন জেকব
• পল পিয়ৰ্চ
• কেভিন গাৰ্নেট

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

1. জেৰেমি বিক্সবি
2. ৰবাৰ্ট ডেজুৰ
3. জোছ ৱাশ্বিংটন
4. এণ্টন কেপ্ৰেছি
5. মোৰ টিম মেটছ
   1. জৰ্জ কাষ্টান্জা
   2. জেৰী ছেইনফেল্ড
   3. কচমো ক্ৰেমাৰ
   4. ইলেইন বেনিছ
   5. নিউমেন
6. জন জেকব
7. পল পিয়ৰ্চ
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	ডেন্ট	ক'ড

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

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

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

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

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

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

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

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

X-বৃহৎ ইনপুট

চয়ন কৰা

১ ২ ৩ ৪ ৫

চয়ন কৰা

১ ২ ৩ ৪ ৫

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

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

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

X-বৃহৎ ইনপুট

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

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

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

@

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

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

ফাইল ইনপুট

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

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

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

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

তাৰিখৰ পৰিসৰ

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

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

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

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

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

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

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

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

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

X-বৃহৎ ইনপুট

চয়ন কৰা

১ ২ ৩ ৪ ৫

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

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

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

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

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

বুটামসমূহ

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

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

উদাহৰণ বুটাম

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

বিকল্প আকাৰ

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

অক্ষম অৱস্থা

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

লিংকসমূহ

বুটামসমূহ

কি হৈছে

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

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

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

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

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

টেব আৰু বড়ি

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

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

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

<ul class="টেবসমূহ"> 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>

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

<ul class="বড়ি"> 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="পৃষ্ঠাকৰণ"> 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>

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

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

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

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

মডালসমূহ

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

Popovers

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

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

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

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

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

<link rel="শৈলীপত্ৰ/কম" type="text/css" href="কম/বুটষ্ট্ৰেপ.কম" মিডিয়া="সকলো" /> rel = "ষ্টাইলশ্বীট/কম" type = "text/css" href = "কম/বুটষ্ট্ৰেপ.কম" মিডিয়া = "সকলো" />    
<script type = "text/javascript" src = "জেএছ/কম-১.০.৪১.মিনিট.জেএছ" ></script>  

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

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

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

ৰঙৰ চলকসমূহ

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

// সংযোগসমূহ
@লিংকৰ ৰং : #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 )) ! গুৰুত্বপূৰ্ণ ;          
}