বেস সিএসএস

স্ক্যাফোল্ডিংয়ের উপরে, মৌলিক HTML উপাদানগুলিকে একটি নতুন, সামঞ্জস্যপূর্ণ চেহারা এবং অনুভূতি প্রদানের জন্য এক্সটেনসিবল ক্লাসের সাথে স্টাইল করা এবং উন্নত করা হয়েছে।

শিরোনাম এবং বডি কপি

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

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

আমরা আমাদের সকল প্রকারের মার্জিন, প্যাডিং এবং লাইন-উচ্চতা তৈরি করতে সেই ভেরিয়েবলগুলি এবং কিছু গণিত ব্যবহার করি।

উদাহরণ বডি টেক্সট

নুল্লাম কুইস রিসাস এগেট উর্না মলিস অর্নরে ভেল ইউ লিও। সহ সামাজিক ন্যাটোক পেনাটিবাস এবং ম্যাগনিস ডিস পার্টুরিয়েন্ট মন্টেস, নতুন হাস্যকর মুস। Nullam id dolor id nibh ultricies vehicula ut id elit.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, Nisi erat Porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.

h1. শিরোনাম 1

h2. শিরোনাম 2

h3. শিরোনাম 3

h4. শিরোনাম 4

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

জোর, ঠিকানা, এবং সংক্ষেপণ

উপাদান ব্যবহার ঐচ্ছিক
<strong> গুরুত্বপূর্ণ সহ পাঠ্যের একটি স্নিপেটে জোর দেওয়ার জন্য কোনোটিই নয়
<em> স্ট্রেস সহ পাঠ্যের একটি স্নিপেটে জোর দেওয়ার জন্য কোনোটিই নয়
<abbr> হোভারে প্রসারিত সংস্করণ দেখানোর জন্য সংক্ষিপ্ত রূপ এবং সংক্ষিপ্ত শব্দগুলিকে মোড়ানো titleপ্রসারিত পাঠ্যের জন্য ঐচ্ছিক অন্তর্ভুক্ত করুন
<address> তার নিকটতম পূর্বপুরুষ বা কাজের পুরো অংশের জন্য যোগাযোগের তথ্যের জন্য এর সাথে সমস্ত লাইন শেষ করে বিন্যাস সংরক্ষণ করুন<br>

জোর ব্যবহার করে

ফুস ড্যাপিবাস , টেলস এসি কার্সাস কমোডো , টরটর মৌরিস কনডিমেন্টাম নিভ , ইউটি ফার্মেন্টাম ম্যাসা জাস্টো সিট অ্যামেট রিসাস। Maecenas faucibus mollis interdum. নুল্লা ভিটা এলিট লিবারো, একটা ফারেত্র আগু।

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

উদাহরণ ঠিকানা

<address>ট্যাগটি কীভাবে ব্যবহার করা যেতে পারে তার দুটি উদাহরণ এখানে রয়েছে :

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
পুরো নাম
[email protected]

উদাহরণ সংক্ষেপণ

সংক্ষিপ্ত রূপগুলি বড় হাতের টেক্সট এবং একটি হালকা বিন্দুযুক্ত নীচের সীমানা দিয়ে স্টাইল করা হয়। হোভারে তাদের একটি হেল্প কার্সারও রয়েছে যাতে ব্যবহারকারীদের অতিরিক্ত ইঙ্গিত থাকে যে হোভারে কিছু দেখানো হবে।

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

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

ব্লককোট

উপাদান ব্যবহার ঐচ্ছিক
<blockquote> অন্য উৎস থেকে কন্টেন্ট উদ্ধৃত করার জন্য ব্লক-স্তরের উপাদান

citeউৎস URL-এর জন্য বৈশিষ্ট্য যোগ করুন

ভাসমান বিকল্পগুলির জন্য ব্যবহার .pull-leftএবং ক্লাস.pull-right
<small> একটি ব্যবহারকারী-মুখী উদ্ধৃতি যোগ করার জন্য ঐচ্ছিক উপাদান, সাধারণত কাজের শিরোনাম সহ একজন লেখক <cite>উৎসের শিরোনাম বা নামের চারপাশে রাখুন

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

<small>আপনার উত্স উদ্ধৃত করার জন্য একটি ঐচ্ছিক উপাদান অন্তর্ভুক্ত করুন এবং আপনি &mdash;স্টাইলিং উদ্দেশ্যে এটির আগে একটি এম ড্যাশ পাবেন৷

  1. <blockquote>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. পূর্ণসংখ্যা posuere erat a ante venenatis. </p>
  3. <small> বিখ্যাত কেউ </small>
  4. </blockquote>

