টাইপোগ্ৰাফিক স্কেল

সম্পূৰ্ণ টাইপোগ্ৰাফিক গ্ৰীডটো আমাৰ variables.less ফাইলত দুটা Less চলকৰ ওপৰত ভিত্তি কৰি তৈয়াৰ কৰা হৈছে: @baseFontSizeআৰু @baseLineHeight. প্ৰথমটো হৈছে গোটেইখিনিতে ব্যৱহৃত ভিত্তি ফন্ট-আকাৰ আৰু দ্বিতীয়টো হৈছে ভিত্তি ৰেখা-উচ্চতা।

আমি সেই চলকসমূহ ব্যৱহাৰ কৰো, আৰু কিছুমান গণিত, আমাৰ সকলো ধৰণৰ আৰু অধিক মাৰ্জিন, পেডিং, আৰু লাইন-উচ্চতা সৃষ্টি কৰিবলৈ।

উদাহৰণ দেহৰ লিখনী

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

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

জোৰ দিয়া ব্যৱহাৰ কৰি

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

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

উদাহৰণ ঠিকনা

<address>টেগটো কেনেকৈ ব্যৱহাৰ কৰিব পাৰি তাৰ দুটা উদাহৰণ দিলোঁ :

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

সম্পূৰ্ণ নাম
[email protected]

উদাহৰণ সংক্ষিপ্ত ৰূপ

এটা বৈশিষ্ট্যৰ সৈতে সংক্ষিপ্তকৰণসমূহৰ titleএটা পোহৰ বিন্দুযুক্ত তলৰ সীমা আৰু এটা সহায় কাৰ্চাৰ থাকে হোভাৰত। ই ব্যৱহাৰকাৰীসকলক অতিৰিক্ত ইংগিত দিয়ে যে কিবা এটা হোভাৰত দেখুওৱা হ’ব।

ক্লাছটোক এটা সংক্ষিপ্ত ৰূপত যোগ কৰক যাতে initialismইয়াক অলপ সৰু লিখনীৰ আকাৰ দি টাইপোগ্ৰাফিক হাৰমনি বৃদ্ধি পায়।

ৰুটি টুকুৰা টুকুৰ কৰাৰ পিছত HTML হৈছে আটাইতকৈ ভাল বস্তু।

বৈশিষ্ট্য শব্দটোৰ এটা সংক্ষিপ্ত ৰূপ হ'ল attr ।

এটা ব্লককোট অন্তৰ্ভুক্ত কৰিবলৈ, <blockquote>যিকোনো HTML উদ্ধৃতি হিচাপে ৰেপ কৰক। পোনপটীয়া উদ্ধৃতিৰ বাবে আমি এটা পৰামৰ্শ দিওঁ <p>।

আপোনাৰ উৎস উদ্ধৃতি দিবলৈ এটা বৈকল্পিক <small>উপাদান অন্তৰ্ভুক্ত কৰক আৰু আপুনি —ষ্টাইলিং উদ্দেশ্যৰ বাবে ইয়াৰ আগত এটা em ডেচ পাব।

<ব্লককোট>
  <p> লৰেম ইপচুম ডলৰ বহি আমেট, কনচেক্টেটাৰ এডিপিচিং এলিট। পূৰ্ণসংখ্যা posuere erat এটা ante venenatis. </p>
  <small> কোনোবা বিখ্যাত </small>
</blockquote> ৰ দ্বাৰা প্ৰকাশিত

অবিকল্পিত ব্লককোটসমূহক এনেদৰে শৈলী কৰা হয়:

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

Body of work ত কোনোবা বিখ্যাত

আপোনাৰ ব্লককোট সোঁফালে ওপঙিবলৈ, যোগ কৰক class="pull-right":

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

Body of work ত কোনোবা বিখ্যাত

অনাৰ্ডাৰেড

<ul>

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

আনষ্টাইল কৰা

<ul class="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>

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

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

ইউইস্মোড

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

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

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

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

অনুভূমিক বিৱৰণ

<dl class="dl-horizontal">

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

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

ইউইস্মোড

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

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

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

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

শাৰীত

ক'ডৰ ইনলাইন স্নিপেটসমূহ ৰ সৈতে ৰেপ কৰক <code>।

উদাহৰণস্বৰূপ , <code> অংশ </ code > ইনলাইন হিচাপে ৰেপ কৰিব লাগে ।  

মূল ব্লক

