গ্লিফিকন

উপলব্ধ গ্লিফ

Glyphicon Halflings সেট থেকে ফন্ট বিন্যাসে 250 টিরও বেশি গ্লিফ অন্তর্ভুক্ত করে। Glyphicons Halflings সাধারণত বিনামূল্যে পাওয়া যায় না, কিন্তু তাদের স্রষ্টা তাদের বিনামূল্যে বুটস্ট্র্যাপের জন্য উপলব্ধ করেছেন। আপনাকে ধন্যবাদ হিসাবে, আমরা শুধুমাত্র যখনই সম্ভব Glyphicons-এ একটি লিঙ্ক অন্তর্ভুক্ত করার জন্য অনুরোধ করছি ।

  • glyphicon glyphicon-asterisk
  • glyphicon glyphicon-plus
  • glyphicon glyphicon-ইউরো
  • glyphicon glyphicon-eur
  • glyphicon glyphicon-মাইনাস
  • glyphicon glyphicon-ক্লাউড
  • glyphicon glyphicon-খাম
  • glyphicon glyphicon-পেন্সিল
  • glyphicon glyphicon-glass
  • glyphicon glyphicon-সঙ্গীত
  • glyphicon glyphicon-অনুসন্ধান
  • glyphicon glyphicon-হৃদয়
  • glyphicon glyphicon-star
  • glyphicon glyphicon-স্টার-খালি
  • glyphicon glyphicon-ব্যবহারকারী
  • glyphicon glyphicon-film
  • glyphicon glyphicon-th-বৃহৎ
  • glyphicon glyphicon-th
  • glyphicon glyphicon-th-list
  • glyphicon glyphicon-ঠিক আছে
  • glyphicon glyphicon- অপসারণ
  • glyphicon glyphicon-zoom-in
  • glyphicon glyphicon-zoom-out
  • glyphicon glyphicon-off
  • glyphicon glyphicon-সংকেত
  • glyphicon glyphicon-cog
  • glyphicon glyphicon-ট্র্যাশ
  • glyphicon glyphicon-বাড়ি
  • glyphicon glyphicon-file
  • glyphicon glyphicon-সময়
  • glyphicon glyphicon-রোড
  • glyphicon glyphicon-download-alt
  • glyphicon glyphicon-ডাউনলোড
  • glyphicon glyphicon-আপলোড
  • glyphicon glyphicon-ইনবক্স
  • glyphicon glyphicon-play-circle
  • glyphicon glyphicon-পুনরাবৃত্তি
  • glyphicon glyphicon-রিফ্রেশ
  • glyphicon glyphicon-list-alt
  • glyphicon glyphicon-lock
  • glyphicon glyphicon-পতাকা
  • glyphicon glyphicon-হেডফোন
  • glyphicon glyphicon-ভলিউম-বন্ধ
  • glyphicon glyphicon-ভলিউম-ডাউন
  • glyphicon glyphicon-volume-up
  • glyphicon glyphicon-qrcode
  • glyphicon glyphicon-বারকোড
  • glyphicon glyphicon-tag
  • glyphicon glyphicon-tags
  • glyphicon glyphicon-book
  • glyphicon glyphicon-বুকমার্ক
  • glyphicon glyphicon-মুদ্রণ
  • glyphicon glyphicon-ক্যামেরা
  • glyphicon glyphicon-font
  • glyphicon glyphicon-বোল্ড
  • glyphicon glyphicon-italic
  • glyphicon glyphicon-টেক্সট-উচ্চতা
  • glyphicon glyphicon-টেক্সট-প্রস্থ
  • glyphicon glyphicon-সারিবদ্ধ-বাম
  • glyphicon glyphicon-align-center
  • glyphicon glyphicon-সারিবদ্ধ-ডানে
  • glyphicon glyphicon-align-justify
  • glyphicon glyphicon-তালিকা
  • glyphicon glyphicon-indent-left
  • glyphicon glyphicon-indent-right
  • glyphicon glyphicon-facetime-video
  • glyphicon glyphicon-ছবি
  • glyphicon glyphicon-map-marker
  • glyphicon glyphicon- সমন্বয়
  • glyphicon glyphicon-tint
  • glyphicon glyphicon-সম্পাদনা
  • glyphicon glyphicon-share
  • glyphicon glyphicon-চেক
  • glyphicon glyphicon-চলন
  • glyphicon glyphicon-step-backward
  • glyphicon glyphicon-দ্রুত-অনগ্রসর
  • glyphicon glyphicon-অনগ্রসর
  • glyphicon glyphicon-play
  • glyphicon glyphicon-pause
  • glyphicon glyphicon-স্টপ
  • glyphicon glyphicon-আগামী
  • glyphicon glyphicon-দ্রুত এগিয়ে
  • glyphicon glyphicon-ধাপ এগিয়ে
  • glyphicon glyphicon-Eject
  • glyphicon glyphicon-শেভরন-বাম
  • glyphicon glyphicon-chevron-right
  • glyphicon glyphicon-plus-চিহ্ন
  • glyphicon glyphicon-মাইনাস-চিহ্ন
  • glyphicon glyphicon-remove-sign
  • glyphicon glyphicon-ok-চিহ্ন
  • glyphicon glyphicon-প্রশ্ন-চিহ্ন
  • glyphicon glyphicon-তথ্য-চিহ্ন
  • glyphicon glyphicon-স্ক্রিনশট
  • glyphicon glyphicon-remove-বৃত্ত
  • glyphicon glyphicon-ok-বৃত্ত
  • glyphicon glyphicon-ban-বৃত্ত
  • glyphicon glyphicon-তীর-বাম
  • glyphicon glyphicon-তীর-ডান
  • glyphicon glyphicon-তীর-আপ
  • glyphicon glyphicon-তীর-নিচে
  • glyphicon glyphicon-share-alt
  • glyphicon glyphicon-resize-full
  • glyphicon glyphicon-resize-small
  • glyphicon glyphicon-বিস্ময়সূচক-চিহ্ন
  • glyphicon glyphicon- উপহার
  • glyphicon glyphicon-পাতা
  • glyphicon glyphicon-আগুন
  • glyphicon glyphicon-চোখ খোলা
  • glyphicon glyphicon-চোখ বন্ধ
  • glyphicon glyphicon-সতর্কতা-চিহ্ন
  • glyphicon glyphicon-plane
  • glyphicon glyphicon-ক্যালেন্ডার
  • glyphicon glyphicon-এলোমেলো
  • glyphicon glyphicon-মন্তব্য
  • glyphicon glyphicon-চুম্বক
  • glyphicon glyphicon-chevron-up
  • glyphicon glyphicon-chevron-down
  • glyphicon glyphicon-retweet
  • glyphicon glyphicon-shopping-cart
  • glyphicon glyphicon-folder-close
  • glyphicon glyphicon-folder-open
  • glyphicon glyphicon-resize-vertical
  • glyphicon glyphicon-resize-horizontal
  • glyphicon glyphicon-hdd
  • glyphicon glyphicon-bullhorn
  • glyphicon glyphicon-bell
  • glyphicon glyphicon- সার্টিফিকেট
  • glyphicon glyphicon-thumbs-up
  • glyphicon glyphicon-thumbs-down
  • glyphicon glyphicon-হ্যান্ড-ডান
  • glyphicon glyphicon-হাত-বাম
  • glyphicon glyphicon-হ্যান্ড আপ
  • glyphicon glyphicon-hand-down
  • glyphicon glyphicon-বৃত্ত-তীর-ডান
  • glyphicon glyphicon-বৃত্ত-তীর-বাম
  • glyphicon glyphicon-বৃত্ত-তীর-উপর
  • glyphicon glyphicon-বৃত্ত-তীর-নিচে
  • glyphicon glyphicon-গ্লোব
  • glyphicon glyphicon-রেঞ্চ
  • glyphicon glyphicon-কাজ
  • glyphicon glyphicon-filter
  • glyphicon glyphicon- ব্রিফকেস
  • glyphicon glyphicon-পূর্ণ স্ক্রীন
  • glyphicon glyphicon-ড্যাশবোর্ড
  • glyphicon glyphicon-paperclip
  • glyphicon glyphicon-হৃদয়-খালি
  • glyphicon glyphicon-লিংক
  • glyphicon glyphicon-ফোন
  • glyphicon glyphicon-pushpin
  • glyphicon glyphicon-USD
  • glyphicon glyphicon-gbp
  • glyphicon glyphicon- sort
  • glyphicon glyphicon-sor-by-alphabet
  • glyphicon glyphicon-sor-by-alphabet-alt
  • glyphicon glyphicon-বাছাই-ক্রমে
  • glyphicon glyphicon-sor-by-order-alt
  • glyphicon glyphicon-বাছাই-দ্বারা-গুণাবলী
  • glyphicon glyphicon-sort-by-Atributes-alt
  • glyphicon glyphicon-আনচেক
  • glyphicon glyphicon-প্রসারিত
  • glyphicon glyphicon-পতন-ডাউন
  • glyphicon glyphicon-collaps-up
  • glyphicon glyphicon-log-in
  • glyphicon glyphicon-ফ্ল্যাশ
  • glyphicon glyphicon-log-out
  • glyphicon glyphicon-new-window
  • glyphicon glyphicon-রেকর্ড
  • glyphicon glyphicon-সংরক্ষণ
  • glyphicon glyphicon-খোলা
  • glyphicon glyphicon-সংরক্ষিত
  • glyphicon glyphicon-আমদানি
  • glyphicon glyphicon-রপ্তানি
  • glyphicon glyphicon-পাঠান
  • glyphicon glyphicon-floppy-disk
  • glyphicon glyphicon-ফ্লপি-সংরক্ষিত
  • glyphicon glyphicon-floppy-remove
  • glyphicon glyphicon-floppy-save
  • glyphicon glyphicon-ফ্লপি-খোলা
  • glyphicon glyphicon-credit-card
  • glyphicon glyphicon-স্থানান্তর
  • glyphicon glyphicon-cutlery
  • glyphicon glyphicon-header
  • glyphicon glyphicon-সংকুচিত
  • glyphicon glyphicon-earphone
  • glyphicon glyphicon-phone-alt
  • glyphicon glyphicon-টাওয়ার
  • glyphicon glyphicon-পরিসংখ্যান
  • glyphicon glyphicon-sd-video
  • glyphicon glyphicon-hd-ভিডিও
  • glyphicon glyphicon-সাবটাইটেল
  • glyphicon glyphicon-sound-stereo
  • glyphicon glyphicon-sound-dolby
  • glyphicon glyphicon-sound-5-1
  • glyphicon glyphicon-sound-6-1
  • glyphicon glyphicon-sound-7-1
  • glyphicon glyphicon-কপিরাইট-মার্ক
  • glyphicon glyphicon-রেজিস্ট্রেশন-মার্ক
  • glyphicon glyphicon-Cloud-download
  • glyphicon glyphicon-Cloud-upload
  • glyphicon glyphicon-tree-conifer
  • glyphicon glyphicon-বৃক্ষ-পর্ণমোচী
  • glyphicon glyphicon-cd
  • glyphicon glyphicon-save-file
  • glyphicon glyphicon-ওপেন-ফাইল
  • glyphicon glyphicon-level-up
  • glyphicon glyphicon-কপি
  • glyphicon glyphicon-পেস্ট
  • glyphicon glyphicon-সতর্ক
  • glyphicon glyphicon-Equalizer
  • glyphicon glyphicon-king
  • glyphicon glyphicon-রাণী
  • glyphicon glyphicon-pawn
  • glyphicon glyphicon-বিশপ
  • glyphicon glyphicon-নাইট
  • glyphicon glyphicon-baby-formula
  • glyphicon glyphicon-তাঁবু
  • glyphicon glyphicon-ব্ল্যাকবোর্ড
  • glyphicon glyphicon-শয্যা
  • glyphicon glyphicon-আপেল
  • glyphicon glyphicon-মুছে ফেলা
  • glyphicon glyphicon-hourglass
  • glyphicon glyphicon-বাতি
  • glyphicon glyphicon-ডুপ্লিকেট
  • glyphicon glyphicon-piggy-bank
  • glyphicon glyphicon-কাঁচি
  • glyphicon glyphicon-bitcoin
  • glyphicon glyphicon-btc
  • glyphicon glyphicon-xbt
  • glyphicon glyphicon-yen
  • glyphicon glyphicon-jpy
  • glyphicon glyphicon-রুবেল
  • glyphicon glyphicon-rub
  • glyphicon glyphicon-স্কেল
  • glyphicon glyphicon-ice-lolly
  • glyphicon glyphicon-বরফ-ললি-স্বাদ
  • glyphicon glyphicon-শিক্ষা
  • glyphicon glyphicon-বিকল্প-অনুভূমিক
  • glyphicon glyphicon-option-vertical
  • glyphicon glyphicon-মেনু-হ্যামবার্গার
  • glyphicon glyphicon-modal-window
  • glyphicon glyphicon-তেল
  • glyphicon glyphicon-grain
  • glyphicon glyphicon-সানগ্লাস
  • glyphicon glyphicon-টেক্সট-আকার
  • glyphicon glyphicon-টেক্সট-রঙ
  • glyphicon glyphicon-text-background
  • glyphicon glyphicon-অবজেক্ট-সারিবদ্ধ-শীর্ষ
  • glyphicon glyphicon-object-align-bottom
  • glyphicon glyphicon-বস্তু-সারিবদ্ধ-অনুভূমিক
  • glyphicon glyphicon-বস্তু-সারিবদ্ধ-বাম
  • glyphicon glyphicon-বস্তু-সারিবদ্ধ-উল্লম্ব
  • glyphicon glyphicon-বস্তু-সারিবদ্ধ-ডানে
  • glyphicon glyphicon-ত্রিভুজ-ডান
  • glyphicon glyphicon-ত্রিভুজ-বাম
  • glyphicon glyphicon-ত্রিভুজ-নীচ
  • glyphicon glyphicon-ত্রিভুজ-শীর্ষ
  • glyphicon glyphicon-console
  • glyphicon glyphicon-superscript
  • glyphicon glyphicon-subscript
  • glyphicon glyphicon-মেনু-বাম
  • glyphicon glyphicon-মেনু-ডান
  • glyphicon glyphicon-মেনু-ডাউন
  • glyphicon glyphicon-মেনু-আপ