উদাহরণ ব্লককোট

ডিফল্ট ব্লককোট এইভাবে স্টাইল করা হয়:

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

কাজের শরীরে বিখ্যাত কেউ

আপনার ব্লককোট ডানদিকে ভাসতে, যোগ করুন class="pull-right":

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

কাজের শরীরে বিখ্যাত কেউ

তালিকা

ক্রমহীন

<ul>

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

স্টাইলবিহীন

<ul class="unstyled">

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

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

<ol>

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

বর্ণনা

<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.

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

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

  1. উদাহরণস্বরূপ , <code> বিভাগ < / code > ইনলাইন হিসাবে মোড়ানো উচিত

মৌলিক ব্লক

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

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

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

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

একই <pre>উপাদান নিন এবং উন্নত রেন্ডারিংয়ের জন্য দুটি ঐচ্ছিক ক্লাস যোগ করুন।

  1. <p> এখানে নমুনা পাঠ্য... </p>
  1. <প্রি ক্লাস = "প্রিটিপ্রিন্ট
  2. লাইননামস" >
  3. <p>এখানে নমুনা পাঠ্য...</p>
  4. </pre>

google-code-prettify ডাউনলোড করুন এবং কিভাবে ব্যবহার করবেন তার জন্য রিডমি দেখুন।

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

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

উদাহরণ টেবিল

1. ডিফল্ট টেবিল শৈলী

পাঠযোগ্যতা নিশ্চিত করতে এবং গঠন বজায় রাখার জন্য টেবিলগুলি স্বয়ংক্রিয়ভাবে শুধুমাত্র কয়েকটি সীমানা দিয়ে স্টাইল করা হয়। 2.0 সহ, .tableক্লাস প্রয়োজন।

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

2. ডোরাকাটা টেবিল

জেব্রা-স্ট্রাইপিং যোগ করে আপনার টেবিলের সাথে একটু অভিনব হয়ে উঠুন—শুধু .table-stripedক্লাস যোগ করুন।

দ্রষ্টব্য: স্প্রাইটেড টেবিল :nth-childCSS নির্বাচক ব্যবহার করে এবং IE7-IE8 এ উপলব্ধ নয়।

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

3. সীমানাযুক্ত টেবিল

নান্দনিক উদ্দেশ্যে সমগ্র টেবিলের চারপাশে সীমানা এবং বৃত্তাকার কোণগুলি যোগ করুন।

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

4. ঘনীভূত টেবিল

.table-condensedঅর্ধেক (8px থেকে 4px পর্যন্ত) টেবিল সেল প্যাডিং কাটতে ক্লাস যোগ করে আপনার টেবিলগুলিকে আরও কমপ্যাক্ট করুন ।

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

5. তাদের সব একত্রিত!

যেকোনও উপলব্ধ ক্লাস ব্যবহার করে ভিন্ন চেহারা অর্জন করতে যেকোনও টেবিল ক্লাস একত্রিত করতে নির্দ্বিধায়।

  1. <টেবিল ক্লাস = "টেবিল টেবিল-স্ট্রিপড টেবিল-বর্ডারযুক্ত টেবিল-ঘন" >
  2. ...
  3. </ টেবিল>
# নামের প্রথম অংশ নামের শেষাংশ ভাষা
1 মার্ক অটো সিএসএস
2 জ্যাকব থর্নটন জাভাস্ক্রিপ্ট
3 স্টু ডেন্ট এইচটিএমএল
4 ব্রোসেফ স্ট্যালিন এইচটিএমএল

নমনীয় HTML এবং CSS

বুটস্ট্র্যাপের ফর্মগুলির সবচেয়ে ভাল অংশ হল যে আপনার সমস্ত ইনপুট এবং নিয়ন্ত্রণগুলি আপনি আপনার মার্কআপে যেভাবেই তৈরি করুন না কেন তা দুর্দান্ত দেখায়। কোন অপ্রয়োজনীয় HTML এর প্রয়োজন নেই, তবে যাদের প্রয়োজন তাদের জন্য আমরা নিদর্শন প্রদান করি।

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

চার লেআউট অন্তর্ভুক্ত

বুটস্ট্র্যাপ চার ধরনের ফর্ম লেআউটের জন্য সমর্থন সহ আসে:

  • উল্লম্ব (ডিফল্ট)
  • অনুসন্ধান করুন
  • সঙ্গতিপূর্ণভাবে
  • অনুভূমিক

