বুটষ্ট্ৰেপ

ভিত্তি CSS

মৌলিক HTML উপাদানসমূহ সম্প্ৰসাৰণযোগ্য শ্ৰেণীসমূহৰ সৈতে শৈলী আৰু উন্নত কৰা।

মুৰ ডাঙি! এই নথিপত্ৰসমূহ v2.3.2 ৰ বাবে, যি আৰু আনুষ্ঠানিকভাৱে সমৰ্থিত নহয় । Bootstrap ৰ শেহতীয়া সংস্কৰণ চাওক!

টাইপোগ্ৰাফী

শিৰোনামসমূহ

সকলো HTML শিৰোনাম, <h1>মাধ্যমেৰে <h6>উপলব্ধ।

h1. শিৰোনাম ১

h2. শিৰোনাম ২

h3. শিৰোনাম ৩

h4. শিৰোনাম ৪

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

বডি কপি

বুটষ্ট্ৰেপৰ গোলকীয় অবিকল্পিত font-sizeহৈছে 14px , এটা 20pxline-height ৰ সৈতে । এইটো আৰু সকলো অনুচ্ছেদৰ ক্ষেত্ৰত প্ৰযোজ্য। ইয়াৰ উপৰিও, (অনুচ্ছেদসমূহে) সিহঁতৰ লাইন-উচ্চতাৰ আধা (অবিকল্পিতভাৱে 10px) এটা তলৰ মাৰ্জিন লাভ কৰে।<body><p>

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

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

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

<p> ... </p>

লিড বডি কপি

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

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

<p class = "লিড" > ... </p>

Less ৰ সৈতে নিৰ্মিত

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

জোৰ দিয়া

লঘু শৈলীসমূহৰ সৈতে HTML ৰ অবিকল্পিত গুৰুত্ব টেগসমূহ ব্যৱহাৰ কৰক।

<small>

ইনলাইন বা লিখনীৰ ব্লকসমূহত গুৰুত্বহীন কৰাৰ বাবে, সৰু টেগটো ব্যৱহাৰ কৰক।

এই লিখনীৰ শাৰীটোক সূক্ষ্ম আখৰ হিচাপে গণ্য কৰিবলৈ লোৱা হৈছে।

<p> <small> এই লিখনীৰ শাৰীক সূক্ষ্ম প্ৰিন্ট হিচাপে গণ্য কৰা হৈছে। </small> </p>

সাহসী

গধুৰ ফন্ট-ওজনৰ সৈতে লিখনীৰ এটা স্নিপেটত গুৰুত্ব দিয়াৰ বাবে।

নিম্নলিখিত লিখনীৰ স্নিপেটটো গাঢ় লিখনী হিচাপে ৰেণ্ডাৰ কৰা হৈছে ।

<strong> গাঢ় লিখনী হিচাপে ৰেণ্ডাৰ কৰা হৈছে </strong>

ইটালিক

ইটালিক আখৰেৰে লিখাৰ এটা স্নিপেটত গুৰুত্ব দিয়াৰ বাবে।

নিম্নলিখিত লিখনীৰ স্নিপেটক ইটালিক কৰা লিখনী হিচাপে ৰেণ্ডাৰ কৰা হৈছে ।

<em> ইটালিক লিখা লিখনী হিচাপে ৰেণ্ডাৰ কৰা হৈছে </em>

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

প্ৰান্তিককৰণ শ্ৰেণীসমূহ

লিখনী প্ৰান্তিককৰণ শ্ৰেণীসমূহৰ সৈতে উপাদানসমূহলে সহজে লিখনী পুনৰায় প্ৰান্তিককৰণ কৰক।

বাওঁফালে প্ৰান্তিককৃত লিখনী।

কেন্দ্ৰ প্ৰান্তিককৃত লিখনী।

সোঁফালে প্ৰান্তিককৃত লিখনী।

  1. <p class = "text-left" > বাওঁফালে প্ৰান্তিককৃত লিখনী। </p> 
  2. <p class = "text-center" > কেন্দ্ৰ প্ৰান্তিককৃত লিখনী। </p> 
  3. <p class = "text-right" > সোঁফালে প্ৰান্তিককৃত লিখনী। </p>

গুৰুত্ব দিয়া শ্ৰেণীসমূহ

মুষ্টিমেয় জোৰ দিয়া উপযোগিতা শ্ৰেণীৰ সৈতে ৰঙৰ জৰিয়তে অৰ্থ প্ৰকাশ কৰা।

ফুচে ডাপিবাছ, টেলাছ এ চি কাৰ্ছাছ কমোডো, টৰ্টৰ মৌৰিছ নিভ।

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

ডনেক উলামকৰ্পাৰ নুলা নন মেটাছ অক্টৰ ফ্ৰিংগিলা।

এনিয়ান ইউ লিও কোৱাম। পেলেণ্টেস্ক অৰ্নাৰে ছেম লেচিনিয়া কোৱাম ভেনেনাটিছ।

ডুইছ মলিছ, এষ্ট নন কমোডো লুক্টাছ, নিচি এৰাট পৰ্টিট'ৰ লিগুলা।

  1. <p class = "muted" > ফুচে ডাপিবাছ, টেলাছ এ চি কাৰ্ছাছ কমোডো, টৰ্টৰ মৌৰিছ নিভ। </p> 
  2. <p class = "text-warning" > ইটিয়াম পৰ্টা চেম মালেছুয়াডা মেগনা মলিছ ইউইস্মোড। </p> 
  3. <p class = "text-error" > ডনেক উল্লামকৰ্পাৰ নলা নন মেটাছ অক্টৰ ফ্ৰিংগিলা। </p> 
  4. <p class = "পাঠ-তথ্য" > এনিয়ান ইউ লিও কোৱাম। পেলেণ্টেস্ক অৰ্নাৰে ছেম লেচিনিয়া কোৱাম ভেনেনাটিছ। </p> 
  5. <p class = "পাঠ-সফলতা" > ডুইছ মলিছ, এষ্ট নন কমোডো লুক্টাছ, নিচি এৰাট পৰ্টিট'ৰ লিগুলা। </p>

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

<abbr>হোভাৰত সম্প্ৰসাৰিত সংস্কৰণ দেখুৱাবলৈ সংক্ষিপ্তকৰণ আৰু সংক্ষিপ্ত ৰূপৰ বাবে HTML ৰ উপাদানৰ ষ্টাইলাইজড প্ৰণয়ন । এটা বৈশিষ্ট্যৰ সৈতে সংক্ষিপ্তকৰণসমূহৰ titleএটা পোহৰ বিন্দুযুক্ত তলৰ সীমা আৰু এটা সহায় কাৰ্ছৰ থাকে, হোভাৰত অতিৰিক্ত প্ৰসংগ প্ৰদান কৰে।

<abbr>

