ভিত্তি CSS

স্ক্যাফল্ডিঙৰ ওপৰত, মূল HTML উপাদানসমূহক এটা সতেজ, সামঞ্জস্যপূৰ্ণ ৰূপ আৰু অনুভৱ প্ৰদান কৰিবলৈ সম্প্ৰসাৰণযোগ্য শ্ৰেণীসমূহৰ সৈতে শৈলী আৰু উন্নত কৰা হয়।

শিৰোনাম আৰু দেহৰ কপি

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

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

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

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

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

লিড বডি কপি

যোগ কৰি এটা অনুচ্ছেদ আঁতৰাই ৰাখক .lead

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

h1. শিৰোনাম ১

h2. শিৰোনাম ২

h3. শিৰোনাম ৩

h4. শিৰোনাম ৪

h৫. শিৰোনাম ৫
h6. শিৰোনাম ৬

জোৰ, ঠিকনা, আৰু সংক্ষিপ্ত ৰূপ

উপাদান ব্যৱহাৰ বৈকল্পিক
<strong> গুৰুত্বপূৰ্ণৰ সৈতে লিখাৰ এটা স্নিপেটত গুৰুত্ব দিয়াৰ বাবে একো নাই
<em> জোৰ দি লিখাৰ এটা স্নিপেটত গুৰুত্ব দিয়াৰ বাবে একো নাই
<abbr> হোভাৰত সম্প্ৰসাৰিত সংস্কৰণ দেখুৱাবলৈ সংক্ষিপ্তকৰণ আৰু সংক্ষিপ্ত ৰূপসমূহ ৰেপ কৰে

titleপ্ৰসাৰিত লিখনীৰ বাবে বৈকল্পিক বৈশিষ্ট্য অন্তৰ্ভুক্ত কৰক

.initialismডাঙৰ আখৰৰ সংক্ষিপ্তকৰণৰ বাবে শ্ৰেণী ব্যৱহাৰ কৰক ।
<address> ইয়াৰ ওচৰৰ পূৰ্বপুৰুষ বা সমগ্ৰ কামৰ বাবে যোগাযোগৰ তথ্যৰ বাবে সকলো শাৰীৰে শেষ কৰি ফৰ্মেটিং সংৰক্ষণ কৰক<br>

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

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> অন্য উৎসৰ পৰা বিষয়বস্তু উদ্ধৃত কৰাৰ বাবে ব্লক-স্তৰৰ উপাদান

citeউৎস URL ৰ বাবে বৈশিষ্ট্য যোগ কৰক

ভাসমান বিকল্পসমূহৰ বাবে ব্যৱহাৰ .pull-leftআৰু শ্ৰেণীসমূহ.pull-right
<small> ব্যৱহাৰকাৰী-মুখী উদ্ধৃতি যোগ কৰাৰ বাবে ঐচ্ছিক উপাদান, সাধাৰণতে কামৰ শিৰোনাম থকা লেখক <cite>উৎসৰ শিৰোনাম বা নামৰ চাৰিওফালে ৰাখক

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

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

  1. <ব্লককোট>
  2. <p> লৰেম ইপচুম ডলৰ বহি আমেট, কনচেক্টেটাৰ এডিপিচিং এলিট। পূৰ্ণসংখ্যা posuere erat এটা ante venenatis. </p>
  3. <small> কোনোবা বিখ্যাত </small>
  4. </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">

বিৱৰণ তালিকাসমূহ
শব্দ সংজ্ঞায়িত কৰাৰ বাবে এটা বিৱৰণ তালিকা নিখুঁত।
ইউইস্মোড
ভেষ্টিবুলাম আইডি লিগুলা পৰ্টা ফেলিছ ইউইজমড চেম্পাৰ এগেট লেচিনিয়া অডিঅ' চেম নেক এলিট।
ডনেক আইডি এলিট নন মি পৰ্টা গ্ৰেভিডা এট এগেট মেটাছ।
মালেসুয়াডা পোর্টা
ইটিয়াম পৰ্টা ছেম মালেছুয়াডা মেগনা মলিছ ইউইস্মোড।
ফেলিছ ইউইজমড চেম্পাৰ এগেট লেচিনিয়া
ফুচ ডাপিবাছ, টেলাছ এ চি কাৰ্ছাছ কমোডো, টৰ্টৰ মৌৰিছ কণ্ডিমেণ্টাম নিভ, উট ফাৰ্মেণ্টাম মাছা জষ্টো বহা আমেট ৰিছুছ।