<pre>ক'ডৰ একাধিক শাৰীৰ বাবে ব্যৱহাৰ কৰক । সঠিক ৰেণ্ডাৰৰ বাবে ক'ডত যিকোনো কোণৰ বন্ধনীৰ পৰা আঁতৰি থকাটো নিশ্চিত কৰক।

<p>ইয়াত নমুনা লিখনী...</p>

<প্ৰাক>
  <p>ইয়াত নমুনা লিখনী...</p>
</pre>

টোকা: টেগসমূহৰ ভিতৰত ক'ড নিশ্চিতভাৱে <pre>বাওঁফালে যিমান পাৰি ওচৰত ৰাখক; ই সকলো টেব ৰেণ্ডাৰ কৰিব।

আপুনি বৈকল্পিকভাৱে শ্ৰেণী যোগ কৰিব পাৰে .pre-scrollableযি এটা সৰ্বোচ্চ-উচ্চতা 350px সংহতি কৰিব আৰু এটা y-অক্ষ স্ক্ৰলবাৰ প্ৰদান কৰিব।

গুগল প্ৰিটিফাই

একেটা <pre>উপাদান লওক আৰু উন্নত ৰেণ্ডাৰৰ বাবে দুটা বৈকল্পিক শ্ৰেণী যোগ কৰক।

<p> ইয়াত লিখাৰ নমুনা... </p>

<pre class = "প্ৰিটিপ্ৰিন্ট।" 
     linenums" >
  <p>ইয়াত নমুনা লিখনী...</p>
</pre>

google-code-prettify ডাউনলোড কৰক আৰু কেনেকৈ ব্যৱহাৰ কৰিব লাগে তাৰ বাবে readme চাওক।

টেগ	বিৱৰণ
<table>	এটা টেবুলাৰ বিন্যাসত তথ্য প্ৰদৰ্শনৰ বাবে ৰেপিং উপাদান
<thead>	টেবুল হেডাৰ শাৰীসমূহৰ বাবে ধাৰক উপাদান ( <tr>) টেবুল স্তম্ভসমূহ লেবেল কৰিবলে
<tbody>	<tr>টেবুলৰ দেহত টেবুল শাৰী ( ) ৰ বাবে পাত্ৰ উপাদান
<tr>	টেবুল কোষৰ এটা গোটৰ বাবে ধাৰক উপাদান ( <td>বা <th>) যি এটা শাৰীত উপস্থিত হয়
<td>	অবিকল্পিত টেবুল কোষ
<th>	স্তম্ভ (বা শাৰী, পৰিসৰ আৰু স্থানৰ ওপৰত নিৰ্ভৰ কৰি) লেবেলসমূহৰ বাবে বিশেষ টেবুল কোষ a ৰ ভিতৰত ব্যৱহাৰ কৰিব লাগিব<thead>
<caption>	টেবুলত কি আছে তাৰ বিৱৰণ বা সাৰাংশ, বিশেষকৈ পৰ্দা পাঠকৰ বাবে উপযোগী

<টেবুল>
  <মূৰ>
    <tr>
      <th> ... </th>
      <th> ... </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> ... </td>
      <td> ... </td>
    </tr>
  </tbody>
</table>

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

<টেবুল শ্ৰেণী = "টেবুল" > 
  ...
</table>

#	প্ৰথম নাম	উপাধি	ব্যৱহাৰকাৰীৰ নাম
১	মাৰ্ক	অট্টো	@mdo
২	যাকোব	থৰ্ণ্টন	@শকত
৩	লেৰী	চৰাইটো	@টুইটাৰত

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

টোকা: ষ্ট্ৰাইপড টেবুলসমূহে :nth-childCSS নিৰ্বাচক ব্যৱহাৰ কৰে আৰু IE7-IE8 ত উপলব্ধ নহয়।

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

#	প্ৰথম নাম	উপাধি	ব্যৱহাৰকাৰীৰ নাম
১	মাৰ্ক	অট্টো	@mdo
২	যাকোব	থৰ্ণ্টন	@শকত
৩	লেৰী	চৰাইটো	@টুইটাৰত

নান্দনিক উদ্দেশ্যে গোটেই টেবুলখনৰ চাৰিওফালে সীমা আৰু ঘূৰণীয়া চুক যোগ কৰক।

<table class = "টেবুল টেবুল-সীমাবদ্ধ" > 
  ...
</table>

#	প্ৰথম নাম	উপাধি	ব্যৱহাৰকাৰীৰ নাম
১	মাৰ্ক	অট্টো	@mdo
	মাৰ্ক	অট্টো	@getbootstrap