এটা সংক্ষিপ্তকৰণৰ দীঘলীয়া হোভাৰত প্ৰসাৰিত লিখনীৰ বাবে, titleবৈশিষ্ট্যটো অন্তৰ্ভুক্ত কৰক।

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

<abbr title = "বৈশিষ্ট্য" > attr </abbr>

<abbr class="initialism">

.initialismঅলপ সৰু ফন্ট-আকাৰৰ বাবে এটা সংক্ষিপ্ত ৰূপত যোগ কৰক ।

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

<abbr title = "হাইপাৰটেক্সট মাৰ্কআপ ভাষা" class = "আৰম্ভণিতা" > HTML </abbr>

ঠিকনাসমূহ

ওচৰৰ পূৰ্বপুৰুষ বা সমগ্ৰ কামৰ বাবে যোগাযোগৰ তথ্য উপস্থাপন কৰা।

<address>

সকলো শাৰী ৰ সৈতে শেষ কৰি ফৰ্মেটিং সংৰক্ষণ কৰক <br>।

টুইটাৰ, ইনকৰ্পৰেটেড
৭৯৫ ফলছম এভিনিউ, ছুইট ৬০০
ছান ফ্ৰান্সিস্কো, কে এ ৯৪১০৭
পি: (১২৩) ৪৫৬-৭৮৯০
সম্পূৰ্ণ নাম
[email protected] 
  1. <ঠিকনা>
  2.   <strong> টুইটাৰ, ইনকৰ্পৰেটেড </strong><br>
  3.   795 Folsom Ave, ছুইট 600 <br>
  4.   ছান ফ্ৰান্সিস্কো, কে.এ. ৯৪১০৭ <br>
  5.   <abbr title = "ফোন" > P: </abbr> (১২৩) ৪৫৬-৭৮৯০ 
  6. </ঠিকনা>
  7.  
  8. <ঠিকনা>
  9.   <strong> সম্পূৰ্ণ নাম </strong><br>
  10.   <a href = "mailto:#" > প্ৰথম.শেষ@উদাহৰণ .com </a> 
  11. </ঠিকনা>

ব্লককোটসমূহ

আপোনাৰ দস্তাবেজৰ ভিতৰত অন্য উৎসৰ পৰা বিষয়বস্তুৰ ব্লকসমূহ উদ্ধৃতি দিয়াৰ বাবে।

অবিকল্পিত ব্লককোট

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

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

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

ব্লককোট বিকল্পসমূহ

এটা প্ৰামাণিক ব্লককোটত সৰল ভিন্নতাৰ বাবে শৈলী আৰু বিষয়বস্তু পৰিবৰ্তন কৰা হয়।

এটা উৎসৰ নামকৰণ কৰা

<small>উৎস চিনাক্ত কৰাৰ বাবে টেগ যোগ কৰক । উৎস কাৰ্য্যৰ নাম ত ৰেপ কৰক <cite>।

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

Source Title ত কোনোবা বিখ্যাত 
  1. <ব্লককোট>
  2.   <p> লৰেম ইপচুম ডলৰ বহি আমেট, কনচেক্টেটাৰ এডিপিচিং এলিট। পূৰ্ণসংখ্যা posuere erat এটা ante. </p>
  3.   <small> কোনোবা বিখ্যাত <cite title = "উৎস শিৰোনাম" > উৎস শিৰোনাম </cite></small> 
  4. </blockquote> ৰ দ্বাৰা প্ৰকাশিত

বিকল্প প্ৰদৰ্শনসমূহ

.pull-rightএটা ভাসমান, সোঁ-প্ৰান্তিককৃত ব্লককোটৰ বাবে ব্যৱহাৰ কৰক ।

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

Source Title ত কোনোবা বিখ্যাত 
  1. <blockquote class = "টানি-সোঁফালে" > 
  2.   ...
  3. </blockquote> ৰ দ্বাৰা প্ৰকাশিত

তালিকাসমূহ

অনাৰ্ডাৰেড

যিবোৰ বস্তুৰ ক্ৰমটোৱে স্পষ্টভাৱে গুৰুত্বপূৰ্ণ নহয় তাৰ তালিকা।

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

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

যিবোৰ বস্তুত ক্ৰমটোৱে স্পষ্টভাৱে গুৰুত্ব দিয়ে তাৰ তালিকা ।

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

আনষ্টাইল কৰা

তালিকা বস্তুসমূহত অবিকল্পিত list-styleআৰু বাওঁ পেডিং আঁতৰাওক (কেৱল তাৎক্ষণিক শিশু)।

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

শাৰীত

সকলো তালিকা বস্তু এটা শাৰীত inline-blockআৰু কিছুমান পোহৰ পেডিং ৰাখক।

  • লৰেম ইপছুম
  • ফেচেলাছ ইয়াকুলিছ
  • নুল্লা volutpat
  1. <ul শ্ৰেণী = "ইনলাইন" > 
  2.   <li> ... </li>
  3. </ul>

বিৱৰণ

শব্দৰ তালিকা আৰু ইয়াৰ লগত জড়িত বিৱৰণ।

বিৱৰণ তালিকাসমূহ
শব্দ সংজ্ঞায়িত কৰাৰ বাবে এটা বিৱৰণ তালিকা নিখুঁত।
ইউইস্মোড
ভেষ্টিবুলাম আইডি লিগুলা পৰ্টা ফেলিছ ইউইজমড চেম্পাৰ এগেট লেচিনিয়া অডিঅ' চেম নেক এলিট।
ডনেক আইডি এলিট নন মি পৰ্টা গ্ৰেভিডা এট এগেট মেটাছ।
মালেসুয়াডা পোর্টা
ইটিয়াম পৰ্টা ছেম মালেছুয়াডা মেগনা মলিছ ইউইস্মোড। 
  1. <dl>
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

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

<dl>কাষে কাষে শাৰী পাতি চৰ্ত আৰু বিৱৰণ বনাওক ।

বিৱৰণ তালিকাসমূহ
শব্দ সংজ্ঞায়িত কৰাৰ বাবে এটা বিৱৰণ তালিকা নিখুঁত।
ইউইস্মোড
ভেষ্টিবুলাম আইডি লিগুলা পৰ্টা ফেলিছ ইউইজমড চেম্পাৰ এগেট লেচিনিয়া অডিঅ' চেম নেক এলিট।
ডনেক আইডি এলিট নন মি পৰ্টা গ্ৰেভিডা এট এগেট মেটাছ।
মালেসুয়াডা পোর্টা
ইটিয়াম পৰ্টা ছেম মালেছুয়াডা মেগনা মলিছ ইউইস্মোড।
ফেলিছ ইউইজমড চেম্পাৰ এগেট লেচিনিয়া
ফুচ ডাপিবাছ, টেলাছ এ চি কাৰ্ছাছ কমোডো, টৰ্টৰ মৌৰিছ কণ্ডিমেণ্টাম নিভ, উট ফাৰ্মেণ্টাম মাছা জষ্টো বহা আমেট ৰিছুছ। 
  1. <dl class = "dl-অনুভূমিক" > 
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

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