ব্যবহারবিধি

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

অন্যান্য উপাদানের সাথে মিশ্রিত করবেন না

আইকন ক্লাস সরাসরি অন্যান্য উপাদানের সাথে একত্রিত করা যাবে না। এগুলি একই উপাদানে অন্যান্য শ্রেণীর সাথে ব্যবহার করা উচিত নয়। পরিবর্তে, একটি নেস্টেড যোগ করুন <span>এবং আইকন ক্লাসগুলি প্রয়োগ করুন <span>

শুধুমাত্র খালি উপাদান ব্যবহারের জন্য

আইকন ক্লাসগুলি শুধুমাত্র এমন উপাদানগুলিতে ব্যবহার করা উচিত যাতে কোনও পাঠ্য সামগ্রী নেই এবং কোনও শিশু উপাদান নেই৷

আইকন ফন্ট অবস্থান পরিবর্তন

../fonts/বুটস্ট্র্যাপ অনুমান করে যে আইকন ফন্ট ফাইলগুলি কম্পাইল করা CSS ফাইলগুলির সাথে সম্পর্কিত ডিরেক্টরিতে অবস্থিত হবে । এই ফন্ট ফাইলগুলি সরানো বা পুনঃনামকরণের অর্থ হল তিনটি উপায়ের একটিতে CSS আপডেট করা:

  • সোর্স লেস ফাইলে @icon-font-pathএবং/অথবা ভেরিয়েবল পরিবর্তন করুন ।@icon-font-name
  • কম কম্পাইলার দ্বারা প্রদত্ত আপেক্ষিক URL বিকল্পটি ব্যবহার করুন ।
  • url()কম্পাইল করা CSS এ পাথ পরিবর্তন করুন ।

আপনার নির্দিষ্ট ডেভেলপমেন্ট সেটআপের জন্য সবচেয়ে উপযুক্ত যে কোন বিকল্প ব্যবহার করুন।

অ্যাক্সেসযোগ্য আইকন

সহায়ক প্রযুক্তির আধুনিক সংস্করণগুলি CSS উৎপন্ন সামগ্রীর পাশাপাশি নির্দিষ্ট ইউনিকোড অক্ষর ঘোষণা করবে। স্ক্রীন রিডারগুলিতে অনাকাঙ্ক্ষিত এবং বিভ্রান্তিকর আউটপুট এড়াতে (বিশেষ করে যখন আইকনগুলি সম্পূর্ণরূপে সাজসজ্জার জন্য ব্যবহার করা হয়), আমরা এগুলিকে aria-hidden="true"বৈশিষ্ট্য দিয়ে লুকিয়ে রাখি।

আপনি যদি অর্থ বোঝাতে একটি আইকন ব্যবহার করেন (শুধুমাত্র একটি আলংকারিক উপাদান হিসাবে নয়), নিশ্চিত করুন যে এই অর্থটি সহায়ক প্রযুক্তিতেও জানানো হয়েছে – উদাহরণস্বরূপ, .sr-onlyক্লাসের সাথে দৃশ্যত লুকানো অতিরিক্ত সামগ্রী অন্তর্ভুক্ত করুন।

আপনি যদি অন্য কোন পাঠ্য ছাড়াই নিয়ন্ত্রণ তৈরি করেন (যেমন <button>শুধুমাত্র একটি আইকন থাকে), তাহলে নিয়ন্ত্রণের উদ্দেশ্য সনাক্ত করার জন্য আপনাকে সর্বদা বিকল্প সামগ্রী প্রদান করা উচিত, যাতে এটি সহায়ক প্রযুক্তির ব্যবহারকারীদের কাছে উপলব্ধি করতে পারে। এই ক্ষেত্রে, আপনি aria-labelনিয়ন্ত্রণ নিজেই একটি বৈশিষ্ট্য যোগ করতে পারেন.

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

উদাহরণ

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

<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

সহায়ক প্রযুক্তির ব্যবহারকারীদের কাছে এই ইঙ্গিতটি জানাতে অতিরিক্ত পাঠ্য সহ এটি একটি ত্রুটি বার্তা বোঝাতে একটি সতর্কতায় ব্যবহৃত একটি আইকন ৷.sr-only

<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Error:</span>
  Enter a valid email address
</div>

ড্রপডাউন

লিঙ্কের তালিকা প্রদর্শনের জন্য টগলযোগ্য, প্রাসঙ্গিক মেনু। ড্রপডাউন জাভাস্ক্রিপ্ট প্লাগইন দিয়ে ইন্টারেক্টিভ তৈরি করা হয়েছে ।

ড্রপডাউনের ট্রিগার এবং ড্রপডাউন মেনুর মধ্যে মোড়ানো .dropdown, বা অন্য একটি উপাদান যা ঘোষণা করে position: relative;। তারপর মেনুর HTML যোগ করুন।

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

.dropupড্রপডাউন মেনুগুলিকে প্যারেন্টে যোগ করে উপরের দিকে প্রসারিত করতে পরিবর্তন করা যেতে পারে (নীচের পরিবর্তে) ।

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

ডিফল্টরূপে, একটি ড্রপডাউন মেনু স্বয়ংক্রিয়ভাবে 100% উপরে থেকে এবং তার পিতামাতার বাম পাশে অবস্থান করে। ড্রপডাউন মেনুটি ডানদিকে সারিবদ্ধ করুন এ যোগ করুন .dropdown-menu-right.dropdown-menu

অতিরিক্ত অবস্থানের প্রয়োজন হতে পারে

ড্রপডাউনগুলি স্বয়ংক্রিয়ভাবে নথির স্বাভাবিক প্রবাহের মধ্যে CSS এর মাধ্যমে অবস্থান করে। এর মানে হল ড্রপডাউনগুলি নির্দিষ্ট বৈশিষ্ট্য সহ অভিভাবকদের দ্বারা ক্রপ করা হতে পারে overflowবা ভিউপোর্টের সীমার বাইরে প্রদর্শিত হতে পারে৷ আপনার নিজের থেকে এই সমস্যাগুলি যেমন তারা উদ্ভূত হয় তা সমাধান করুন।