মুৰ ডাঙি! অনুভূমিক বিৱৰণ তালিকাসমূহে বাওঁ স্তম্ভ সমাধানত ফিট কৰিব নোৱাৰাকৈ অতি দীঘল শব্দসমূহ ছেদ কৰিব text-overflow। সংকীৰ্ণ দৰ্শনপৰ্টসমূহত, সিহত অবিকল্পিত ষ্টেক কৰা পৰিকল্পনালৈ সলনি হ'ব।

শাৰীত

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

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

মূল ব্লক

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

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

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

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

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

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

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

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

টেবুল মাৰ্কআপ

টেগ বিৱৰণ
<table> এটা টেবুলাৰ বিন্যাসত তথ্য প্ৰদৰ্শনৰ বাবে ৰেপিং উপাদান
<thead> টেবুল হেডাৰ শাৰীসমূহৰ বাবে ধাৰক উপাদান ( <tr>) টেবুল স্তম্ভসমূহ লেবেল কৰিবলে
<tbody> <tr>টেবুলৰ দেহত টেবুল শাৰী ( ) ৰ বাবে পাত্ৰ উপাদান
<tr> টেবুল কোষৰ এটা গোটৰ বাবে ধাৰক উপাদান ( <td>বা <th>) যি এটা শাৰীত উপস্থিত হয়
<td> অবিকল্পিত টেবুল কোষ
<th> স্তম্ভ (বা শাৰী, পৰিসৰ আৰু স্থানৰ ওপৰত নিৰ্ভৰ কৰি) লেবেলসমূহৰ বাবে বিশেষ টেবুল কোষ
a ৰ ভিতৰত ব্যৱহাৰ কৰিব লাগিব<thead>
<caption> টেবুলত কি আছে তাৰ বিৱৰণ বা সাৰাংশ, বিশেষকৈ পৰ্দা পাঠকৰ বাবে উপযোগী
  1. <টেবুল>
  2. <মূৰ>
  3. <tr>
  4. <th> ... </th>
  5. <th> ... </th>
  6. </tr>
  7. </thead>
  8. <tbody>
  9. <tr>
  10. <td> ... </td>
  11. <td> ... </td>
  12. </tr>
  13. </tbody>
  14. </table>

টেবুল বিকল্পসমূহ

নাম শ্ৰেণী বিৱৰণ
ডিফল্ট একো নাই কোনো শৈলী নাই, মাত্ৰ স্তম্ভ আৰু শাৰী
প্ৰাথমিক .table শাৰীৰ মাজত কেৱল অনুভূমিক ৰেখা
সীমাবদ্ধ .table-bordered চুকবোৰ ঘূৰণীয়া কৰে আৰু বাহিৰৰ সীমা যোগ কৰে
জেব্ৰা-ষ্ট্ৰাইপ .table-striped অদ্ভুত শাৰীসমূহত (১, ৩, ৫, ইত্যাদি) পাতল ধূসৰ পটভূমিৰ ৰং যোগ কৰে
ঘনীভূত .table-condensed উলম্ব পেডিং আধালৈ কাটে, 8px ৰ পৰা 4px লৈ, সকলো tdআৰু thউপাদানৰ ভিতৰত

উদাহৰণ টেবুল

1. অবিকল্পিত টেবুল শৈলীসমূহ

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

  1. <টেবুল শ্ৰেণী = "টেবুল" >
  2. ...
  3. </table>
# প্ৰথম নাম উপাধি ব্যৱহাৰকাৰীৰ নাম
মাৰ্ক অট্টো @mdo
যাকোব থৰ্ণ্টন @শকত
লেৰী চৰাইটো @টুইটাৰত

২/ ডাঠ টেবুল

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

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

  1. <table class = "টেবুল টেবুল-ষ্ট্ৰাইপড" >
  2. ...
  3. </table>
# প্ৰথম নাম উপাধি ব্যৱহাৰকাৰীৰ নাম
মাৰ্ক অট্টো @mdo
যাকোব থৰ্ণ্টন @শকত
লেৰী চৰাইটো @টুইটাৰত

৩/ সীমাৰেখাযুক্ত টেবুল

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

  1. <table class = "টেবুল টেবুল-সীমাবদ্ধ" >
  2. ...
  3. </table>