ক'ড

শাৰীত

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

উদাহৰণস্বৰূপে, <section>ইনলাইন হিচাপে ৰেপ কৰিব লাগে। 
  1. যেনে , <code > & lt ; section & gt ;</ code > ইনলাইন হিচাপে ৰেপ কৰিব লাগে ।

মূল ব্লক

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

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

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

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

টেবুলসমূহ

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

.tableমূল ষ্টাইলিংৰ বাবে—পোহৰ পেডিং আৰু কেৱল অনুভূমিক বিভাজকসমূহ— যিকোনো ক্ষেত্ৰত ভিত্তি শ্ৰেণী যোগ কৰক <table>।

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

ঐচ্ছিক শ্ৰেণীসমূহ

তলৰ যিকোনো শ্ৰেণীক .tableভিত্তি শ্ৰেণীত যোগ কৰক।

.table-striped

<tbody>CSS নিৰ্বাচকৰ যোগেদি ভিতৰৰ যিকোনো টেবুল শাৰীত জেব্ৰা-ষ্ট্ৰাইপিং যোগ কৰে :nth-child(IE7-8 ত উপলব্ধ নহয়)।

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

.table-bordered

টেবুলত সীমা আৰু ঘূৰণীয়া চুক যোগ কৰক।

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

.table-hover

এটা ৰ ভিতৰত টেবুল শাৰীসমূহত এটা হ'ভাৰ অৱস্থা সামৰ্থবান কৰক <tbody>।

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

.table-condensed

চেল পেডিং আধা কাটি টেবুলবোৰ অধিক কম্পেক্ট কৰি তোলে।

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

ঐচ্ছিক শাৰী শ্ৰেণীসমূহ

টেবুল শাৰীসমূহ ৰং কৰিবলৈ প্ৰসংগভিত্তিক শ্ৰেণীসমূহ ব্যৱহাৰ কৰক।

শ্ৰেণী বিৱৰণ
.success সফল বা ইতিবাচক কাৰ্য্যৰ ইংগিত দিয়ে।
.error বিপজ্জনক বা সম্ভাৱ্য নেতিবাচক কাৰ্য্যৰ ইংগিত দিয়ে।
.warning এটা সতৰ্কবাণী সূচায় যিটোৰ প্ৰতি মনোযোগৰ প্ৰয়োজন হ’ব পাৰে।
.info অবিকল্পিত শৈলীসমূহৰ বিকল্প হিচাপে ব্যৱহাৰ কৰা হয়।
# সামগ্ৰী পেমেন্ট লোৱা হৈছে স্থিতি
১ টিবি - মাহেকীয়া ০১/০৪/২০১২ তাৰিখে অনুমোদিত
২ টিবি - মাহেকীয়া ০২/০৪/২০১২ তাৰিখে অস্বীকাৰ কৰা হৈছে
৩ টিবি - মাহেকীয়া ০৩/০৪/২০১২ তাৰিখে বাকী থকা
৪ টিবি - মাহেকীয়া ০৪/০৪/২০১২ তাৰিখে নিশ্চিত কৰিবলৈ ফোন কৰক 
  1. ...
  2.   < tr class = "সফলতা" >
  3.     <td> ১ < /td>
  4.     <td>টিবি - মাহেকীয়া</ td >
  5.     <td> ০১ / ০৪ / ২০১২ < /td>
  6.     <td>অনুমোদিত</ td >
  7.   </ tr >
  8. ...

সমৰ্থিত টেবুল মাৰ্কআপ

সমৰ্থিত টেবুল HTML উপাদানসমূহৰ তালিকা আৰু সিহতক কেনেকৈ ব্যৱহাৰ কৰিব লাগে।

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

প্ৰপত্ৰসমূহ

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

<form>ব্যক্তিগত ফৰ্ম নিয়ন্ত্ৰণসমূহে ষ্টাইলিং লাভ কৰে, কিন্তু মাৰ্কআপত বা বৃহৎ পৰিবৰ্তনসমূহৰ ওপৰত কোনো প্ৰয়োজনীয় ভিত্তি শ্ৰেণী অবিহনে । ফৰ্ম নিয়ন্ত্ৰণসমূহৰ ওপৰত ষ্টেক কৰা, বাওঁ-প্ৰান্তিককৃত লেবেলসমূহৰ ফলাফল।

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

ঐচ্ছিক বিন্যাসসমূহ

Bootstrap ৰ সৈতে অন্তৰ্ভুক্ত কৰা হৈছে সাধাৰণ ব্যৱহাৰৰ ক্ষেত্ৰত তিনিটা বৈকল্পিক প্ৰপত্ৰ পৰিকল্পনা ।

সন্ধান ফৰ্ম

এটা অতিৰিক্ত-গোল লিখনী ইনপুটৰ বাবে .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>

অনুভূমিক ৰূপ

লেবেলসমূহ সোঁফালে প্ৰান্তিককৰণ কৰক আৰু সিহতক বাওঁফালে ওপঙি দিয়ক যাতে সিহতক নিয়ন্ত্ৰণসমূহৰ সৈতে একে শাৰীত দেখা দিয়ে। এটা অবিকল্পিত প্ৰপত্ৰৰ পৰা সৰ্বাধিক মাৰ্কআপ পৰিবৰ্তনৰ প্ৰয়োজন:

  • .form-horizontalফৰ্মত যোগ কৰক
  • লেবেল আৰু নিয়ন্ত্ৰণসমূহ ৰেপ কৰক.control-group
  • .control-labelলেবেলত যোগ কৰক
  • .controlsসঠিক প্ৰান্তিককৰণৰ বাবে যিকোনো সংশ্লিষ্ট নিয়ন্ত্ৰণসমূহ ৰেপ কৰক
  1. <form class = "ৰূপ-অনুভূমিক" > 
  2.   <div class = "নিয়ন্ত্ৰণ-গোট" > 
  3.     <label class = "নিয়ন্ত্ৰণ-লেবেল" for = "inputEmail" > ইমেইল </label>  
  4.     <div class = "নিয়ন্ত্ৰণসমূহ" > 
  5.       <input type = "text" id = "ইনপুটইমেইল" স্থানধাৰী = "ইমেইল" >   
  6.     </div>
  7.   </div>
  8.   <div class = "নিয়ন্ত্ৰণ-গোট" > 
  9.     <label class = "নিয়ন্ত্ৰণ-লেবেল" for = "inputPassword" > গুপ্তশব্দ </label>  
  10.     <div class = "নিয়ন্ত্ৰণসমূহ" > 
  11.       <input type = "পাছৱৰ্ড" id = "ইনপুটপাছৱৰ্ড" স্থানধাৰী = "পাছৱৰ্ড" >   
  12.     </div>
  13.   </div>
  14.   <div class = "নিয়ন্ত্ৰণ-গোট" > 
  15.     <div class = "নিয়ন্ত্ৰণসমূহ" > 
  16.       <label class = "চেকবক্স" > 
  17.         <input type = "checkbox" > মোক মনত ৰাখিব 
  18.       </label>
  19.       <button type = "submit" class = "btn" > চাইন ইন কৰক </button>  
  20.     </div>
  21.   </div>
  22. </form>

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

