ट्विटर बूटस्ट्रैप 3.0 अब मैं "बैज-महत्वपूर्ण" कैसे कर सकता हूं

Question

संस्करण दो में मैं उपयोग कर सकता था

बिल्ला बिल्ला-महत्वपूर्ण

मैं देख रहा हूं कि .bad तत्व में अब प्रासंगिक (-सफल, -प्रिमरी, आदि) कक्षाएं नहीं हैं।

मैं संस्करण 3 में समान चीज कैसे प्राप्त करूं?

उदाहरण के लिए। मैं अपने UI में बैज और महत्वपूर्ण बैज की चेतावनी देना चाहता हूं

Comments

वे प्रदान की है चाहिए .danger, .successइस तरह सामान्य उपयोग के मामलों के लिए बॉक्स से बाहर आदि वर्ग शैली परिभाषाएँ।

— 21:00 बजे 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

जब तक आप समूह-सूचियों में बैज का उपयोग नहीं करना चाहते तब तक यह अच्छा है, फिर वे न तैरें ... मैं समय के साथ इस ब्रेकिंग को देख सकता हूं क्योंकि बूटस्ट्रैप बदल गया है। हालांकि अच्छा हैक।

— नोड

हां, अच्छी बात @nodrog। के list-groupसाथ badgesबूटस्ट्रैप में एक अच्छा आउट-ऑफ-द-बॉक्स सुविधा है। देखने वालों के लिए, यहां ऐसा है जो दिखता है: getbootstrap.com/compenders/#list-group-badges

— broc.seib

मैं "क्रॉस-परागण" तर्क से दोषी नहीं हूं। CSS कक्षाओं / विशेषताओं का पुन: उपयोग और पुनर्संयोजन हर समय हो रहा है। आपके शब्द के पीछे छिपा तर्क हो सकता है, कि आप शब्दार्थ css वर्ग और उपवर्ग नामों को पसंद करते हैं। यह मूल रूप से "लचीलापन / पुन: प्रयोज्य और शब्दार्थ शुद्धता" है। एक शब्दार्थ वर्ग नाम को तत्व की भूमिका का समर्थन करना चाहिए। "लेबल-ए-बैज" एक तत्व परिवर्तन को इंगित करता है। - सिडेनोट: उत्तर मूल रूप से मेरी टिप्पणी 22 सीएसएस से "सीबीएस पर गोल किनारों पर नहीं" समस्या के समाधान के साथ सीएसएस की एक पंक्ति जोड़कर है।

— जेन्स ए। कोच

यदि आप विशेष सूची-समूह प्राप्त करना चाहते हैं, तो बस इसे जोड़ें! .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; }

— मैट बोर्जा

Answer 2

संक्षेप में: या badge-importantतो के साथ बदलें ।alert-dangerprogress-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/compenders/#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/compenders/#progress-alternatives

Comments

मुझे यह पसंद नहीं था कि जिस तरह से बैज सज रहा था, इसलिए मैंने इसके बजाय लेबल का उपयोग करने का विकल्प चुना। getbootstrap.com/compenders/#labels

— माइक परसेल

यह हैक-ईश उत्तर का एक सा है। यकीन है कि यह काम करता है, और यह आसान है। लेकिन आप अलर्ट के साथ उन प्रासंगिक सतर्क कक्षाओं का उपयोग करने वाले हैं। आप भविष्य में टूटी हुई शैलियों के लिए खुद को साइन अप कर सकते हैं। @ जेसनहुआंग का जवाब उतना ही सरल है, और आपको अधिक नियंत्रण प्रदान करता है।

— 21:14

मुझे उपरोक्त उत्तर देने के लिए प्रेरित किया गया था कि विज़ुअल स्टूडियो वेब एसेंशियल्स ऊपर दिए गए कोड के लिए एक चेतावनी दिखाता है। अर्थात्, "अलर्ट-डेंजर 'का उपयोग करते समय, आपको क्लास' अलर्ट 'को भी निर्दिष्ट करना होगा।"

— mikesigs

लोग इस पृष्ठ पर उतरते हैं, क्योंकि बूटस्ट्रैप लोगों ने बहुत सारे डिज़ाइन विचार किए, जो डिज़ाइन के विचारों को बाहर फेंकते हैं जो उन्होंने :) से पहले किया था - मैं अभी मौजूदा सीएसएस कक्षाओं को फिर से तैयार कर रहा हूं, ताकि पूर्व "बैज-महत्वपूर्ण" के करीब पहुंच सके। । यहां हम उस सामान के साथ जाते हैं जो वे बॉक्स से बाहर देते हैं: यही है। मुझे नहीं लगता कि CSS को क्राफ्ट करने का एक सही तरीका है। यह पृष्ठ समस्या को हल करने के बहुत सारे तरीके प्रदान करता है। लेकिन कृपया "आआह! नहीं!" चिल्लाना बंद करो! यह तरीका नहीं है! आप कुछ गलत कर रहे हैं "।

— जेन्स ए कोच

@ Jens-AndréKoch तुम मेरे "आआह !! !! नहीं !!" के बारे में सही हो। यह ध्वनि करता है जैसे मैं लोगों को बता रहा हूं "आप इसे गलत कर रहे हैं", और मेरे पास यह कहने के लिए कोई जगह नहीं है। माफ़ करना।

