টুইটার বুটস্ট্র্যাপ 3.0 এখন কীভাবে আমি "ব্যাজ ব্যাজ-গুরুত্বপূর্ণ" করব

Question

দ্বিতীয় সংস্করণে আমি ব্যবহার করতে পারি

ব্যাজ ব্যাজ-গুরুত্বপূর্ণ

আমি দেখতে পাচ্ছি যে .বেজ উপাদানটির আর প্রাসঙ্গিক (-সুকসেস, -প্রাইমারি ইত্যাদি) ক্লাস নেই।

3 সংস্করণে আমি কীভাবে একই জিনিস অর্জন করব?

যেমন। আমি আমার ইউআইতে সতর্কতা ব্যাজ এবং গুরুত্বপূর্ণ ব্যাজ চাই

Comments

তারা প্রদান করে উচিত .danger, .successএই রকম সাধারণ ব্যবহারের ক্ষেত্রে জন্য বাক্সের বাইরে ইত্যাদি বর্গ শৈলী সংজ্ঞা।

— Fr0zenFyr

Answer 1

আপনার সিএসএসে এই এক-লাইন শ্রেণিটি জুড়ুন এবং বুটস্ট্র্যাপ labelউপাদানটি ব্যবহার করুন ।

.label-as-badge {
    border-radius: 1em;
}

এটি labelএবং badgeপাশাপাশি পাশাপাশি তুলনা করুন :

<span class="label label-default label-as-badge">hello</span>
<span class="badge">world</span>

তারা একই প্রদর্শিত হয়। তবে সিএসএসে এটি labelব্যবহার করে emতাই এটি সুন্দরভাবে স্কেল করে এবং এটিতে এখনও সমস্ত "রঙ" ক্লাস রয়েছে। সুতরাং লেবেলটি আরও বড় আকারের ফন্টের আকারে স্কেল করবে এবং লেবেল-সাফল্য, লেবেল-সতর্কতা ইত্যাদির সাথে রঙিন হতে পারে এখানে দুটি উদাহরণ রয়েছে:

<span class="label label-success label-as-badge">Yay! Rah!</span>

বা যেখানে জিনিসগুলি বড়:

<div style="font-size: 36px"><!-- pretend an enclosing class has big font size -->
    <span class="label label-success label-as-badge">Yay! Rah!</span>
</div>

---

11/16/2015 : আমরা বুটস্ট্র্যাপ 4 এ এটি কীভাবে করব তা দেখছি

দেখে মনে হচ্ছে .badgeক্লাস সম্পূর্ণ শেষ হয়ে গেছে। তবে এখানে একটি অন্তর্নির্মিত .label-pillশ্রেণি রয়েছে (এখানে) যা দেখতে চাই আমাদের মনে হচ্ছে।

.label-pill {
  padding-right: .6em;
  padding-left: .6em;
  border-radius: 10rem;
}

ব্যবহারে এটি দেখতে এটির মতো দেখাচ্ছে:

<span class="label label-pill label-default">Default</span>
<span class="label label-pill label-primary">Primary</span>
<span class="label label-pill label-success">Success</span>
<span class="label label-pill label-info">Info</span>
<span class="label label-pill label-warning">Warning</span>
<span class="label label-pill label-danger">Danger</span>

---

11/04/2014 : কেন ক্রস-পরাগরেজনিত সতর্কতা ক্লাসগুলি কেন .badgeএত দুর্দান্ত নয় সে সম্পর্কে একটি আপডেট । আমি মনে করি এই চিত্রটি এটির যোগফল দেয়:

এই সতর্কতা ক্লাসগুলি ব্যাজ সহ যাওয়ার জন্য ডিজাইন করা হয়নি। এটি তাদের উদ্দেশ্যযুক্ত রঙগুলির একটি "ইঙ্গিত" দিয়ে রেন্ডার করে, তবে শেষ পর্যন্ত ধারাবাহিকতাটি উইন্ডোটি বাইরে ফেলে দেওয়া হয় এবং পাঠযোগ্যতা প্রশ্নবিদ্ধ। এই সতর্কতা-হ্যাক ব্যাজগুলি দৃশ্যত সমন্বিত নয়।