অপ্রচলিত .pull-rightপ্রান্তিককরণ

v3.1.0 অনুযায়ী, আমরা .pull-rightড্রপডাউন মেনুতে অবমূল্যায়ন করেছি। একটি মেনু ডান-সারিবদ্ধ করতে, ব্যবহার করুন .dropdown-menu-right। ন্যাভবারে ডান-সারিবদ্ধ ন্যাভি উপাদানগুলি মেনুটিকে স্বয়ংক্রিয়ভাবে সারিবদ্ধ করতে এই শ্রেণীর একটি মিক্সিন সংস্করণ ব্যবহার করে। এটি ওভাররাইড করতে, ব্যবহার করুন .dropdown-menu-left

<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
  ...
</ul>

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

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
  ...
  <li class="dropdown-header">Dropdown header</li>
  ...
</ul>

একটি ড্রপডাউন মেনুতে লিঙ্কগুলির পৃথক সিরিজে একটি বিভাজক যোগ করুন।

<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="separator" class="divider"></li>
  ...
</ul>

লিঙ্কটি নিষ্ক্রিয় করতে ড্রপডাউনে .disabledএকটি যোগ করুন।<li>

<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
  <li><a href="#">Regular link</a></li>
  <li class="disabled"><a href="#">Disabled link</a></li>
  <li><a href="#">Another link</a></li>
</ul>

বোতাম গ্রুপ

বোতাম গোষ্ঠীর সাথে একক লাইনে একসাথে বোতামগুলির একটি সিরিজ গ্রুপ করুন। আমাদের বোতাম প্লাগইনের সাথে ঐচ্ছিক জাভাস্ক্রিপ্ট রেডিও এবং চেকবক্স শৈলী আচরণ যোগ করুন ।

টুলটিপ এবং বোতাম গ্রুপে পপভার বিশেষ সেটিং প্রয়োজন

একটি এর মধ্যে থাকা উপাদানগুলিতে টুলটিপ বা পপওভার ব্যবহার করার .btn-groupসময়, আপনাকে অবাঞ্ছিত পার্শ্বপ্রতিক্রিয়াগুলি এড়াতে বিকল্পটি নির্দিষ্ট করতে হবে container: 'body'(যেমন উপাদানটি আরও প্রশস্ত হওয়া এবং/অথবা টুলটিপ বা পপওভার ট্রিগার করা হলে তার গোলাকার কোণগুলি হারানো)।

সঠিক roleএবং একটি লেবেল প্রদান নিশ্চিত করুন

সহায়ক প্রযুক্তির জন্য - যেমন স্ক্রিন রিডার - বোঝাতে যে বোতামগুলির একটি সিরিজ গ্রুপ করা হয়েছে, একটি উপযুক্ত roleবৈশিষ্ট্য প্রদান করা প্রয়োজন। বোতাম গ্রুপের জন্য, এটি হবে role="group", যখন টুলবারে একটি থাকা উচিত role="toolbar"

একটি ব্যতিক্রম হল এমন গোষ্ঠী যেখানে শুধুমাত্র একটি একক নিয়ন্ত্রণ থাকে (উদাহরণস্বরূপ উপাদান সহ ন্যায্য বোতাম গ্রুপ<button> ) বা একটি ড্রপডাউন।

উপরন্তু, গ্রুপ এবং টুলবারগুলিকে একটি সুস্পষ্ট লেবেল দেওয়া উচিত, কারণ বেশিরভাগ সহায়ক প্রযুক্তি অন্যথায় সঠিক roleবৈশিষ্ট্য থাকা সত্ত্বেও তাদের ঘোষণা করবে না। এখানে প্রদত্ত উদাহরণগুলিতে, আমরা ব্যবহার করি aria-label, কিন্তু বিকল্পগুলি যেমন aria-labelledbyব্যবহার করা যেতে পারে।

মৌলিক উদাহরণ

.btnসঙ্গে বোতাম একটি সিরিজ মোড়ানো .btn-group.

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

বোতাম টুলবার

আরো জটিল উপাদানের জন্য <div class="btn-group">a এর সেটগুলিকে একত্রিত করুন।<div class="btn-toolbar">

<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
</div>

সাইজিং

একটি গ্রুপের প্রতিটি বোতামে বোতাম সাইজিং ক্লাস প্রয়োগ করার পরিবর্তে, একাধিক গ্রুপ নেস্ট করার সময় সহ .btn-group-*প্রতিটিতে যোগ করুন।.btn-group




<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>

বাসা বাঁধে

আপনি যখন বোতামগুলির একটি সিরিজের সাথে মিশ্রিত ড্রপডাউন মেনু চান তখন .btn-groupঅন্যটির মধ্যে একটি রাখুন ।.btn-group

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

উল্লম্ব প্রকরণ

বোতামগুলির একটি সেট অনুভূমিকভাবে না করে উল্লম্বভাবে স্ট্যাক করা প্রদর্শিত করুন। স্প্লিট বোতাম ড্রপডাউন এখানে সমর্থিত নয়।

<div class="btn-group-vertical" role="group" aria-label="...">
  ...
</div>

ন্যায্য বোতাম গ্রুপ

এর প্যারেন্টের পুরো প্রস্থকে বিস্তৃত করার জন্য বোতামগুলির একটি গ্রুপ সমান আকারে প্রসারিত করুন। বোতাম গ্রুপের মধ্যে বোতাম ড্রপডাউনগুলির সাথেও কাজ করে।

সীমানা হ্যান্ডলিং

বোতামগুলিকে ন্যায্যতা দেওয়ার জন্য ব্যবহৃত নির্দিষ্ট HTML এবং CSS এর কারণে (যেমন display: table-cell), তাদের মধ্যে সীমানা দ্বিগুণ হয়। নিয়মিত বোতাম গোষ্ঠীতে, margin-left: -1pxসীমানাগুলি সরানোর পরিবর্তে স্ট্যাক করতে ব্যবহৃত হয়। যাইহোক, marginএর সাথে কাজ করে না display: table-cell। ফলস্বরূপ, বুটস্ট্র্যাপে আপনার কাস্টমাইজেশনের উপর নির্ভর করে, আপনি সীমানা অপসারণ বা পুনরায় রঙ করতে চাইতে পারেন।

IE8 এবং সীমানা

ইন্টারনেট এক্সপ্লোরার 8 একটি ন্যায্য বোতাম গ্রুপে বোতামগুলিতে সীমানা রেন্ডার করে না, তা চালু হোক <a>বা <button>উপাদান। এটি কাছাকাছি পেতে, প্রতিটি বোতাম অন্য একটি মধ্যে মোড়ানো .btn-group.

আরও তথ্যের জন্য #12476 দেখুন ।

<a>উপাদান সঙ্গে

শুধু .btns এর একটি সিরিজ মোড়ানো .btn-group.btn-group-justified

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  ...
</div>

লিঙ্কগুলি বোতাম হিসাবে কাজ করে

যদি <a>উপাদানগুলি বোতাম হিসাবে কাজ করতে ব্যবহৃত হয় - বর্তমান পৃষ্ঠার মধ্যে অন্য নথি বা বিভাগে নেভিগেট করার পরিবর্তে - ইন-পেজ কার্যকারিতা ট্রিগার করে - তাদেরও একটি উপযুক্ত দেওয়া উচিত role="button"

<button>উপাদান সঙ্গে

<button>উপাদানগুলির সাথে ন্যায্য বোতাম গোষ্ঠীগুলি ব্যবহার করতে , আপনাকে অবশ্যই প্রতিটি বোতামকে একটি বোতাম গ্রুপে মোড়ানো উচিত । বেশিরভাগ ব্রাউজার উপাদানগুলির ন্যায্যতার জন্য আমাদের CSS সঠিকভাবে প্রয়োগ করে না <button>, কিন্তু যেহেতু আমরা বোতাম ড্রপডাউন সমর্থন করি, তাই আমরা এটিকে ঘিরে কাজ করতে পারি।

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Left</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Middle</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Right</button>
  </div>
</div>

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

একটি ড্রপডাউন মেনু ট্রিগার করার জন্য যেকোন বোতামটি একটি এর মধ্যে রেখে .btn-groupএবং সঠিক মেনু মার্কআপ প্রদান করে ব্যবহার করুন।

প্লাগইন নির্ভরতা

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

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

কিছু মৌলিক মার্কআপ পরিবর্তনের সাথে একটি বোতামকে ড্রপডাউন টগলে পরিণত করুন।

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

স্প্লিট বোতাম ড্রপডাউন

একইভাবে, একই মার্কআপ পরিবর্তন সহ স্প্লিট বোতাম ড্রপডাউন তৈরি করুন, শুধুমাত্র একটি পৃথক বোতাম দিয়ে।

<!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

সাইজিং

বোতাম ড্রপডাউনগুলি সমস্ত আকারের বোতামগুলির সাথে কাজ করে৷

<!-- Large button group -->
<div class="btn-group">
  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Extra small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Extra small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

ড্রপআপ বৈচিত্র

.dropupঅভিভাবক যোগ করে উপাদানের উপরে ড্রপডাউন মেনু ট্রিগার করুন।

<div class="btn-group dropup">
  <button type="button" class="btn btn-default">Dropup</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

ইনপুট গ্রুপ

যেকোনো টেক্সট-ভিত্তিক এর আগে, পরে বা উভয় পাশে টেক্সট বা বোতাম যোগ করে ফর্ম নিয়ন্ত্রণ প্রসারিত করুন <input>.input-groupএকটির সাথে ব্যবহার করুন .input-group-addonবা .input-group-btnএকটি একক উপাদানের সাথে প্রিপেন্ড বা যুক্ত করুন .form-control

টেক্সচুয়াল <input>এস শুধুমাত্র

<select>এখানে উপাদানগুলি ব্যবহার করা এড়িয়ে চলুন কারণ সেগুলি ওয়েবকিট ব্রাউজারগুলিতে সম্পূর্ণরূপে স্টাইল করা যায় না৷

<textarea>এখানে উপাদানগুলি ব্যবহার করা এড়িয়ে চলুন rowsকারণ কিছু ক্ষেত্রে তাদের বৈশিষ্ট্যকে সম্মান করা হবে না।

