বুটস্ট্র্যাপ

বেস সিএসএস

এক্সটেনসিবল ক্লাসের সাথে স্টাইল করা এবং উন্নত করা মৌলিক HTML উপাদান।

টাইপোগ্রাফি

শিরোনাম

সমস্ত HTML শিরোনাম, <h1>মাধ্যমে <h6>উপলব্ধ.

h1. শিরোনাম 1

h2. শিরোনাম 2

h3. শিরোনাম 3

h4. শিরোনাম 4

h5. শিরোনাম 5
h6. শিরোনাম 6

শরীরের কপি

বুটস্ট্র্যাপের গ্লোবাল ডিফল্ট font-sizeহল 14px , একটি 20pxline-height সহ । এটি এবং সমস্ত অনুচ্ছেদে প্রয়োগ করা হয়। উপরন্তু, (অনুচ্ছেদ) তাদের লাইন-উচ্চতার অর্ধেক নীচের মার্জিন পায় (ডিফল্টরূপে 10px)।<body><p>

নুল্লাম কুইস রিসাস এগেট উর্না মলিস অর্নরে ভেল ইউ লিও। সহ সামাজিক ন্যাটোক পেনাটিবাস এবং ম্যাগনিস ডিস পার্টুরিয়েন্ট মন্টেস, নতুন হাস্যকর মুস। নুল্লম আইডি ডলোর আইডি নিভ আলট্রিসিস যানবাহন।

সহ সামাজিক ন্যাটোক পেনাটিবাস এবং ম্যাগনিস ডিস পার্টুরিয়েন্ট মন্টেস, নতুন হাস্যকর মুস। Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, Nisi erat Porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, Nisi erat Porttitor ligula, eget lacinia odio sem nec elit.

<p> ... </p>

লিড বডি কপি

একটি অনুচ্ছেদ যোগ করে আলাদা করুন .lead।

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. ডুইস মলিস, এটি অ কমোডো লুকটাস।

<p ক্লাস = "লিড" > ... </p>

কম দিয়ে নির্মিত

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

জোর

লাইটওয়েট স্টাইল সহ HTML এর ডিফল্ট জোর ট্যাগ ব্যবহার করুন।

<small>

ইনলাইন বা টেক্সট ব্লকের উপর জোর দেওয়ার জন্য, ছোট ট্যাগ ব্যবহার করুন।

পাঠ্যের এই লাইনটি সূক্ষ্ম মুদ্রণ হিসাবে বিবেচনা করা হয়।

<p> <small> পাঠ্যের এই লাইনটিকে সূক্ষ্ম মুদ্রণ হিসাবে বিবেচনা করা হয়। </small> </p>

সাহসী

একটি ভারী ফন্ট-ওজন সহ পাঠ্যের একটি স্নিপেটে জোর দেওয়ার জন্য।

টেক্সটের নিচের স্নিপেটটিকে বোল্ড টেক্সট হিসেবে রেন্ডার করা হয়েছে ।

<strong> বোল্ড টেক্সট হিসাবে রেন্ডার করা হয়েছে </strong>

তির্যক

তির্যক সহ পাঠ্যের একটি স্নিপেটে জোর দেওয়ার জন্য।

পাঠ্যের নিম্নলিখিত স্নিপেটটি তির্যক টেক্সট হিসাবে রেন্ডার করা হয়েছে ।

<em> তির্যক লেখা </em> হিসেবে রেন্ডার করা হয়েছে

মাথা আপ!নির্দ্বিধায় ব্যবহার করুন <b>এবং <i>HTML5 এ। <b>শব্দ বা বাক্যাংশগুলিকে অতিরিক্ত গুরুত্ব না দিয়ে হাইলাইট করার জন্য বোঝানো হয় যখন <i>বেশিরভাগই ভয়েস, প্রযুক্তিগত পদ ইত্যাদির জন্য।

প্রান্তিককরণ ক্লাস

পাঠ্য সারিবদ্ধকরণ ক্লাস সহ উপাদানগুলিতে পাঠ্যকে সহজেই পুনরায় সাজান।

বাম প্রান্তিককৃত পাঠ্য।

কেন্দ্রে সারিবদ্ধ পাঠ্য।

ডান প্রান্তিককৃত পাঠ্য।

  1. <p class = "text-left" > বাম প্রান্তিককৃত পাঠ্য। </p> 
  2. <p ক্লাস = "টেক্সট-সেন্টার" > কেন্দ্রে সারিবদ্ধ পাঠ্য। </p> 
  3. <p ক্লাস = "টেক্সট-ডান" > ডান সারিবদ্ধ পাঠ্য। </p>

জোর ক্লাস

মুষ্টিমেয় জোর ইউটিলিটি ক্লাসের সাথে রঙের মাধ্যমে অর্থ প্রকাশ করুন।

Fusce dapibus, telus ac cursus commodo, tortor mauris nibh.

Etiam porta sem malesuada Magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

  1. <p ক্লাস = "নিঃশব্দ" > Fusce dapibus, telus ac cursus commodo, tortor mauris nibh. </p> 
  2. <p ক্লাস = "টেক্সট-সতর্কতা" > ইটিয়াম পোর্টা সেম ম্যালেসুয়াডা ম্যাগনা মলিস ইউইসমোড। </p> 
  3. <p class = "text-error" > Donec ullamcorper nulla non metus auctor fringilla. </p> 
  4. <p class = "text-info" > Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis. </p> 
  5. <p class = "text-success" > Duis mollis, est non commodo luctus, nisi erat porttitor ligula. </p>

শব্দ সংক্ষেপ

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

<abbr>

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

অ্যাট্রিবিউট শব্দের একটি সংক্ষিপ্ত রূপ হল attr ।

<abbr title = "attribute" > attr </abbr>

<abbr class="initialism">

.initialismসামান্য ছোট ফন্ট-আকারের জন্য একটি সংক্ষেপে যোগ করুন ।

এইচটিএমএল স্লাইসড ব্রেড থেকে সেরা জিনিস।

<abbr শিরোনাম = "হাইপারটেক্সট মার্কআপ ল্যাঙ্গুয়েজ" ক্লাস = "প্রাথমিকতা" > HTML </abbr>

ঠিকানা

নিকটতম পূর্বপুরুষ বা কাজের পুরো অংশের জন্য বর্তমান যোগাযোগের তথ্য।

<address>

দিয়ে সমস্ত লাইন শেষ করে বিন্যাস সংরক্ষণ করুন <br>।

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
পুরো নাম
[email protected] 
  1. <ঠিকানা>
  2.   <strong> Twitter, Inc. </strong><br>
  3.   795 Folsom Ave, Suite 600 <br>
  4.   সান ফ্রান্সিসকো, CA 94107 <br>
  5.   <abbr title = "ফোন" > P: </abbr> (123) 456-7890 
  6. </address>
  7.  
  8. <ঠিকানা>
  9.   <strong> সম্পূর্ণ নাম </strong><br>
  10.   <a href="mailto:#" > [email protected] </a> _ _ 
  11. </address>

ব্লককোট

আপনার নথির মধ্যে অন্য উৎস থেকে সামগ্রীর ব্লক উদ্ধৃত করার জন্য।