এটা উদাহৰণ প্ৰপত্ৰ পৰিকল্পনাত সমৰ্থিত প্ৰামাণিক প্ৰপত্ৰ নিয়ন্ত্ৰণৰ উদাহৰণ।

ইনপুটসমূহ

অধিকাংশ সাধাৰণ ফৰ্ম নিয়ন্ত্ৰণ, লিখনী-ভিত্তিক ইনপুট ক্ষেত্ৰসমূহ। সকলো HTML5 ধৰণৰ বাবে সমৰ্থন অন্তৰ্ভুক্ত কৰা হৈছে: লিখনী, পাছৱৰ্ড, তাৰিখৰ সময়, তাৰিখ-সময়-স্থানীয়, তাৰিখ, মাহ, সময়, সপ্তাহ, সংখ্যা, ইমেইল, url, সন্ধান, tel, আৰু ৰং।

typeসকলো সময়তে এটা নিৰ্দিষ্ট ব্যৱহাৰৰ প্ৰয়োজন ।

  1. <input type = "text" placeholder = "লিখনী ইনপুট" >

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

ফৰ্ম নিয়ন্ত্ৰণ যিয়ে লিখনীৰ একাধিক শাৰী সমৰ্থন কৰে। rowsপ্ৰয়োজন অনুসৰি বৈশিষ্ট্য সলনি কৰক ।

  1. <textarea শাৰীসমূহ = "3" ></textarea>

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

চেকবাক্সসমূহ এটা তালিকাত এটা বা কেইবাটাও বিকল্প নিৰ্ব্বাচন কৰাৰ বাবে আৰু ৰেডিঅ'সমূহ বহুতৰ পৰা এটা বিকল্প নিৰ্ব্বাচন কৰাৰ বাবে।

অবিকল্পিত (ষ্টেক কৰা)


  1. <label class = "চেকবক্স" > 
  2.   <ইনপুট ধৰণ = "চেকবক্স" মান = "" >  
  3.   বিকল্প এটা হ’ল এইটো আৰু সেইটো—ই কিয় ভাল সেইটো নিশ্চিতভাৱে অন্তৰ্ভুক্ত কৰক
  4. </label>
  5.  
  6. <লেবেল শ্ৰেণী = "ৰেডিঅ'" > 
  7.   <input type = "ৰেডিঅ'" নাম = "optionsRadios" id = "optionsRadios1" মান = "option1" পৰীক্ষা কৰা হৈছে >     
  8.   বিকল্প এটা হ’ল এইটো আৰু সেইটো—ই কিয় ভাল সেইটো নিশ্চিতভাৱে অন্তৰ্ভুক্ত কৰক
  9. </label>
  10. <লেবেল শ্ৰেণী = "ৰেডিঅ'" > 
  11.   <input type = "ৰেডিঅ'" নাম = "optionsRadios" id = "optionsRadios2" মান = "বিকল্প2" >    
  12.   বিকল্প দুটা আন কিবা হ’ব পাৰে আৰু ইয়াক নিৰ্বাচন কৰিলে বিকল্প এটা নিৰ্বাচন নকৰিব
  13. </label>

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

.inlineএকেটা শাৰীতে নিয়ন্ত্ৰণসমূহ দেখা দিয়াৰ বাবে চেকবাক্স বা ৰেডিঅ'সমূহৰ এটা শৃংখলাত শ্ৰেণীটো যোগ কৰক।

  1. <label class = "চেকবক্স ইনলাইন" > 
  2.   <ইনপুট ধৰণ = "চেকবক্স" id = "ইনলাইনচেকবক্স1" মান = "বিকল্প1 " > 1   
  3. </label>
  4. <label class = "চেকবক্স ইনলাইন" > 
  5.   <ইনপুট ধৰণ = "চেকবক্স" id = "ইনলাইনচেকবক্স2" মান = "বিকল্প2 " > 2   
  6. </label>
  7. <label class = "চেকবক্স ইনলাইন" > 
  8.   <ইনপুট ধৰণ = "চেকবক্স" id = "ইনলাইনচেকবক্স3" মান = "বিকল্প3 " > 3   
  9. </label>

নিৰ্বাচন কৰে

অবিকল্পিত বিকল্প ব্যৱহাৰ কৰক বা multiple="multiple"একেলগে একাধিক বিকল্প দেখুৱাবলৈ a ধাৰ্য্য কৰক ।


  1. <নিৰ্বাচন কৰক>
  2.   <বিকল্প> ১ </option>
  3.   <বিকল্প> ২ </option>
  4.   <বিকল্প> ৩ </option>
  5.   <বিকল্প> ৪ </option>
  6.   <বিকল্প> ৫ </option>
  7. </নিৰ্বাচন কৰক>
  8.  
  9. < একাধিক নিৰ্বাচন কৰক = "একাধিক" > 
  10.   <বিকল্প> ১ </option>
  11.   <বিকল্প> ২ </option>
  12.   <বিকল্প> ৩ </option>
  13.   <বিকল্প> ৪ </option>
  14.   <বিকল্প> ৫ </option>
  15. </নিৰ্বাচন কৰক>

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

বৰ্ত্তমানৰ ব্ৰাউজাৰ নিয়ন্ত্ৰণসমূহৰ ওপৰত যোগ কৰি, Bootstrap এ অন্য উপযোগী ফৰ্ম উপাদানসমূহ অন্তৰ্ভুক্ত কৰে।

প্ৰিপেণ্ডেড আৰু এপেণ্ডেড ইনপুটসমূহ

যিকোনো লিখনী-ভিত্তিক ইনপুটৰ আগত বা পিছত লিখনী বা বুটামসমূহ যোগ কৰক। মন কৰিব যে selectইয়াত উপাদানসমূহ সমৰ্থিত নহয়।

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

এটা ইনপুটত লিখনী প্ৰিপেণ্ড বা সংযোজন কৰিবলে দুটা শ্ৰেণীৰ এটাৰ সৈতে an .add-onআৰু an ৰেপ কৰক ।input

@