ইনপুট গ্রুপে টুলটিপ এবং পপভারের জন্য বিশেষ সেটিং প্রয়োজন

একটি এর মধ্যে থাকা উপাদানগুলিতে টুলটিপ বা পপওভার ব্যবহার করার .input-groupসময়, আপনাকে অবাঞ্ছিত পার্শ্বপ্রতিক্রিয়াগুলি এড়াতে বিকল্পটি নির্দিষ্ট করতে হবে container: 'body'(যেমন উপাদানটি আরও প্রশস্ত হওয়া এবং/অথবা টুলটিপ বা পপওভার ট্রিগার করা হলে তার গোলাকার কোণগুলি হারানো)।

অন্যান্য উপাদানের সাথে মিশ্রিত করবেন না

ফর্ম গ্রুপ বা গ্রিড কলাম ক্লাস সরাসরি ইনপুট গ্রুপের সাথে মিশ্রিত করবেন না। পরিবর্তে, ফর্ম গ্রুপ বা গ্রিড-সম্পর্কিত উপাদানের ভিতরে ইনপুট গ্রুপটি নেস্ট করুন।

সর্বদা লেবেল যোগ করুন

আপনি প্রতিটি ইনপুটের জন্য একটি লেবেল অন্তর্ভুক্ত না করলে স্ক্রীন রিডারদের আপনার ফর্মগুলির সাথে সমস্যা হবে৷ এই ইনপুট গোষ্ঠীগুলির জন্য, নিশ্চিত করুন যে কোনও অতিরিক্ত লেবেল বা কার্যকারিতা সহায়ক প্রযুক্তিগুলিতে পৌঁছে দেওয়া হয়েছে।

সঠিক কৌশলটি ব্যবহার করা হবে (দৃশ্যমান <label>উপাদান, ক্লাস <label>ব্যবহার করে লুকানো উপাদান , বা , , বা বৈশিষ্ট্যের ব্যবহার ) এবং কী অতিরিক্ত তথ্য জানাতে হবে তা আপনি যে ইন্টারফেস উইজেট প্রয়োগ করছেন তার উপর নির্ভর করে পরিবর্তিত হবে। এই বিভাগের উদাহরণগুলি কয়েকটি প্রস্তাবিত, কেস-নির্দিষ্ট পন্থা প্রদান করে।.sr-onlyaria-labelaria-labelledbyaria-describedbytitleplaceholder

মৌলিক উদাহরণ

একটি ইনপুটের উভয় পাশে একটি অ্যাড-অন বা বোতাম রাখুন। আপনি একটি ইনপুটের উভয় পাশে একটি স্থাপন করতে পারেন।

আমরা একক দিকে একাধিক অ্যাড-অন ( .input-group-addonবা ) সমর্থন করি না।.input-group-btn

আমরা একক ইনপুট গ্রুপে একাধিক ফর্ম-নিয়ন্ত্রণ সমর্থন করি না।

@

@example.com

$ .00

https://example.com/users/
<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>

<label for="basic-url">Your vanity URL</label>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

সাইজিং

আপেক্ষিক ফর্ম সাইজিং ক্লাসগুলি .input-groupনিজেই যোগ করুন এবং এর মধ্যে থাকা বিষয়বস্তুগুলি স্বয়ংক্রিয়ভাবে আকার পরিবর্তন করবে - প্রতিটি উপাদানে ফর্ম নিয়ন্ত্রণ আকারের ক্লাসগুলি পুনরাবৃত্তি করার প্রয়োজন নেই৷

@

@

@
<div class="input-group input-group-lg">
  <span class="input-group-addon" id="sizing-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>

<div class="input-group">
  <span class="input-group-addon" id="sizing-addon2">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>

<div class="input-group input-group-sm">
  <span class="input-group-addon" id="sizing-addon3">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>

চেকবক্স এবং রেডিও অ্যাডঅন

পাঠ্যের পরিবর্তে একটি ইনপুট গ্রুপের অ্যাডঅনের মধ্যে যেকোনো চেকবক্স বা রেডিও বিকল্প রাখুন।

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="radio" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

বোতাম অ্যাডঅন

ইনপুট গোষ্ঠীর বোতামগুলি কিছুটা আলাদা এবং এর জন্য একটি অতিরিক্ত স্তরের নেস্টিং প্রয়োজন৷ এর পরিবর্তে , আপনাকে বোতামগুলি মোড়ানোর .input-group-addonজন্য ব্যবহার করতে হবে । .input-group-btnডিফল্ট ব্রাউজার শৈলীর কারণে এটি প্রয়োজন যা ওভাররাইড করা যাবে না।

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" class="form-control" placeholder="Search for...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

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

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" aria-label="...">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

সেগমেন্টেড বোতাম

<div class="input-group">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
</div>

একাধিক বোতাম

যদিও আপনার প্রতি পাশে শুধুমাত্র একটি অ্যাড-অন থাকতে পারে, তবে একটির ভিতরে একাধিক বোতাম থাকতে পারে .input-group-btn

<div class="input-group">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
</div>

ন্যাভি

বুটস্ট্র্যাপে উপলব্ধ Navs শেয়ার্ড মার্কআপ, বেস .navক্লাস থেকে শুরু করে, সেইসাথে শেয়ার্ড স্টেট। প্রতিটি শৈলীর মধ্যে স্যুইচ করতে মডিফায়ার ক্লাস অদলবদল করুন।

ট্যাব প্যানেলের জন্য navs ব্যবহার করার জন্য JavaScript ট্যাব প্লাগইন প্রয়োজন

ট্যাবযোগ্য এলাকা সহ ট্যাবের জন্য, আপনাকে অবশ্যই ট্যাবগুলি JavaScript প্লাগইন ব্যবহার করতে হবে । মার্কআপের জন্য অতিরিক্ত roleএবং ARIA বৈশিষ্ট্যেরও প্রয়োজন হবে – আরও বিশদ বিবরণের জন্য প্লাগইনের উদাহরণ মার্কআপটি দেখুন।

নেভিগেশন অ্যাক্সেসযোগ্য হিসাবে ব্যবহৃত navs করুন

আপনি যদি একটি নেভিগেশন বার প্রদান করতে navs ব্যবহার করেন, তাহলে role="navigation"এর সবচেয়ে যৌক্তিক প্যারেন্ট কন্টেনারে একটি যোগ করতে ভুলবেন না বা পুরো নেভিগেশনের চারপাশে <ul>একটি উপাদান মোড়ানো । <nav>ভূমিকাটিকে <ul>নিজের সাথে যুক্ত করবেন না, কারণ এটি সহায়ক প্রযুক্তির দ্বারা একটি প্রকৃত তালিকা হিসাবে ঘোষণা করা থেকে বাধা দেবে৷

নোট করুন .nav-tabsক্লাসের জন্য .navবেস ক্লাস প্রয়োজন।

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

একই HTML নিন, কিন্তু .nav-pillsপরিবর্তে ব্যবহার করুন:

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

বড়িগুলিও উল্লম্বভাবে স্ট্যাকযোগ্য। শুধু যোগ করুন .nav-stacked.

<ul class="nav nav-pills nav-stacked">
  ...
</ul>

এর সাথে 768px এর চেয়ে চওড়া স্ক্রীনে সহজেই ট্যাব বা বড়িগুলি তাদের অভিভাবকের সমান প্রস্থের তৈরি করুন .nav-justified৷ ছোট স্ক্রিনে, নেভি লিঙ্কগুলি স্ট্যাক করা হয়।

ন্যায়সঙ্গত নেভিবার নেভি লিঙ্কগুলি বর্তমানে সমর্থিত নয়৷

সাফারি এবং প্রতিক্রিয়াশীল ন্যায্য ন্যাভি

v9.1.2 অনুসারে, Safari একটি বাগ প্রদর্শন করে যেখানে আপনার ব্রাউজারকে অনুভূমিকভাবে আকার পরিবর্তন করা হলে ন্যায্য ন্যাভিতে রেন্ডারিং ত্রুটি দেখা দেয় যা রিফ্রেশ করার পরে সাফ করা হয়। এই বাগটি ন্যায্য NAV উদাহরণেও দেখানো হয়েছে ।

<ul class="nav nav-tabs nav-justified">
  ...
</ul>
<ul class="nav nav-pills nav-justified">
  ...
</ul>

যেকোন নেভি কম্পোনেন্টের জন্য (ট্যাব বা বড়ি), ধূসর লিঙ্কের .disabledজন্য যোগ করুন এবং কোনো হোভার ইফেক্ট নেই

লিঙ্ক কার্যকারিতা প্রভাবিত হয় না

এই শ্রেণীটি শুধুমাত্র <a>এর চেহারা পরিবর্তন করবে, এর কার্যকারিতা নয়। এখানে লিঙ্কগুলি নিষ্ক্রিয় করতে কাস্টম জাভাস্ক্রিপ্ট ব্যবহার করুন।

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
  ...
</ul>

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

ড্রপডাউন সহ ট্যাব

<ul class="nav nav-tabs">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

ড্রপডাউন সঙ্গে বড়ি

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

নববার

Navbars হল প্রতিক্রিয়াশীল মেটা উপাদান যা আপনার অ্যাপ্লিকেশন বা সাইটের নেভিগেশন হেডার হিসেবে কাজ করে। মোবাইল ভিউতে এগুলি সঙ্কুচিত হতে শুরু করে (এবং টগলযোগ্য) এবং উপলব্ধ ভিউপোর্টের প্রস্থ বৃদ্ধির সাথে সাথে অনুভূমিক হয়ে যায়।

ন্যায়সঙ্গত নেভিবার নেভি লিঙ্কগুলি বর্তমানে সমর্থিত নয়৷

উপচে পড়া বিষয়বস্তু

যেহেতু বুটস্ট্র্যাপ জানে না আপনার ন্যাভিবারে কন্টেন্টের কতটা জায়গা প্রয়োজন, তাই আপনি একটি দ্বিতীয় সারিতে কন্টেন্ট মোড়ানো নিয়ে সমস্যায় পড়তে পারেন। এটি সমাধান করতে, আপনি করতে পারেন:

  1. নেভিবার আইটেমগুলির পরিমাণ বা প্রস্থ হ্রাস করুন।
  2. রেসপন্সিভ ইউটিলিটি ক্লাস ব্যবহার করে নির্দিষ্ট স্ক্রিনের আকারে কিছু নেভিবার আইটেম লুকান ।
  3. যে বিন্দুতে আপনার নেভিবারটি ভেঙে যাওয়া এবং অনুভূমিক মোডের মধ্যে স্যুইচ করে তা পরিবর্তন করুন। @grid-float-breakpointভেরিয়েবল কাস্টমাইজ করুন বা আপনার নিজস্ব মিডিয়া ক্যোয়ারী যোগ করুন।