ডিফল্ট ব্লককোট

উদ্ধৃতি হিসাবে <blockquote>যেকোনো HTML এর চারপাশে মোড়ানো । সোজা উদ্ধৃতি জন্য আমরা একটি সুপারিশ <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. পূর্ণসংখ্যা posuere erat a ante.

  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. পূর্ণসংখ্যা posuere erat a ante. </p>
  3. </blockquote>

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

একটি স্ট্যান্ডার্ড ব্লককোটে সহজ ভিন্নতার জন্য শৈলী এবং বিষয়বস্তু পরিবর্তন।

একটি উৎসের নামকরণ

<small>উৎস শনাক্ত করার জন্য ট্যাগ যোগ করুন । সোর্স কাজের নাম লিখুন <cite>।

Lorem ipsum dolor sit amet, consectetur adipiscing elit. পূর্ণসংখ্যা posuere erat a ante.

উৎস শিরোনামে বিখ্যাত কেউ 
  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. পূর্ণসংখ্যা posuere erat a ante. </p>
  3.   <small> বিখ্যাত কেউ <cite title = "Source Title" > Source Title </cite></small> 
  4. </blockquote>

বিকল্প প্রদর্শন

.pull-rightএকটি ভাসমান, ডান-সারিবদ্ধ ব্লককোটের জন্য ব্যবহার করুন ।

Lorem ipsum dolor sit amet, consectetur adipiscing elit. পূর্ণসংখ্যা posuere erat a ante.

উৎস শিরোনামে বিখ্যাত কেউ 
  1. <blockquote ক্লাস = "টান-ডান" > 
  2.   ...
  3. </blockquote>

তালিকা

ক্রমহীন

আইটেমগুলির একটি তালিকা যেখানে অর্ডারটি স্পষ্টভাবে গুরুত্বপূর্ণ নয় ।

  • অ্যাডমিন সরবরাহকারী
  • কনসেক্টেতুর অ্যাডিপিসিং এলিট
  • ম্যাসা এ পূর্ণসংখ্যা মোলেস্টি লরেম
  • প্রিটিয়াম নিসল অ্যালিকুয়েটে ফ্যাসিলিসিস
  • নুল্লা ভোলুটপাট আলিকাম ভেলিট
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • ভেস্টিবুলম ল্যাওরেট পোর্টটিটর সেম
    • এসি tristique libero volutpat এ
  • Faucibus porta lacus fringilla vel
  • Aenean বসে amet erat nunc
  • এগেট পোর্টটিটর লোরেম
  1. <ul>
  2.   <li> ... </li>
  3. </ul>

আদেশ দিয়েছেন

আইটেমগুলির একটি তালিকা যেখানে অর্ডারটি স্পষ্টভাবে গুরুত্বপূর্ণ।

  1. অ্যাডমিন সরবরাহকারী
  2. কনসেক্টেতুর অ্যাডিপিসিং এলিট
  3. ম্যাসা এ পূর্ণসংখ্যা মোলেস্টি লরেম
  4. প্রিটিয়াম নিসল অ্যালিকুয়েটে ফ্যাসিলিসিস
  5. নুল্লা ভোলুটপাট আলিকাম ভেলিট
  6. Faucibus porta lacus fringilla vel
  7. Aenean বসে amet erat nunc
  8. এগেট পোর্টটিটর লোরেম
  1. <ol>
  2.   <li> ... </li>
  3. </ol>

স্টাইলবিহীন

তালিকার আইটেমগুলিতে ডিফল্ট list-styleএবং বাম প্যাডিং সরান (শুধুমাত্র শিশুদের জন্য)।

  • অ্যাডমিন সরবরাহকারী
  • কনসেক্টেতুর অ্যাডিপিসিং এলিট
  • ম্যাসা এ পূর্ণসংখ্যা মোলেস্টি লরেম
  • প্রিটিয়াম নিসল অ্যালিকুয়েটে ফ্যাসিলিসিস
  • নুল্লা ভোলুটপাট আলিকাম ভেলিট
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • ভেস্টিবুলম ল্যাওরেট পোর্টটিটর সেম
    • এসি tristique libero volutpat এ
  • Faucibus porta lacus fringilla vel
  • Aenean বসে amet erat nunc
  • এগেট পোর্টটিটর লোরেম
  1. <ul class = "unstyled" > 
  2.   <li> ... </li>
  3. </ul>

সঙ্গতিপূর্ণভাবে

সমস্ত তালিকা আইটেম একটি একক লাইনে রাখুন inline-blockএবং কিছু হালকা প্যাডিং সহ।

  • Lorem ipsum
  • ফ্যাসেলাস আইকুলিস
  • নুলা ভোল্টপাট
  1. <ul class = "ইনলাইন" > 
  2.   <li> ... </li>
  3. </ul>

বর্ণনা

তাদের সম্পর্কিত বর্ণনা সহ পদগুলির একটি তালিকা৷

বর্ণনা তালিকা
একটি বর্ণনা তালিকা শর্তাবলী সংজ্ঞায়িত করার জন্য উপযুক্ত।
ইউইসমোড
Vestibulum id ligula Porta felis euismod Semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
মালেসুদা পোর্টা
Etiam porta sem malesuada Magna mollis euismod. 
  1. <dl>
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

অনুভূমিক বর্ণনা

<dl>পাশাপাশি লাইন আপ শর্তাবলী এবং বর্ণনা করুন .

বর্ণনা তালিকা
একটি বর্ণনা তালিকা শর্তাবলী সংজ্ঞায়িত করার জন্য উপযুক্ত।
ইউইসমোড
Vestibulum id ligula Porta felis euismod Semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
মালেসুদা পোর্টা
Etiam porta sem malesuada Magna mollis euismod.
Felis euismod Semper eget lacinia
ফুস ড্যাপিবাস, টেলস এসি কার্সাস কমোডো, টর্টার মৌরিস কনডিমেন্টাম নিভ, ইউটি ফার্মেন্টাম ম্যাসা জাস্টো সিট অ্যামেট রিসাস। 
  1. <dl ক্লাস = "dl-অনুভূমিক" > 
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

মাথা আপ!অনুভূমিক বর্ণনা তালিকাগুলি বাম কলামের ফিক্সে ফিট করার জন্য খুব দীর্ঘ পদগুলিকে ছেঁটে ফেলবে text-overflow৷ সংকীর্ণ ভিউপোর্টে, তারা ডিফল্ট স্ট্যাক করা লেআউটে পরিবর্তিত হবে।

কোড

সঙ্গতিপূর্ণভাবে

কোডের ইনলাইন স্নিপেটগুলি দিয়ে মোড়ানো <code>।

উদাহরণস্বরূপ, <section>ইনলাইন হিসাবে আবৃত করা উচিত. 
  1. উদাহরণস্বরূপ , < code > & lt ; বিভাগ & gt ;</ code > ইনলাইন হিসাবে মোড়ানো উচিত ।

মৌলিক ব্লক

<pre>কোডের একাধিক লাইনের জন্য ব্যবহার করুন । সঠিক রেন্ডারিংয়ের জন্য কোডে যেকোন অ্যাঙ্গেল ব্র্যাকেট এড়িয়ে যেতে ভুলবেন না।