— ब्रूसेसेब

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 से संदर्भ कक्षाएं हटा दी जाती हैं, इसलिए आपको समान प्रभाव बनाने के लिए कुछ कस्टम CSS जोड़ना होगा ...

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

Bootply

Comments

उनसे छुटकारा क्यों मिला?

— पीटर

+! मुझे भी आश्चर्य हो रहा है कि उनसे छुटकारा क्यों मिला। आप लेबल का उपयोग कर सकते हैं, लेकिन यह एक गोली कंटेनर पर ठीक से लाइन नहीं करता है। कम से कम यह लंबवत केंद्रित नहीं है।

— cbmeeks

लंगड़ा। 2 से 3 तक अप प्रवास एक पूर्ण दर्द है।

— केविन

जेन्स-एंड्रे कोच का जवाब एक बूटस्ट्रैप 3.0 केवल समाधान है। मुझे लगता है कि यह सही तरीका है?

— जोश पेटिट

@Peter: github.com/twbs/bootstrap/pull/6342 देखें । TLDR: बैज का उपयोग 'अपठित' काउंटर के रूप में किया जाता है, और इसका उपयोग अन्य स्थितियों को व्यक्त करने के लिए नहीं किया जाना चाहिए।

— बॉबी जैक

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 संस्करण (उदाहरण के लिए: thomas-mcdonald's ) का उपयोग कर रहे हैं, तो आप थोड़े अधिक गतिशील (मौजूदा चर को मान सकते हैं) और लेबल के लिए उपयोग की जाने वाली एक ही तकनीक का उपयोग करके सभी बैज संदर्भ बना सकते हैं:

// 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);
}

LESS समतुल्य सीधा होना चाहिए।

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

LESS संस्करण का उपयोग करते समय आप मिक्सिन्स आयात कर सकते हैं और रंगीन बैज के लिए अपनी कक्षाएं बना सकते हैं:

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

अन्य रंगों के लिए भी; बस खतरे, सफलता आदि के साथ चेतावनी की जगह

Answer 9

खैर, यह बहुत देर से जवाब है, लेकिन मुझे लगता है कि मैं अभी भी अपने दो सेंट डालूंगा ... मैं इसे एक टिप्पणी के रूप में पोस्ट कर सकता था क्योंकि यह उत्तर अनिवार्य रूप से कोई नया समाधान नहीं जोड़ता है, लेकिन यह पोस्ट में मूल्य जोड़ता है अभी तक एक और विकल्प के रूप में। लेकिन एक टिप्पणी में मैं चरित्र सीमा के कारण सभी विवरण नहीं दे पाऊंगा।

नोट: इसके लिए सीएसएस फ़ाइल को बूटस्ट्रैप में संपादित करने की आवश्यकता है - .badgeऊपर की शैली परिभाषाएँ .label-default। मेरे सीमित परीक्षण में परिवर्तन के कारण कोई व्यावहारिक दुष्प्रभाव नहीं पाया जा सका।

जबकि Broc.seib का समाधान संभवतः CSS के न्यूनतम जोड़ के साथ OP की आवश्यकता को प्राप्त करने का सबसे अच्छा तरीका है, Jens A. Koch के समाधान की तरह या .label-xxxप्रासंगिक कक्षाओं का उपयोग करके, बिना किसी अतिरिक्त CSS के समान प्रभाव को प्राप्त करना संभव है ।progress-bar-xxx कक्षाओं की तुलना में याद रखना आसान है । मुझे नहीं लगता कि .alert-xxxकक्षाएं समान प्रभाव देती हैं।

आपको बस इतना करना है .badgeऔर .label-xxxकक्षाओं को एक साथ उपयोग करना है (लेकिन इस क्रम में)। उपरोक्त नोट में उल्लिखित परिवर्तन करना न भूलें।

<a href="#">Inbox <span class="badge label-warning">42</span></a> इस तरह दिखता है:

महत्वपूर्ण: यदि आप नवीनीकरण करने का निर्णय लेते हैं और अपनी नई स्थानीय CSS फ़ाइल में परिवर्तन करना भूल जाते हैं तो यह समाधान आपकी शैलियों को तोड़ सकता है। इस चुनौती के लिए मेरा समाधान .label-xxxमेरी कस्टम सीएसएस फ़ाइल में सभी शैलियों की प्रतिलिपि बनाना और अन्य सभी सीएसएस फ़ाइलों के बाद लोड करना था। यह दृष्टिकोण भी मदद करता है जब मैं बीएस 3 लोड करने के लिए सीडीएन का उपयोग करता हूं।

** पुनश्च: ** दोनों शीर्ष रेटेड जवाब उनके पेशेवरों और विपक्ष है। यह सिर्फ वह तरीका है जिसे आप अपने CSS को करना पसंद करते हैं क्योंकि इसे करने के लिए कोई "केवल सही तरीका" नहीं है।

Comments

मुझे लगता है कि आपको स्थानांतरित करने की आवश्यकता नहीं है। यदि आप बैज से पहले

— लेबल-