আইকনোগ্রাফি, ড্রপডাউন, ইনপুট গ্রুপ, নেভিগেশন, সতর্কতা এবং আরও অনেক কিছু প্রদানের জন্য তৈরি এক ডজনেরও বেশি পুনঃব্যবহারযোগ্য উপাদান।
গ্লিফিকন
উপলব্ধ গ্লিফ
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
আপনার নির্দিষ্ট ডেভেলপমেন্ট সেটআপের জন্য সবচেয়ে উপযুক্ত যে কোন বিকল্প ব্যবহার করুন।
অ্যাক্সেসযোগ্য আইকন
সহায়ক প্রযুক্তির আধুনিক সংস্করণগুলি CSS উৎপন্ন সামগ্রীর পাশাপাশি নির্দিষ্ট ইউনিকোড অক্ষর ঘোষণা করবে। স্ক্রীন রিডারগুলিতে অনাকাঙ্ক্ষিত এবং বিভ্রান্তিকর আউটপুট এড়াতে (বিশেষ করে যখন আইকনগুলি সম্পূর্ণরূপে সাজসজ্জার জন্য ব্যবহার করা হয়), আমরা এগুলিকে aria-hidden="true"বৈশিষ্ট্য দিয়ে লুকিয়ে রাখি।
আপনি যদি অর্থ বোঝাতে একটি আইকন ব্যবহার করেন (শুধুমাত্র একটি আলংকারিক উপাদান হিসাবে নয়), নিশ্চিত করুন যে এই অর্থটি সহায়ক প্রযুক্তিতেও জানানো হয়েছে – উদাহরণস্বরূপ, .sr-onlyক্লাসের সাথে দৃশ্যত লুকানো অতিরিক্ত সামগ্রী অন্তর্ভুক্ত করুন।
আপনি যদি অন্য কোন পাঠ্য ছাড়াই নিয়ন্ত্রণ তৈরি করেন (যেমন <button>শুধুমাত্র একটি আইকন থাকে), তাহলে নিয়ন্ত্রণের উদ্দেশ্য সনাক্ত করার জন্য আপনাকে সর্বদা বিকল্প সামগ্রী প্রদান করা উচিত, যাতে এটি সহায়ক প্রযুক্তির ব্যবহারকারীদের কাছে উপলব্ধি করতে পারে। এই ক্ষেত্রে, আপনি aria-labelনিয়ন্ত্রণ নিজেই একটি বৈশিষ্ট্য যোগ করতে পারেন.
উদাহরণ
একটি টুলবার, নেভিগেশন, বা প্রিপেন্ড করা ফর্ম ইনপুটগুলির জন্য বোতাম, বোতাম গ্রুপগুলিতে এগুলি ব্যবহার করুন।
সহায়ক প্রযুক্তির ব্যবহারকারীদের কাছে এই ইঙ্গিতটি জানাতে অতিরিক্ত পাঠ্য সহ এটি একটি ত্রুটি বার্তা বোঝাতে একটি সতর্কতায় ব্যবহৃত একটি আইকন ৷.sr-only
ত্রুটি:একটি বৈধ ইমেইল ঠিকানা লিখুন
ড্রপডাউন
লিঙ্কের তালিকা প্রদর্শনের জন্য টগলযোগ্য, প্রাসঙ্গিক মেনু। ড্রপডাউন জাভাস্ক্রিপ্ট প্লাগইন দিয়ে ইন্টারেক্টিভ তৈরি করা হয়েছে ।
উদাহরণ
ড্রপডাউনের ট্রিগার এবং ড্রপডাউন মেনুর মধ্যে মোড়ানো .dropdown, বা অন্য একটি উপাদান যা ঘোষণা করে position: relative;। তারপর মেনুর HTML যোগ করুন।
ডিফল্টরূপে, একটি ড্রপডাউন মেনু স্বয়ংক্রিয়ভাবে 100% উপরে থেকে এবং তার পিতামাতার বাম পাশে অবস্থান করে। ড্রপডাউন মেনুটি ডানদিকে সারিবদ্ধ করুন এ যোগ করুন .dropdown-menu-right।.dropdown-menu
অতিরিক্ত অবস্থানের প্রয়োজন হতে পারে
ড্রপডাউনগুলি স্বয়ংক্রিয়ভাবে নথির স্বাভাবিক প্রবাহের মধ্যে CSS এর মাধ্যমে অবস্থান করে। এর মানে হল ড্রপডাউনগুলি নির্দিষ্ট বৈশিষ্ট্য সহ অভিভাবকদের দ্বারা ক্রপ করা হতে পারে overflowবা ভিউপোর্টের সীমার বাইরে প্রদর্শিত হতে পারে৷ আপনার নিজের থেকে এই সমস্যাগুলি যেমন তারা উদ্ভূত হয় তা সমাধান করুন।
অপ্রচলিত .pull-rightপ্রান্তিককরণ
v3.1.0 অনুযায়ী, আমরা .pull-rightড্রপডাউন মেনুতে অবমূল্যায়ন করেছি। একটি মেনু ডান-সারিবদ্ধ করতে, ব্যবহার করুন .dropdown-menu-right। ন্যাভবারে ডান-সারিবদ্ধ ন্যাভি উপাদানগুলি মেনুটিকে স্বয়ংক্রিয়ভাবে সারিবদ্ধ করতে এই শ্রেণীর একটি মিক্সিন সংস্করণ ব্যবহার করে। এটি ওভাররাইড করতে, ব্যবহার করুন .dropdown-menu-left।
হেডার
যেকোন ড্রপডাউন মেনুতে কর্মের লেবেল বিভাগের জন্য একটি শিরোনাম যোগ করুন।
বোতাম গোষ্ঠীর সাথে একক লাইনে একসাথে বোতামগুলির একটি সিরিজ গ্রুপ করুন। আমাদের বোতাম প্লাগইনের সাথে ঐচ্ছিক জাভাস্ক্রিপ্ট রেডিও এবং চেকবক্স শৈলী আচরণ যোগ করুন ।
টুলটিপ এবং বোতাম গ্রুপে পপভার বিশেষ সেটিং প্রয়োজন
একটি এর মধ্যে থাকা উপাদানগুলিতে টুলটিপ বা পপওভার ব্যবহার করার .btn-groupসময়, আপনাকে অবাঞ্ছিত পার্শ্বপ্রতিক্রিয়াগুলি এড়াতে বিকল্পটি নির্দিষ্ট করতে হবে container: 'body'(যেমন উপাদানটি আরও প্রশস্ত হওয়া এবং/অথবা টুলটিপ বা পপওভার ট্রিগার করা হলে তার গোলাকার কোণগুলি হারানো)।
সঠিক roleএবং একটি লেবেল প্রদান নিশ্চিত করুন
সহায়ক প্রযুক্তির জন্য - যেমন স্ক্রিন রিডার - বোঝাতে যে বোতামগুলির একটি সিরিজ গ্রুপ করা হয়েছে, একটি উপযুক্ত roleবৈশিষ্ট্য প্রদান করা প্রয়োজন। বোতাম গ্রুপের জন্য, এটি হবে role="group", যখন টুলবারে একটি থাকা উচিত role="toolbar"।
একটি ব্যতিক্রম হল এমন গোষ্ঠী যেখানে শুধুমাত্র একটি একক নিয়ন্ত্রণ থাকে (উদাহরণস্বরূপ উপাদান সহ ন্যায্য বোতাম গ্রুপ<button> ) বা একটি ড্রপডাউন।
উপরন্তু, গ্রুপ এবং টুলবারগুলিকে একটি সুস্পষ্ট লেবেল দেওয়া উচিত, কারণ বেশিরভাগ সহায়ক প্রযুক্তি অন্যথায় সঠিক roleবৈশিষ্ট্য থাকা সত্ত্বেও তাদের ঘোষণা করবে না। এখানে প্রদত্ত উদাহরণগুলিতে, আমরা ব্যবহার করি aria-label, কিন্তু বিকল্পগুলি যেমন aria-labelledbyব্যবহার করা যেতে পারে।
মৌলিক উদাহরণ
.btnসঙ্গে বোতাম একটি সিরিজ মোড়ানো .btn-group.
বোতাম টুলবার
আরো জটিল উপাদানের জন্য <div class="btn-group">a এর সেটগুলিকে একত্রিত করুন।<div class="btn-toolbar">
সাইজিং
একটি গ্রুপের প্রতিটি বোতামে বোতাম সাইজিং ক্লাস প্রয়োগ করার পরিবর্তে, একাধিক গ্রুপ নেস্ট করার সময় সহ .btn-group-*প্রতিটিতে যোগ করুন।.btn-group
বাসা বাঁধে
আপনি যখন বোতামগুলির একটি সিরিজের সাথে মিশ্রিত ড্রপডাউন মেনু চান তখন .btn-groupঅন্যটির মধ্যে একটি রাখুন ।.btn-group
এর প্যারেন্টের পুরো প্রস্থকে বিস্তৃত করার জন্য বোতামগুলির একটি গ্রুপ সমান আকারে প্রসারিত করুন। বোতাম গ্রুপের মধ্যে বোতাম ড্রপডাউনগুলির সাথেও কাজ করে।
সীমানা হ্যান্ডলিং
বোতামগুলিকে ন্যায্যতা দেওয়ার জন্য ব্যবহৃত নির্দিষ্ট HTML এবং CSS এর কারণে (যেমন display: table-cell), তাদের মধ্যে সীমানা দ্বিগুণ হয়। নিয়মিত বোতাম গোষ্ঠীতে, margin-left: -1pxসীমানাগুলি সরানোর পরিবর্তে স্ট্যাক করতে ব্যবহৃত হয়। যাইহোক, marginএর সাথে কাজ করে না display: table-cell। ফলস্বরূপ, বুটস্ট্র্যাপে আপনার কাস্টমাইজেশনের উপর নির্ভর করে, আপনি সীমানা অপসারণ বা পুনরায় রঙ করতে চাইতে পারেন।
IE8 এবং সীমানা
ইন্টারনেট এক্সপ্লোরার 8 একটি ন্যায্য বোতাম গ্রুপে বোতামগুলিতে সীমানা রেন্ডার করে না, তা চালু হোক <a>বা <button>উপাদান। এটি কাছাকাছি পেতে, প্রতিটি বোতাম অন্য একটি মধ্যে মোড়ানো .btn-group.
যদি <a>উপাদানগুলি বোতাম হিসাবে কাজ করতে ব্যবহৃত হয় - বর্তমান পৃষ্ঠার মধ্যে অন্য নথি বা বিভাগে নেভিগেট করার পরিবর্তে - ইন-পেজ কার্যকারিতা ট্রিগার করে - তাদেরও একটি উপযুক্ত দেওয়া উচিত role="button"।
<button>উপাদান সঙ্গে
<button>উপাদানগুলির সাথে ন্যায্য বোতাম গোষ্ঠীগুলি ব্যবহার করতে , আপনাকে অবশ্যই প্রতিটি বোতামকে একটি বোতাম গ্রুপে মোড়ানো উচিত । বেশিরভাগ ব্রাউজার উপাদানগুলির ন্যায্যতার জন্য আমাদের CSS সঠিকভাবে প্রয়োগ করে না <button>, কিন্তু যেহেতু আমরা বোতাম ড্রপডাউন সমর্থন করি, তাই আমরা এটিকে ঘিরে কাজ করতে পারি।
বোতাম ড্রপডাউন
একটি ড্রপডাউন মেনু ট্রিগার করার জন্য যেকোন বোতামটি একটি এর মধ্যে রেখে .btn-groupএবং সঠিক মেনু মার্কআপ প্রদান করে ব্যবহার করুন।
প্লাগইন নির্ভরতা
বোতাম ড্রপডাউনগুলির জন্য আপনার বুটস্ট্র্যাপের সংস্করণে ড্রপডাউন প্লাগইন অন্তর্ভুক্ত করা প্রয়োজন।
একক বোতাম ড্রপডাউন
কিছু মৌলিক মার্কআপ পরিবর্তনের সাথে একটি বোতামকে ড্রপডাউন টগলে পরিণত করুন।
যেকোনো টেক্সট-ভিত্তিক এর আগে, পরে বা উভয় পাশে টেক্সট বা বোতাম যোগ করে ফর্ম নিয়ন্ত্রণ প্রসারিত করুন <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
আমরা একক ইনপুট গ্রুপে একাধিক ফর্ম-নিয়ন্ত্রণ সমর্থন করি না।
সাইজিং
আপেক্ষিক ফর্ম সাইজিং ক্লাসগুলি .input-groupনিজেই যোগ করুন এবং এর মধ্যে থাকা বিষয়বস্তুগুলি স্বয়ংক্রিয়ভাবে আকার পরিবর্তন করবে - প্রতিটি উপাদানে ফর্ম নিয়ন্ত্রণ আকারের ক্লাসগুলি পুনরাবৃত্তি করার প্রয়োজন নেই৷
চেকবক্স এবং রেডিও অ্যাডঅন
পাঠ্যের পরিবর্তে একটি ইনপুট গ্রুপের অ্যাডঅনের মধ্যে যেকোনো চেকবক্স বা রেডিও বিকল্প রাখুন।
বোতাম অ্যাডঅন
ইনপুট গোষ্ঠীর বোতামগুলি কিছুটা আলাদা এবং এর জন্য একটি অতিরিক্ত স্তরের নেস্টিং প্রয়োজন৷ এর পরিবর্তে , আপনাকে বোতামগুলি মোড়ানোর .input-group-addonজন্য ব্যবহার করতে হবে । .input-group-btnডিফল্ট ব্রাউজার শৈলীর কারণে এটি প্রয়োজন যা ওভাররাইড করা যাবে না।
ড্রপডাউন সহ বোতাম
সেগমেন্টেড বোতাম
একাধিক বোতাম
যদিও আপনার প্রতি পাশে শুধুমাত্র একটি অ্যাড-অন থাকতে পারে, তবে একটির ভিতরে একাধিক বোতাম থাকতে পারে .input-group-btn।
ন্যাভি
বুটস্ট্র্যাপে উপলব্ধ Navs শেয়ার্ড মার্কআপ, বেস .navক্লাস থেকে শুরু করে, সেইসাথে শেয়ার্ড স্টেট। প্রতিটি শৈলীর মধ্যে স্যুইচ করতে মডিফায়ার ক্লাস অদলবদল করুন।
ট্যাব প্যানেলের জন্য navs ব্যবহার করার জন্য JavaScript ট্যাব প্লাগইন প্রয়োজন
ট্যাবযোগ্য এলাকা সহ ট্যাবের জন্য, আপনাকে অবশ্যই ট্যাবগুলি JavaScript প্লাগইন ব্যবহার করতে হবে । মার্কআপের জন্য অতিরিক্ত roleএবং ARIA বৈশিষ্ট্যেরও প্রয়োজন হবে – আরও বিশদ বিবরণের জন্য প্লাগইনের উদাহরণ মার্কআপটি দেখুন।
নেভিগেশন অ্যাক্সেসযোগ্য হিসাবে ব্যবহৃত navs করুন
আপনি যদি একটি নেভিগেশন বার প্রদান করতে navs ব্যবহার করেন, তাহলে role="navigation"এর সবচেয়ে যৌক্তিক প্যারেন্ট কন্টেনারে একটি যোগ করতে ভুলবেন না বা পুরো নেভিগেশনের চারপাশে <ul>একটি উপাদান মোড়ানো । <nav>ভূমিকাটিকে <ul>নিজের সাথে যুক্ত করবেন না, কারণ এটি সহায়ক প্রযুক্তির দ্বারা একটি প্রকৃত তালিকা হিসাবে ঘোষণা করা থেকে বাধা দেবে৷
ট্যাব
নোট করুন .nav-tabsক্লাসের জন্য .navবেস ক্লাস প্রয়োজন।
এর সাথে 768px এর চেয়ে চওড়া স্ক্রীনে সহজেই ট্যাব বা বড়িগুলি তাদের অভিভাবকের সমান প্রস্থের তৈরি করুন .nav-justified৷ ছোট স্ক্রিনে, নেভি লিঙ্কগুলি স্ট্যাক করা হয়।
ন্যায়সঙ্গত নেভিবার নেভি লিঙ্কগুলি বর্তমানে সমর্থিত নয়৷
সাফারি এবং প্রতিক্রিয়াশীল ন্যায্য ন্যাভি
v9.1.2 অনুসারে, Safari একটি বাগ প্রদর্শন করে যেখানে আপনার ব্রাউজারকে অনুভূমিকভাবে আকার পরিবর্তন করা হলে ন্যায্য ন্যাভিতে রেন্ডারিং ত্রুটি দেখা দেয় যা রিফ্রেশ করার পরে সাফ করা হয়। এই বাগটি ন্যায্য NAV উদাহরণেও দেখানো হয়েছে ।
Navbars হল প্রতিক্রিয়াশীল মেটা উপাদান যা আপনার অ্যাপ্লিকেশন বা সাইটের নেভিগেশন হেডার হিসেবে কাজ করে। মোবাইল ভিউতে এগুলি সঙ্কুচিত হতে শুরু করে (এবং টগলযোগ্য) এবং উপলব্ধ ভিউপোর্টের প্রস্থ বৃদ্ধির সাথে সাথে অনুভূমিক হয়ে যায়।
ন্যায়সঙ্গত নেভিবার নেভি লিঙ্কগুলি বর্তমানে সমর্থিত নয়৷
উপচে পড়া বিষয়বস্তু
যেহেতু বুটস্ট্র্যাপ জানে না আপনার ন্যাভিবারে কন্টেন্টের কতটা জায়গা প্রয়োজন, তাই আপনি একটি দ্বিতীয় সারিতে কন্টেন্ট মোড়ানো নিয়ে সমস্যায় পড়তে পারেন। এটি সমাধান করতে, আপনি করতে পারেন:
যে বিন্দুতে আপনার নেভিবারটি ভেঙে যাওয়া এবং অনুভূমিক মোডের মধ্যে স্যুইচ করে তা পরিবর্তন করুন। @grid-float-breakpointভেরিয়েবল কাস্টমাইজ করুন বা আপনার নিজস্ব মিডিয়া ক্যোয়ারী যোগ করুন।
জাভাস্ক্রিপ্ট প্লাগইন প্রয়োজন
যদি জাভাস্ক্রিপ্ট অক্ষম করা হয় এবং ভিউপোর্টটি যথেষ্ট সংকীর্ণ হয় যে নেভিবারটি ভেঙে যায়, তাহলে নেভিবারটি প্রসারিত করা এবং এর মধ্যে বিষয়বস্তু দেখা অসম্ভব .navbar-collapse।
প্রতিক্রিয়াশীল navbar-এর জন্য আপনার বুটস্ট্র্যাপের সংস্করণে ধ্বস প্লাগইন অন্তর্ভুক্ত করা প্রয়োজন।
ধসে পড়া মোবাইল ন্যাভবার ব্রেকপয়েন্ট পরিবর্তন করা হচ্ছে
ভিউপোর্টের চেয়ে সংকীর্ণ হলে নেভিবার তার উল্লম্ব মোবাইল ভিউতে ভেঙে পড়ে এবং @grid-float-breakpointযখন ভিউপোর্টটি কমপক্ষে @grid-float-breakpointপ্রস্থে থাকে তখন এটি তার অনুভূমিক নন-মোবাইল ভিউতে প্রসারিত হয়। যখন নেভিবার ভেঙে যায়/প্রসারিত হয় তখন নিয়ন্ত্রণ করতে কম উৎসে এই ভেরিয়েবলটিকে সামঞ্জস্য করুন। ডিফল্ট মান হল 768px(সবচেয়ে ছোট "ছোট" বা "ট্যাবলেট" স্ক্রীন)।
নেভিবারগুলিকে অ্যাক্সেসযোগ্য করুন
একটি উপাদান ব্যবহার করতে ভুলবেন না <nav>বা, যদি আরও জেনেরিক উপাদান ব্যবহার করেন যেমন a , সহায়ক প্রযুক্তির ব্যবহারকারীদের জন্য একটি ল্যান্ডমার্ক অঞ্চল হিসাবে স্পষ্টভাবে চিহ্নিত করতে প্রতিটি নেভিবারে <div>একটি যোগ করুন ।role="navigation"
প্রতিকি ছবি
একটি এর জন্য টেক্সট অদলবদল করে আপনার নিজের ইমেজ দিয়ে navbar ব্র্যান্ডটি প্রতিস্থাপন করুন <img>। যেহেতু .navbar-brandএর নিজস্ব প্যাডিং এবং উচ্চতা রয়েছে, তাই আপনাকে আপনার ছবির উপর নির্ভর করে কিছু CSS ওভাররাইড করতে হতে পারে।
ফর্ম
.navbar-formসংকীর্ণ ভিউপোর্টে যথাযথ উল্লম্ব সারিবদ্ধকরণ এবং ভেঙে পড়া আচরণের জন্য ফর্মের সামগ্রী রাখুন । এটি navbar বিষয়বস্তুর মধ্যে কোথায় থাকে তা নির্ধারণ করতে প্রান্তিককরণ বিকল্পগুলি ব্যবহার করুন৷
হেড আপ হিসাবে, মিক্সিনের মাধ্যমে .navbar-formএর বেশিরভাগ কোড শেয়ার করে । কিছু ফর্ম কন্ট্রোল, যেমন ইনপুট গ্রুপ, একটি নেভিবারে সঠিকভাবে দেখানোর জন্য নির্দিষ্ট প্রস্থের প্রয়োজন হতে পারে।.form-inline
আপনি প্রতিটি ইনপুটের জন্য একটি লেবেল অন্তর্ভুক্ত না করলে স্ক্রীন রিডারদের আপনার ফর্মগুলির সাথে সমস্যা হবে৷ এই ইনলাইন ফর্মগুলির জন্য, আপনি .sr-onlyক্লাস ব্যবহার করে লেবেলগুলি লুকাতে পারেন৷ সহায়ক প্রযুক্তিগুলির জন্য একটি লেবেল প্রদানের আরও বিকল্প পদ্ধতি রয়েছে, যেমন aria-label, aria-labelledbyবা titleবৈশিষ্ট্য৷ যদি এইগুলির কোনোটিই উপস্থিত না থাকে, তাহলে স্ক্রীন রিডাররা placeholderঅ্যাট্রিবিউট ব্যবহার করতে পারেন, যদি উপস্থিত থাকে, তবে মনে রাখবেন যে placeholderঅন্যান্য লেবেলিং পদ্ধতির জন্য প্রতিস্থাপন হিসাবে ব্যবহার করার পরামর্শ দেওয়া হয় না।
বোতাম
ন্যাভবারে উল্লম্বভাবে কেন্দ্রীভূত করতে a-তে না থাকা উপাদানগুলিতে .navbar-btnক্লাস যুক্ত করুন ।<button><form>
প্রসঙ্গ-নির্দিষ্ট ব্যবহার
স্ট্যান্ডার্ড বোতাম ক্লাসের মত , এলিমেন্ট এবং .navbar-btnঅন ব্যবহার করা যেতে পারে । যাইহোক, এর মধ্যে থাকা উপাদানগুলিতে স্ট্যান্ডার্ড বাটন ক্লাসগুলি ব্যবহার করা উচিত নয় ।<a><input>.navbar-btn<a>.navbar-nav
পাঠ্য
সঠিক অগ্রণী এবং রঙের জন্য .navbar-textসাধারণত একটি ট্যাগের সাথে একটি উপাদানে পাঠ্যের স্ট্রিংগুলি মোড়ানো ।<p>
নন-নেভি লিঙ্ক
সাধারণ ন্যাভিবার নেভিগেশন কম্পোনেন্টের মধ্যে নয় এমন স্ট্যান্ডার্ড লিঙ্কগুলি ব্যবহার করার .navbar-linkজন্য, ডিফল্ট এবং ইনভার্স নেভিগেশন বিকল্পগুলির জন্য সঠিক রং যোগ করতে ক্লাসটি ব্যবহার করুন।
উপাদান প্রান্তিককরণ
.navbar-leftবা .navbar-rightইউটিলিটি ক্লাস ব্যবহার করে নেভি লিঙ্ক, ফর্ম, বোতাম বা পাঠ্য সারিবদ্ধ করুন । উভয় ক্লাসই নির্দিষ্ট দিক দিয়ে একটি CSS ফ্লোট যোগ করবে। উদাহরণস্বরূপ, নেভি লিঙ্কগুলিকে সারিবদ্ধ করতে, সেগুলিকে <ul>সংশ্লিষ্ট ইউটিলিটি ক্লাস প্রয়োগের সাথে আলাদা করে রাখুন।
এই ক্লাসগুলি এবং এর মিক্সিন-এড সংস্করণ , কিন্তু .pull-leftডিভাইসের .pull-rightআকার জুড়ে নেভিবার উপাদানগুলির সহজে পরিচালনা করার জন্য এগুলি মিডিয়া কোয়েরির সুযোগ রয়েছে৷
একাধিক উপাদান ডান প্রান্তিককরণ
Navbars বর্তমানে একাধিক .navbar-rightক্লাসের সাথে একটি সীমাবদ্ধতা আছে। সঠিকভাবে স্থান বিষয়বস্তু, আমরা শেষ .navbar-rightউপাদান নেতিবাচক মার্জিন ব্যবহার. যখন সেই ক্লাসটি ব্যবহার করে একাধিক উপাদান থাকে, তখন এই মার্জিনগুলি উদ্দেশ্য অনুযায়ী কাজ করে না।
যখন আমরা v4 তে সেই উপাদানটি পুনরায় লিখতে পারি তখন আমরা এটিকে আবার দেখব।
শীর্ষে স্থির
একটি বা কেন্দ্রে এবং প্যাড নেভিবার সামগ্রী যোগ করুন .navbar-fixed-topএবং অন্তর্ভুক্ত করুন।.container.container-fluid
শরীরের প্যাডিং প্রয়োজন
স্থির নেভিবার আপনার অন্যান্য সামগ্রীকে ওভারলে করবে, যদি না আপনি paddingএর শীর্ষে যোগ করেন <body>। আপনার নিজস্ব মান চেষ্টা করুন বা নীচের আমাদের স্নিপেট ব্যবহার করুন. পরামর্শ: ডিফল্টরূপে, নেভিবার 50px উচ্চ।
কোর বুটস্ট্র্যাপ CSS এর পরে এটি অন্তর্ভুক্ত করা নিশ্চিত করুন ।
নীচে স্থির
একটি বা কেন্দ্রে এবং প্যাড নেভিবার সামগ্রী যোগ করুন .navbar-fixed-bottomএবং অন্তর্ভুক্ত করুন।.container.container-fluid
শরীরের প্যাডিং প্রয়োজন
স্থির নেভিবার আপনার অন্যান্য সামগ্রীকে ওভারলে করবে, যদি না আপনি paddingএর নীচে যোগ করেন <body>। আপনার নিজস্ব মান চেষ্টা করুন বা নীচের আমাদের স্নিপেট ব্যবহার করুন. পরামর্শ: ডিফল্টরূপে, নেভিবার 50px উচ্চ।
কোর বুটস্ট্র্যাপ CSS এর পরে এটি অন্তর্ভুক্ত করা নিশ্চিত করুন ।
স্ট্যাটিক শীর্ষ
একটি পূর্ণ-প্রস্থ ন্যাভিবার তৈরি করুন যা .navbar-static-topএকটি .containerবা .container-fluidকেন্দ্রে এবং প্যাড নেভিবার সামগ্রী যোগ করে পৃষ্ঠার সাথে স্ক্রোল করে।
ক্লাসের বিপরীতে .navbar-fixed-*, আপনাকে কোনো প্যাডিং পরিবর্তন করতে হবে না body।
উল্টানো নববার
যোগ করে নববারের চেহারা পরিবর্তন করুন .navbar-inverse।
ব্রেডক্রাম্বস
একটি নেভিগেশনাল অনুক্রমের মধ্যে বর্তমান পৃষ্ঠার অবস্থান নির্দেশ করুন৷
বিভাজক স্বয়ংক্রিয়ভাবে CSS-এ :beforeএবং এর মাধ্যমে যুক্ত হয় content।
Rdio দ্বারা অনুপ্রাণিত সহজ পৃষ্ঠা সংখ্যা, অ্যাপ এবং অনুসন্ধান ফলাফলের জন্য দুর্দান্ত। বড় ব্লক মিস করা কঠিন, সহজেই মাপযোগ্য, এবং বড় ক্লিক এলাকা প্রদান করে।
পেজিনেশন উপাদান লেবেল করা
<nav>স্ক্রীন রিডার এবং অন্যান্য সহায়ক প্রযুক্তির জন্য একটি নেভিগেশন বিভাগ হিসাবে চিহ্নিত করার জন্য পেজিনেশন উপাদানটিকে একটি উপাদানে মোড়ানো উচিত । উপরন্তু, যেহেতু একটি পৃষ্ঠায় ইতিমধ্যেই এমন একাধিক নেভিগেশন সেকশন থাকতে পারে (যেমন হেডারে প্রাথমিক ন্যাভিগেশন, বা সাইডবার নেভিগেশন), এটির উদ্দেশ্য প্রতিফলিত করে এমন aria-labelএকটি বর্ণনামূলক প্রদান করা বাঞ্ছনীয়। <nav>উদাহরণস্বরূপ, সার্চ ফলাফলের একটি সেটের মধ্যে নেভিগেট করার জন্য যদি পেজিনেশন উপাদান ব্যবহার করা হয়, তাহলে একটি উপযুক্ত লেবেল হতে পারে aria-label="Search results pages"।
অক্ষম এবং সক্রিয় রাষ্ট্র
লিঙ্কগুলি বিভিন্ন পরিস্থিতিতে কাস্টমাইজযোগ্য। আনক্লিকযোগ্য .disabledলিঙ্কগুলির জন্য এবং .activeবর্তমান পৃষ্ঠাটি নির্দেশ করতে ব্যবহার করুন।
আমরা সুপারিশ করছি যে আপনি সক্রিয় বা অক্ষম অ্যাঙ্করগুলিকে অদলবদল করুন <span>, অথবা পূর্ববর্তী/পরবর্তী তীরগুলির ক্ষেত্রে অ্যাঙ্করটি বাদ দিন, উদ্দেশ্যযুক্ত শৈলীগুলি বজায় রেখে ক্লিক কার্যকারিতা অপসারণ করতে৷
সাইজিং
বৃহত্তর বা ছোট পৃষ্ঠা সংখ্যা অভিনব? যোগ করুন .pagination-lgবা .pagination-smঅতিরিক্ত মাপের জন্য.
পেজার
হালকা মার্কআপ এবং শৈলী সহ সহজ পৃষ্ঠা সংখ্যা বাস্তবায়নের জন্য দ্রুত পূর্ববর্তী এবং পরবর্তী লিঙ্ক। এটি ব্লগ বা ম্যাগাজিনের মতো সাধারণ সাইটের জন্য দুর্দান্ত৷
ডিফল্ট উদাহরণ
ডিফল্টরূপে, পেজার লিঙ্কগুলিকে কেন্দ্র করে।
সারিবদ্ধ লিঙ্ক
বিকল্পভাবে, আপনি পাশের প্রতিটি লিঙ্ক সারিবদ্ধ করতে পারেন:
ঐচ্ছিক অক্ষম রাষ্ট্র
পেজার লিঙ্কগুলিও পেজিনেশন .disabledথেকে সাধারণ ইউটিলিটি ক্লাস ব্যবহার করে।
লেবেল
উদাহরণ
উদাহরণ শিরোনাম নতুন
উদাহরণ শিরোনাম নতুন
উদাহরণ শিরোনাম নতুন
উদাহরণ শিরোনাম নতুন
উদাহরণ শিরোনাম নতুন
উদাহরণ শিরোনাম নতুন
উপলব্ধ বৈচিত্র
একটি লেবেলের চেহারা পরিবর্তন করতে নীচের উল্লিখিত সংশোধক শ্রেণীগুলির মধ্যে যেকোনো একটি যোগ করুন।
ডিফল্ট প্রাথমিক সাফল্যের তথ্য সতর্কতা বিপদ
লেবেল টন আছে?
রেন্ডারিং সমস্যা দেখা দিতে পারে যখন আপনার একটি সংকীর্ণ পাত্রের মধ্যে কয়েক ডজন ইনলাইন লেবেল থাকে, যার প্রতিটিতে নিজস্ব inline-blockউপাদান থাকে (একটি আইকনের মতো)। এই চারপাশে পথ সেটিং হয় display: inline-block;. প্রসঙ্গ এবং একটি উদাহরণের জন্য, #13219 দেখুন ।
ব্যাজ
<span class="badge">লিঙ্ক, বুটস্ট্র্যাপ নেভিস এবং আরও অনেক কিছুতে যোগ করে সহজেই নতুন বা অপঠিত আইটেম হাইলাইট করুন।
জাম্বোট্রনকে পূর্ণ প্রস্থ করতে, এবং গোলাকার কোণ ছাড়াই, এটিকে সমস্ত .containers-এর বাইরে রাখুন এবং পরিবর্তে একটি .containerভিতরে যোগ করুন।
পেজের উপরের অংশ
h1একটি পৃষ্ঠার বিষয়বস্তুর যথাযথভাবে স্থান বের করতে এবং সেগমেন্ট করার জন্য একটি সাধারণ শেল । এটি h1এর ডিফল্ট smallউপাদান, সেইসাথে অন্যান্য উপাদান (অতিরিক্ত শৈলী সহ) ব্যবহার করতে পারে।
উদাহরণ পৃষ্ঠা শিরোনাম শিরোনাম জন্য সাবটেক্সট
থাম্বনেল
বুটস্ট্র্যাপের গ্রিড সিস্টেমকে থাম্বনেইল কম্পোনেন্ট সহ প্রসারিত করুন সহজেই ইমেজ, ভিডিও, টেক্সট এবং আরও অনেক কিছুর গ্রিড প্রদর্শন করতে।
আপনি যদি বিভিন্ন উচ্চতা এবং/অথবা প্রস্থের থাম্বনেইলের Pinterest-এর মতো উপস্থাপনা খুঁজছেন, তাহলে আপনাকে একটি তৃতীয় পক্ষের প্লাগইন ব্যবহার করতে হবে যেমন ম্যাসনরি , আইসোটোপ , বা সালভাটোর ৷
ডিফল্ট উদাহরণ
ডিফল্টরূপে, বুটস্ট্র্যাপের থাম্বনেইলগুলি ন্যূনতম প্রয়োজনীয় মার্কআপ সহ লিঙ্কযুক্ত চিত্রগুলি প্রদর্শন করার জন্য ডিজাইন করা হয়েছে।
কাস্টম কন্টেন্ট
একটু অতিরিক্ত মার্কআপের সাহায্যে, থাম্বনেইলে শিরোনাম, অনুচ্ছেদ বা বোতামের মতো যেকোনো ধরনের HTML সামগ্রী যোগ করা সম্ভব।
থাম্বনেইল লেবেল
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.
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.
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.
মুষ্টিমেয় ��পলব্ধ এবং নমনীয় সতর্কতা বার্তা সহ সাধারণ ব্যবহারকারীর ক্রিয়াকলাপের জন্য প্রাসঙ্গিক প্রতিক্রিয়া বার্তা প্রদান করুন।
উদাহরণ
মৌলিক সতর্কতা বার্তাগুলির জন্য যেকোন পাঠ্য এবং একটি ঐচ্ছিক খারিজ বোতাম এবং .alertচারটি প্রাসঙ্গিক ক্লাসের মধ্যে একটি (যেমন, ) মোড়ানো।.alert-success
কোনো ডিফল্ট ক্লাস নেই
সতর্কতার ডিফল্ট ক্লাস নেই, শুধুমাত্র বেস এবং মডিফায়ার ক্লাস। একটি ডিফল্ট ধূসর সতর্কতা খুব বেশি অর্থবোধ করে না, তাই আপনাকে প্রাসঙ্গিক ক্লাসের মাধ্যমে একটি প্রকার নির্দিষ্ট করতে হবে। সাফল্য, তথ্য, সতর্কতা বা বিপদ থেকে বেছে নিন।
সাবাশ! আপনি সফলভাবে এই গুরুত্বপূর্ণ সতর্কতা বার্তা পড়েছেন৷
মাথা আপ! এই সতর্কতা আপনার মনোযোগ প্রয়োজন, কিন্তু এটি খুব গুরুত্বপূর্ণ নয়.
সতর্কতা ! নিজেকে ভালো করে দেখে নিন, আপনি দেখতে খুব একটা ভালো না।
ওহ স্ন্যাপ! কিছু জিনিস পরিবর্তন করুন এবং আবার জমা দেওয়ার চেষ্টা করুন।
বাতিলযোগ্য সতর্কতা
একটি ঐচ্ছিক .alert-dismissibleএবং বন্ধ বোতাম যোগ করে যেকোনো সতর্কতা তৈরি করুন।
জাভাস্ক্রিপ্ট সতর্কতা প্লাগইন প্রয়োজন
সম্পূর্ণরূপে কাজ করার জন্য, বাতিলযোগ্য সতর্কতা, আপনাকে অবশ্যই সতর্কতা JavaScript প্লাগইন ব্যবহার করতে হবে ।
সতর্কতা ! নিজেকে ভালো করে দেখে নিন, আপনি দেখতে খুব একটা ভালো না।
সমস্ত ডিভাইস জুড়ে সঠিক আচরণ নিশ্চিত করুন
ডেটা অ্যাট্রিবিউট <button>সহ উপাদানটি ব্যবহার করতে ভুলবেন না ।data-dismiss="alert"
সতর্কতা লিঙ্ক
.alert-linkযেকোনো সতর্কতার মধ্যে দ্রুত মিলিত রঙিন লিঙ্কগুলি প্রদান করতে ইউটিলিটি ক্লাস ব্যবহার করুন ।
সহজ কিন্তু নমনীয় অগ্রগতি বার সহ একটি কর্মপ্রবাহ বা কর্মের অগ্রগতি সম্পর্কে আপ-টু-ডেট প্রতিক্রিয়া প্রদান করুন।
ক্রস ব্রাউজার সামঞ্জস্য
অগ্রগতি বারগুলি তাদের কিছু প্রভাব অর্জন করতে CSS3 রূপান্তর এবং অ্যানিমেশন ব্যবহার করে। এই বৈশিষ্ট্যগুলি ইন্টারনেট এক্সপ্লোরার 9 এবং ফায়ারফক্সের নীচের বা পুরানো সংস্করণগুলিতে সমর্থিত নয়। Opera 12 অ্যানিমেশন সমর্থন করে না।
বিষয়বস্তু নিরাপত্তা নীতি (CSP) সামঞ্জস্যপূর্ণ
যদি আপনার ওয়েবসাইটে একটি বিষয়বস্তু নিরাপত্তা নীতি (CSP) থাকে যা অনুমতি দেয় না , তাহলে আপনি নীচের উদাহরণগুলিতে দেখানো হিসাবে প্রগতি বারের প্রস্থ সেট করতে ইনলাইন বৈশিষ্ট্যগুলি style-src 'unsafe-inline'ব্যবহার করতে পারবেন না ৷ styleকঠোর সিএসপিগুলির সাথে সামঞ্জস্যপূর্ণ প্রস্থগুলি সেট করার বিকল্প পদ্ধতিগুলির মধ্যে রয়েছে সামান্য কাস্টম জাভাস্ক্রিপ্ট (সেটি সেট element.style.widthকরে) বা কাস্টম CSS ক্লাস ব্যবহার করা।
মৌলিক উদাহরণ
ডিফল্ট অগ্রগতি বার।
60% সম্পূর্ণ
লেবেল সহ
একটি দৃশ্যমান শতাংশ দেখানোর জন্য অগ্রগতি বারের মধ্যে থেকে ক্লাস <span>সহ সরান ।.sr-only
৬০%
লেবেল পাঠ্যটি কম শতাংশের জন্যও সুস্পষ্ট থাকে তা নিশ্চিত করতে min-width, অগ্রগতি বারে একটি যোগ করার কথা বিবেচনা করুন।
0%
2%
প্রাসঙ্গিক বিকল্প
অগ্রগতি বারগুলি সামঞ্জস্যপূর্ণ শৈলীর জন্য একই বোতাম এবং সতর্কতা ক্লাসের কিছু ব্যবহার করে।
40% সম্পূর্ণ (সফল)
20% সম্পূর্ণ
60% সম্পূর্ণ (সতর্কতা)
80% সম্পূর্ণ (বিপদ)
ডোরাকাটা
একটি ডোরাকাটা প্রভাব তৈরি করতে একটি গ্রেডিয়েন্ট ব্যবহার করে। IE9 এবং নীচে উপলব্ধ নয়।
40% সম্পূর্ণ (সফল)
20% সম্পূর্ণ
60% সম্পূর্ণ (সতর্কতা)
80% সম্পূর্ণ (বিপদ)
অ্যানিমেটেড
ডান থেকে বামে স্ট্রাইপগুলি অ্যানিমেট করতে .activeযোগ করুন । .progress-bar-stripedIE9 এবং নীচে উপলব্ধ নয়।
45% সম্পূর্ণ
স্তুপীকৃত
.progressতাদের স্ট্যাক করতে একই মধ্যে একাধিক বার রাখুন ।
35% সম্পূর্ণ (সফল)
20% সম্পূর্ণ (সতর্কতা)
10% সম্পূর্ণ (বিপদ)
মিডিয়া অবজেক্ট
বিভিন্ন ধরণের উপাদান (যেমন ব্লগ মন্তব্য, টুইট ইত্যাদি) তৈরির জন্য বিমূর্ত বস্তু শৈলী যা পাঠ্য বিষয়বস্তুর পাশাপাশি বাম-বা ডান-সারিবদ্ধ চিত্র বৈশিষ্ট্যযুক্ত।
ডিফল্ট মিডিয়া
ডিফল্ট মিডিয়া একটি বিষয়বস্তু ব্লকের বাম বা ডানে একটি মিডিয়া বস্তু (ছবি, ভিডিও, অডিও) প্রদর্শন করে।
মিডিয়া শিরোনাম
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.
ক্লাস .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. নুল্লাম কুইস রিসাস এগেট উর্না মলিস অর্নরে ভেল ইউ লিও। সহ সামাজিক ন্যাটোক পেনাটিবাস এবং ম্যাগনিস ডিস পার্টুরিয়েন্ট মন্টেস, নতুন হাস্যকর মুস।
মিডিয়া তালিকা
একটু অতিরিক্ত মার্কআপ দিয়ে, আপনি তালিকার ভিতরে মিডিয়া ব্যবহার করতে পারেন (মন্তব্য থ্রেড বা নিবন্ধের তালিকার জন্য দরকারী)।
মিডিয়া শিরোনাম
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.
তালিকা গ্রুপ
তালিকা গোষ্ঠীগুলি কেবল উপাদানগুলির সাধারণ তালিকাই নয়, কাস্টম সামগ্রী সহ জটিলগুলি প্রদর্শনের জন্য একটি নমনীয় এবং শক্তিশালী উপাদান।
মৌলিক উদাহরণ
সবচেয়ে মৌলিক তালিকা গোষ্ঠীটি কেবল তালিকা আইটেম এবং যথাযথ ক্লাস সহ একটি ক্রমবিহীন তালিকা। অনুসরণ করা বিকল্পগুলি বা প্রয়োজন অনুসারে আপনার নিজস্ব CSS দিয়ে এটি তৈরি করুন।
ক্রাস জাস্টো অডিও
ড্যাপিবাস এসি ফ্যাসিলিসিস ইন
মরবি লিও রিসাস
পোর্টা এসি কনসেক্টেতুর এসি
ইরোস এ ভেস্টিবুলাম
ব্যাজ
যেকোনো তালিকা গ্রুপ আইটেমে ব্যাজ উপাদান যোগ করুন এবং এটি স্বয়ংক্রিয়ভাবে ডানদিকে অবস্থান করবে।
14ক্রাস জাস্টো অডিও
2ড্যাপিবাস এসি ফ্যাসিলিসিস ইন
1মরবি লিও রিসাস
লিঙ্ক করা আইটেম
তালিকার আইটেমগুলির পরিবর্তে অ্যাঙ্কর ট্যাগ ব্যবহার করে তালিকাভুক্ত আইটেমগুলিকে লিঙ্ক করুন (যার <div>পরিবর্তে একটি অভিভাবকও বোঝায় <ul>)। প্রতিটি উপাদানের চারপাশে পৃথক পিতামাতার প্রয়োজন নেই।
তালিকা গোষ্ঠীর আইটেমগুলি তালিকা আইটেমগুলির পরিবর্তে বোতাম হতে পারে (এর অর্থ একটি <div>এর পরিবর্তে একটি অভিভাবকও <ul>)। প্রতিটি উপাদানের চারপাশে পৃথক পিতামাতার প্রয়োজন নেই। এখানে স্ট্যান্ডার্ড .btnক্লাস ব্যবহার করবেন না।
অক্ষম আইটেম
অক্ষম দেখাতে এটিকে ধূসর .disabledকরতে a এ যোগ করুন ।.list-group-item
যদিও সবসময় প্রয়োজন হয় না, মাঝে মাঝে আপনাকে আপনার DOM একটি বাক্সে রাখতে হবে। এই পরিস্থিতিতে, প্যানেল উপাদান চেষ্টা করুন.
মৌলিক উদাহরণ
ডিফল্টরূপে, .panelকিছু বিষয়বস্তু ধারণ করার জন্য কিছু মৌলিক সীমানা এবং প্যাডিং প্রয়োগ করা হয়।
মৌলিক প্যানেলের উদাহরণ
শিরোনাম সহ প্যানেল
সহজেই আপনার প্যানেলে একটি শিরোনাম ধারক যোগ করুন .panel-heading। আপনি যেকোনও অন্তর্ভুক্ত করতে পারেন <h1>- একটি প্রি-স্টাইল করা শিরোনাম যোগ করতে <h6>একটি ক্লাস সহ । যাইহোক, - এর .panel-titleফন্টের আকারগুলি দ্বারা ওভাররাইড করা হয়েছে ।<h1><h6>.panel-heading
সঠিক লিঙ্ক রঙের জন্য, শিরোনামের মধ্যে লিঙ্কগুলি স্থাপন করতে ভুলবেন না .panel-title।
শিরোনাম ছাড়া প্যানেল শিরোনাম
প্যানেল বিষয়বস্তু
প্যানেল শিরোনাম
প্যানেল বিষয়বস্তু
ফুটার সহ প্যানেল
মোড়ানো বোতাম বা সেকেন্ডারি .panel-footerটেক্সট মনে রাখবেন যে প্যানেল ফুটারগুলি প্রাসঙ্গিক বৈচিত্রগুলি ব্যবহার করার সময় রঙ এবং সীমানা উত্তরাধিকারী হয় না কারণ সেগুলি অগ্রভাগে থাকার জন্য নয়৷
প্যানেল বিষয়বস্তু
প্রাসঙ্গিক বিকল্প
অন্যান্য উপাদানগুলির মতো, যেকোনও প্রাসঙ্গিক স্টেট ক্লাস যোগ করে একটি প্যানেলকে এ��টি নির্দিষ্ট প্রসঙ্গে আরও অর্থবহ করে তোলে৷
প্যানেল শিরোনাম
প্যানেল বিষয়বস্তু
প্যানেল শিরোনাম
প্যানেল বিষয়বস্তু
প্যানেল শিরোনাম
প্যানেল বিষয়বস্তু
প্যানেল শিরোনাম
প্যানেল বিষয়বস্তু
প্যানেল শিরোনাম
প্যানেল বিষয়বস্তু
টেবিল সহ
.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
ল্যারি
পাখি
@টুইটার
যদি কোন প্যানেল বডি না থাকে, তাহলে উপাদানটি প্যানেল হেডার থেকে টেবিলে কোনো বাধা ছাড়াই চলে যায়।
কিছু ডিফল্ট প্যানেল বিষয়বস্তু এখানে। নুল্লা ভিটা এলিট লিবারো, একটা ফারেত্র আগু। 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.
ক্রাস জাস্টো অডিও
ড্যাপিবাস এসি ফ্যাসিলিসিস ইন
মরবি লিও রিসাস
পোর্টা এসি কনসেক্টেতুর এসি
ইরোস এ ভেস্টিবুলাম
প্রতিক্রিয়াশীল এম্বেড
ব্রাউজারগুলিকে তাদের থাকা ব্লকের প্রস্থের উপর ভিত্তি করে ভিডিও বা স্লাইডশোর মাত্রা নির্ধারণ করার অনুমতি দেয় একটি অভ্যন্তরীণ অনুপাত তৈরি করে যা যেকোনো ডিভাইসে সঠিকভাবে স্কেল করবে।
নিয়মগুলি সরাসরি <iframe>, <embed>, <video>, এবং <object>উপাদানগুলিতে প্রয়োগ করা হয়; .embed-responsive-itemআপনি যখন অন্যান্য গুণাবলীর জন্য স্টাইলিং মেলতে চান তখন ঐচ্ছিকভাবে একটি স্পষ্ট বংশধর শ্রেণী ব্যবহার করুন।
প্রো-টিপ! আমরা আপনার জন্য এটি ওভাররাইড করার কারণে আপনাকে frameborder="0"আপনার গুলি অন্তর্ভুক্ত করার দরকার নেই ৷<iframe>
ওয়েলস
ডিফল্ট ভাল
একটি ইনসেট প্রভাব দিতে একটি উপাদানের উপর একটি সাধারণ প্রভাব হিসাবে ভাল ব্যবহার করুন।
দেখ, আমি একটা কূপে আছি!
ঐচ্ছিক ক্লাস
দুটি ঐচ্ছিক পরিবর্তনকারী ক্লাস সহ প্যাডিং এবং বৃত্তাকার কোণগুলি নিয়ন্ত্রণ করুন।