<p>এখানে নমুনা পাঠ্য...</p>
  1. <প্রে>
  2.   <p>এখানে নমুনা পাঠ্য...</p>
  3. </pre>

মাথা আপ!ট্যাগের মধ্যে কোড <pre>যতটা সম্ভব বাম দিকে রাখতে ভুলবেন না; এটি সমস্ত ট্যাব রেন্ডার করবে।

আপনি ঐচ্ছিকভাবে .pre-scrollableক্লাস যোগ করতে পারেন যা সর্বোচ্চ 350px উচ্চতা সেট করবে এবং একটি y-অক্ষ স্ক্রলবার প্রদান করবে।

টেবিল

ডিফল্ট শৈলী

.tableবেসিক স্টাইলিং এর জন্য—হালকা প্যাডিং এবং শুধুমাত্র অনুভূমিক ডিভাইডার— যেকোনো একটিতে বেস ক্লাস যোগ করুন <table>।

# নামের প্রথম অংশ নামের শেষাংশ ব্যবহারকারীর নাম
1 মার্ক অটো @এমডিও
2 জ্যাকব থর্নটন @ফ্যাট
3 ল্যারি পাখি @টুইটার 
  1. <টেবিল ক্লাস = "টেবিল" > 
  2.   …
  3. </ টেবিল>

ঐচ্ছিক ক্লাস

.tableবেস ক্লাসে নিচের যেকোনো ক্লাস যুক্ত করুন।

.table-striped

<tbody>CSS সিলেক্টরের মাধ্যমে যেকোন টেবিল সারিতে জেব্রা-স্ট্রাইপিং যোগ :nth-childকরে (IE7-8 এ উপলব্ধ নয়)।

# নামের প্রথম অংশ নামের শেষাংশ ব্যবহারকারীর নাম
1 মার্ক অটো @এমডিও
2 জ্যাকব থর্নটন @ফ্যাট
3 ল্যারি পাখি @টুইটার 
  1. <টেবিল ক্লাস = "টেবিল টেবিল-স্ট্রিপড" > 
  2.   …
  3. </ টেবিল>

.table-bordered

টেবিলে সীমানা এবং গোলাকার কোণগুলি যোগ করুন।

# নামের প্রথম অংশ নামের শেষাংশ ব্যবহারকারীর নাম
1 মার্ক অটো @এমডিও
মার্ক অটো @getbootstrap
2 জ্যাকব থর্নটন @ফ্যাট
3 ল্যারি দ্য বার্ড @টুইটার 
  1. <টেবিল ক্লাস = "টেবিল টেবিল-বর্ডারযুক্ত" > 
  2.   …
  3. </ টেবিল>

.table-hover

একটি এর মধ্যে টেবিলের সারিগুলিতে একটি হোভার অবস্থা সক্ষম করুন <tbody>৷

# নামের প্রথম অংশ নামের শেষাংশ ব্যবহারকারীর নাম
1 মার্ক অটো @এমডিও
2 জ্যাকব থর্নটন @ফ্যাট
3 ল্যারি দ্য বার্ড @টুইটার 
  1. <টেবিল ক্লাস = "টেবিল টেবিল-হোভার" > 
  2.   …
  3. </ টেবিল>

.table-condensed

সেল প্যাডিংকে অর্ধেক করে কেটে টেবিলকে আরও কমপ্যাক্ট করে।

# নামের প্রথম অংশ নামের শেষাংশ ব্যবহারকারীর নাম
1 মার্ক অটো @এমডিও
2 জ্যাকব থর্নটন @ফ্যাট
3 ল্যারি দ্য বার্ড @টুইটার 
  1. <টেবিল ক্লাস = "টেবিল টেবিল-কন্ডেন্সড" > 
  2.   …
  3. </ টেবিল>

ঐচ্ছিক সারি ক্লাস

সারণি সারি রঙ করতে প্রাসঙ্গিক ক্লাস ব্যবহার করুন।

ক্লাস বর্ণনা
.success একটি সফল বা ইতিবাচক কর্ম নির্দেশ করে।
.error একটি বিপজ্জনক বা সম্ভাব্য নেতিবাচক কর্ম নির্দেশ করে।
.warning একটি সতর্কতা নির্দেশ করে যা মনোযোগের প্রয়োজন হতে পারে।
.info ডিফল্ট শৈলীর বিকল্প হিসাবে ব্যবহৃত হয়।
# পণ্য পেমেন্ট নেওয়া হয়েছে স্ট্যাটাস
1 টিবি - মাসিক 01/04/2012 অনুমোদিত
2 টিবি - মাসিক 02/04/2012 অস্বীকার করেছে
3 টিবি - মাসিক 03/04/2012 বিচারাধীন
4 টিবি - মাসিক 04/04/2012 নিশ্চিত করতে কল করুন 
  1. ...
  2.   < tr ক্লাস = "সফল" >
  3.     <td> 1 < /td>
  4.     <td>টিবি - মাসিক</ td >
  5.     <td> 01 / 04 / 2012 < /td>
  6.     <td>অনুমোদিত</ td >
  7.   </ tr >
  8. ...

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

সমর্থিত টেবিলের এইচটিএমএল উপাদানগুলির তালিকা এবং সেগুলি কীভাবে ব্যবহার করা উচিত৷

ট্যাগ বর্ণনা
<table> সারণী বিন্যাসে ডেটা প্রদর্শনের জন্য মোড়ানো উপাদান
<thead> <tr>টেবিল কলাম লেবেল করার জন্য টেবিল হেডার সারি ( ) এর জন্য ধারক উপাদান
<tbody> <tr>টেবিলের মূল অংশে টেবিল সারি ( ) এর জন্য ধারক উপাদান
<tr> একটি একক সারিতে প্রদর্শিত টেবিল কক্ষের ( <td>বা ) সেটের জন্য ধারক উপাদান<th>
<td> ডিফল্ট টেবিল সেল
<th> কলামের জন্য বিশেষ টেবিল সেল (বা সারি, সুযোগ এবং স্থান নির্ধারণের উপর নির্ভর করে) লেবেল
<caption> টেবিলে যা আছে তার বর্ণনা বা সারাংশ, বিশেষ করে স্ক্রিন রিডারদের জন্য উপযোগী 
  1. <টেবিল>
  2.   <ক্যাপশন> ... </ ক্যাপশন>
  3.   <thead>
  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. </ টেবিল>

ফর্ম

ডিফল্ট শৈলী

স্বতন্ত্র ফর্ম কন্ট্রোলগুলি স্টাইলিং পায়, কিন্তু মার্কআপে কোন প্রয়োজনীয় বেস ক্লাস <form>বা বড় পরিবর্তন ছাড়াই। ফর্ম কন্ট্রোলের উপরে স্ট্যাক করা, বাম-সারিবদ্ধ লেবেলে ফলাফল।