.০০ 
  1. <div class = "ইনপুট-প্ৰিপেণ্ড" > 
  2.   <span class = "এড-অন" > @ </span> 
  3.   <input class = "span2" id = "prependedInput" ধৰণ = "পাঠ" স্থানধাৰী = "ব্যৱহাৰকাৰীৰ নাম" >    
  4. </div>
  5. <div class = "ইনপুট-সংলগ্ন" > 
  6.   <ইনপুট শ্ৰেণী = "span2" id = "সংলগ্ন ইনপুট" ধৰণ = "পাঠ" >   
  7.   <span class = "এড-অন" > .00 </span> 
  8. </div>

সংযুক্ত

.add-onএটা ইনপুট প্ৰিপেণ্ড আৰু সংযোজন কৰিবলৈ দুয়োটা শ্ৰেণী আৰু দুটা উদাহৰণ ব্যৱহাৰ কৰক ।

$ .০০ 
  1. <div class = "ইনপুট-প্ৰিপেণ্ড ইনপুট-এপেণ্ড" > 
  2.   <span class = "এড-অন" > $ </span> 
  3.   <ইনপুট শ্ৰেণী = "span2" id = "সংলগ্নপ্ৰেপেণ্ডেডইনপুট " ধৰণ = "লিখনী" >   
  4.   <span class = "এড-অন" > .00 </span> 
  5. </div>

লিখনীৰ সলনি বুটাম

<span>লিখনীৰ সৈতে a ৰ পৰিবৰ্তে , .btnএটা ইনপুটত এটা বুটাম (বা দুটা) সংলগ্ন কৰিবলৈ a ব্যৱহাৰ কৰক।

  1. <div class = "ইনপুট-সংলগ্ন" > 
  2.   <ইনপুট শ্ৰেণী = "span2" id = "সংলগ্ন ইনপুট বুটাম" ধৰণ = "লিখনী" >   
  3.   <বুটাম শ্ৰেণী = "btn" ধৰণ = "বুটাম" > যাওক! </বুটাম>  
  4. </div>
  1. <div class = "ইনপুট-সংলগ্ন" > 
  2.   <ইনপুট ক্লাছ = "span2" id = "সংলগ্ন ইনপুট বুটামসমূহ" ধৰণ = "লিখনী" >   
  3.   <button class = "btn" type = "বুটাম" > সন্ধান কৰক </button>  
  4.   <button class = "btn" type = "বুটাম" > বিকল্পসমূহ </button>  
  5. </div>

বুটাম ড্ৰপডাউন

  1. <div class = "ইনপুট-সংলগ্ন" > 
  2.   <ইনপুট শ্ৰেণী = "span2" id = "সংলগ্নড্ৰপডাউনবুটাম " ধৰণ = "লিখনী" >   
  3.   <div শ্ৰেণী = "btn-গোট" > 
  4.     <button class = "btn ড্ৰপডাউন-টগল" ডাটা-টগল = "ড্ৰপডাউন" >  
  5.       কাৰ্য কৰা
  6.       <span class = "কেৰেট" </span> 
  7.     </বুটাম>
  8.     <ul class = "ড্ৰপডাউন-মেনু" > 
  9.       ...
  10.     </ul>
  11.   </div>
  12. </div>
  1. <div class = "ইনপুট-প্ৰিপেণ্ড" > 
  2.   <div শ্ৰেণী = "btn-গোট" > 
  3.     <button class = "btn ড্ৰপডাউন-টগল" ডাটা-টগল = "ড্ৰপডাউন" >  
  4.       কাৰ্য কৰা
  5.       <span class = "কেৰেট" </span> 
  6.     </বুটাম>
  7.     <ul class = "ড্ৰপডাউন-মেনু" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   <ইনপুট ক্লাছ = "span2" id = "প্ৰেপেণ্ডেডড্ৰপডাউনবুটাম" ধৰণ = "লিখনী" >   
  12. </div>
  1. <div class = "ইনপুট-প্ৰিপেণ্ড ইনপুট-এপেণ্ড" > 
  2.   <div শ্ৰেণী = "btn-গোট" > 
  3.     <button class = "btn ড্ৰপডাউন-টগল" ডাটা-টগল = "ড্ৰপডাউন" >  
  4.       কাৰ্য কৰা
  5.       <span class = "কেৰেট" </span> 
  6.     </বুটাম>
  7.     <ul class = "ড্ৰপডাউন-মেনু" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   <input class = "span2" id = "সংলগ্নপ্ৰেপেণ্ডেডড্ৰপডাউনবুটাম " ধৰণ = "লিখনী" >   
  12.   <div শ্ৰেণী = "btn-গোট" > 
  13.     <button class = "btn ড্ৰপডাউন-টগল" ডাটা-টগল = "ড্ৰপডাউন" >  
  14.       কাৰ্য কৰা
  15.       <span class = "কেৰেট" </span> 
  16.     </বুটাম>
  17.     <ul class = "ড্ৰপডাউন-মেনু" > 
  18.       ...
  19.     </ul>
  20.   </div>
  21. </div>

খণ্ডিত ড্ৰপডাউন গোটসমূহ

  1. <ফৰ্ম>
  2.   <div class = "ইনপুট-প্ৰিপেণ্ড" > 
  3.     <div শ্ৰেণী = "btn-গোট" > ... </div> 
  4.     <ইনপুট ধৰণ = "লিখনী" > 
  5.   </div>
  6.   <div class = "ইনপুট-সংলগ্ন" > 
  7.     <ইনপুট ধৰণ = "লিখনী" > 
  8.     <div শ্ৰেণী = "btn-গোট" > ... </div> 
  9.   </div>
  10. </form>

সন্ধান ফৰ্ম

  1. <form class = "ফৰ্ম-অন্বেষণ" > 
  2.   <div class = "ইনপুট-সংলগ্ন" > 
  3.     <ইনপুট ধৰণ = "পাঠ" শ্ৰেণী = "span2 সন্ধান-প্ৰশ্ন" >  
  4.     <button type = "submit" class = "btn" > সন্ধান কৰক </button>  
  5.   </div>
  6.   <div class = "ইনপুট-প্ৰিপেণ্ড" > 
  7.     <button type = "submit" class = "btn" > সন্ধান কৰক </button>  
  8.     <ইনপুট ধৰণ = "পাঠ" শ্ৰেণী = "span2 সন্ধান-প্ৰশ্ন" >  
  9.   </div>
  10. </form>

আকাৰ নিৰ্ধাৰণ নিয়ন্ত্ৰণ কৰক

আপেক্ষিক আকাৰকৰণ শ্ৰেণীসমূহ ব্যৱহাৰ কৰক যেনে .input-largeবা আপোনাৰ ইনপুটসমূহক শ্ৰেণীসমূহ ব্যৱহাৰ কৰি গ্ৰীড স্তম্ভ আকাৰসমূহৰ সৈতে মিলাওক .span*।