# প্ৰথম নাম উপাধি ব্যৱহাৰকাৰীৰ নাম
মাৰ্ক অট্টো @mdo
মাৰ্ক অট্টো @getbootstrap
যাকোব থৰ্ণ্টন @শকত
লেৰী দ্য বাৰ্ড @টুইটাৰত

৪/ ঘনীভূত টেবুল

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

  1. <table class = "টেবুল টেবুল-ঘনীভূত" >
  2. ...
  3. </table>
# প্ৰথম নাম উপাধি ব্যৱহাৰকাৰীৰ নাম
মাৰ্ক অট্টো @mdo
যাকোব থৰ্ণ্টন @শকত
লেৰী দ্য বাৰ্ড @টুইটাৰত

৫/ সকলোবোৰ একত্ৰিত কৰক!

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

  1. <table class = "টেবুল টেবুল-ষ্ট্ৰাইপড টেবুল-সীমাযুক্ত টেবুল-ঘনীভূত" >
  2. ...
  3. </table>
সম্পূৰ্ণ নাম
# প্ৰথম নাম উপাধি ব্যৱহাৰকাৰীৰ নাম
মাৰ্ক অট্টো @mdo
যাকোব থৰ্ণ্টন @শকত
লেৰী দ্য বাৰ্ড @টুইটাৰত

নমনীয় HTML আৰু CSS

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

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

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

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

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

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

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

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

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

চাৰি প্ৰকাৰৰ ৰূপ

বুটষ্ট্ৰেপে সাধাৰণ ৱেব প্ৰপত্ৰসমূহৰ চাৰিটা শৈলীৰ বাবে সৰল মাৰ্কআপ আৰু শৈলীসমূহ প্ৰদান কৰে।

নাম শ্ৰেণী বিৱৰণ
উলম্ব (অবিকল্পিত) .form-vertical (প্ৰয়োজনীয় নহয়) নিয়ন্ত্ৰণসমূহৰ ওপৰত ষ্টেক কৰা, বাওঁ-প্ৰান্তিককৃত লেবেলসমূহ
শাৰীত .form-inline কমপেক্ট শৈলীৰ বাবে বাওঁ-প্ৰান্তিককৃত লেবেল আৰু ইনলাইন-ব্লক নিয়ন্ত্ৰণসমূহ
সন্ধান .form-search এটা সাধাৰণ সন্ধান নান্দনিকতাৰ বাবে অতিৰিক্ত-গোল লিখনী ইনপুট
অনুভূমিক .form-horizontal নিয়ন্ত্ৰণসমূহৰ সৈতে একে শাৰীতে বাওঁ, সোঁ-প্ৰান্তিককৃত লেবেলসমূহ ভাঁহিব

কেৱল ফৰ্ম নিয়ন্ত্ৰণ ব্যৱহাৰ কৰি উদাহৰণ প্ৰপত্ৰ , কোনো অতিৰিক্ত মাৰ্কআপ নাই

মূল ৰূপ

অতিৰিক্ত মাৰ্কআপ অবিহনে স্মাৰ্ট আৰু লঘু অবিকল্পিত।

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

  1. <form class = "ভাল" >
  2. <label> লেবেলৰ নাম </label>
  3. <input type = "text" class = "span3" placeholder = " কিবা এটা টাইপ কৰক..." >
  4. <span class = "help-block" > ইয়াত ব্লক-স্তৰৰ সহায় লিখনীৰ উদাহৰণ। </span>
  5. <label class = "চেকবক্স" >
  6. <input type = "checkbox" > মোক পৰীক্ষা কৰক
  7. </label>
  8. <button type = "জমা দিয়ক" class = "btn" > জমা দিয়ক </button>
  9. </form>

সন্ধান ফৰ্ম

.form-searchফৰ্মত আৰু ত যোগ .search-queryকৰক input

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

ইনলাইন ফৰ্ম

.form-inlineফৰ্ম নিয়ন্ত্ৰণসমূহৰ উলম্ব প্ৰান্তিককৰণ আৰু ব্যৱধান সূক্ষ্ম কৰিবলৈ যোগ কৰক ।

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

অনুভূমিক ৰূপ

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

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

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

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

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

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

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

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


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

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

  1. <ফিল্ডছেট
  2. class = "নিয়ন্ত্ৰণ-গোট ভুল" >
  3. ...
  4. </ফিল্ডছেট>
ইয়াত কিছুমান মূল্য
কিবা এটা ভুল হ’ব পাৰে
অনুগ্ৰহ কৰি ভুলটো শুধৰাই দিয়ক
Woohoo!
Woohoo!

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

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

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


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

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

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


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

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


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

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

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

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