কিংবদন্তি উদাহরণ ব্লক-স্তরের সহায়তা পাঠ্য এখানে। 
  1. <ফর্ম>
  2.   <ফিল্ডসেট>
  3.     <লেজেন্ড> কিংবদন্তি </ legend>
  4.     <label> লেবেলের নাম </ label>
  5.     <ইনপুট প্রকার = "টেক্সট" স্থানধারক = "কিছু টাইপ করুন..." >  
  6.     <span class = "help-block" > উদাহরণ ব্লক-লেভেল সাহায্য পাঠ্য এখানে। </span> 
  7.     <লেবেল ক্লাস = "চেকবক্স" > 
  8.       <ইনপুট প্রকার = "চেকবক্স" > আমাকে চেক আউট করুন 
  9.     </ label>
  10.     <button type = "submit" class = "btn" > জমা দিন </button>  
  11.   </fieldset>
  12. </form>

ঐচ্ছিক লেআউট

বুটস্ট্র্যাপের সাথে অন্তর্ভুক্ত সাধারণ ব্যবহারের ক্ষেত্রে তিনটি ঐচ্ছিক ফর্ম লেআউট।

অনুসন্ধান ফর্ম

একটি অতিরিক্ত বৃত্তাকার পাঠ্য ইনপুটের জন্য .form-searchফর্ম এবং .search-queryতে যোগ করুন।<input>

  1. <ফর্ম ক্লাস = "ফর্ম-সার্চ" > 
  2.   <ইনপুট প্রকার = "টেক্সট" ক্লাস = "ইনপুট-মাঝারি অনুসন্ধান-কোয়েরি" >  
  3.   <button type = "submit" class = "btn" > অনুসন্ধান </ বোতাম>  
  4. </form>

ইনলাইন ফর্ম

.form-inlineকমপ্যাক্ট লেআউটের জন্য বাম-সারিবদ্ধ লেবেল এবং ইনলাইন-ব্লক নিয়ন্ত্রণের জন্য যোগ করুন ।

  1. <ফর্ম ক্লাস = "ফর্ম-ইনলাইন" > 
  2.   <ইনপুট প্রকার = "টেক্সট" ক্লাস = "ইনপুট-ছোট" স্থানধারক = "ইমেল" >   
  3.   <ইনপুট প্রকার = "পাসওয়ার্ড" ক্লাস = "ইনপুট-ছোট" স্থানধারক = "পাসওয়ার্ড" >   
  4.   <লেবেল ক্লাস = "চেকবক্স" > 
  5.     <ইনপুট প্রকার = "চেকবক্স" > আমাকে মনে রাখবেন 
  6.   </ label>
  7.   <button type = "submit" class = "btn" > সাইন ইন করুন </button>  
  8. </form>

অনুভূমিক ফর্ম

লেবেলগুলিকে ডানদিকে সারিবদ্ধ করুন এবং নিয়ন্ত্রণগুলির মতো একই লাইনে প্রদর্শিত করতে সেগুলিকে বাম দিকে ভাসিয়ে দিন৷ একটি ডিফল্ট ফর্ম থেকে সর্বাধিক মার্কআপ পরিবর্তন প্রয়োজন:

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

সমর্থিত ফর্ম নিয়ন্ত্রণ

একটি উদাহরণ ফর্ম বিন্যাসে সমর্থিত আদর্শ ফর্ম নিয়ন্ত্রণের উদাহরণ৷

ইনপুট

সর্বাধিক সাধারণ ফর্ম নিয়ন্ত্রণ, পাঠ্য-ভিত্তিক ইনপুট ক্ষেত্র। সমস্ত HTML5 প্রকারের জন্য সমর্থন অন্তর্ভুক্ত করে: পাঠ্য, পাসওয়ার্ড, তারিখ সময়, তারিখ সময়-স্থানীয়, তারিখ, মাস, সময়, সপ্তাহ, নম্বর, ইমেল, ইউআরএল, অনুসন্ধান, টেলিফোন এবং রঙ।

typeসব সময়ে একটি নির্দিষ্ট ব্যবহার প্রয়োজন .

  1. <ইনপুট প্রকার = "টেক্সট" স্থানধারক = "টেক্সট ইনপুট" >

Textarea

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

  1. <textarea সারি = "3" ></textarea>

চেকবক্স এবং রেডিও

চেকবক্সগুলি একটি তালিকার এক বা একাধিক বিকল্প নির্বাচন করার জন্য এবং রেডিওগুলি অনেকগুলি থেকে একটি বিকল্প নির্বাচন করার জন্য।

ডিফল্ট (স্ট্যাক করা)


  1. <লেবেল ক্লাস = "চেকবক্স" > 
  2.   <ইনপুট প্রকার = "চেকবক্স" মান = "" >  
  3.   বিকল্প একটি হল এটি এবং এটি - কেন এটি দুর্দান্ত তা অন্তর্ভুক্ত করতে ভুলবেন না
  4. </ label>
  5.  
  6. <লেবেল ক্লাস = "রেডিও" > 
  7.   <ইনপুট প্রকার = "রেডিও" নাম = "বিকল্প রেডিওস" আইডি = "অপশন রেডিওস1" মান = "বিকল্প1 " চেক করা হয়েছে >     
  8.   বিকল্প একটি হল এটি এবং এটি - কেন এটি দুর্দান্ত তা অন্তর্ভুক্ত করতে ভুলবেন না
  9. </ label>
  10. <লেবেল ক্লাস = "রেডিও" > 
  11.   <ইনপুট প্রকার = "রেডিও" নাম = "বিকল্প রেডিওস" আইডি = "অপশন রেডিওস2" মান = " বিকল্প 2 " >    
  12.   বিকল্প দুটি অন্য কিছু হতে পারে এবং এটি নির্বাচন করলে বিকল্প একটি অনির্বাচন করা হবে
  13. </ label>

ইনলাইন চেকবক্স

.inlineএকই লাইনে প্রদর্শিত নিয়ন্ত্রণের জন্য চেকবক্স বা রেডিওগুলির একটি সিরিজে ক্লাস যুক্ত করুন ।

  1. <লেবেল ক্লাস = "চেকবক্স ইনলাইন" > 
  2.   <ইনপুট প্রকার = "চেকবক্স" আইডি = "ইনলাইন চেকবক্স1" মান = "বিকল্প1" > 1   
  3. </ label>
  4. <লেবেল ক্লাস = "চেকবক্স ইনলাইন" > 
  5.   <ইনপুট প্রকার = "চেকবক্স" আইডি = "ইনলাইন চেকবক্স2" মান = "বিকল্প2" > 2   
  6. </ label>
  7. <লেবেল ক্লাস = "চেকবক্স ইনলাইন" > 
  8.   <ইনপুট প্রকার = "চেকবক্স" আইডি = "ইনলাইন চেকবক্স3" মান = "বিকল্প3" > 3   
  9. </ label>

নির্বাচন করে