২	যাকোব	থৰ্ণ্টন	@শকত
৩	লেৰী দ্য বাৰ্ড		@টুইটাৰত

টেবুল কোষ পেডিং আধালৈ কাটিবলৈ শ্ৰেণী যোগ কৰি আপোনাৰ টেবুলসমূহক অধিক কমপাক্ট কৰক .table-condensed(8px ৰ পৰা 4px লৈ)।

<table class = "টেবুল টেবুল-ঘনীভূত" > 
  ...
</table>

#	প্ৰথম নাম	উপাধি	ব্যৱহাৰকাৰীৰ নাম
১	মাৰ্ক	অট্টো	@mdo
২	যাকোব	থৰ্ণ্টন	@শকত
৩	লেৰী দ্য বাৰ্ড		@টুইটাৰত

উপলব্ধ যিকোনো শ্ৰেণী ব্যৱহাৰ কৰি বিভিন্ন ৰূপ লাভ কৰিবলৈ টেবুল ক্লাছৰ যিকোনো এটা একত্ৰিত কৰিবলৈ নিঃসংকোচে অনুভৱ কৰক।

<table class = "টেবুল টেবুল-ষ্ট্ৰাইপড টেবুল-সীমাযুক্ত টেবুল-ঘনীভূত" > 
  ...
</table>

	সম্পূৰ্ণ নাম
#	প্ৰথম নাম	উপাধি	ব্যৱহাৰকাৰীৰ নাম
১	মাৰ্ক	অট্টো	@mdo
২	যাকোব	থৰ্ণ্টন	@শকত
৩	লেৰী দ্য বাৰ্ড		@টুইটাৰত

নমনীয় HTML আৰু CSS

Bootstrap ত প্ৰপত্ৰসমূহৰ বিষয়ে সৰ্বোত্তম অংশটো হ'ল যে আপোনাৰ সকলো ইনপুট আৰু নিয়ন্ত্ৰণসমূহ আপুনি আপোনাৰ মাৰ্কআপত যিমানেই নিৰ্মাণ নকৰক কিয় সুন্দৰ দেখা যায়। কোনো অতিৰিক্ত HTML ৰ প্ৰয়োজন নাই, কিন্তু আমি প্ৰয়োজনীয় সকলৰ বাবে আৰ্হিবোৰ প্ৰদান কৰোঁ।

অধিক জটিল পৰিকল্পনাসমূহ সহজ ষ্টাইলিং আৰু ইভেন্ট বাইণ্ডিঙৰ বাবে সংক্ষিপ্ত আৰু স্কেলেবল শ্ৰেণীসমূহৰ সৈতে আহে, গতিকে আপুনি প্ৰতিটো পদক্ষেপতে আবৃত।

চাৰিটা লেআউট অন্তৰ্ভুক্ত কৰা হৈছে

বুটষ্ট্ৰেপ চাৰি ধৰণৰ ফৰ্ম পৰিকল্পনাৰ বাবে সমৰ্থনৰ সৈতে আহে:

• উলম্ব (অবিকল্পিত)
• সন্ধান
• শাৰীত
• অনুভূমিক

বিভিন্ন ধৰণৰ প্ৰপত্ৰ পৰিকল্পনাসমূহৰ বাবে মাৰ্কআপ কৰিবলৈ কিছুমান পৰিবৰ্তনৰ প্ৰয়োজন হয়, কিন্তু নিয়ন্ত্ৰণসমূহ নিজেই একেই থাকে আৰু আচৰণ কৰে।

নিয়ন্ত্ৰণ অৱস্থা আৰু অধিক

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

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

মূল ৰূপ

v2.0 ৰ সৈতে, আমাৰ ওচৰত ফৰ্ম শৈলীৰ বাবে লঘু আৰু স্মাৰ্ট অবিকল্পিত আছে। কোনো অতিৰিক্ত মাৰ্কআপ নাই, মাত্ৰ ফৰ্ম নিয়ন্ত্ৰণ।

লেবেলৰ নাম সংশ্লিষ্ট সহায় লিখনী!

ইয়াত ব্লক-স্তৰৰ সহায় লিখনীৰ উদাহৰণ দিয়ক।

মোক চাওক দাখিল কৰক

<form class = "ভাল" > 
  <label> লেবেলৰ নাম </label>
  <input type = "text" class = "span3" placeholder = " কিবা এটা টাইপ কৰক..." >   
  <span class = "help-inline" > সংশ্লিষ্ট সহায় লিখনী! </span> 
  <label class = "চেকবক্স" > 
    <input type = "checkbox" > মোক পৰীক্ষা কৰক 
  </label>
  <button type = "জমা দিয়ক" class = "btn" > জমা দিয়ক </button>  