ব্লক স্তৰৰ ইনপুটসমূহ

যিকোনো <input>বা <textarea>উপাদানক ব্লক স্তৰৰ উপাদানৰ দৰে আচৰণ কৰাওক।

  1. <input class = "ইনপুট-ব্লক-স্তৰ" ধৰণ = "লিখনী" স্থানধাৰী = ".ইনপুট-ব্লক-স্তৰ" >

আপেক্ষিক আকাৰ নিৰ্ধাৰণ

  1. <ইনপুট শ্ৰেণী = "ইনপুট-মিনি" ধৰণ = "লিখনী" স্থানধাৰী = ".ইনপুট-মিনি" >   
  2. <input class = "ইনপুট-সৰু" ধৰণ = "লিখনী" স্থানধাৰী = ".ইনপুট-সৰু" >   
  3. <input class = "ইনপুট-মধ্যম" ধৰণ = "পাঠ" স্থানধাৰী = ".ইনপুট-মাধ্যম" >   
  4. <input class = "ইনপুট-বৃহৎ" ধৰণ = "লিখনী" স্থানধাৰী = ".ইনপুট-বৃহৎ" >   
  5. <input class = "input-xlarge" ধৰণ = "লিখনী" স্থানধাৰী = ".input-xlarge" >   
  6. <input class = "input-xxlarge" ধৰণ = "লিখনী" স্থানধাৰী = ".input-xxlarge" >

মুৰ ডাঙি!ভৱিষ্যত সংস্কৰণসমূহত, আমি আমাৰ বুটামৰ আকাৰৰ সৈতে মিলাবলৈ এই আপেক্ষিক ইনপুট শ্ৰেণীসমূহৰ ব্যৱহাৰ সলনি কৰিম। উদাহৰণস্বৰূপে, .input-largeএটা ইনপুটৰ পেডিং আৰু ফন্ট-আকাৰ বৃদ্ধি কৰিব।

গ্ৰীডৰ আকাৰ নিৰ্ধাৰণ

গ্ৰীড স্তম্ভসমূহৰ একে আকাৰৰ সৈতে মিল থকা ইনপুটসমূহৰ বাবে .span1to ব্যৱহাৰ কৰক ।.span12

  1. <ইনপুট শ্ৰেণী = "span1" ধৰণ = "লিখনী" স্থানধাৰী = ".span1" >   
  2. <ইনপুট শ্ৰেণী = "span2" ধৰণ = "লিখনী" স্থানধাৰী = ".span2" >   
  3. <ইনপুট শ্ৰেণী = "span3" ধৰণ = "লিখনী" স্থানধাৰী = ".span3" >   
  4. < শ্ৰেণী নিৰ্বাচন কৰক = "span1" > 
  5.   ...
  6. </নিৰ্বাচন কৰক>
  7. < শ্ৰেণী নিৰ্বাচন কৰক = "span2" > 
  8.   ...
  9. </নিৰ্বাচন কৰক>
  10. < শ্ৰেণী নিৰ্বাচন কৰক = "span3" > 
  11.   ...
  12. </নিৰ্বাচন কৰক>

প্ৰতি শাৰীত একাধিক গ্ৰীড ইনপুটৰ বাবে, সঠিক ব্যৱধানৰ বাবে পৰিবৰ্তক শ্ৰেণী ব্যৱহাৰ কৰক.controls-row । ই ইনপুটসমূহক বগা-স্থান সংকুচিত কৰিবলে ফ্ল'ট কৰে, সঠিক মাৰ্জিনসমূহ সংহতি কৰে, আৰু ফ্ল'টটো পৰিষ্কাৰ কৰে।

  1. <div class = "নিয়ন্ত্ৰণসমূহ" > 
  2.   <ইনপুট শ্ৰেণী = "span5" ধৰণ = "লিখনী" স্থানধাৰী = ".span5" >   
  3. </div>
  4. <div class = "নিয়ন্ত্ৰণ-শাৰী নিয়ন্ত্ৰণ কৰে" > 
  5.   <ইনপুট শ্ৰেণী = "span4" ধৰণ = "লিখনী" স্থানধাৰী = ".span4" >   
  6.   <ইনপুট শ্ৰেণী = "span1" ধৰণ = "লিখনী" স্থানধাৰী = ".span1" >   
  7. </div>
  8. ...

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

প্ৰকৃত প্ৰপত্ৰ মাৰ্কআপ ব্যৱহাৰ নকৰাকৈ সম্পাদনাযোগ্য নহয় এনে এটা ফৰ্মত তথ্য উপস্থাপন কৰক।

ইয়াত কিছুমান মূল্য 
  1. <span class = "input-xlarge uneditable-input" > ইয়াত কিছুমান মান </span>

কাৰ্য্যসমূহ গঠন কৰক

কাৰ্য্যৰ এটা গোট (বুটাম)ৰ সৈতে এটা প্ৰপত্ৰ শেষ কৰক। যেতিয়া এটা ৰ ভিতৰত ৰখা হয় .form-actions, বুটামসমূহ স্বয়ংক্ৰিয়ভাৱে ফৰ্ম নিয়ন্ত্ৰণসমূহৰ সৈতে লাইন আপ কৰিবলে ইণ্ডেণ্ট হ'ব।

  1. <div class = "ৰূপ-ক্ৰিয়াসমূহ" > 
  2.   <button type = "submit" class = "btn btn-primary" > পৰিবৰ্তনসমূহ সংৰক্ষণ কৰক </button>  
  3.   <button type = "button" class = "btn" > বাতিল কৰক </button>  
  4. </div>

সহায় লিখনী

সহায় লিখনীৰ বাবে ইনলাইন আৰু ব্লক স্তৰৰ সমৰ্থন যি প্ৰপত্ৰ নিয়ন্ত্ৰণসমূহৰ চাৰিওফালে দেখা দিয়ে।

ইনলাইন সহায়

ইনলাইন সহায় লিখনী 
  1. <input type = "text" ><span class = "সহায়-ইনলাইন" > ইনলাইন সহায় লিখনী </span>

সহায় ব্লক কৰক

সহায় লিখনীৰ এটা দীঘল ব্লক যি এটা নতুন শাৰীত ভাঙি যায় আৰু এটা শাৰীৰ বাহিৰলৈ বিস্তৃত হ'ব পাৰে। 
  1. <input type = "text" ><span class = "help-block" > সহায় লিখনীৰ এটা দীঘল ব্লক যি এটা নতুন শাৰীত ভাঙি যায় আৰু এটা শাৰীৰ বাহিৰলৈ বিস্তৃত হ'ব পাৰে। </span>

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

প্ৰপত্ৰ নিয়ন্ত্ৰণ আৰু লেবেলসমূহৰ ওপৰত মৌলিক মতামত অৱস্থাৰ সৈতে ব্যৱহাৰকাৰী বা দৰ্শকসকলক মতামত প্ৰদান কৰক।