ডিফল্ট বিকল্প ব্যবহার করুন বা multiple="multiple"একবারে একাধিক বিকল্প দেখানোর জন্য একটি নির্দিষ্ট করুন।


  1. <নির্বাচন>
  2.   <বিকল্প> 1 </ বিকল্প>
  3.   <বিকল্প> 2 </ বিকল্প>
  4.   <বিকল্প> 3 </ বিকল্প>
  5.   <বিকল্প> 4 </ বিকল্প>
  6.   <বিকল্প> 5 </ বিকল্প>
  7. </select>
  8.  
  9. < একাধিক নির্বাচন করুন = "একাধিক" > 
  10.   <বিকল্প> 1 </ বিকল্প>
  11.   <বিকল্প> 2 </ বিকল্প>
  12.   <বিকল্প> 3 </ বিকল্প>
  13.   <বিকল্প> 4 </ বিকল্প>
  14.   <বিকল্প> 5 </ বিকল্প>
  15. </select>

ফর্ম নিয়ন্ত্রণ প্রসারিত

বিদ্যমান ব্রাউজার নিয়ন্ত্রণের উপরে যোগ করে, বুটস্ট্র্যাপ অন্যান্য দরকারী ফর্ম উপাদান অন্তর্ভুক্ত করে।

প্রিপেন্ডেড এবং এ্যাপেন্ডেড ইনপুট

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

ডিফল্ট বিকল্প

একটি ইনপুটে পাঠ্য প্রিপেন্ড বা যুক্ত করতে দুটি ক্লাসের একটি দিয়ে an .add-onএবং an কে মোড়ানো ।input

@

.00 
  1. <div class = "input-prepend" > 
  2.   <span ক্লাস = "অ্যাড-অন" > @ </span> 
  3.   <ইনপুট ক্লাস = "span2" id = "prependedInput" type = "text" placeholder = "Username" >    
  4. </div>
  5. <div class = "input-append" > 
  6.   <input class = "span2" id = "appendedInput " type = "text" >   
  7.   <span ক্লাস = "অ্যাড-অন" > .00 </span> 
  8. </div>

সম্মিলিত

.add-onএকটি ইনপুট প্রিপেন্ড এবং যুক্ত করতে উভয় ক্লাস এবং দুটি উদাহরণ ব্যবহার করুন।

$ .00 
  1. <div class = "input-prepend input-append" > 
  2.   <span ক্লাস = "অ্যাড-অন" > $ </span> 
  3.   <input class = "span2" id = "appendedPrependedInput " type = "text" >   
  4.   <span ক্লাস = "অ্যাড-অন" > .00 </span> 
  5. </div>

পাঠ্যের পরিবর্তে বোতাম

<span>পাঠ্য সহ a এর পরিবর্তে, .btnএকটি ইনপুটে একটি বোতাম (বা দুটি) সংযুক্ত করতে a ব্যবহার করুন।

  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedInputButton " type = "text" >   
  3.   <button class = "btn" type = "button" > যান! </ বোতাম>  
  4. </div>
  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedInputButtons " type = "text" >   
  3.   <button class = "btn" type = "button" > অনুসন্ধান </button>  
  4.   <button class = "btn" type = "button" > বিকল্প </ বোতাম>  
  5. </div>

বোতাম ড্রপডাউন

  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedDropdownButton " type = "text" >   
  3.   <div class = "btn-group" > 
  4.     <বোতাম ক্লাস = "বিটিএন ড্রপডাউন-টগল" ডেটা-টগল = "ড্রপডাউন" >  
  5.       কর্ম
  6.       <span ক্লাস = "ক্যারেট" ></span> 
  7.     </ বোতাম>
  8.     <ul class = "ড্রপডাউন-মেনু" > 
  9.       ...
  10.     </ul>
  11.   </div>
  12. </div>
  1. <div class = "input-prepend" > 
  2.   <div class = "btn-group" > 
  3.     <বোতাম ক্লাস = "বিটিএন ড্রপডাউন-টগল" ডেটা-টগল = "ড্রপডাউন" >  
  4.       কর্ম
  5.       <span ক্লাস = "ক্যারেট" ></span> 
  6.     </ বোতাম>
  7.     <ul class = "ড্রপডাউন-মেনু" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   <ইনপুট ক্লাস = "span2" id = "prependedDropdownButton" type = "text" >   
  12. </div>
  1. <div class = "input-prepend input-append" > 
  2.   <div class = "btn-group" > 
  3.     <বোতাম ক্লাস = "বিটিএন ড্রপডাউন-টগল" ডেটা-টগল = "ড্রপডাউন" >  
  4.       কর্ম
  5.       <span ক্লাস = "ক্যারেট" ></span> 
  6.     </ বোতাম>
  7.     <ul class = "ড্রপডাউন-মেনু" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   <ইনপুট ক্লাস = "span2" id = "appendedPrependedDropdownButton " type = "text" >   
  12.   <div class = "btn-group" > 
  13.     <বোতাম ক্লাস = "বিটিএন ড্রপডাউন-টগল" ডেটা-টগল = "ড্রপডাউন" >  
  14.       কর্ম
  15.       <span ক্লাস = "ক্যারেট" ></span> 
  16.     </ বোতাম>
  17.     <ul class = "ড্রপডাউন-মেনু" > 
  18.       ...
  19.     </ul>
  20.   </div>
  21. </div>

সেগমেন্টেড ড্রপডাউন গ্রুপ

  1. <ফর্ম>
  2.   <div class = "input-prepend" > 
  3.     <div class = "btn-group" > ... </div> 
  4.     <ইনপুট প্রকার = "টেক্সট" > 
  5.   </div>
  6.   <div class = "input-append" > 
  7.     <ইনপুট প্রকার = "টেক্সট" > 
  8.     <div class = "btn-group" > ... </div> 
  9.   </div>
  10. </form>

অনুসন্ধান ফর্ম

  1. <ফর্ম ক্লাস = "ফর্ম-সার্চ" > 
  2.   <div class = "input-append" > 
  3.     <ইনপুট টাইপ = "টেক্সট" ক্লাস = "span2 সার্চ-কোয়েরি" >  
  4.     <button type = "submit" class = "btn" > অনুসন্ধান </ বোতাম>  
  5.   </div>
  6.   <div class = "input-prepend" > 
  7.     <button type = "submit" class = "btn" > অনুসন্ধান </ বোতাম>  
  8.     <ইনপুট টাইপ = "টেক্সট" ক্লাস = "span2 সার্চ-কোয়েরি" >  
  9.   </div>
  10. </form>

নিয়ন্ত্রণ মাপ

আপেক্ষিক সাইজিং ক্লাস ব্যবহার করুন .input-largeবা ক্লাস ব্যবহার করে গ্রিড কলামের আকারের সাথে আপনার ইনপুট মেলে .span*।

ব্লক লেভেল ইনপুট

যে কোনো <input>বা <textarea>উপাদান একটি ব্লক স্তর উপাদান মত আচরণ করুন.

  1. <input class = "input-block-level" type = "text" placeholder = ".input-block-level" >

আপেক্ষিক মাপ

  1. <input class = "input-mini" type = "text" placeholder = ".input-mini" >   
  2. <input class = "input-small" type = "text" placeholder = ".input-small" >   
  3. <input class = "input-medium" type = "text" placeholder = ".input-medium" >   
  4. <input class = "input-large" type = "text" placeholder = ".input-large" >   
  5. <input class = "input-xlarge" type = "text" placeholder = ".input-xlarge" >   
  6. <input class = "input-xxlarge" type = "text" placeholder = ".input-xxlarge" >