জাভাস্ক্রিপ্ট প্লাগইন প্রয়োজন

যদি জাভাস্ক্রিপ্ট অক্ষম করা হয় এবং ভিউপোর্টটি যথেষ্ট সংকীর্ণ হয় যে নেভিবারটি ভেঙে যায়, তাহলে নেভিবারটি প্রসারিত করা এবং এর মধ্যে বিষয়বস্তু দেখা অসম্ভব .navbar-collapse

প্রতিক্রিয়াশীল navbar-এর জন্য আপনার বুটস্ট্র্যাপের সংস্করণে ধ্বস প্লাগইন অন্তর্ভুক্ত করা প্রয়োজন।

ধসে পড়া মোবাইল ন্যাভবার ব্রেকপয়েন্ট পরিবর্তন করা হচ্ছে

ভিউপোর্টের চেয়ে সংকীর্ণ হলে নেভিবার তার উল্লম্ব মোবাইল ভিউতে ভেঙে পড়ে এবং @grid-float-breakpointযখন ভিউপোর্টটি কমপক্ষে @grid-float-breakpointপ্রস্থে থাকে তখন এটি তার অনুভূমিক নন-মোবাইল ভিউতে প্রসারিত হয়। যখন নেভিবার ভেঙে যায়/প্রসারিত হয় তখন নিয়ন্ত্রণ করতে কম উৎসে এই ভেরিয়েবলটিকে সামঞ্জস্য করুন। ডিফল্ট মান হল 768px(সবচেয়ে ছোট "ছোট" বা "ট্যাবলেট" স্ক্রীন)।

নেভিবারগুলিকে অ্যাক্সেসযোগ্য করুন

একটি উপাদান ব্যবহার করতে ভুলবেন না <nav>বা, যদি আরও জেনেরিক উপাদান ব্যবহার করেন যেমন a , সহায়ক প্রযুক্তির ব্যবহারকারীদের জন্য একটি ল্যান্ডমার্ক অঞ্চল হিসাবে স্পষ্টভাবে চিহ্নিত করতে প্রতিটি নেভিবারে <div>একটি যোগ করুন ।role="navigation"

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

একটি এর জন্য টেক্সট অদলবদল করে আপনার নিজের ইমেজ দিয়ে navbar ব্র্যান্ডটি প্রতিস্থাপন করুন <img>। যেহেতু .navbar-brandএর নিজস্ব প্যাডিং এবং উচ্চতা রয়েছে, তাই আপনাকে আপনার ছবির উপর নির্ভর করে কিছু CSS ওভাররাইড করতে হতে পারে।

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="...">
      </a>
    </div>
  </div>
</nav>

.navbar-formসংকীর্ণ ভিউপোর্টে যথাযথ উল্লম্ব সারিবদ্ধকরণ এবং ভেঙে পড়া আচরণের জন্য ফর্মের সামগ্রী রাখুন । এটি navbar বিষয়বস্তুর মধ্যে কোথায় থাকে তা নির্ধারণ করতে প্রান্তিককরণ বিকল্পগুলি ব্যবহার করুন৷

হেড আপ হিসাবে, মিক্সিনের মাধ্যমে .navbar-formএর বেশিরভাগ কোড শেয়ার করে । কিছু ফর্ম কন্ট্রোল, যেমন ইনপুট গ্রুপ, একটি নেভিবারে সঠিকভাবে দেখানোর জন্য নির্দিষ্ট প্রস্থের প্রয়োজন হতে পারে।.form-inline

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

মোবাইল ডিভাইস সতর্কতা

মোবাইল ডিভাইসে স্থির উপাদানগুলির মধ্যে ফর্ম নিয়ন্ত্রণগুলি ব্যবহার করার বিষয়ে কিছু সতর্কতা রয়েছে৷ বিস্তারিত জানার জন্য আমাদের ব্রাউজার সমর্থন ডক্স দেখুন.

সর্বদা লেবেল যোগ করুন

আপনি প্রতিটি ইনপুটের জন্য একটি লেবেল অন্তর্ভুক্ত না করলে স্ক্রীন রিডারদের আপনার ফর্মগুলির সাথে সমস্যা হবে৷ এই ইনলাইন ফর্মগুলির জন্য, আপনি .sr-onlyক্লাস ব্যবহার করে লেবেলগুলি লুকাতে পারেন৷ সহায়ক প্রযুক্তিগুলির জন্য একটি লেবেল প্রদানের আরও বিকল্প পদ্ধতি রয়েছে, যেমন aria-label, aria-labelledbyবা titleবৈশিষ্ট্য৷ যদি এইগুলির কোনোটিই উপস্থিত না থাকে, তাহলে স্ক্রীন রিডাররা placeholderঅ্যাট্রিবিউট ব্যবহার করতে পারেন, যদি উপস্থিত থাকে, তবে মনে রাখবেন যে placeholderঅন্যান্য লেবেলিং পদ্ধতির জন্য প্রতিস্থাপন হিসাবে ব্যবহার করার পরামর্শ দেওয়া হয় না।

ন্যাভবারে উল্লম্বভাবে কেন্দ্রীভূত করতে a-তে না থাকা উপাদানগুলিতে .navbar-btnক্লাস যুক্ত করুন ।<button><form>

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

প্রসঙ্গ-নির্দিষ্ট ব্যবহার

স্ট্যান্ডার্ড বোতাম ক্লাসের মত , এলিমেন্ট এবং .navbar-btnঅন ব্যবহার করা যেতে পারে । যাইহোক, এর মধ্যে থাকা উপাদানগুলিতে স্ট্যান্ডার্ড বাটন ক্লাসগুলি ব্যবহার করা উচিত নয় ।<a><input>.navbar-btn<a>.navbar-nav

সঠিক অগ্রণী এবং রঙের জন্য .navbar-textসাধারণত একটি ট্যাগের সাথে একটি উপাদানে পাঠ্যের স্ট্রিংগুলি মোড়ানো ।<p>

<p class="navbar-text">Signed in as Mark Otto</p>

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

<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>

.navbar-leftবা .navbar-rightইউটিলিটি ক্লাস ব্যবহার করে নেভি লিঙ্ক, ফর্ম, বোতাম বা পাঠ্য সারিবদ্ধ করুন । উভয় ক্লাসই নির্দিষ্ট দিক দিয়ে একটি CSS ফ্লোট যোগ করবে। উদাহরণস্বরূপ, নেভি লিঙ্কগুলিকে সারিবদ্ধ করতে, সেগুলিকে <ul>সংশ্লিষ্ট ইউটিলিটি ক্লাস প্রয়োগের সাথে আলাদা করে রাখুন।

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

একাধিক উপাদান ডান প্রান্তিককরণ

Navbars বর্তমানে একাধিক .navbar-rightক্লাসের সাথে একটি সীমাবদ্ধতা আছে। সঠিকভাবে স্থান বিষয়বস্তু, আমরা শেষ .navbar-rightউপাদান নেতিবাচক মার্জিন ব্যবহার. যখন সেই ক্লাসটি ব্যবহার করে একাধিক উপাদান থাকে, তখন এই মার্জিনগুলি উদ্দেশ্য অনুযায়ী কাজ করে না।

যখন আমরা v4 তে সেই উপাদানটি পুনরায় লিখতে পারি তখন আমরা এটিকে আবার দেখব।

একটি বা কেন্দ্রে এবং প্যাড নেভিবার সামগ্রী যোগ করুন .navbar-fixed-topএবং অন্তর্ভুক্ত করুন।.container.container-fluid

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    ...
  </div>
</nav>

শরীরের প্যাডিং প্রয়োজন

স্থির নেভিবার আপনার অন্যান্য সামগ্রীকে ওভারলে করবে, যদি না আপনি paddingএর শীর্ষে যোগ করেন <body>। আপনার নিজস্ব মান চেষ্টা করুন বা নীচের আমাদের স্নিপেট ব্যবহার করুন. পরামর্শ: ডিফল্টরূপে, নেভিবার 50px উচ্চ।

body { padding-top: 70px; }

কোর বুটস্ট্র্যাপ CSS এর পরে এটি অন্তর্ভুক্ত করা নিশ্চিত করুন ।

একটি বা কেন্দ্রে এবং প্যাড নেভিবার সামগ্রী যোগ করুন .navbar-fixed-bottomএবং অন্তর্ভুক্ত করুন।.container.container-fluid

<nav class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    ...
  </div>
</nav>

শরীরের প্যাডিং প্রয়োজন

স্থির নেভিবার আপনার অন্যান্য সামগ্রীকে ওভারলে করবে, যদি না আপনি paddingএর নীচে যোগ করেন <body>। আপনার নিজস্ব মান চেষ্টা করুন বা নীচের আমাদের স্নিপেট ব্যবহার করুন. পরামর্শ: ডিফল্টরূপে, নেভিবার 50px উচ্চ।

body { padding-bottom: 70px; }

কোর বুটস্ট্র্যাপ CSS এর পরে এটি অন্তর্ভুক্ত করা নিশ্চিত করুন ।

একটি পূর্ণ-প্রস্থ ন্যাভিবার তৈরি করুন যা .navbar-static-topএকটি .containerবা .container-fluidকেন্দ্রে এবং প্যাড নেভিবার সামগ্রী যোগ করে পৃষ্ঠার সাথে স্ক্রোল করে।

ক্লাসের বিপরীতে .navbar-fixed-*, আপনাকে কোনো প্যাডিং পরিবর্তন করতে হবে না body

<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    ...
  </div>
</nav>

যোগ করে নববারের চেহারা পরিবর্তন করুন .navbar-inverse

<nav class="navbar navbar-inverse">
  ...
</nav>

ব্রেডক্রাম্বস