</form>

সন্ধান ফৰ্ম

.form-searchঅবিকল্পিত WebKit শৈলীসমূহ প্ৰতিফলিত কৰি, অতিৰিক্ত ঘূৰণীয়া সন্ধান ক্ষেত্ৰসমূহৰ বাবে যোগ কৰক ।

সন্ধান

<form class = "ভাল ফৰ্ম-অন্বেষণ" > 
  <input type = "text" class = "ইনপুট-মাধ্যম সন্ধান-প্ৰশ্ন" >  
  <button type = "submit" class = "btn" > সন্ধান কৰক </button>  
</form>

ইনলাইন ফৰ্ম

ইনপুটসমূহ আৰম্ভ কৰিবলৈ ব্লক স্তৰৰ। .form-inlineআৰু ৰ বাবে .form-horizontal, আমি inline-block ব্যৱহাৰ কৰো।

মোক মনত ৰাখিবা চাইন ইন কৰক

<form class = "ভাল ফৰ্ম-ইনলাইন" > 
  <input type = "text" class = "ইনপুট-সৰু" স্থানধাৰী = "ইমেইল" >   
  <input type = "password" class = "ইনপুট-সৰু" স্থানধাৰী = "পাছৱৰ্ড" >   
  <label class = "চেকবক্স" > 
    <input type = "checkbox" > মোক মনত ৰাখিব 
  </label>
  <button type = "submit" class = "btn" > চাইন ইন কৰক </button>  
</form>

বুটষ্ট্ৰেপ সমৰ্থনসমূহ নিয়ন্ত্ৰণ কৰে

লিখনী ইনপুট

ফ্ৰীফৰ্ম টেক্সটৰ উপৰিও যিকোনো HTML5 টেক্সট-ভিত্তিক ইনপুট তেনেকৈয়ে দেখা দিয়ে।

চেকবক্স

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

তালিকা নিৰ্ব্বাচন কৰক

কিবা এটা ২ ৩ ৪ ৫

মাল্টিকন-নিৰ্বাচন কৰক

১ ২ ৩ ৪ ৫

ফাইল ইনপুট

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

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

উদাহৰণ মাৰ্কআপ

ওপৰৰ উদাহৰণ প্ৰপত্ৰ বিন্যাস দিয়া হৈছে, ইয়াত প্ৰথম ইনপুট আৰু নিয়ন্ত্ৰণ গোটৰ সৈতে জড়িত মাৰ্কআপ আছে। ষ্টাইলিঙৰ বাবে .control-group, .control-label, আৰু .controlsশ্ৰেণীসমূহ সকলো প্ৰয়োজনীয়।

<form class = "ৰূপ-অনুভূমিক" > 
  <ফিল্ডছেট>
    <legend> কিংবদন্তি লিখনী </legend>
    <div class = "নিয়ন্ত্ৰণ-গোট" > 
      <label class = "control-label" for = "input01" > লিখনী ইনপুট </label>  
      <div class = "নিয়ন্ত্ৰণসমূহ" > 
        <ইনপুট ধৰণ = "লিখনী" শ্ৰেণী = "ইনপুট-xlarge" id = "ইনপুট 01" >   
        <p class = "help-block" > সহায়ক লিখনী সমৰ্থন কৰা </p> 
      </div>
    </div>
  </ফিল্ডছেট>
</form>

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

বাওঁফালে দেখুওৱা হৈছে আমি সমৰ্থন কৰা সকলো অবিকল্পিত ফৰ্ম নিয়ন্ত্ৰণ। ইয়াত বুলেটযুক্ত তালিকাখন দিয়া হৈছে:

• লিখনী ইনপুটসমূহ (লিখনী, পাছৱৰ্ড, ইমেইল, ইত্যাদি)
• চেকবক্স
• ৰেডিঅ'
• চয়ন কৰা
• একাধিক নিৰ্বাচন কৰক
• ফাইল ইনপুট
• টেক্সট এৰিয়া

---

v2.0 ৰ সৈতে নতুন অবিকল্পিতসমূহ

v1.4 লৈকে, Bootstrap ৰ অবিকল্পিত প্ৰপত্ৰ শৈলীসমূহে অনুভূমিক পৰিকল্পনা ব্যৱহাৰ কৰিছিল । Bootstrap 2 ৰ সৈতে, আমি যিকোনো ফৰ্মৰ বাবে স্মাৰ্ট, অধিক স্কেলেবল অবিকল্পিতসমূহ থাকিবলৈ সেই বাধা আঁতৰালোঁ।