মাথা আপ!ভবিষ্যত সংস্করণে, আমরা আমাদের বোতামের আকার মেলানোর জন্য এই আপেক্ষিক ইনপুট ক্লাসগুলির ব্যবহার পরিবর্তন করব। উদাহরণস্বরূপ, .input-largeএকটি ইনপুটের প্যাডিং এবং ফন্ট-আকার বৃদ্ধি করবে।

গ্রিড সাইজিং

গ্রিড কলামগুলির একই আকারের সাথে মেলে এমন ইনপুটগুলির জন্য .span1to ব্যবহার করুন ৷.span12

  1. <input class = "span1" type = "text" placeholder = ".span1" >   
  2. <input class = "span2" type = "text" placeholder = ".span2" >   
  3. <ইনপুট ক্লাস = "span3" প্রকার = "টেক্সট" স্থানধারক = ".span3" >   
  4. < ক্লাস নির্বাচন করুন = "span1" > 
  5.   ...
  6. </select>
  7. < ক্লাস নির্বাচন করুন = "span2" > 
  8.   ...
  9. </select>
  10. < ক্লাস নির্বাচন করুন = "span3" > 
  11.   ...
  12. </select>

প্রতি লাইনে একাধিক গ্রিড ইনপুটের জন্য, সঠিক ব্যবধানের জন্য মডিফায়ার ক্লাস ব্যবহার করুন.controls-row । এটি হোয়াইট-স্পেস ভেঙে ফেলার জন্য ইনপুটগুলিকে ভাসিয়ে দেয়, সঠিক মার্জিন সেট করে এবং ফ্লোট পরিষ্কার করে।

  1. <div ক্লাস = "নিয়ন্ত্রণ" > 
  2.   <input class = "span5" type = "text" placeholder = ".span5" >   
  3. </div>
  4. <div class = "controls controls-row" > 
  5.   <input class = "span4" type = "text" placeholder = ".span4" >   
  6.   <input class = "span1" type = "text" placeholder = ".span1" >   
  7. </div>
  8. ...

অসম্পাদনযোগ্য ইনপুট

প্রকৃত ফর্ম মার্কআপ ব্যবহার না করে সম্পাদনাযোগ্য নয় এমন একটি ফর্মে ডেটা উপস্থাপন করুন৷

এখানে কিছু মান 
  1. <span class = "input-xlarge uneditable-input" > এখানে কিছু মান </span>

ফর্ম কর্ম

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

  1. <div ক্লাস = "ফর্ম-ক্রিয়া" > 
  2.   <বোতাম প্রকার = "জমা দিন" ক্লাস = "btn btn-প্রাথমিক" > পরিবর্তনগুলি সংরক্ষণ করুন </ বোতাম>  
  3.   <button type = "button" class = "btn" > বাতিল করুন </button>  
  4. </div>

সাহায্যকারী লেখা

সাহায্য পাঠ্যের জন্য ইনলাইন এবং ব্লক স্তর সমর্থন যা ফর্ম নিয়ন্ত্রণের চারপাশে প্রদর্শিত হয়।

ইনলাইন সাহায্য

ইনলাইন সাহায্য টেক্সট 
  1. <ইনপুট টাইপ = "টেক্সট" ><span ক্লাস = "হেল্প-ইনলাইন" > ইনলাইন হেল্প টেক্সট </span>

ব্লক সাহায্য

সাহায্য পাঠ্যের একটি দীর্ঘ ব্লক যা একটি নতুন লাইনে ভেঙে যায় এবং একটি লাইনের বাইরে প্রসারিত হতে পারে। 
  1. <ইনপুট টাইপ = "টেক্সট" ><span ক্লাস = "হেল্প-ব্লক" > সাহায্য পাঠ্যের একটি দীর্ঘ ব্লক যা একটি নতুন লাইনে ভেঙ্গে যায় এবং একটি লাইনের বাইরে প্রসারিত হতে পারে। </span>

ফর্ম নিয়ন্ত্রণ রাষ্ট্র

ফর্ম কন্ট্রোল এবং লেবেল সম্পর্কে মৌলিক প্রতিক্রিয়া স্টেট সহ ব্যবহারকারী বা দর্শকদের প্রতিক্রিয়া প্রদান করুন।

ইনপুট ফোকাস

আমরা কিছু ফর্ম কন্ট্রোলে ডিফল্ট শৈলী মুছে ফেলি এবং এর জায়গায় outlineএকটি প্রয়োগ করি ৷box-shadow:focus

  1. <input class = "input-xlarge" id = "focusedInput" type = "text" value = "এটি ফোকাসড..." >

অবৈধ ইনপুট

সাথে ডিফল্ট ব্রাউজার কার্যকারিতার মাধ্যমে স্টাইল ইনপুট :invalid। একটি নির্দিষ্ট করুন, ক্ষেত্রটি ঐচ্ছিক না হলে বৈশিষ্ট্য typeযোগ করুন এবং (যদি প্রযোজ্য হয়) একটি নির্দিষ্ট করুন ।requiredpattern

এটি ইন্টারনেট এক্সপ্লোরার 7-9 সংস্করণে উপলব্ধ নয় কারণ CSS ছদ্ম নির্বাচকদের সমর্থনের অভাবে।

  1. <ইনপুট ক্লাস = "span3" প্রকার = "ইমেল" প্রয়োজন >

অক্ষম ইনপুট

disabledব্যবহারকারীর ইনপুট প্রতিরোধ করতে একটি ইনপুটে বৈশিষ্ট্য যোগ করুন এবং একটি সামান্য ভিন্ন চেহারা ট্রিগার করুন।

  1. <input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "এখানে ইনপুট নিষ্ক্রিয়..." নিষ্ক্রিয় >

বৈধতা রাষ্ট্র

বুটস্ট্র্যাপে ত্রুটি, সতর্কতা, তথ্য এবং সাফল্যের বার্তাগুলির জন্য বৈধতা শৈলী অন্তর্ভুক্ত রয়েছে। ব্যবহার করতে, আশেপাশে উপযুক্ত শ্রেণী যোগ করুন .control-group।

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

বোতাম

ডিফল্ট বোতাম

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

বোতাম ক্লাস ="" বর্ণনা
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উপাদানগুলিকে জাঙ্কিফাই করে, একটি বাজে টেক্সট-শ্যাডো দিয়ে পাঠ্য ধূসর রেন্ডার করে যা আমরা ঠিক করতে পারি না।

বোতাম মাপ