একটি নেভিগেশনাল অনুক্রমের মধ্যে বর্তমান পৃষ্ঠার অবস্থান নির্দেশ করুন৷

বিভাজক স্বয়ংক্রিয়ভাবে CSS-এ :beforeএবং এর মাধ্যমে যুক্ত হয় content

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

পৃষ্ঠা সংখ্যা

মাল্টি-পেজ পেজিনেশন কম্পোনেন্ট বা সহজ পেজার বিকল্প সহ আপনার সাইট বা অ্যাপের জন্য পেজিনেশন লিঙ্ক প্রদান করুন ।

ডিফল্ট পেজিনেশন

Rdio দ্বারা অনুপ্রাণিত সহজ পৃষ্ঠা সংখ্যা, অ্যাপ এবং অনুসন্ধান ফলাফলের জন্য দুর্দান্ত। বড় ব্লক মিস করা কঠিন, সহজেই মাপযোগ্য, এবং বড় ক্লিক এলাকা প্রদান করে।

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

পেজিনেশন উপাদান লেবেল করা

<nav>স্ক্রীন রিডার এবং অন্যান্য সহায়ক প্রযুক্তির জন্য একটি নেভিগেশন বিভাগ হিসাবে চিহ্নিত করার জন্য পেজিনেশন উপাদানটিকে একটি উপাদানে মোড়ানো উচিত । উপরন্তু, যেহেতু একটি পৃষ্ঠায় ইতিমধ্যেই এমন একাধিক নেভিগেশন সেকশন থাকতে পারে (যেমন হেডারে প্রাথমিক ন্যাভিগেশন, বা সাইডবার নেভিগেশন), এটির উদ্দেশ্য প্রতিফলিত করে এমন aria-labelএকটি বর্ণনামূলক প্রদান করা বাঞ্ছনীয়। <nav>উদাহরণস্বরূপ, সার্চ ফলাফলের একটি সেটের মধ্যে নেভিগেট করার জন্য যদি পেজিনেশন উপাদান ব্যবহার করা হয়, তাহলে একটি উপযুক্ত লেবেল হতে পারে aria-label="Search results pages"

অক্ষম এবং সক্রিয় রাষ্ট্র

লিঙ্কগুলি বিভিন্ন পরিস্থিতিতে কাস্টমাইজযোগ্য। আনক্লিকযোগ্য .disabledলিঙ্কগুলির জন্য এবং .activeবর্তমান পৃষ্ঠাটি নির্দেশ করতে ব্যবহার করুন।

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
    ...
  </ul>
</nav>

আমরা সুপারিশ করছি যে আপনি সক্রিয় বা অক্ষম অ্যাঙ্করগুলিকে অদলবদল করুন <span>, অথবা পূর্ববর্তী/পরবর্তী তীরগুলির ক্ষেত্রে অ্যাঙ্করটি বাদ দিন, উদ্দেশ্যযুক্ত শৈলীগুলি বজায় রেখে ক্লিক কার্যকারিতা অপসারণ করতে৷

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled">
      <span>
        <span aria-hidden="true">&laquo;</span>
      </span>
    </li>
    <li class="active">
      <span>1 <span class="sr-only">(current)</span></span>
    </li>
    ...
  </ul>
</nav>

সাইজিং

বৃহত্তর বা ছোট পৃষ্ঠা সংখ্যা অভিনব? যোগ করুন .pagination-lgবা .pagination-smঅতিরিক্ত মাপের জন্য.

<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>

পেজার

হালকা মার্কআপ এবং শৈলী সহ সহজ পৃষ্ঠা সংখ্যা বাস্তবায়নের জন্য দ্রুত পূর্ববর্তী এবং পরবর্তী লিঙ্ক। এটি ব্লগ বা ম্যাগাজিনের মতো সাধারণ সাইটের জন্য দুর্দান্ত৷

ডিফল্ট উদাহরণ

ডিফল্টরূপে, পেজার লিঙ্কগুলিকে কেন্দ্র করে।

<nav aria-label="...">
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>

বিকল্পভাবে, আপনি পাশের প্রতিটি লিঙ্ক সারিবদ্ধ করতে পারেন:

<nav aria-label="...">
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

ঐচ্ছিক অক্ষম রাষ্ট্র

পেজার লিঙ্কগুলিও পেজিনেশন .disabledথেকে সাধারণ ইউটিলিটি ক্লাস ব্যবহার করে।

<nav aria-label="...">
  <ul class="pager">
    <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

লেবেল

উদাহরণ

উদাহরণ শিরোনাম নতুন

উদাহরণ শিরোনাম নতুন

উদাহরণ শিরোনাম নতুন

উদাহরণ শিরোনাম নতুন

উদাহরণ শিরোনাম নতুন
উদাহরণ শিরোনাম নতুন
<h3>Example heading <span class="label label-default">New</span></h3>

উপলব্ধ বৈচিত্র

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

ডিফল্ট প্রাথমিক সাফল্যের তথ্য সতর্কতা বিপদ
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

লেবেল টন আছে?

রেন্ডারিং সমস্যা দেখা দিতে পারে যখন আপনার একটি সংকীর্ণ পাত্রের মধ্যে কয়েক ডজন ইনলাইন লেবেল থাকে, যার প্রতিটিতে নিজস্ব inline-blockউপাদান থাকে (একটি আইকনের মতো)। এই চারপাশে পথ সেটিং হয় display: inline-block;. প্রসঙ্গ এবং একটি উদাহরণের জন্য, #13219 দেখুন

ব্যাজ

<span class="badge">লিঙ্ক, বুটস্ট্র্যাপ নেভিস এবং আরও অনেক কিছুতে যোগ করে সহজেই নতুন বা অপঠিত আইটেম হাইলাইট করুন।

ইনবক্স42

<a href="#">Inbox <span class="badge">42</span></a>

<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button>

নিজেকে ধসে পড়া

যখন কোনও নতুন বা অপঠিত আইটেম না থাকে, তখন ব্যাজগুলি কেবল ধসে পড়বে (সিএসএস :emptyনির্বাচকের মাধ্যমে) যদি এর মধ্যে কোনও সামগ্রী বিদ্যমান না থাকে।

ক্রস ব্রাউজার সামঞ্জস্য

ইন্টারনেট এক্সপ্লোরার 8-এ ব্যাজগুলি স্বতঃস্ফূর্ত হবে না কারণ এতে :emptyনির্বাচকের সমর্থনের অভাব রয়েছে।

সক্রিয় নেভি স্টেটগুলির সাথে খাপ খায়

পিল নেভিগেশনে সক্রিয় অবস্থায় ব্যাজ রাখার জন্য অন্তর্নির্মিত শৈলী অন্তর্ভুক্ত করা হয়েছে।

<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>

জাম্বোট্রন

একটি হালকা ওজনের, নমনীয় উপাদান যা ঐচ্ছিকভাবে আপনার সাইটে মূল বিষয়বস্তু প্রদর্শনের জন্য সমগ্র ভিউপোর্টকে প্রসারিত করতে পারে।

ওহে বিশ্ব!

এটি একটি সাধারণ নায়ক ইউনিট, বৈশিষ্ট্যযুক্ত বিষয়বস্তু বা তথ্যের প্রতি অতিরিক্ত মনোযোগ দেওয়ার জন্য একটি সাধারণ জাম্বোট্রন-স্টাইলের উপাদান।

আরও জানুন

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

জাম্বোট্রনকে পূর্ণ প্রস্থ করতে, এবং গোলাকার কোণ ছাড়াই, এটিকে সমস্ত .containers-এর বাইরে রাখুন এবং পরিবর্তে একটি .containerভিতরে যোগ করুন।

<div class="jumbotron">
  <div class="container">
    ...
  </div>
</div>

পেজের উপরের অংশ

h1একটি পৃষ্ঠার বিষয়বস্তুর যথাযথভাবে স্থান বের করতে এবং সেগমেন্ট করার জন্য একটি সাধারণ শেল । এটি h1এর ডিফল্ট smallউপাদান, সেইসাথে অন্যান্য উপাদান (অতিরিক্ত শৈলী সহ) ব্যবহার করতে পারে।

<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

থাম্বনেল

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

আপনি যদি বিভিন্ন উচ্চতা এবং/অথবা প্রস্থের থাম্বনেইলের Pinterest-এর মতো উপস্থাপনা খুঁজছেন, তাহলে আপনাকে একটি তৃতীয় পক্ষের প্লাগইন ব্যবহার করতে হবে যেমন ম্যাসনরি , আইসোটোপ , বা সালভাটোর

ডিফল্ট উদাহরণ

ডিফল্টরূপে, বুটস্ট্র্যাপের থাম্বনেইলগুলি ন্যূনতম প্রয়োজনীয় মার্কআপ সহ লিঙ্কযুক্ত চিত্রগুলি প্রদর্শন করার জন্য ডিজাইন করা হয়েছে।

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." alt="...">
    </a>
  </div>
  ...
</div>

কাস্টম কন্টেন্ট

একটু অতিরিক্ত মার্কআপের সাহায্যে, থাম্বনেইলে শিরোনাম, অনুচ্ছেদ বা বোতামের মতো যেকোনো ধরনের HTML সামগ্রী যোগ করা সম্ভব।

100%x200

থাম্বনেইল লেবেল

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

বোতাম বোতাম

100%x200

থাম্বনেইল লেবেল

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

বোতাম বোতাম

100%x200

থাম্বনেইল লেবেল

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

বোতাম বোতাম

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>

সতর্কতা

মুষ্টিমেয় ��পলব্ধ এবং নমনীয় সতর্কতা বার্তা সহ সাধারণ ব্যবহারকারীর ক্রিয়াকলাপের জন্য প্রাসঙ্গিক প্রতিক্রিয়া বার্তা প্রদান করুন।

উদাহরণ

মৌলিক সতর্কতা বার্তাগুলির জন্য যেকোন পাঠ্য এবং একটি ঐচ্ছিক খারিজ বোতাম এবং .alertচারটি প্রাসঙ্গিক ক্লাসের মধ্যে একটি (যেমন, ) মোড়ানো।.alert-success

কোনো ডিফল্ট ক্লাস নেই