নিয়ন্ত্ৰণ অৱস্থা গঠন কৰক

কেন্দ্ৰীভূত ইনপুট

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

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

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

নিষ্ক্ৰিয় কৰা চেকবাক্স

এইটো এটা নিষ্ক্ৰিয় চেকবাক্স

সতৰ্কবাণীৰ সৈতে ইনপুট

কিবা এটা ভুল হ’ব পাৰে

ভুলৰ সৈতে ইনপুট

অনুগ্ৰহ কৰি ভুলটো শুধৰাই দিয়ক

সফলতাৰ সৈতে ইনপুট

Woohoo!

সফলতাৰে নিৰ্বাচন কৰক

১ ২ ৩ ৪ ৫ Woohoo!

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

পুনৰ ডিজাইন কৰা ব্ৰাউজাৰৰ অৱস্থা

বুটষ্ট্ৰেপে ব্ৰাউজাৰ-সমৰ্থিত কেন্দ্ৰীভূত আৰু disabledঅৱস্থাসমূহৰ বাবে শৈলীসমূহ বৈশিষ্ট্য দিয়ে। আমি অবিকল্পিত Webkit আঁতৰাওঁ আৰু ইয়াৰ ঠাইত outlinea প্ৰয়োগ কৰো ।box-shadow:focus

---

প্ৰপত্ৰ বৈধকৰণ

ইয়াত ভুল, সতৰ্কবাণী, আৰু সফলতাৰ বাবে বৈধকৰণ শৈলীসমূহো অন্তৰ্ভুক্ত কৰা হৈছে। ব্যৱহাৰ কৰিবলৈ, ভুল শ্ৰেণীটো চাৰিওফালৰ ত যোগ কৰক .control-group।

<ফিল্ডছেট
  class = "নিয়ন্ত্ৰণ-গোট ভুল" >
  ...
</ফিল্ডছেট>

প্ৰপত্ৰ নিয়ন্ত্ৰণসমূহ সম্প্ৰসাৰণ কৰা

গ্ৰীডৰ আকাৰ গঠন কৰক

১ ২ ৩ ৪ ৫ ১ ২ ৩ ৪ ৫ ১ ২ ৩ ৪ ৫

.span*ইনপুট আকাৰৰ বাবে গ্ৰীড ব্যৱস্থাপ্ৰণালীৰ পৰা একে শ্ৰেণী ব্যৱহাৰ কৰক ।

বিকল্প আকাৰ

আপুনি স্থিতিশীল শ্ৰেণীসমূহো ব্যৱহাৰ কৰিব পাৰে যি গ্ৰীডলৈ মেপ নকৰে, প্ৰতিক্ৰিয়াশীল CSS শৈলীসমূহৰ সৈতে খাপ খুৱাই, বা বিভিন্ন ধৰণৰ নিয়ন্ত্ৰণসমূহৰ বাবে একাউণ্ট (যেনে, inputবনাম select) ।

প্ৰিপেণ্ড কৰা লিখনী

@

ইয়াত কিছুমান সহায়ক লিখা আছে

সংযুক্ত লিখনী

.০০

ইয়াত অধিক সহায়ৰ লিখনী আছে

সংযোজন আৰু প্ৰিপেণ্ড কৰক

$ .০০

বুটামৰ সৈতে সংযোজন কৰক

যাওক!

ইনলাইন চেকবক্সসমূহ

১ ২ ৩

চেকবাক্সসমূহ

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

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

ৰেডিঅ' বুটাম

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

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

ইনপুটসমূহ প্ৰিপেণ্ড আৰু সংযোজন কৰক

ইনপুট গোটসমূহে—সংলগ্ন বা প্ৰিপেণ্ড কৰা লিখনীৰ সৈতে—আপোনাৰ ইনপুটসমূহৰ বাবে অধিক প্ৰসংগ দিয়াৰ এটা সহজ উপায় প্ৰদান কৰে। ডাঙৰ উদাহৰণসমূহৰ ভিতৰত আছে টুইটাৰ ব্যৱহাৰকাৰীনামৰ বাবে @ চিহ্ন বা বিত্তীয় ক্ষেত্ৰত $।

---

চেকবক্স আৰু ৰেডিঅ'