বিভিন্ন ধরনের ফর্ম লেআউটের মার্কআপে কিছু পরিবর্তনের প্রয়োজন হয়, কিন্তু নিয়ন্ত্রণগুলি নিজেরাই থাকে এবং একই আচরণ করে।

নিয়ন্ত্রণ রাজ্য এবং আরো

বুটস্ট্র্যাপের ফর্মগুলিতে ইনপুট, টেক্সটেরিয়া, এবং আপনি আশা করতে চান এমন সমস্ত বেস ফর্ম নিয়ন্ত্রণের শৈলী অন্তর্ভুক্ত করে। তবে এটি বেশ কয়েকটি কাস্টম উপাদানের সাথে আসে যেমন সংযুক্ত এবং আগে থেকে যুক্ত ইনপুট এবং চেকবক্সের তালিকার জন্য সমর্থন।

প্রতিটি ধরণের ফর্ম নিয়ন্ত্রণের জন্য ত্রুটি, সতর্কতা এবং সাফল্যের মতো রাজ্যগুলি অন্তর্ভুক্ত করা হয়েছে। এছাড়াও অক্ষম নিয়ন্ত্রণের জন্য শৈলী অন্তর্ভুক্ত.

চার ধরনের রূপ

বুটস্ট্র্যাপ সাধারণ ওয়েব ফর্মের চারটি শৈলীর জন্য সহজ মার্কআপ এবং শৈলী প্রদান করে।

নাম ক্লাস বর্ণনা
উল্লম্ব (ডিফল্ট) .form-vertical (আবশ্যক না) স্তুপীকৃত, নিয়ন্ত্রণের উপর বাম-সারিবদ্ধ লেবেল
সঙ্গতিপূর্ণভাবে .form-inline কমপ্যাক্ট শৈলীর জন্য বাম-সারিবদ্ধ লেবেল এবং ইনলাইন-ব্লক নিয়ন্ত্রণ
অনুসন্ধান করুন .form-search একটি সাধারণ অনুসন্ধান নান্দনিকতার জন্য অতিরিক্ত বৃত্তাকার পাঠ্য ইনপুট
অনুভূমিক .form-horizontal কন্ট্রোলের মতো একই লাইনে বামে, ডান-সারিবদ্ধ লেবেলগুলি ভাসুন

শুধু ফর্ম কন্ট্রোল ব্যবহার করে উদাহরণ ফর্ম , কোন অতিরিক্ত মার্কআপ নেই

মৌলিক ফর্ম

v2.0 এর সাথে, ফর্ম শৈলীর জন্য আমাদের কাছে হালকা এবং স্মার্ট ডিফল্ট রয়েছে। কোনো অতিরিক্ত মার্কআপ নেই, শুধু ফর্ম নিয়ন্ত্রণ।

সংশ্লিষ্ট সাহায্য টেক্সট!

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

ডিফল্ট ওয়েবকিট শৈলী প্রতিফলিত করে, শুধু .form-searchঅতিরিক্ত বৃত্তাকার অনুসন্ধান ক্ষেত্রে যোগ করুন।

ইনলাইন ফর্ম

ইনপুটগুলি শুরু করার জন্য ব্লক স্তর। .form-inlineএবং এর জন্য .form-horizontal, আমরা ইনলাইন-ব্লক ব্যবহার করি।


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

বুটস্ট্র্যাপ সমর্থন নিয়ন্ত্রণ করে

ফ্রিফর্ম টেক্সট ছাড়াও, যেকোন HTML5 টেক্সট-ভিত্তিক ইনপুট এরকম দেখায়।

কি অন্তর্ভুক্ত

আমরা সমর্থন করি এমন সমস্ত ডিফল্ট ফর্ম নিয়ন্ত্রণগুলি বাম দিকে দেখানো হয়েছে৷ এখানে বুলেটেড তালিকা রয়েছে:

  • পাঠ্য ইনপুট (টেক্সট, পাসওয়ার্ড, ইমেল, ইত্যাদি)
  • চেকবক্স
  • রেডিও
  • নির্বাচন করুন
  • একাধিক নির্বাচন
  • ফাইল ইনপুট
  • textarea

v2.0 সহ নতুন ডিফল্ট

v1.4 পর্যন্ত, বুটস্ট্র্যাপের ডিফল্ট ফর্ম শৈলী অনুভূমিক বিন্যাস ব্যবহার করে। বুটস্ট্র্যাপ 2-এর সাহায্যে, আমরা যে কোনও ফর্মের জন্য আরও স্মার্ট, আরও স্কেলেবল ডিফল্ট থাকার জন্য সেই সীমাবদ্ধতাটিকে সরিয়ে দিয়েছি।