অভিনব বড় বা ছোট বোতাম? যোগ করুন .btn-large, .btn-smallবা .btn-miniঅতিরিক্ত আকারের জন্য।

  1. <p>
  2.   <বোতাম ক্লাস = "btn btn-large btn-primary" type = "button" > বড় বোতাম </button>  
  3.   <বোতাম ক্লাস = "btn btn-large" type = "button" > বড় বোতাম </ বোতাম>  
  4. </p>
  5. <p>
  6.   <বাটন ক্লাস = "btn btn-primary" type = "button" > ডিফল্ট বোতাম </ বোতাম>  
  7.   <button class = "btn" type = "button" > ডিফল্ট বোতাম </ বোতাম>  
  8. </p>
  9. <p>
  10.   <বোতাম ক্লাস = "btn btn-small btn-primary" type = "button" > ছোট বোতাম </ বোতাম>  
  11.   <বোতাম ক্লাস = "btn btn-small" type = "button" > ছোট বোতাম </ বোতাম>  
  12. </p>
  13. <p>
  14.   <বাটন ক্লাস = "btn btn-mini btn-primary" type = "button" > মিনি বোতাম </ বোতাম>  
  15.   <বাটন ক্লাস = "btn btn-mini" type = "button" > মিনি বোতাম </ বোতাম>  
  16. </p>

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

  1. <button class = "btn btn-large btn-block btn-primary" type = "button" > ব্লক লেভেল বোতাম </button>  
  2. <button class = "btn btn-large btn-block" type = "button" > ব্লক লে��েল বোতাম </button>

প্রতিবন্ধী রাষ্ট্র

বোতামগুলিকে 50% ফিরে বিবর্ণ করে আনক্লিক করার অযোগ্য দেখান৷

অ্যাঙ্কর উপাদান

বোতামে .disabledক্লাস যোগ করুন ।<a>

প্রাথমিক লিঙ্ক লিঙ্ক 

  1. <a href="#" class="btn btn-large btn-primary disabled" > প্রাথমিক লিঙ্ক </a>  
  2. <a href="#" class="btn btn-large disabled" > লিঙ্ক </a> _ _

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

বোতাম উপাদান

disabledবাটনে অ্যাট্রিবিউট যোগ করুন <button>।

  1. <বোতামের ধরন = "বাটন" ক্লাস = "btn btn-large btn-primary disabled" disabled = "disabled" > প্রাথমিক বোতাম </button>   
  2. <বোতামের ধরন = "বাটন" ক্লাস = "btn btn-large" নিষ্ক্রিয় > বোতাম </ বোতাম>

এক ক্লাস, একাধিক ট্যাগ

একটি , , বা উপাদানে .btnক্লাসটি ব্যবহার করুন ।<a><button><input>

লিঙ্ক 
  1. <a class="btn" href=""> লিঙ্ক </a> _ _ _ _ _  
  2. <button class = "btn" type = "submit" > বোতাম </button>  
  3. <ইনপুট ক্লাস = "btn" প্রকার = "বোতাম" মান = "ইনপুট" >   
  4. <ইনপুট ক্লাস = "বিটিএন" টাইপ = "জমা দিন" মান = "জমা দিন" >

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

ছবি

<img>যেকোন প্রজেক্টে সহজেই স্টাইল ইমেজ করার জন্য একটি উপাদানে ক্লাস যোগ করুন ।

140x140 140x140 140x140 
  1. <img src = "..." class = "img-rounded" >  
  2. <img src = "..." ক্লাস = "img-বৃত্ত" >  
  3. <img src = "..." ক্লাস = "img-polaroid" >

মাথা আপ! .img-roundedএবং সমর্থনের .img-circleঅভাবে IE7-8 এ কাজ করবেন না border-radius।

Glyphicons দ্বারা আইকন

আইকন গ্লিফ

স্প্রাইট আকারে 140টি আইকন, গাঢ় ধূসর (ডিফল্ট) এবং সাদাতে উপলব্ধ, Glyphicons দ্বারা প্রদত্ত ।

  • আইকন-গ্লাস
  • আইকন-সঙ্গীত
  • আইকন-অনুসন্ধান
  • আইকন-খাম
  • আইকন-হার্ট
  • আইকন-তারকা
  • আইকন-স্টার-খালি
  • আইকন-ব্যবহারকারী
  • আইকন-ফিল্ম
  • আইকন-ম-বড়
  • icon-th
  • আইকন-ম-তালিকা
  • আইকন-ঠিক আছে
  • আইকন-মুছে ফেলুন
  • আইকন-জুম-ইন
  • আইকন-জুম-আউট
  • আইকন-অফ
  • আইকন-সংকেত
  • আইকন-কগ
  • আইকন-ট্র্যাশ
  • আইকন-হোম
  • আইকন-ফাইল
  • আইকন-সময়
  • আইকন-রোড
  • icon-download-alt
  • আইকন-ডাউনলোড
  • আইকন-আপলোড
  • আইকন-ইনবক্স
  • আইকন-প্লে-সার্কেল
  • আইকন-পুনরাবৃত্তি
  • আইকন-রিফ্রেশ
  • icon-list-alt
  • আইকন-লক
  • আইকন-পতাকা
  • আইকন-হেডফোন
  • আইকন-ভলিউম-বন্ধ
  • আইকন-ভলিউম-ডাউন
  • আইকন-ভলিউম-আপ
  • আইকন-কিউআরকোড
  • আইকন-বারকোড
  • আইকন-ট্যাগ
  • আইকন-ট্যাগ
  • আইকন-বই
  • আইকন-বুকমার্ক
  • আইকন-প্রিন্ট
  • আইকন-ক্যামেরা
  • আইকন-ফন্ট
  • আইকন-বোল্ড
  • আইকন-ইটালিক
  • আইকন-টেক্সট-উচ্চতা
  • আইকন-টেক্সট-প্রস্থ
  • আইকন-সারিবদ্ধ-বাম
  • আইকন-সারিবদ্ধ-কেন্দ্র
  • আইকন-সারিবদ্ধ-ডান
  • আইকন-সারিবদ্ধ-ন্যায্যতা
  • আইকন-তালিকা
  • আইকন-ইন্ডেন্ট-বাম
  • আইকন-ইন্ডেন্ট-ডান
  • আইকন-ফেসটাইম-ভিডিও
  • আইকন-ছবি
  • আইকন-পেন্সিল
  • আইকন-ম্যাপ-মার্কার
  • আইকন-সামঞ্জস্য করুন
  • আইকন-আভা
  • আইকন-সম্পাদনা
  • আইকন-শেয়ার
  • আইকন-চেক
  • আইকন-সরানো
  • আইকন-ধাপ-পিছিয়ে
  • আইকন-দ্রুত-পিছিয়ে
  • আইকন-পশ্চাদপদ
  • আইকন-প্লে
  • আইকন-পজ
  • আইকন-স্টপ
  • আইকন-ফরওয়ার্ড
  • আইকন-ফাস্ট-ফরওয়ার্ড
  • আইকন-ধাপ এগিয়ে
  • আইকন-নিষ্কাশন
  • আইকন-শেভরন-বাম
  • আইকন-শেভরন-ডান
  • আইকন-প্লাস-চিহ্ন
  • আইকন-বিয়োগ-চিহ্ন
  • icon-remove-sign
  • আইকন-ঠিক-চিহ্ন
  • আইকন-প্রশ্ন-চিহ্ন
  • আইকন-তথ্য-চিহ্ন
  • আইকন-স্ক্রিনশট
  • আইকন-সরানো-বৃত্ত
  • আইকন-ঠিক-বৃত্ত
  • আইকন-ব্যান-বৃত্ত
  • আইকন-তীর-বাম
  • আইকন-তীর-ডান
  • আইকন-তীর-আপ
  • আইকন-তীর-নিচে
  • icon-share-alt
  • আইকন-রিসাইজ-পূর্ণ
  • icon-resize-small
  • আইকন-প্লাস
  • আইকন-মাইনাস
  • আইকন-তারকা
  • আইকন-বিস্ময়বোধক-চিহ্ন
  • আইকন-উপহার
  • আইকন-পাতা
  • আইকন-ফায়ার
  • আইকন-চোখ-খোলা
  • আইকন-চোখ-বন্ধ
  • আইকন-সতর্কতা-চিহ্ন
  • আইকন-বিমান
  • আইকন-ক্যালেন্ডার
  • আইকন-এলোমেলো
  • আইকন-মন্তব্য
  • আইকন-চুম্বক
  • আইকন-শেভরন-আপ
  • আইকন-শেভরন-ডাউন
  • আইকন-রিটুইট
  • আইকন-শপিং-কার্ট
  • আইকন-ফোল্ডার-ক্লোজ
  • আইকন-ফোল্ডার-খোলা
  • আইকন-রিসাইজ-উল্লম্ব
  • আইকন-রিসাইজ-অনুভূমিক
  • আইকন-এইচডিডি
  • আইকন-বুলহর্ন
  • icon-bell
  • আইকন সার্টিফিকেট
  • আইকন-থাম্বস-আপ
  • আইকন-থাম্বস-ডাউন
  • আইকন-হ্যান্ড-ডান
  • আইকন-হাত-বাম
  • আইকন-হ্যান্ড-আপ
  • আইকন-হ্যান্ড-ডাউন
  • আইকন-বৃত্ত-তীর-ডান
  • আইকন-বৃত্ত-তীর-বাম
  • আইকন-বৃত্ত-তীর-উপর
  • আইকন-বৃত্ত-তীর-নিচে
  • আইকন-গ্লোব
  • আইকন-রেঞ্চ
  • আইকন-টাস্ক
  • আইকন-ফিল্টার
  • আইকন-ব্রীফকেস
  • আইকন-পূর্ণ স্ক্রীন