v1.4 লৈকে, বুটষ্ট্ৰেপৰ বাবে চেকবাক্স আৰু ৰেডিঅ'সমূহৰ চাৰিওফালে অতিৰিক্ত মাৰ্কআপৰ প্ৰয়োজন আছিল সিহতক ষ্টেক কৰিবলে । এতিয়া, ই এটা সহজ কথা পুনৰাবৃত্তি কৰা <label class="checkbox">যিয়ে <input type="checkbox">.

ইনলাইন চেকবক্স আৰু ৰেডিঅ'সমূহো সমৰ্থিত। মাত্ৰ .inlineযিকোনো বাত যোগ .checkboxকৰক .radioআৰু আপুনি শেষ হ’ল।

---

ইনলাইন ফৰ্ম আৰু এপেণ্ড/প্ৰিপেণ্ড

এটা ইনলাইন ফৰ্মত প্ৰিপেণ্ড বা এপেণ্ড ইনপুটসমূহ ব্যৱহাৰ কৰিবলে, .add-onআৰু inputএকেটা শাৰীতে, স্পেচ নোহোৱাকৈ স্থাপন কৰাটো নিশ্চিত কৰক।

---

সহায় পাঠ্য গঠন কৰক

আপোনাৰ প্ৰপত্ৰ ইনপুটসমূহৰ বাবে সহায় লিখনী যোগ কৰিবলে, ইনপুট উপাদানৰ পিছত ইনলাইন সহায় লিখনী <span class="help-inline">বা এটা সহায় লিখনী ব্লক অন্তৰ্ভুক্ত কৰক।<p class="help-block">

কাৰ্য্যসমূহৰ বাবে বুটামসমূহ

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

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

ক্ৰছ ব্ৰাউজাৰ সামঞ্জস্যতা

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

একাধিক আকাৰ

ডাঙৰ বা সৰু বুটামৰ আড়ম্বৰপূৰ্ণ? .btn-large, .btn-small, বা .btn-miniদুটা অতিৰিক্ত আকাৰৰ বাবে যোগ কৰক ।

প্ৰাথমিক কাৰ্য্য কাৰ্য কৰা

প্ৰাথমিক কাৰ্য্য কাৰ্য কৰা

প্ৰাথমিক কাৰ্য্য কাৰ্য কৰা

অক্ষম অৱস্থা

নিষ্ক্ৰিয় বুটামসমূহৰ বাবে, .disabledসংযোগসমূহত শ্ৰেণী আৰু উপাদানসমূহৰ disabledবাবে বৈশিষ্ট্য যোগ কৰক।<button>

প্ৰাথমিক লিংক লিংক

প্ৰাথমিক বুটাম বুটাম

মুৰ ডাঙি! আমি .disabledইয়াত এটা ইউটিলিটি ক্লাছ হিচাপে ব্যৱহাৰ কৰো, সাধাৰণ .activeক্লাছৰ দৰেই, গতিকে কোনো উপসৰ্গৰ প্ৰয়োজন নাই।

এটা শ্ৰেণী, একাধিক টেগ

এটা , , বা উপাদানৰ .btnওপৰত শ্ৰেণীটো ব্যৱহাৰ কৰক ।<a><button><input>

লিংক বুটাম

<a class = "btn" href = "" > সংযোগ </a>  
<button class = "btn" ধৰণ = "জমা দিয়ক" >  
  বুটাম
</বুটাম>
<ইনপুট শ্ৰেণী = "btn" ধৰণ = "বুটাম"  
         value = "ইনপুট" >
<input class = "btn" ধৰণ = "জমা দিয়ক"  
         value = "জমা দিয়ক" >

এটা উত্তম অনুশীলন হিচাপে, আপোনাৰ প্ৰসংগটোৰ বাবে উপাদানটো মিলাবলৈ চেষ্টা কৰক যাতে মিল থকা ক্ৰছ-ব্ৰাউজাৰ ৰেণ্ডাৰ নিশ্চিত কৰিব পাৰি। যদি আপোনাৰ এটা আছে , আপোনাৰ বুটামৰ বাবে inputএটা ব্যৱহাৰ কৰক।<input type="submit">

• আইকন-গ্লাছ
• আইকন-সংগীত
• আইকন-অন্বেষণ
• আইকন-খাম
• আইকন-হাৰ্ট
• আইকন-ষ্টাৰ
• আইকন-ষ্টাৰ-খালী
• আইকন-ব্যৱহাৰকাৰী
• আইকন-ফিল্ম
• আইকন-থ-বৃহৎ
• আইকন-থ
• আইকন-থ-তালিকা
• আইকন-ঠিক আছে
• আইকন-আঁতৰাওক
• আইকন-জুম-ইন
• আইকন-জুম-আউট
• আইকন-অফ
• আইকন-চিগনেল
• আইকন-কগ
• আইকন-আৱৰ্জনা
• আইকন-ঘৰ
• আইকন-ফাইল
• আইকন-সময়
• আইকন-ৰোড
• আইকন-ডাউনলোড-alt
• আইকন-ডাউনলোড
• আইকন-আপলোড
• আইকন-ইনবক্স
• আইকন-প্লে-বৃত্ত
• আইকন-পুনৰাবৃত্তি