ইনপুট ফ'কাচ

outlineআমি কিছুমান প্ৰপত্ৰ নিয়ন্ত্ৰণত অবিকল্পিত শৈলীসমূহ আঁতৰাওঁ আৰু box-shadowইয়াৰ ঠাইত a প্ৰয়োগ কৰো :focus।

  1. <input class = "input-xlarge" id = "focusedInput" type = "text" value = "এইটো কেন্দ্ৰীভূত কৰা হৈছে..." >

অবৈধ ইনপুটসমূহ

ৰ সৈতে অবিকল্পিত ব্ৰাউজাৰ কাৰ্য্যকৰীতাৰ যোগেদি শৈলী ইনপুটসমূহ :invalid। a ধাৰ্য্য কৰক type, বৈশিষ্ট্য যোগ কৰক requiredযদি ক্ষেত্ৰ বৈকল্পিক নহয়, আৰু (যদি প্ৰযোজ্য) a ধাৰ্য্য কৰক pattern।

CSS ছ্যুডো নিৰ্বাচকসমূহৰ বাবে সমৰ্থনৰ অভাৱৰ বাবে ই Internet Explorer 7-9 ৰ সংস্কৰণসমূহত উপলব্ধ নহয়।

  1. <input class = "span3" ধৰণ = "ইমেইল"ৰ প্ৰয়োজন >

নিষ্ক্ৰিয় ইনপুটসমূহ

disabledব্যৱহাৰকাৰী ইনপুট ৰোধ কৰিবলৈ আৰু এটা অলপ বেলেগ ৰূপ ট্ৰিগাৰ কৰিবলৈ এটা ইনপুটত বৈশিষ্ট্য যোগ কৰক ।

  1. <input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "ইয়াত ইনপুট নিষ্ক্ৰিয় কৰা হৈছে..." নিষ্ক্ৰিয় কৰা হৈছে >

বৈধকৰণৰ অৱস্থা

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

কিবা এটা ভুল হ’ব পাৰে
অনুগ্ৰহ কৰি ভুলটো শুধৰাই দিয়ক
ব্যৱহাৰকাৰীৰ নাম লোৱা হৈছে
Woohoo! 
  1. <div class = "নিয়ন্ত্ৰণ-গোট সতৰ্কবাণী" > 
  2.   <label class = "control-label" for = "inputWarning" > সতৰ্কবাণীৰ সৈতে ইনপুট কৰক </label>  
  3.   <div class = "নিয়ন্ত্ৰণসমূহ" > 
  4.     <input type = "text" id = "ইনপুটসতৰ্কবাণী" >  
  5.     <span class = "help-inline" > কিবা এটা ভুল হৈছে </span> 
  6.   </div>
  7. </div>
  8.  
  9. <div class = "নিয়ন্ত্ৰণ-গোট ত্ৰুটি" > 
  10.   <label class = "control-label" for = "inputError" > ভুলৰ সৈতে ইনপুট কৰক </label>  
  11.   <div class = "নিয়ন্ত্ৰণসমূহ" > 
  12.     <ইনপুট ধৰণ = "লিখনী" id = "ইনপুটত্ৰুটি" >  
  13.     <span class = "help-inline" > অনুগ্ৰহ কৰি ভুলটো শুধৰাই দিয়ক </span> 
  14.   </div>
  15. </div>
  16.  
  17. <div class = "নিয়ন্ত্ৰণ-গোট তথ্য" > 
  18.   <label class = "control-label" for = "inputInfo" > তথ্যৰ সৈতে ইনপুট কৰক </label>  
  19.   <div class = "নিয়ন্ত্ৰণসমূহ" > 
  20.     <ইনপুট ধৰণ = "লিখনী" id = "ইনপুট তথ্য" >  
  21.     <span class = "help-inline" > ব্যৱহাৰকাৰীৰ নাম ইতিমধ্যে লোৱা হৈছে </span> 
  22.   </div>
  23. </div>
  24.  
  25. <div class = "নিয়ন্ত্ৰণ-গোট সফলতা" > 
  26.   <label class = "control-label" for = "inputSuccess" > সফলতাৰ সৈতে ইনপুট কৰক </label>  
  27.   <div class = "নিয়ন্ত্ৰণসমূহ" > 
  28.     <ইনপুট ধৰণ = "লিখনী" id = "ইনপুটসফলতা" >  
  29.     <span class = "সহায়-ইনলাইন" > Woohoo! </span> 
  30.   </div>
  31. </div>

বুটামসমূহ

অবিকল্পিত বুটামসমূহ

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

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

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

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

বুটামৰ আকাৰ

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

  1. <p>
  2.   <button class = "btn btn-বৃহৎ btn-প্ৰাথমিক" type = "বুটাম" > ডাঙৰ বুটাম </button>  
  3.   <button class = "btn btn-large" type = "বুটাম" > ডাঙৰ বুটাম </button>  
  4. </p>
  5. <p>
  6.   <button class = "btn btn-primary" type = "বুটাম" > অবিকল্পিত বুটাম </button>  
  7.   <button class = "btn" type = "button" > অবিকল্পিত বুটাম </button>  
  8. </p>
  9. <p>
  10.   <button class = "btn btn-সৰু btn-প্ৰাথমিক" type = "বুটাম" > সৰু বুটাম </button>  
  11.   <button class = "btn btn-small" type = "বুটাম" > সৰু বুটাম </button>  
  12. </p>
  13. <p>
  14.   <button class = "btn btn-mini btn-primary" ধৰণ = "বুটাম" > মিনি বুটাম </button>  
  15.   <button class = "btn btn-mini" type = "বুটাম" > মিনি বুটাম </button>  
  16. </p>

ব্লক স্তৰৰ বুটাম সৃষ্টি কৰক—যিবোৰ এটা অভিভাৱকৰ সম্পূৰ্ণ প্ৰস্থত বিস্তৃত— যোগ কৰি .btn-block।

  1. <button class = "btn btn-large btn-block btn-primary" type = "বুটাম" > ব্লক স্তৰৰ বুটাম </button>  
  2. <button class = "btn btn-large btn-block" type = "বুটাম" > ব্লক স্তৰৰ বুটাম </button>

অক্ষম অৱস্থা

বুটামসমূহক ৫০% পিছলৈ ফিক কৰি আনক্লিক কৰিব নোৱাৰা যেন লগাওক।

লংঘন উপাদান

বুটামত .disabledশ্ৰেণীটো যোগ কৰক ।<a>

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

  1. <a href = "#" class = "btn btn-বৃহৎ btn-প্ৰাথমিক নিষ্ক্ৰিয়" > প্ৰাথমিক সংযোগ </a>  
  2. <a href = "#" class = "btn btn-বৃহৎ নিষ্ক্ৰিয়" > সংযোগ </a>

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