সতর্কতার ডিফল্ট ক্লাস নেই, শুধুমাত্র বেস এবং মডিফায়ার ক্লাস। একটি ডিফল্ট ধূসর সতর্কতা খুব বেশি অর্থবোধ করে না, তাই আপনাকে প্রাসঙ্গিক ক্লাসের মাধ্যমে একটি প্রকার নির্দিষ্ট করতে হবে। সাফল্য, তথ্য, সতর্কতা বা বিপদ থেকে বেছে নিন।

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

বাতিলযোগ্য সতর্কতা

একটি ঐচ্ছিক .alert-dismissibleএবং বন্ধ বোতাম যোগ করে যেকোনো সতর্কতা তৈরি করুন।

জাভাস্ক্রিপ্ট সতর্কতা প্লাগইন প্রয়োজন

সম্পূর্ণরূপে কাজ করার জন্য, বাতিলযোগ্য সতর্কতা, আপনাকে অবশ্যই সতর্কতা JavaScript প্লাগইন ব্যবহার করতে হবে ।

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

সমস্ত ডিভাইস জুড়ে সঠিক আচরণ নিশ্চিত করুন

ডেটা অ্যাট্রিবিউট <button>সহ উপাদানটি ব্যবহার করতে ভুলবেন না ।data-dismiss="alert"

.alert-linkযেকোনো সতর্কতার মধ্যে দ্রুত মিলিত রঙিন লিঙ্কগুলি প্রদান করতে ইউটিলিটি ক্লাস ব্যবহার করুন ।

<div class="alert alert-success" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
  <a href="#" class="alert-link">...</a>
</div>

অগ্রগতি বার

সহজ কিন্তু নমনীয় অগ্রগতি বার সহ একটি কর্মপ্রবাহ বা কর্মের অগ্রগতি সম্পর্কে আপ-টু-ডেট প্রতিক্রিয়া প্রদান করুন।

ক্রস ব্রাউজার সামঞ্জস্য

অগ্রগতি বারগুলি তাদের কিছু প্রভাব অর্জন করতে CSS3 রূপান্তর এবং অ্যানিমেশন ব্যবহার করে। এই বৈশিষ্ট্যগুলি ইন্টারনেট এক্সপ্লোরার 9 এবং ফায়ারফক্সের নীচের বা পুরানো সংস্করণগুলিতে সমর্থিত নয়। Opera 12 অ্যানিমেশন সমর্থন করে না।

বিষয়বস্তু নিরাপত্তা নীতি (CSP) সামঞ্জস্যপূর্ণ

যদি আপনার ওয়েবসাইটে একটি বিষয়বস্তু নিরাপত্তা নীতি (CSP) থাকে যা অনুমতি দেয় না , তাহলে আপনি নীচের উদাহরণগুলিতে দেখানো হিসাবে প্রগতি বারের প্রস্থ সেট করতে ইনলাইন বৈশিষ্ট্যগুলি style-src 'unsafe-inline'ব্যবহার করতে পারবেন না ৷ styleকঠোর সিএসপিগুলির সাথে সামঞ্জস্যপূর্ণ প্রস্থগুলি সেট করার বিকল্প পদ্ধতিগুলির মধ্যে রয়েছে সামান্য কাস্টম জাভাস্ক্রিপ্ট (সেটি সেট element.style.widthকরে) বা কাস্টম CSS ক্লাস ব্যবহার করা।

মৌলিক উদাহরণ

ডিফল্ট অগ্রগতি বার।

60% সম্পূর্ণ
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

লেবেল সহ

একটি দৃশ্যমান শতাংশ দেখানোর জন্য অগ্রগতি বারের মধ্যে থেকে ক্লাস <span>সহ সরান ।.sr-only

৬০%
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>

লেবেল পাঠ্যটি কম শতাংশের জন্যও সুস্পষ্ট থাকে তা নিশ্চিত করতে min-width, অগ্রগতি বারে একটি যোগ করার কথা বিবেচনা করুন।

0%
2%
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
    0%
  </div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
    2%
  </div>
</div>

প্রাসঙ্গিক বিকল্প

অগ্রগতি বারগুলি সামঞ্জস্যপূর্ণ শৈলীর জন্য একই বোতাম এবং সতর্কতা ক্লাসের কিছু ব্যবহার করে।

40% সম্পূর্ণ (সফল)
20% সম্পূর্ণ
60% সম্পূর্ণ (সতর্কতা)
80% সম্পূর্ণ (বিপদ)
<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

ডোরাকাটা

একটি ডোরাকাটা প্রভাব তৈরি করতে একটি গ্রেডিয়েন্ট ব্যবহার করে। IE9 এবং নীচে উপলব্ধ নয়।

40% সম্পূর্ণ (সফল)
20% সম্পূর্ণ
60% সম্পূর্ণ (সতর্কতা)
80% সম্পূর্ণ (বিপদ)
<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

অ্যানিমেটেড

ডান থেকে বামে স্ট্রাইপগুলি অ্যানিমেট করতে .activeযোগ করুন । .progress-bar-stripedIE9 এবং নীচে উপলব্ধ নয়।

45% সম্পূর্ণ
<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="sr-only">45% Complete</span>
  </div>
</div>

স্তুপীকৃত

.progressতাদের স্ট্যাক করতে একই মধ্যে একাধিক বার রাখুন ।

35% সম্পূর্ণ (সফল)
20% সম্পূর্ণ (সতর্কতা)
10% সম্পূর্ণ (বিপদ)
<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

মিডিয়া অবজেক্ট

বিভিন্ন ধরণের উপাদান (যেমন ব্লগ মন্তব্য, টুইট ইত্যাদি) তৈরির জন্য বিমূর্ত বস্তু শৈলী যা পাঠ্য বিষয়বস্তুর পাশাপাশি বাম-বা ডান-সারিবদ্ধ চিত্র বৈশিষ্ট্যযুক্ত।

ডিফল্ট মিডিয়া

ডিফল্ট মিডিয়া একটি বিষয়বস্তু ব্লকের বাম বা ডানে একটি মিডিয়া বস্তু (ছবি, ভিডিও, অডিও) প্রদর্শন করে।

মিডিয়া শিরোনাম

Cras বসে amet nibh libero, in gravida nulla. নুলা ভেল মেটাস স্কেলরিস্ক অ্যান্টি সোলিসিটুডিন কমোডো। Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. ডনেক ল্যাসিনিয়া কঙ্গু ফেলিস ইন ফ্যাসিবাস।

মিডিয়া শিরোনাম

Cras বসে amet nibh libero, in gravida nulla. নুলা ভেল মেটাস স্কেলরিস্ক অ্যান্টি সোলিসিটুডিন কমোডো। Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. ডনেক ল্যাসিনিয়া কঙ্গু ফেলিস ইন ফ্যাসিবাস।

নেস্টেড মিডিয়া শিরোনাম

Cras বসে amet nibh libero, in gravida nulla. নুলা ভেল মেটাস স্কেলরিস্ক অ্যান্টি সোলিসিটুডিন কমোডো। Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. ডনেক ল্যাসিনিয়া কঙ্গু ফেলিস ইন ফ্যাসিবাস।

মিডিয়া শিরোনাম

Cras বসে amet nibh libero, in gravida nulla. নুলা ভেল মেটাস স্কেলরিস্ক অ্যান্টি সোলিসিটুডিন কমোডো। Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

মিডিয়া শিরোনাম

Cras বসে amet nibh libero, in gravida nulla. নুলা ভেল মেটাস স্কেলরিস্ক অ্যান্টি সোলিসিটুডিন কমোডো। Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

ক্লাস .pull-leftএবং .pull-rightএছাড়াও বিদ্যমান এবং পূর্বে মিডিয়া উপাদানের অংশ হিসাবে ব্যবহার করা হয়েছিল, কিন্তু v3.3.0 হিসাবে সেই ব্যবহারের জন্য বঞ্চিত করা হয়েছে। এগুলি প্রায় সমতুল্য .media-leftএবং এইচটিএমএল-এর পরে স্থাপন .media-rightকরা .media-rightউচিত ।.media-body

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

ইমেজ বা অন্যান্য মিডিয়া উপরে, মাঝখানে বা নীচে সারিবদ্ধ করা যেতে পারে। ডিফল্ট শীর্ষ সারিবদ্ধ.

শীর্ষ সারিবদ্ধ মিডিয়া

Cras বসে amet nibh libero, in gravida nulla. নুলা ভেল মেটাস স্কেলরিস্ক অ্যান্টি সোলিসিটুডিন কমোডো। Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. ডনেক ল্যাসিনিয়া কঙ্গু ফেলিস ইন ফ্যাসিবাস।

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

মধ্যম সারিবদ্ধ মিডিয়া

Cras বসে amet nibh libero, in gravida nulla. নুলা ভেল মেটাস স্কেলরিস্ক অ্যান্টি সোলিসিটুডিন কমোডো। Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. ডনেক ল্যাসিনিয়া কঙ্গু ফেলিস ইন ফ্যাসিবাস।

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

নীচে সারিবদ্ধ মিডিয়া

Cras বসে amet nibh libero, in gravida nulla. নুলা ভেল মেটাস স্কেলরিস্ক অ্যান্টি সোলিসিটুডিন কমোডো। Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. ডনেক ল্যাসিনিয়া কঙ্গু ফেলিস ইন ফ্যাসিবাস।

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

<div class="media">
  <div class="media-left media-middle">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Middle aligned media</h4>
    ...
  </div>
</div>

মিডিয়া তালিকা

একটু অতিরিক্ত মার্কআপ দিয়ে, আপনি তালিকার ভিতরে মিডিয়া ব্যবহার করতে পারেন (মন্তব্য থ্রেড বা নিবন্ধের তালিকার জন্য দরকারী)।

  • মিডিয়া শিরোনাম

    Cras বসে amet nibh libero, in gravida nulla. নুলা ভেল মেটাস স্কেলরিস্ক অ্যান্টি সোলিসিটুডিন কমোডো। Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    নেস্টেড মিডিয়া শিরোনাম

    Cras বসে amet nibh libero, in gravida nulla. নুলা ভেল মেটাস স্কেলরিস্ক অ্যান্টি সোলিসিটুডিন কমোডো। Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    নেস্টেড মিডিয়া শিরোনাম

    Cras বসে amet nibh libero, in gravida nulla. নুলা ভেল মেটাস স্কেলরিস্ক অ্যান্টি সোলিসিটুডিন কমোডো। Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    নেস্টেড মিডিয়া শিরোনাম

    Cras বসে amet nibh libero, in gravida nulla. নুলা ভেল মেটাস স্কেলরিস্ক অ্যান্টি সোলিসিটুডিন কমোডো। Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