@

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

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

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

বুটাম class="" বিৱৰণ
btn গ্ৰেডিয়েণ্টৰ সৈতে প্ৰামাণিক ধূসৰ বুটাম
btn btn-primary অতিৰিক্ত দৃশ্যমান ওজন প্ৰদান কৰে আৰু বুটামৰ এটা গোটত প্ৰাথমিক ক্ৰিয়া চিনাক্ত কৰে
btn btn-info অবিকল্পিত শৈলীসমূহৰ বিকল্প হিচাপে ব্যৱহাৰ কৰা হয়
btn btn-success সফল বা ইতিবাচক কাৰ্য্যৰ ইংগিত দিয়ে
btn btn-warning এই ব্যৱস্থাৰ সৈতে সাৱধানতা অৱলম্বন কৰিব লাগে বুলি ইংগিত দিয়ে
btn btn-danger বিপজ্জনক বা সম্ভাৱ্য নেতিবাচক কাৰ্য্যৰ ইংগিত দিয়ে
btn btn-inverse বিকল্প গাঢ় ধূসৰ বুটাম, কোনো অৰ্থবোধক ক্ৰিয়া বা ব্যৱহাৰৰ সৈতে বান্ধ খাই থকা নহয়

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

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

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

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

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

একাধিক আকাৰ

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


অক্ষম অৱস্থা

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

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

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

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

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