বুটাম উপাদান

বুটামসমূহত disabledবৈশিষ্ট্য যোগ কৰক ।<button>

  1. <button type = "button" class = "btn btn-large btn-প্ৰাথমিক নিষ্ক্ৰিয়" disabled = "নিষ্ক্ৰিয়" > প্ৰাথমিক বুটাম </button>   
  2. <button type = "button" class = "btn btn-large" নিষ্ক্ৰিয় > বুটাম </button>

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

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

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

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

চিত্ৰসমূহ

<img>যিক��নো প্ৰকল্পত ছবিসমূহ সহজে ষ্টাইল কৰিবলৈ এটা উপাদানত শ্ৰেণীসমূহ যোগ কৰক ।

১৪০x১৪০ ১৪০x১৪০ ১৪০x১৪০ 
  1. <img src = "..." শ্ৰেণী = "img-গোল কৰা" >  
  2. <img src = "..." শ্ৰেণী = "img-বৃত্ত" >  
  3. <img src = "..." শ্ৰেণী = "img-প'লাৰইড" >

মুৰ ডাঙি! .img-roundedআৰু সমৰ্থনৰ .img-circleঅভাৱৰ বাবে IE7-8 ত কাম নকৰে border-radius।

Glyphicons দ্বারা আইকন

আইকন গ্লিফ

140 আইকন স্প্ৰাইট আকাৰত, গাঢ় ধূসৰ (অবিকল্পিত) আৰু বগা ৰঙত উপলব্ধ, Glyphicons দ্বাৰা প্ৰদান কৰা ।

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

গ্লিফিকনছ এট্ৰিবিউচন

Glyphicons Halflings সাধাৰণতে বিনামূলীয়াকৈ উপলব্ধ নহয়, কিন্তু Bootstrap আৰু Glyphicons সৃষ্টিকৰ্তাসকলৰ মাজত এটা ব্যৱস্থাই আপোনাক ডেভেলপাৰ হিচাপে কোনো খৰচ নোহোৱাকৈ এইটো সম্ভৱ কৰি তুলিছে। ধন্যবাদ হিচাপে, আমি আপোনাক অনুৰোধ কৰিছো যে যেতিয়াই ব্যৱহাৰিক হ'ব তেতিয়াই Glyphicons লৈ পুনৰ এটা বৈকল্পিক লিংক অন্তৰ্ভুক্ত কৰক।

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

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

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

ওলোটা (বগা) আইকনৰ বাবেও শৈলী উপলব্ধ, এটা অতিৰিক্ত শ্ৰেণীৰ সৈতে সাজু কৰা। আমি এই শ্ৰেণীটো বিশেষভাৱে nav আৰু ড্ৰপডাউন লিংকৰ বাবে hover আৰু active states ত বলবৎ কৰিম।

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

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

আইকন উদাহৰণ

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

বুটামসমূহ

এটা বুটাম সঁজুলিদণ্ডিত বুটাম গোট
  1. <div class = "btn-সঁজুলিবাৰ" > 
  2.   <div শ্ৰেণী = "btn-গোট" > 
  3.     <a class = "btn" href = "#" ><i class = "আইকন-এলাইন-বাওঁফালে" ></i></a>   
  4.     <a class = "btn" href = "#" ><i class = "আইকন-প্ৰান্তিককৰণ-কেন্দ্ৰ" ></i></a>   
  5.     <a class = "btn" href = "#" ><i class = "আইকন-প্ৰান্তিককৰণ-সোঁফালে" ></i></a>   
  6.     <a class = "btn" href = "#" ><i class = "আইকন-প্ৰান্তিককৰণ-ন্যায্যতা প্ৰদান" ></i></a>   
  7.   </div>
  8. </div>
এটা বুটাম গোটত ড্ৰপডাউন
ব্যৱহাৰকাৰী 
  1. <div শ্ৰেণী = "btn-গোট" > 
  2.   <a class = "btn btn-primary" href = "#" ><i class = "আইকন-ব্যৱহাৰকাৰী আইকন-বগা" ></i> ব্যৱহাৰকাৰী </a>   
  3.   <a class = "btn btn-প্ৰাথমিক ড্ৰপডাউন-টগল" data-toggle = "ড্ৰপডাউন" href = "#" ><span class = "কেৰেট" ></span></a>    
  4.   <ul class = "ড্ৰপডাউন-মেনু" > 
  5.     <li><a href = "#" ><i class = "আইকন-পেঞ্চিল" </i> সম্পাদনা কৰক </a></li>  
  6.     <li><a href = "#" ><i class = "আইকন-আৱৰ্জনা" ></i> মচি পেলাওক </a></li>  
  7.     <li><a href = "#" ><i class = "আইকন-বান-বৃত্ত" ></i> নিষিদ্ধ কৰক </a></li>  
  8.     <li class = "বিভাজক" </li> 
  9.     <li><a href = "#" ><i class = "i" </i> প্ৰশাসক বনাওক </a></li>  
  10.   </ul>
  11. </div>
বুটামৰ আকাৰ
তৰা তৰা তৰা 
  1. <a class = "btn btn-large" href = "#" ><i class = "আইকন-তৰা" ></i> তৰা </a>   
  2. <a class = "btn btn-small" href = "#" ><i class = "আইকন-তৰা" ></i> তৰা </a>   
  3. <a class = "btn btn-mini" href = "#" ><i class = "আইকন-তৰা" ></i> তৰা </a>

নেভিগেচন

  1. <ul class = "nav nav-তালিকা" > 
  2.   <li class = "সক্ৰিয়" ><a href = "#" ><i class = "আইকন-ঘৰ আইকন-বগা" </i> ঘৰ </a></li>   
  3.   <li><a href = "#" ><i class = "আইকন-বুক" </i> লাইব্ৰেৰী </a></li>  
  4.   <li><a href = "#" ><i class = "আইকন-পেঞ্চিল" </i> প্ৰয়োগসমূহ </a></li>  
  5.   <li><a href = "#" ><i শ্ৰেণী = "মই" </i> বিবিধ </a></li>  
  6. </ul>

ফৰ্ম ফিল্ডসমূহ

  1. <div class = "নিয়ন্ত্ৰণ-গোট" > 
  2.   <label class = "control-label" for = "inputIcon" > ইমেইল ঠিকনা </label>  
  3.   <div class = "নিয়ন্ত্ৰণসমূহ" > 
  4.     <div class = "ইনপুট-প্ৰিপেণ্ড" > 
  5.       <span class = "এড-অন" ><i class = "আইকন-খাম" ></i></span>  
  6.       <ইনপুট ক্লাছ = "span2" id = "ইনপুটআইকন" ধৰণ = "লিখনী" >   
  7.     </div>
  8.   </div>
  9. </div>