ফর্ম নিয়ন্ত্রণ রাষ্ট্র
এখানে কিছু মান
কিছু ভুল হয়ে যেতে পারে
দয়া করে ত্রুটি সংশোধন করুন
উহু!
উহু!

পুনরায় ডিজাইন করা ব্রাউজার স্টেট

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


ফর্ম বৈধতা

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

  1. <ক্ষেত্রসেট
  2. ক্লাস = "কন্ট্রোল-গ্রুপ ত্রুটি" >
  3. </fieldset>

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

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

@

এখানে কিছু সাহায্য পাঠ্য আছে

.00

এখানে আরো সাহায্য পাঠ্য আছে

দ্রষ্টব্য: লেবেলগুলি অনেক বৃহত্তর ক্লিক এলাকা এবং আরও ব্যবহারযোগ্য ফর্মের জন্য সমস্ত বিকল্পকে ঘিরে থাকে।

প্রিপেন্ড এবং ইনপুট যোগ করুন

ইনপুট গোষ্ঠীগুলি-সংযুক্ত বা প্রিপেন্ড করা পাঠ্য সহ-আপনার ইনপুটগুলির জন্য আরও প্রসঙ্গ দেওয়ার একটি সহজ উপায় প্রদান করে। দুর্দান্ত উদাহরণগুলির মধ্যে রয়েছে টুইটার ব্যবহারকারীর নামের জন্য @ চিহ্ন বা অর্থের জন্য $।


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

v1.4 পর্যন্ত, বুটস্ট্র্যাপের জন্য চেকবক্স এবং রেডিওগুলিকে স্ট্যাক করার জন্য অতিরিক্ত মার্কআপের প্রয়োজন। এখন, এটি পুনরাবৃত্তি করার একটি সহজ বিষয় <label class="checkbox">যা মোড়ানো হয় <input type="checkbox">

ইনলাইন চেকবক্স এবং রেডিও সমর্থিত. শুধু .inlineকোনো যোগ করুন .checkboxবা .radioএবং আপনি সম্পন্ন.


ইনলাইন ফর্ম এবং যোগ/প্রিপেন্ড করুন

ইনলাইন আকারে প্রিপেন্ড বা যুক্ত ইনপুট ব্যবহার করতে, ফাঁকা জায়গা ছাড়াই এবং একই লাইনে রাখতে ভুলবেন .add-onনা input


ফর্ম সাহায্য পাঠ্য

আপনার ফর্ম ইনপুটগুলির জন্য সহায়তা পাঠ্য যোগ করতে , ইনপুট উপাদানের পরে সহ ইনলাইন সহায়তা পাঠ্য <span class="help-inline">বা সাহায্য পাঠ্য ব্লক অন্তর্ভুক্ত করুন।<p class="help-block">

বোতাম ক্লাস বর্ণনা
ডিফল্ট .btn গ্রেডিয়েন্ট সহ স্ট্যান্ডার্ড ধূসর বোতাম
প্রাথমিক .btn-primary অতিরিক্ত চাক্ষুষ ওজন প্রদান করে এবং বোতামের একটি সেটে প্রাথমিক ক্রিয়া সনাক্ত করে
তথ্য .btn-info ডিফল্ট শৈলীর বিকল্প হিসাবে ব্যবহৃত হয়
সফলতা .btn-success একটি সফল বা ইতিবাচক কর্ম নির্দেশ করে
সতর্কতা .btn-warning এই পদক্ষেপের সাথে সতর্কতা অবলম্বন করা উচিত নির্দেশ করে
বিপদ .btn-danger একটি বিপজ্জনক বা সম্ভাব্য নেতিবাচক কর্ম নির্দেশ করে

কর্মের জন্য বোতাম

একটি নিয়ম হিসাবে, বোতামগুলি শুধুমাত্র অ্যাকশনের জন্য ব্���বহার করা উচিত যখন হাইপারলিঙ্কগুলি বস্তুর জন্য ব্যবহার করা হবে। উদাহরণস্বরূপ, "ডাউনলোড" একটি বোতাম হওয়া উচিত যখন "সাম্প্রতিক কার্যকলাপ" একটি লিঙ্ক হওয়া উচিত।

নোঙ্গর এবং ফর্ম জন্য

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