• আইকন-সতেজ কৰক
• আইকন-তালিকা-alt
• আইকন-লক
• আইকন-ফ্লেগ
• আইকন-হেডফোন
• আইকন-ভলিউম-অফ
• আইকন-ভলিউম-ডাউন
• আইকন-ভলিউম-আপ
• আইকন-qrcode
• আইকন-বাৰকোড
• আইকন-টেগ
• আইকন-টেগসমূহ
• আইকন-বুক
• আইকন-বুকমাৰ্ক
• আইকন-প্ৰিন্ট
• আইকন-কেমেৰা
• আইকন-ফন্ট
• আইকন-বল্ড
• আইকন-ইটালিক
• আইকন-পাঠ্য-উচ্চতা
• আইকন-পাঠ্য-প্ৰস্থ
• আইকন-এলাইন-বাওঁফালে
• আইকন-এলাইন-কেন্দ্ৰ
• আইকন-এলাইন-সোঁফালে
• আইকন-এলাইন-justify
• আইকন-তালিকা
• আইকন-ইনডেন্ট-বাওঁফালে
• আইকন-ইনডেন্ট-ৰাইট
• আইকন-ফেচটাইম-ভিডিঅ'
• আইকন-চিত্ৰ

• আইকন-পেঞ্চিল
• আইকন-মেপ-মাৰ্কাৰ
• আইকন-সামঞ্জস্য
• আইকন-টিন্ট
• আইকন-সম্পাদনা কৰক
• আইকন-শ্বেয়াৰ কৰক
• আইকন-পৰীক্ষা কৰক
• আইকন-চলন
• আইকন-ষ্টেপ-পিছলৈ
• আইকন-দ্রুত-পিছলৈ
• আইকন-পিছলৈ
• আইকন-প্লে
• আইকন-বিৰতি
• আইকন-ষ্টপ
• আইকন-ফৰৱাৰ্ড
• আইকন-ফাষ্ট-ফৰৱাৰ্ড
• আইকন-ষ্টেপ-ফৰৱাৰ্ড
• আইকন-ইজেক্ট
• আইকন-চেভ্ৰন-বাওঁফালে
• আইকন-চেভ্ৰন-সোঁফালে
• আইকন-প্লাছ-চিন
• আইকন-মাইনাছ-চিন
• আইকন-আঁতৰোৱা-চিন
• আইকন-ঠিক আছে-চিহ্ন
• আইকন-প্ৰশ্ন-চিহ্ন
• আইকন-তথ্য-চিহ্ন
• আইকন-স্ক্ৰীণশ্বট
• আইকন-আঁতৰোৱা-বৃত্ত
• আইকন-ok-বৃত্ত
• আইকন-বান-বৃত্ত

• আইকন-তীৰ-বাওঁফালে
• আইকন-তীৰ-সোঁফালে
• আইকন-তীৰ-উপৰলৈ
• আইকন-তীৰ-তল
• আইকন-শ্বেয়াৰ-alt
• আইকন-আকাৰ সলনি-পূৰ্ণ
• আইকন-আকাৰ সলনি-সৰু
• আইকন-প্লাছ
• আইকন-মাইনাছ
• আইকন-এষ্টেৰিস্ক
• আইকন-বিস্ময়-চিহ্ন
• আইকন-উপহাৰ
• আইকন-পাত
• আইকন-জুই
• আইকন-চকু-খোলা
• আইকন-চকু-বন্ধ
• আইকন-সতৰ্কবাণী-চিহ্ন
• আইকন-প্লেন
• আইকন-কেলেণ্ডাৰ
• আইকন-ৰেণ্ডম
• আইকন-মন্তব্য
• আইকন-চুম্বক
• আইকন-চেভ্ৰন-আপ
• আইকন-চেভ্ৰন-ডাউন
• আইকন-ৰিটুইট
• আইকন-শ্বপিং-কাৰ্ট
• আইকন-ফোল্ডাৰ-বন্ধ কৰক
• আইকন-ফোল্ডাৰ-খোলা
• আইকন-আকাৰ সলনি-উলম্ব
• আইকন-আকাৰ সলনি-অনুভূমিক