.label-as-badgeসমাধানটি কেবল বুটস্ট্র্যাপের নকশাকেই প্রসারিত করছে। আমরা বুটস্ট্র্যাপ ডিজাইনারদের দ্বারা গৃহীত সমস্ত সিদ্ধান্তকে অক্ষত রাখছি, যথা তারা সম্ভাব্য সমস্ত রঙ জুড়ে পঠনযোগ্যতা এবং সংহতি, সেইসাথে রঙ পছন্দ হিসাবে নিজেরাই বিবেচনা করেছে। .label-as-badgeশ্রেণী শুধুমাত্র বৃত্তাকার কোণ, এবং অন্য কিছুই যোগ করা হয়েছে। কোনও বর্ণ সংজ্ঞা চালু করা হয়নি। সুতরাং, সিএসএসের একক লাইন

হ্যাঁ, এই .alert-xxxxxক্লাসগুলিতে কেবল হ্যাক করে ফেলে দেওয়া সহজ - আপনাকে সিএসএসের কোনও লাইন যুক্ত করতে হবে না । অথবা আপনি সামান্য জিনিস সম্পর্কে আরও যত্ন নিতে এবং একটি লাইন যুক্ত করতে পারেন।

Comments

যতক্ষণ না আপনি গ্রুপ-তালিকায় ব্যাজ ব্যবহার করতে চান না এটি ততক্ষণ দুর্দান্ত, তবে তারা ভাসবে না ... বুটস্ট্র্যাপ পরিবর্তিত হওয়ার সাথে সাথে আমি এই ব্রেকিং দেখতে পাচ্ছি। সুন্দর হ্যাক যদিও।

— নড্রোগ

হ্যাঁ, ভাল পয়েন্ট @ ননড্রোগ list-groupসঙ্গে badgesএকটা চমৎকার আউট-অফ-বক্স বুটস্ট্র্যাপ মধ্যে বৈশিষ্ট্য। যারা দেখছেন তাদের জন্য, এখানে যা দেখতে দেখতে তা এখানে: getbootstrap.com/components/#list-group-adges

— broc.seib

আমি "ক্রস পরাগায়ন" যুক্তি দ্বারা সীমাবদ্ধ নই। সিএসএসের ক্লাস / বৈশিষ্ট্যগুলির পুনঃব্যবস্থাপনা এবং পুনঃব্যবস্থাপনা সর্বদা ঘটছে। আপনার পদটির পিছনে লুকানো যুক্তিটি হতে পারে, আপনি সিমেন্টিক সিএসএস ক্লাস এবং সাবক্লাসের নাম পছন্দ করেন। এটি মূলত "নমনীয়তা / পুনঃব্যবহারযোগ্যতা এবং শব্দার্থ শুদ্ধতা"। একটি শব্দার্থিক শ্রেণীর নামের উপাদানটির ভূমিকা সমর্থন করা উচিত। "লেবেল হিসাবে ব্যাজ" একটি উপাদান রূপান্তর নির্দেশ করে। - সিডনোট: উত্তরটি মূলত CSS এর লাইন যুক্ত করে "লেবেলে এতটা গোলাকার প্রান্তগুলি নয়" সমস্যার সমাধান সহ আমার মন্তব্য 22 সেপ্টেম্বর থেকে is

— জেনস এ। কোচ

আপনি যদি বিশেষ তালিকা-গোপনীয় ভাসমান পেতে চান তবে এটি যুক্ত করুন! .list-group-item > .label-as-badge { float: right; } .list-group-item > .label-as-badge + .label-as-badge { margin-right: 5px; }

— গাউসি

দুর্দান্ত উত্তর। এছাড়াও সেখানে প্যাডিং নিক্ষেপ করা যেমন .badge মেলে চাইতে পারেন নিম্নরূপ:.label-as-badge { border-radius: 1em; padding: 3px 7px; }

— ম্যাট Borja,

Answer 2

সংক্ষেপে: badge-importantহয় alert-dangerবা এর সাথে প্রতিস্থাপন করুন progress-bar-danger।

দেখে মনে হচ্ছে: বুটপ্লি ডেমো ।

---

আপনি সিএসএস বর্গ একত্রিত পারে badgeসঙ্গে alert-*বা progess-bar-*তাদের রঙ:

সঙ্গে class="badges alert-*"

  <span class="badge alert-info">badge</span> Info
  <span class="badge alert-success">badge</span> Success 
  <span class="badge alert-danger">badge</span> Danger   
  <span class="badge alert-warning">badge</span> Warning

সতর্কতাগুলি ডকু: http://getbootstrap.com/components/#alerts

সহ class="badges progress-bar-*"(@ clami219 দ্বারা প্রস্তাবিত)

  <span class="badge progress-bar-info">badge</span> Info
  <span class="badge progress-bar-success">badge</span> Success
  <span class="badge progress-bar-danger">badge</span> Danger
  <span class="badge progress-bar-warning">badge</span> Warning

অগ্রগতি দণ্ড ডকু: http://getbootstrap.com/components/#progress-al বিকল্প

Comments

সতর্কতাটি যেভাবে ব্যাজগুলি সজ্জিত করছিল তা আমি পছন্দ করি না, তাই আমি তার পরিবর্তে লেবেলগুলি ব্যবহার করতে পছন্দ করেছি। getbootstrap.com/components/#labels

— মাইক পুরসেল

এটি হ্যাক-ইশ উত্তরটি কিছুটা। নিশ্চিত যে এটি কার্যকর, এবং এটি সহজ। তবে আপনার সতর্কতা সহ প্রাসঙ্গিক সতর্কতা ক্লাসগুলি ব্যবহার করার কথা। আপনি ভবিষ্যতে ভাঙ্গা শৈলীর জন্য নিজেকে সাইন আপ করতে পারেন। @ জেসনহুয়াং এর উত্তর ঠিক তত সহজ, এবং আপনাকে আরও বৃহত্তর নিয়ন্ত্রণ সরবরাহ করে।

— মাইকসিগ

উপরের উত্তরটি আমাকে উত্সাহিত করেছিল তা ভিজ্যুয়াল স্টুডিও ওয়েব এসেসেন্টিয়ালগুলি উপরের কোডটির জন্য একটি সতর্কতা দেখায়। যথা, "'সতর্কতা-বিপদ' ব্যবহার করার সময় আপনাকে অবশ্যই 'সতর্কতা' শ্রেণিটি নির্দিষ্ট করতে হবে।"

— মাইকসিগগুলি

লোকেরা এই পৃষ্ঠায় অবতরণ করে, কারণ বুটস্ট্র্যাপের লোকেরা অনেকগুলি নকশার বিবেচনা করে, যা তারা এর আগে যে নকশাগুলি বিবেচনা করে তা ছাড়িয়ে দেয় :) - আমি পূর্ববর্তী "ব্যাজ-গুরুত্বপূর্ণ" কাছাকাছি আসার জন্য আমি কেবল বিদ্যমান সিএসএস ক্লাসগুলিকে পুনরায় সংযুক্ত করছি I'm । তারা বাক্সের বাইরে যে জিনিস দেয় তা তারা এখানে নিয়ে যায়: এটাই। আমি মনে করি না সিএসএস ক্রাফ্ট করার একটি সত্য উপায় আছে। এই পৃষ্ঠাটি সমস্যাটি সমাধান করার জন্য প্রচুর উপায় সরবরাহ করে। তবে দয়া করে "আঃআঃ না! চিৎকার থামিয়ে দিন! এটি উপায় নয়! আপনি কিছু ভুল করছেন"।

— জেনস এ। কোচ

@ জেনস-আন্দ্রে কোচ আপনি আমার "আআহ !! না !!" সম্পর্কে ঠিক বলেছেন। এটি এমন শোনাচ্ছে যে আমি লোকদের বলছি "আপনি এটি ভুল করছেন", এবং আমার এটি বলার কোনও জায়গা নেই। দুঃখিত।

— broc.seib

Answer 3

বুটস্ট্র্যাপ 3 ব্যাজের জন্য রঙিন বিকল্পগুলি সরিয়েছে। তবে আমরা সেই স্টাইলগুলিকে ম্যানুয়ালি যুক্ত করতে পারি। এখানে আমার সমাধান, এবং এখানে জেএস বিন :