গ্লিফিকন অ্যাট্রিবিউশন

Glyphicons Halflings সাধারণত বিনামূল্যে পাওয়া যায় না, কিন্তু Bootstrap এবং Glyphicons নির্মাতাদের মধ্যে একটি ব্যবস্থা ডেভেলপার হিসাবে আপনার জন্য বিনা খরচে এটি সম্ভব করেছে। আপনাকে ধন্যবাদ হিসাবে, আমরা আপনাকে Glyphicons-এ একটি ঐচ্ছিক লিঙ্ক অন্তর্ভুক্ত করতে বলব যখনই ব্যবহারিক।

ব্যবহারবিধি

সমস্ত আইকনের জন্য <i>একটি অনন্য শ্রেণী সহ একটি ট্যাগ প্রয়োজন, এর সাথে উপসর্গযুক্ত icon-৷ ব্যবহার করতে, নিচের কোডটি প্রায় যেকোনো জায়গায় রাখুন:

  1. <i ক্লাস = "আইকন-সার্চ" ></i>

উল্টানো (সাদা) আইকনগুলির জন্যও শৈলী উপলব্ধ রয়েছে, একটি অতিরিক্ত শ্রেণী দিয়ে প্রস্তুত করা হয়েছে। আমরা বিশেষভাবে নেভি এবং ড্রপডাউন লিঙ্কগুলির জন্য হোভার এবং সক্রিয় অবস্থায় এই ক্লাসটি প্রয়োগ করব।

  1. <i class = "icon-search icon-white" ></i>

মাথা আপ!বোতাম বা নেভি লিঙ্কগুলির মতো পাঠ্যের স্ট্রিংগুলির পাশে ব্যবহার করার সময়, <i>সঠিক ব্যবধানের জন্য ট্যাগের পরে একটি স্থান ছেড়ে দিতে ভুলবেন না।

আইকন উদাহরণ

একটি টুলবার, নেভিগেশন, বা প্রিপেন্ড করা ফর্ম ইনপুটগুলির জন্য বোতাম, বোতাম গ্রুপগুলিতে এগুলি ব্যবহার করুন।

বোতাম

একটি বোতাম টুলবারে বোতাম গ্রুপ
  1. <div class = "btn-toolbar" > 
  2.   <div class = "btn-group" > 
  3.     <a class = "btn" href = "#" ><i class = "icon-align-left" ></i></a>   
  4.     <a class = "btn" href = "#" ><i class = "icon-align-center" ></i></a>   
  5.     <a class = "btn" href = "#" ><i class = "icon-align-right" ></i></a>   
  6.     <a class = "btn" href = "#" ><i class = "icon-align-justify" ></i></a>   
  7.   </div>
  8. </div>
একটি বোতাম গ্রুপে ড্রপডাউন
ব্যবহারকারী 
  1. <div class = "btn-group" > 
  2.   <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> ব্যবহারকারী </a>   
  3.   <a ক্লাস = "btn btn-প্রাথমিক ড্রপডাউন-টগল" ডেটা-টগল = "ড্রপডাউন" href = "#" ><span ক্লাস = "ক্যারেট" ></span></a>    
  4.   <ul class = "ড্রপডাউন-মেনু" > 
  5.     <li><a href = "#" ><i class = "icon-pencil" ></i> সম্পাদনা </a></li>  
  6.     <li><a href = "#" ><i class = "icon-trash" ></i> মুছুন </a></li>  
  7.     <li><a href = "#" ><i class = "icon-ban-circle" ></i> নিষিদ্ধ </a></li>  
  8.     <li ক্লাস = "ডিভাইডার" ></li> 
  9.     <li><a href = "#" ><i class = "i" ></i> অ্যাডমিন করুন </a></li>  
  10.   </ul>
  11. </div>
বোতাম মাপ
তারা তারা তারা 
  1. <a class = "btn btn-large" href = "#" ><i class = "icon-star" ></i> তারকা </a>   
  2. <a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i> তারকা </a>   
  3. <a class = "btn btn-mini" href = "#" ><i class = "icon-star" ></i> তারকা </a>

নেভিগেশন

  1. <ul class = "nav nav-list" > 
  2.   <li class = "active" ><a href = "#" ><i class = "icon-home icon-white" ></i> হোম </a></li>   
  3.   <li><a href = "#" ><i class = "icon-book" ></i> লাইব্রেরি </a></li>  
  4.   <li><a href = "#" ><i class = "icon-pencil" ></i> অ্যাপ্লিকেশন </a></li>  
  5.   <li><a href = "#" ><i class = "i" ></i> বিবিধ </a></li>  
  6. </ul>

ফর্ম ক্ষেত্র

  1. <div ক্লাস = "কন্ট্রোল-গ্রুপ" > 
  2.   <label class = "control-label" for = "inputIcon" > ইমেল ঠিকানা </label>  
  3.   <div ক্লাস = "নিয়ন্ত্রণ" > 
  4.     <div class = "input-prepend" > 
  5.       <span ক্লাস = "অ্যাড-অন" ><i ক্লাস = "আইকন-এনভেলপ" ></i></span>  
  6.       <input class = "span2" id = "inputIcon" type = "text" >   
  7.     </div>
  8.   </div>
  9. </div>