বেস সিএসএস

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

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

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

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

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

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

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

লিড বডি কপি

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

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

h1. শিরোনাম 1

h2. শিরোনাম 2

h3. শিরোনাম 3

h4. শিরোনাম 4

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

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

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

titleপ্রসারিত পাঠ্যের জন্য ঐচ্ছিক বৈশিষ্ট্য অন্তর্ভুক্ত করুন

.initialismবড় হাতের সংক্ষেপণের জন্য ক্লাস ব্যবহার করুন ।
<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]

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

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

initialismএকটু ছোট পাঠ্যের আকার দিয়ে টাইপোগ্রাফিক সামঞ্জস্য বাড়ানোর জন্য ক্লাসটিকে একটি সংক্ষেপে যুক্ত করুন ।

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

অ্যাট্রিবিউট শব্দের একটি সংক্ষিপ্ত রূপ হল 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.

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

<dl class="dl-horizontal">

বর্ণনা তালিকা
একটি বর্ণনা তালিকা শর্তাবলী সংজ্ঞায়িত করার জন্য উপযুক্ত।
ইউইসমোড
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
ফুস ড্যাপিবাস, টেলস এসি কার্সাস কমোডো, টর্টার মৌরিস কনডিমেন্টাম নিভ, ইউটি ফার্মেন্টাম ম্যাসা জাস্টো সিট অ্যামেট রিসাস।

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

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

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

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

মৌলিক ব্লক

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

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

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

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

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

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

  1. <p> এখানে নমুনা পাঠ্য... </p>
  1. <প্রি ক্লাস = "প্রিটিপ্রিন্ট
  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 মার্ক অটো @এমডিও
মার্ক অটো @getbootstrap
2 জ্যাকব থর্নটন @ফ্যাট
3 ল্যারি দ্য বার্ড @টুইটার

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

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

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

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

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

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

নমনীয় HTML এবং CSS

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

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

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

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

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

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

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

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

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

চার ধরনের রূপ

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

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

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

মৌলিক ফর্ম

অতিরিক্ত মার্কআপ ছাড়াই স্মার্ট এবং লাইটওয়েট ডিফল্ট।

উদাহরণ ব্লক-স্তরের সহায়তা পাঠ্য এখানে।

  1. <ফর্ম ক্লাস = "ভাল" >
  2. <label> লেবেলের নাম </ label>
  3. <ইনপুট প্রকার = "টেক্সট" ক্লাস = "span3" স্থানধারক = "কিছু টাইপ করুন..." >
  4. <span class = "help-block" > উদাহরণ ব্লক-লেভেল সাহায্য পাঠ্য এখানে। </span>
  5. <লেবেল ক্লাস = "চেকবক্স" >
  6. <ইনপুট প্রকার = "চেকবক্স" > আমাকে চেক আউট করুন
  7. </ label>
  8. <button type = "submit" class = "btn" > জমা দিন </button>
  9. </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>

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

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

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

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

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

উপরের উদাহরণ ফর্ম লেআউট দেওয়া, এখানে প্রথম ইনপুট এবং নিয়ন্ত্রণ গ্রুপের সাথে যুক্ত মার্কআপ আছে। , .control-group, .control-labelএবং .controlsক্লাস সবই স্টাইলিংয়ের জন্য প্রয়োজনীয়৷

  1. <ফর্ম ক্লাস = "ফর্ম-অনুভূমিক" >
  2. <ফিল্ডসেট>
  3. <লেজেন্ড> লেজেন্ড টেক্সট </ legend>
  4. <div ক্লাস = "কন্ট্রোল-গ্রুপ" >
  5. <label class = "control-label" for = "input01" > টেক্সট ইনপুট </label>
  6. <div ক্লাস = "নিয়ন্ত্রণ" >
  7. <ইনপুট প্রকার = "টেক্সট" ক্লাস = "ইনপুট-এক্সলার্জ" আইডি = "ইনপুট 01" >
  8. <p class = "help-block" > সহায়ক সহায়তা পাঠ্য </p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </form>

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

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


ফর্ম বৈধতা

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

  1. <ক্ষেত্রসেট
  2. ক্লাস = "কন্ট্রোল-গ্রুপ ত্রুটি" >
  3. </fieldset>
এখানে কিছু মান
কিছু ভুল হয়ে যেতে পারে
দয়া করে ত্রুটি সংশোধন করুন
উহু!
উহু!

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

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

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


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

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

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


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

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


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

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

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

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

@

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

.00
এখানে আরো সাহায্য টেক্সট আছে
$ .00

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

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

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

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

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

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

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

একাধিক মাপ

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


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

অক্ষম বোতামগুলির জন্য, .disabledলিঙ্কগুলিতে ক্লাস এবং উপাদানগুলির disabledজন্য বৈশিষ্ট্য যুক্ত করুন৷<button>

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

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

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

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

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

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

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

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

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

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

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

ব্যবহারবিধি

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

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

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

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

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

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

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

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

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

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

উদাহরণ

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