.badge {
  padding: 1px 9px 2px;
  font-size: 12.025px;
  font-weight: bold;
  white-space: nowrap;
  color: #ffffff;
  background-color: #999999;
  -webkit-border-radius: 9px;
  -moz-border-radius: 9px;
  border-radius: 9px;
}
.badge:hover {
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
}
.badge-error {
  background-color: #b94a48;
}
.badge-error:hover {
  background-color: #953b39;
}
.badge-warning {
  background-color: #f89406;
}
.badge-warning:hover {
  background-color: #c67605;
}
.badge-success {
  background-color: #468847;
}
.badge-success:hover {
  background-color: #356635;
}
.badge-info {
  background-color: #3a87ad;
}
.badge-info:hover {
  background-color: #2d6987;
}
.badge-inverse {
  background-color: #333333;
}
.badge-inverse:hover {
  background-color: #1a1a1a;
}

Answer 4

এর জন্য প্রসঙ্গের ক্লাসগুলি badgeপ্রকৃতপক্ষে বুটস্ট্র্যাপ 3 থেকে সরানো হয়েছে, সুতরাং আপনাকে একই রকম প্রভাব তৈরি করতে কিছু কাস্টম সিএসএস যুক্ত করতে হবে ...

.badge-important{background-color:#b94a48;}

Bootply

Comments

কেন সেগুলি থেকে মুক্তি পেলেন?

— পিটার

+ +! তারা কেন এ থেকে মুক্তি পেল তা আমিও ভাবছি। আপনি লেবেলটি ব্যবহার করতে পারেন তবে এটি বড়ি পাত্রে সঠিকভাবে আপ হয় না। কমপক্ষে এটি উল্লম্বভাবে কেন্দ্রিক নয়।

— সিবিএমিকস

পঙ্গু. 2 থেকে 3 পর্যন্ত আপ স্থানান্তর সম্পূর্ণ ব্যথা।

— কেভিন

জেনস-আন্দ্রে কোচের উত্তর হ'ল একটি বুটস্ট্র্যাপ 3.0 কেবল সমাধান। আমি মনে করি এটি সঠিক উপায়?

— জোশ পেটিট

@Peter: দেখুন github.com/twbs/bootstrap/pull/6342 । টিএলডিআর: ব্যাজগুলি 'অপঠিত' কাউন্টার হিসাবে ব্যবহার করার উদ্দেশ্যে, এবং অন্যান্য স্ট্যাটাসগুলি বোঝাতে ব্যবহার করা উচিত নয়।

— ববি জ্যাক

Answer 5

রঙগুলিকে কিছুটা আরও তীব্র করার জন্য আর একটি সম্ভাব্য উপায়, এটি হ'ল:

<span class="badge progress-bar-info">10</span>
<span class="badge progress-bar-success">20</span>
<span class="badge progress-bar-warning">30</span>
<span class="badge progress-bar-danger">40</span>

বুটপ্লি দেখুন

Answer 6

যদি কোনও SASS সংস্করণ ব্যবহার করে (যেমন: থোমাস-ম্যাকডোনাল্ডের একটি ), তবে আপনি সামান্য আরও গতিশীল হতে চান (বিদ্যমান ভেরিয়েবলগুলি সম্মান করুন) এবং লেবেলের জন্য ব্যবহৃত একই কৌশল ব্যবহার করে সমস্ত ব্যাজ প্রসঙ্গ তৈরি করতে চাইতে পারেন:

// Colors
// Contextual variations of badges
// Bootstrap 3.0 removed contexts for badges, we re-introduce them, based on what is done for labels
.badge-default {
  @include label-variant($label-default-bg);
}

.badge-primary {
  @include label-variant($label-primary-bg);
}

.badge-success {
  @include label-variant($label-success-bg);
}

.badge-info {
  @include label-variant($label-info-bg);
}

.badge-warning {
  @include label-variant($label-warning-bg);
}

.badge-danger {
  @include label-variant($label-danger-bg);
}

কম সমতুল্য সোজা হওয়া উচিত।

Answer 7

উপরের উত্তরের মতো তবে এখানে 3 টি নাম এবং রঙ বুটস্ট্র্যাপ ব্যবহার করা হচ্ছে:

/*css to add back colours for badges and make use of the colours*/
.badge-default {
  background-color: #999999;
}

.badge-primary {
  background-color: #428bca;
}

.badge-success {
  background-color: #5cb85c;
}

.badge-info {
  background-color: #5bc0de;
}

.badge-warning {
  background-color: #f0ad4e;
}

.badge-danger {
  background-color: #d9534f;
}

Answer 8

কম সংস্করণ ব্যবহার করার সময় আপনি মিক্সিনসলেস আমদানি করতে পারেন এবং রঙিন ব্যাজগুলির জন্য আপনার নিজস্ব ক্লাস তৈরি করতে পারেন:

.badge-warning {
    .label-variant(@label-warning-bg);
}

অন্যান্য রঙের জন্য একই; কেবল বিপদ, সাফল্য ইত্যাদি দিয়ে সতর্কতা প্রতিস্থাপন করুন

Answer 9

ঠিক আছে, এটি একটি দুর্দান্ত দেরী উত্তর তবে আমি মনে করি আমি এখনও আমার দুটি সেন্ট লাগিয়ে দেব ... আমি একটি মন্তব্য হিসাবে পোস্ট করতে পারতাম কারণ এই উত্তরটি মূলত কোনও নতুন সমাধান যুক্ত করে না তবে এটি পোস্টে মূল্য যুক্ত করে অন্য বিকল্প হিসাবে। তবে একটি মন্তব্যে চরিত্র সীমাবদ্ধতার কারণে আমি সমস্ত বিবরণ দিতে সক্ষম হব না।

দ্রষ্টব্য: সিএসএস ফাইল বুটস্ট্র্যাপ করার জন্য এটির একটি সম্পাদনা দরকার - .badgeউপরের জন্য শৈলীর সংজ্ঞা স্থানান্তর করুন .label-default। আমার সীমিত পরীক্ষার পরিবর্তনের কারণে কোনও ব্যবহারিক পার্শ্ব প্রতিক্রিয়া খুঁজে পাওয়া যায়নি।

যদিও broc.seib এর সমাধান সম্ভবত সবচেয়ে ভালো উপায় CSS এ ন্যূনতম যোগে ওপি প্রয়োজন অর্জন করা হল, এটা ঠিক মত সব সময়ে কোনো অতিরিক্ত সিএসএস ছাড়া একই প্রভাব অর্জন করা সম্ভব জেনস উ: কচ এর সমাধান বা ব্যবহার করার মাধ্যমে .label-xxxপ্রাসঙ্গিক শ্রেণীর কারণ তারা progress-bar-xxxক্লাসের তুলনায় মনে রাখা সহজ । আমি মনে করি না যে .alert-xxxক্লাসগুলি একই প্রভাব দেয়।

আপনাকে যা করতে হবে তা হ'ল কেবল ব্যবহার .badgeএবং .label-xxxক্লাস একসাথে (তবে এই ক্রমে)। উপরের নোটে উল্লিখিত পরিবর্তনগুলি করতে ভুলবেন না।

<a href="#">Inbox <span class="badge label-warning">42</span></a> এটা এমন দেখতে:

গুরুত্বপূর্ণ: আপনি যদি আপগ্রেড করার সিদ্ধান্ত নেন এবং আপনার নতুন স্থানীয় সিএসএস ফাইলে পরিবর্তনগুলি করতে ভুলে যান তবে এই সমাধানটি আপনার শৈলীগুলি ভেঙে দিতে পারে। এই চ্যালেঞ্জটির জন্য আমার সমাধানটি ছিল .label-xxxআমার কাস্টম সিএসএস ফাইলের সমস্ত শৈলী অনুলিপি করা এবং অন্য সমস্ত সিএসএস ফাইলের পরে এটি লোড করা। আমি BS3 লোড করার জন্য সিডিএন ব্যবহার করার সময় এই পদ্ধতিটিও সহায়তা করে।

** পিএস: ** শীর্ষ রেটেড উভয় জবাবগুলির পক্ষে তাদের পক্ষে মতামত রয়েছে। আপনি নিজের সিএসএস করতে কেবল এটিই পছন্দ করেন কারণ এটি করার কোনও "একমাত্র সঠিক উপায়" নেই।

Comments

আমার মনে হয় আপনি ব্যাজের আগে লেবেল-

— এক্সএক্সএক্সএক্সএক্সএক্সএক্সএক্সএক্সএক্সএক্সএক্সএক্সএক্সএক্সবিজড রাখলে