স্প্ৰাইট হিচাপে নিৰ্মিত

প্ৰতিটো আইকনক এটা অতিৰিক্ত অনুৰোধ কৰাৰ পৰিৱৰ্তে, আমি সিহতক এটা স্প্ৰাইটলৈ কম্পাইল কৰিছো—এটা নথিপত্ৰত ছবিৰ এটা গোট যি ছবিসমূহক ৰ সৈতে অৱস্থান কৰিবলে CSS ব্যৱহাৰ কৰে background-position। আমি টুইটাৰ ডট কমত ব্যৱহাৰ কৰা একেটা পদ্ধতিয়েই আমাৰ বাবে ভাল কাম কৰিছে।

সকলো আইকন শ্ৰেণীত .icon-সঠিক নামব্যৱধান আৰু পৰিসৰৰ বাবে উপসৰ্গ দিয়া হয়, আমাৰ অন্য উপাদানসমূহৰ দৰেই। ই অন্য সঁজুলিৰ সৈতে সংঘাতৰ পৰা হাত সাৰিবলৈ সহায় কৰিব।

Glyphicons এ আমাক আমাৰ মুক্ত-উৎস সঁজুলিকিটত Halflings ছেট ব্যৱহাৰৰ অনুমতি দিছে যেতিয়ালৈকে আমি ইয়াত docs ত এটা লিংক আৰু ক্ৰেডিট প্ৰদান কৰোঁ। অনুগ্ৰহ কৰি আপোনাৰ প্ৰজেক্টবোৰতো একেদৰেই কৰাৰ কথা চিন্তা কৰক।

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

বুটষ্ট্ৰেপে <i>সকলো আইকনৰ বাবে এটা টেগ ব্যৱহাৰ কৰে, কিন্তু সিহতৰ কোনো কেছ শ্ৰেণী নাই—কেৱল এটা অংশীদাৰী উপসৰ্গ । ব্যৱহাৰ কৰিবলৈ, নিম্নলিখিত ক'ডটো প্ৰায় যিকোনো ঠাইত ৰাখক:

<i class = "আইকন-অন্বেষণ" </i> 

ওলোটা (বগা) আইকনসমূহৰ বাবেও শৈলীসমূহ উপলব্ধ, এটা অতিৰিক্ত শ্ৰেণীৰ সৈতে সাজু কৰা:

<i class = "আইকন-অন্বেষণ আইকন-বগা" ></i> 

আপোনাৰ আইকনৰ বাবে ১২০টা ক্লাছৰ পৰা নিৰ্বাচন কৰিব পাৰি। মাত্ৰ <i>সঠিক শ্ৰেণীসমূহৰ সৈতে এটা টেগ যোগ কৰক আৰু আপুনি ছেট কৰা হৈছে। আপুনি সম্পূৰ্ণ তালিকা sprites.less ত বা ইয়াত এই নথিপত্ৰত পাব পাৰে।

মুৰ ডাঙি! <i>লিখনীৰ কাষত স্ট্ৰিং ব্যৱহাৰ কৰাৰ সময়ত, বুটাম বা nav সংযোগসমূহৰ দৰে, সঠিক ব্যৱধানৰ বাবে টেগৰ পিছত এটা স্থান নিশ্চিতভাৱে এৰি দিয়ক ।

ব্যৱহাৰ কেছ

আইকনবোৰ বৰ ভাল, কিন্তু ক’ত ব্যৱহাৰ কৰিব? ইয়াত কেইটামান ধাৰণা দিয়া হ’ল:

• আপোনাৰ চাইডবাৰ নেভিগেচনৰ বাবে দৃশ্যমান হিচাপে
• এটা বিশুদ্ধভাৱে আইকন-চালিত নেভিগেচনৰ বাবে
• এটা কাৰ্য্যৰ অৰ্থ প্ৰকাশ কৰাত সহায়ক হোৱাকৈ বুটামৰ বাবে
• ব্যৱহাৰকাৰীৰ গন্তব্যস্থানত প্ৰসংগ ভাগ-বতৰা কৰিবলৈ লিংকৰ সৈতে

মূলতঃ যিকোনো ঠাইতে <i>টেগ লগাই দিব পাৰে, তাতেই আইকন দিব পাৰে।

সতেজ কৰক চেকআউট কৰক বিলোপ

মন্তব্য ছেটিংছ অধিক তথ্য

ইমেইল ঠিকনা