দ্রষ্টব্য: সমস্ত বোতাম .btnক্লাস অন্তর্ভুক্ত করা আবশ্যক. <button>সামঞ্জস্যের জন্য বোতাম শৈলী এবং <a>উপাদান প্রয়োগ করা উচিত ।

একাধিক মাপ

অভিনব বড় বা ছোট বোতাম? এইখানে পাবে!

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

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

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

অক্ষম বোতামগুলির জন্য, .btn-disabledলিঙ্কগুলির জন্য এবং উপাদানগুলির :disabledজন্য ব্যবহার করুন৷<button>

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

ক্রস ব্রাউজার সামঞ্জস্যপূর্ণ

IE9-এ, আমরা বৃত্তাকার কোণগুলির পক্ষে সমস্ত বোতামে গ্রেডিয়েন্ট ড্রপ করি কারণ IE9 ব্যাকগ্রাউন্ড গ্রেডিয়েন্টগুলি কোণে কাটে না।

সম্পর্কিত, IE9 অক্ষম buttonউপাদানগুলিকে জাঙ্কিফাই করে, একটি বাজে টেক্সট-শ্যাডো দিয়ে টেক্সট ধূসর রেন্ডার করে—দুর্ভাগ্যবশত আমরা এটি ঠিক করতে পারি না।


মাথা আপ! আইকন ক্লাস CSS এর মাধ্যমে প্রতিধ্বনিত হয় :after। ডক্সে, আইকনের আকার হাইটলাইট করতে আমরা হোভারে একটি হালকা লাল পটভূমির রঙ দেখাই।

একটি স্প্রাইট হিসাবে নির্মিত

প্রতিটি আইকনকে একটি অতিরিক্ত অনুরোধ করার পরিবর্তে, আমরা সেগুলিকে একটি স্প্রাইট-এ কম্পাইল করেছি—একটি ফাইলে একগুচ্ছ ছবি যা সিএসএস ব্যবহার করে ছবিগুলিকে স্থির করতে background-position। এটি একই পদ্ধতি যা আমরা Twitter.com এ ব্যবহার করি এবং এটি আমাদের জন্য ভাল কাজ করেছে।

সমস্ত আইকন ক্লাস .icon-সঠিক নামস্থান এবং স্কোপিংয়ের জন্য উপসর্গযুক্ত, অনেকটা আমাদের অন্যান্য উপাদানগুলির মতো। এটি অন্যান্য সরঞ্জামগুলির সাথে দ্বন্দ্ব এড়াতে সহায়তা করবে।

Glyphicons আমাদের ওপেন-সোর্স টুলকিটে হাফলিংস সেট ব্যবহার করার অনুমতি দিয়েছে যতক্ষণ না আমরা এখানে ডক্সে একটি লিঙ্ক এবং ক্রেডিট প্রদান করি। আপনার প্রকল্পে একই কাজ বিবেচনা করুন.

ব্যবহারবিধি

v2.0.0 এর সাথে, আমরা <i>আমাদের সমস্ত আইকনগুলির জন্য একটি ট্যাগ ব্যবহার করতে বেছে নিয়েছি, তবে তাদের কোনও কেস ক্লাস নেই - শুধুমাত্র একটি ভাগ করা উপসর্গ৷ ব্যবহার করতে, নিচের কোডটি প্রায় যেকোনো জায়গায় রাখুন:

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

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

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

আপনার আইকনগুলির জন্য বেছে নেওয়ার জন্য 120টি ক্লাস রয়েছে৷ শুধু <i>সঠিক ক্লাসের সাথে একটি ট্যাগ যোগ করুন এবং আপনি সেট হয়ে গেছেন। আপনি সম্পূর্ণ তালিকা sprites.less- এ বা ঠিক এই নথিতে খুঁজে পেতে পারেন।

ব্যবহারের ক্ষেত্রে

আইকনগুলি দুর্দান্ত, তবে কেউ সেগুলি কোথায় ব্যবহার করবে? এখানে কয়েকটি ধারনা:

  • আপনার সাইডবার নেভিগেশন জন্য ভিজ্যুয়াল হিসাবে
  • একটি বিশুদ্ধভাবে আইকন চালিত নেভিগেশন জন্য
  • একটি কর্মের অর্থ বোঝাতে সাহায্য করার জন্য বোতামগুলি
  • ব্যবহারকারীর গন্তব্যে প্রসঙ্গ শেয়ার করার লিঙ্ক সহ

মূলত, যে কোন জায়গায় আপনি একটি <i>ট্যাগ লাগাতে পারেন, আপনি একটি আইকন রাখতে পারেন।

উদাহরণ

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