লিংক
  1. <a class = "btn" href = "" > সংযোগ </a>
  2. <button class = "btn" ধৰণ = "জমা দিয়ক" >
  3. বুটাম
  4. </বুটাম>
  5. <ইনপুট শ্ৰেণী = "btn" ধৰণ = "বুটাম"
  6. value = "ইনপুট" >
  7. <input class = "btn" ধৰণ = "জমা দিয়ক"
  8. value = "জমা দিয়ক" >

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

  • আইকন-গ্লাছ
  • আইকন-সংগীত
  • আইকন-অন্বেষণ
  • আইকন-খাম
  • আইকন-হাৰ্ট
  • আইকন-ষ্টাৰ
  • আইকন-ষ্টাৰ-খালী
  • আইকন-ব্যৱহাৰকাৰী
  • আইকন-ফিল্ম
  • আইকন-থ-বৃহৎ
  • আইকন-থ
  • আইকন-থ-তালিকা
  • আইকন-ঠিক আছে
  • আইকন-আঁতৰাওক
  • আইকন-জুম-ইন
  • আইকন-জুম-আউট
  • আইকন-অফ
  • আইকন-চিগনেল
  • আইকন-কগ
  • আইকন-আৱৰ্জনা
  • আইকন-ঘৰ
  • আইকন-ফাইল
  • আইকন-সময়
  • আইকন-ৰোড
  • আইকন-ডাউনলোড-alt
  • আইকন-ডাউনলোড
  • আইকন-আপলোড
  • আইকন-ইনবক্স
  • আইকন-প্লে-বৃত্ত
  • আইকন-পুনৰাবৃত্তি
  • আইকন-সতেজ কৰক
  • আইকন-তালিকা-alt
  • আইকন-লক
  • আইকন-ফ্লেগ
  • আইকন-হেডফোন
  • আইকন-ভলিউম-অফ
  • আইকন-ভলিউম-ডাউন
  • আইকন-ভলিউম-আপ
  • আইকন-qrcode
  • আইকন-বাৰকোড
  • আইকন-টেগ
  • আইকন-টেগসমূহ
  • আইকন-বুক
  • আইকন-বুকমাৰ্ক
  • আইকন-প্ৰিন্ট
  • আইকন-কেমেৰা
  • আইকন-ফন্ট
  • আইকন-বল্ড
  • আইকন-ইটালিক
  • আইকন-পাঠ্য-উচ্চতা
  • আইকন-পাঠ্য-প্ৰস্থ
  • আইকন-এলাইন-বাওঁফালে
  • আইকন-এলাইন-কেন্দ্ৰ
  • আইকন-এলাইন-সোঁফালে
  • আইকন-এলাইন-justify
  • আইকন-তালিকা
  • আইকন-ইনডেন্ট-বাওঁফালে
  • আইকন-ইনডেন্ট-ৰাইট
  • আইকন-ফেচটাইম-ভিডিঅ'
  • আইকন-চিত্ৰ
  • আইকন-পেঞ্চিল
  • আইকন-মেপ-মাৰ্কাৰ
  • আইকন-সামঞ্জস্য
  • আইকন-টিন্ট
  • আইকন-সম্পাদনা কৰক
  • আইকন-শ্বেয়াৰ কৰক
  • আইকন-পৰীক্ষা কৰক
  • আইকন-চলন
  • আইকন-ষ্টেপ-পিছলৈ
  • আইকন-দ্রুত-পিছলৈ
  • আইকন-পিছলৈ
  • আইকন-প্লে
  • আইকন-বিৰতি
  • আইকন-ষ্টপ
  • আইকন-ফৰৱাৰ্ড
  • আইকন-ফাষ্ট-ফৰৱাৰ্ড
  • আইকন-ষ্টেপ-ফৰৱাৰ্ড
  • আইকন-ইজেক্ট
  • আইকন-চেভ্ৰন-বাওঁফালে
  • আইকন-চেভ্ৰন-সোঁফালে
  • আইকন-প্লাছ-চিন
  • আইকন-মাইনাছ-চিন
  • আইকন-আঁতৰোৱা-চিন
  • আইকন-ঠিক আছে-চিহ্ন
  • আইকন-প্ৰশ্ন-চিহ্ন
  • আইকন-তথ্য-চিহ্ন
  • আইকন-স্ক্ৰীণশ্বট
  • আইকন-আঁতৰোৱা-বৃত্ত
  • আইকন-ok-বৃত্ত
  • আইকন-বান-বৃত্ত
  • আইকন-তীৰ-বাওঁফালে
  • আইকন-তীৰ-সোঁফালে
  • আইকন-তীৰ-উপৰলৈ
  • আইকন-তীৰ-তল
  • আইকন-শ্বেয়াৰ-alt
  • আইকন-আকাৰ সলনি-পূৰ্ণ
  • আইকন-আকাৰ সলনি-সৰু
  • আইকন-প্লাছ
  • আইকন-মাইনাছ
  • আইকন-এষ্টেৰিস্ক
  • আইকন-বিস্ময়-চিহ্ন
  • আইকন-উপহাৰ
  • আইকন-পাত
  • আইকন-জুই
  • আইকন-চকু-খোলা
  • আইকন-চকু-বন্ধ
  • আইকন-সতৰ্কবাণী-চিহ্ন
  • আইকন-প্লেন
  • আইকন-কেলেণ্ডাৰ
  • আইকন-ৰেণ্ডম
  • আইকন-মন্তব্য
  • আইকন-চুম্বক
  • আইকন-চেভ্ৰন-আপ
  • আইকন-চেভ্ৰন-ডাউন
  • আইকন-ৰিটুইট
  • আইকন-শ্বপিং-কাৰ্ট
  • আইকন-ফোল্ডাৰ-বন্ধ কৰক
  • আইকন-ফোল্ডাৰ-খোলা
  • আইকন-আকাৰ সলনি-উলম্ব
  • আইকন-আকাৰ সলনি-অনুভূমিক
  • আইকন-hdd
  • আইকন-বুলৰহৰ্ণ
  • আইকন-বেল
  • আইকন-প্ৰমাণপত্ৰ
  • আইকন-থাম্বছ-আপ
  • আইকন-থাম্বছ-ডাউন
  • আইকন-হাত-সোঁফালে
  • আইকন-হাত-বাওঁফালে
  • আইকন-হেণ্ড-আপ
  • আইকন-হেণ্ড-ডাউন
  • আইকন-বৃত্ত-তীৰ-সোঁফালে
  • আইকন-বৃত্ত-তীৰ-বাওঁফালে
  • আইকন-বৃত্ত-তীৰ-উপৰলৈ
  • আইকন-বৃত্ত-তীৰ-তল
  • আইকন-গ্ল'ব
  • আইকন-ৰেঞ্চ
  • আইকন-কাৰ্য্যসমূহ
  • আইকন-ফিল্টাৰ
  • আইকন-ব্ৰিফকেছ
  • আইকন-ফুলস্ক্ৰীণ

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

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

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

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

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

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

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

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

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

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

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

ব্যৱহাৰ কেছ

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

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

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

উদাহৰণ

বুটামসমূহত, এটা সঁজুলিবাৰৰ বাবে বুটাম গোটসমূহত, নেভিগেচন, বা প্ৰিপেণ্ডেড ফৰ্ম ইনপুটসমূহত সিহতক ব্যৱহাৰ কৰক।