<ul class="media-list">
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img class="media-object" src="..." alt="...">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
    </div>
  </li>
</ul>

তালিকা গ্রুপ

তালিকা গোষ্ঠীগুলি কেবল উপাদানগুলির সাধারণ তালিকাই নয়, কাস্টম সামগ্রী সহ জটিলগুলি প্রদর্শনের জন্য একটি নমনীয় এবং শক্তিশালী উপাদান।

মৌলিক উদাহরণ

সবচেয়ে মৌলিক তালিকা গোষ্ঠীটি কেবল তালিকা আইটেম এবং যথাযথ ক্লাস সহ একটি ক্রমবিহীন তালিকা। অনুসরণ করা বিকল্পগুলি বা প্রয়োজন অনুসারে আপনার নিজস্ব CSS দিয়ে এটি তৈরি করুন।

  • ক্রাস জাস্টো অডিও
  • ড্যাপিবাস এসি ফ্যাসিলিসিস ইন
  • মরবি লিও রিসাস
  • পোর্টা এসি কনসেক্টেতুর এসি
  • ইরোস এ ভেস্টিবুলাম
<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

ব্যাজ

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

  • 14ক্রাস জাস্টো অডিও
  • 2ড্যাপিবাস এসি ফ্যাসিলিসিস ইন
  • 1মরবি লিও রিসাস
<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

লিঙ্ক করা আইটেম

তালিকার আইটেমগুলির পরিবর্তে অ্যাঙ্কর ট্যাগ ব্যবহার করে তালিকাভুক্ত আইটেমগুলিকে লিঙ্ক করুন (যার <div>পরিবর্তে একটি অভিভাবকও বোঝায় <ul>)। প্রতিটি উপাদানের চারপাশে পৃথক পিতামাতার প্রয়োজন নেই।

<div class="list-group">
  <a href="#" class="list-group-item active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

বোতাম আইটেম

তালিকা গোষ্ঠীর আইটেমগুলি তালিকা আইটেমগুলির পরিবর্তে বোতাম হতে পারে (এর অর্থ একটি <div>এর পরিবর্তে একটি অভিভাবকও <ul>)। প্রতিটি উপাদানের চারপাশে পৃথক পিতামাতার প্রয়োজন নেই। এখানে স্ট্যান্ডার্ড .btnক্লাস ব্যবহার করবেন না।

<div class="list-group">
  <button type="button" class="list-group-item">Cras justo odio</button>
  <button type="button" class="list-group-item">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item">Morbi leo risus</button>
  <button type="button" class="list-group-item">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item">Vestibulum at eros</button>
</div>

অক্ষম আইটেম

অক্ষম দেখাতে এটিকে ধূসর .disabledকরতে a এ যোগ করুন ।.list-group-item

<div class="list-group">
  <a href="#" class="list-group-item disabled">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

প্রাসঙ্গিক ক্লাস

স্টাইল তালিকা আইটেম, ডিফল্ট বা লিঙ্ক করা প্রাসঙ্গিক ক্লাস ব্যবহার করুন. এছাড়াও .activeরাজ্য অন্তর্ভুক্ত.

  • ড্যাপিবাস এসি ফ্যাসিলিসিস ইন
  • ক্রাস বসে আমেট নিভ লিবারো
  • পোর্টা এসি কনসেক্টেতুর এসি
  • ইরোস এ ভেস্টিবুলাম
<ul class="list-group">
  <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
  <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
  <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
  <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>

কাস্টম কন্টেন্ট

এর মধ্যে প্রায় যেকোনো HTML যোগ করুন, এমনকি নিচের মতো লিঙ্ক করা তালিকার গোষ্ঠীর জন্যও।

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>

প্যানেল

যদিও সবসময় প্রয়োজন হয় না, মাঝে মাঝে আপনাকে আপনার DOM একটি বাক্সে রাখতে হবে। এই পরিস্থিতিতে, প্যানেল উপাদান চেষ্টা করুন.

মৌলিক উদাহরণ

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

মৌলিক প্যানেলের উদাহরণ
<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

শিরোনাম সহ প্যানেল

সহজেই আপনার প্যানেলে একটি শিরোনাম ধারক যোগ করুন .panel-heading। আপনি যেকোনও অন্তর্ভুক্ত করতে পারেন <h1>- একটি প্রি-স্টাইল করা শিরোনাম যোগ করতে <h6>একটি ক্লাস সহ । যাইহোক, - এর .panel-titleফন্টের আকারগুলি দ্বারা ওভাররাইড করা হয়েছে ।<h1><h6>.panel-heading

সঠিক লিঙ্ক রঙের জন্য, শিরোনামের মধ্যে লিঙ্কগুলি স্থাপন করতে ভুলবেন না .panel-title

শিরোনাম ছাড়া প্যানেল শিরোনাম
প্যানেল বিষয়বস্তু

প্যানেল শিরোনাম

প্যানেল বিষয়বস্তু
<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

মোড়ানো বোতাম বা সেকেন্ডারি .panel-footerটেক্সট মনে রাখবেন যে প্যানেল ফুটারগুলি প্রাসঙ্গিক বৈচিত্রগুলি ব্যবহার করার সময় রঙ এবং সীমানা উত্তরাধিকারী হয় না কারণ সেগুলি অগ্রভাগে থাকার জন্য নয়৷

প্যানেল বিষয়বস্তু
<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

প্রাসঙ্গিক বিকল্প

অন্যান্য উপাদানগুলির মতো, যেকোনও প্রাসঙ্গিক স্টেট ক্লাস যোগ করে একটি প্যানেলকে এ��টি নির্দিষ্ট প্রসঙ্গে আরও অর্থবহ করে তোলে৷

প্যানেল শিরোনাম

প্যানেল বিষয়বস্তু

প্যানেল শিরোনাম

প্যানেল বিষয়বস্তু

প্যানেল শিরোনাম

প্যানেল বিষয়বস্তু

প্যানেল শিরোনাম

প্যানেল বিষয়বস্তু

প্যানেল শিরোনাম

প্যানেল বিষয়বস্তু
<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>

টেবিল সহ

.tableএকটি বিজোড় নকশার জন্য একটি প্যানেলের মধ্যে যেকোন অ-সীমানা যুক্ত করুন ৷ যদি একটি থাকে .panel-body, আমরা আলাদা করার জন্য টেবিলের শীর্ষে একটি অতিরিক্ত সীমানা যোগ করি।

প্যানেল শিরোনাম

কিছু ডিফল্ট প্যানেল বিষয়বস্তু এখানে। নুল্লা ভিটা এলিট লিবারো, একটা ফারেত্র আগু। Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo ​​quam. Pellentesque ornare Sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

# নামের প্রথম অংশ নামের শেষাংশ ব্যবহারকারীর নাম
1 মার্ক অটো @এমডিও
2 জ্যাকব থর্নটন @ফ্যাট
3 ল্যারি পাখি @টুইটার
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

যদি কোন প্যানেল বডি না থাকে, তাহলে উপাদানটি প্যানেল হেডার থেকে টেবিলে কোনো বাধা ছাড়াই চলে যায়।

প্যানেল শিরোনাম
# নামের প্রথম অংশ নামের শেষাংশ ব্যবহারকারীর নাম
1 মার্ক অটো @এমডিও
2 জ্যাকব থর্নটন @ফ্যাট
3 ল্যারি পাখি @টুইটার
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

তালিকা গ্রুপ সঙ্গে

যেকোনো প্যানেলের মধ্যে পূর্ণ-প্রস্থের তালিকার গোষ্ঠীগুলিকে সহজেই অন্তর্ভুক্ত করুন।

প্যানেল শিরোনাম

কিছু ডিফল্ট প্যানেল বিষয়বস্তু এখানে। নুল্লা ভিটা এলিট লিবারো, একটা ফারেত্র আগু। Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo ​​quam. Pellentesque ornare Sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

  • ক্রাস জাস্টো অডিও
  • ড্যাপিবাস এসি ফ্যাসিলিসিস ইন
  • মরবি লিও রিসাস
  • পোর্টা এসি কনসেক্টেতুর এসি
  • ইরোস এ ভেস্টিবুলাম
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- List group -->
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

প্রতিক্রিয়াশীল এম্বেড

ব্রাউজারগুলিকে তাদের থাকা ব্লকের প্রস্থের উপর ভিত্তি করে ভিডিও বা স্লাইডশোর মাত্রা নির্ধারণ করার অনুমতি দেয় একটি অভ্যন্তরীণ অনুপাত তৈরি করে যা যেকোনো ডিভাইসে সঠিকভাবে স্কেল করবে।

নিয়মগুলি সরাসরি <iframe>, <embed>, <video>, এবং <object>উপাদানগুলিতে প্রয়োগ করা হয়; .embed-responsive-itemআপনি যখন অন্যান্য গুণাবলীর জন্য স্টাইলিং মেলতে চান তখন ঐচ্ছিকভাবে একটি স্পষ্ট বংশধর শ্রেণী ব্যবহার করুন।

প্রো-টিপ! আমরা আপনার জন্য এটি ওভাররাইড করার কারণে আপনাকে frameborder="0"আপনার গুলি অন্তর্ভুক্ত করার দরকার নেই ৷<iframe>

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

ওয়েলস

ডিফল্ট ভাল

একটি ইনসেট প্রভাব দিতে একটি উপাদানের উপর একটি সাধারণ প্রভাব হিসাবে ভাল ব্যবহার করুন।

দেখ, আমি একটা কূপে আছি!
<div class="well">...</div>

ঐচ্ছিক ক্লাস

দুটি ঐচ্ছিক পরিবর্তনকারী ক্লাস সহ প্যাডিং এবং বৃত্তাকার কোণগুলি নিয়ন্ত্রণ করুন।

দেখো, আমি একটা বড় কূপে আছি!
<div class="well well-lg">...</div>
দেখো, আমি একটা ছোট কূপে আছি!
<div class="well well-sm">...</div>