html - ऊपर की देखभाल कैरेट




css twitter-bootstrap (4)

आइए मान लीजिए कि आप क्लास caret-reversed रिवर्सड का उपयोग करके कैरेट को पीछे हटाना चाहते हैं, ताकि आप caret क्लास के मौजूदा कार्यान्वयन को बनाए रख सकें।

सीएसएस निम्नलिखित होगा।

<span class="caret caret-reversed"></span> 

.caret.caret-reversed {
    border-top-width: 0;
    border-bottom: 4px solid #000000;
}

यह बूटस्ट्रैप 2 और 3 दोनों के लिए काम करता है।

अद्यतन : चूंकि बूटस्ट्रैप 3.3.2। .glyphicon-triangle-top और। .glyphicon-triangle-bottom उपलब्ध हैं जो कि .caret और इसके उलट संस्करण के विकल्प के रूप में काम कर सकते हैं।

साधारण

<span class="glyphicon glyphicon-triangle-bottom"></span>

औंधा

<span class="glyphicon glyphicon-triangle-top"></span>

एचटीएमएल

 <span class="caret"></span> 

मुझे एक देखभाल तीर देता है , लेकिन मैं एक देखभाल करना चाहता हूं जो looks जैसा दिखता है।

बूटस्ट्रैप में उपलब्ध इस के लिए कोई कक्षा है? यदि नहीं, तो इसे कैसे प्राप्त करें?


आप ऊपर तीर के लिए नई सीएसएस कक्षा जोड़ सकते हैं

<style>
 .caret-up{
    border-bottom: 10px solid #000000;
    border-left: 6px solid rgba(0, 0, 0, 0);
    border-right: 6px solid rgba(0, 0, 0, 0);
    content: "";
    display: inline-block;
    height: 0;
    vertical-align: top;
    width: 0;
  }

<span class="caret-up"></span>

डेमो http://jsfiddle.net/tbgXj/3/


बस यह समस्या थी और मेरे लिए सबसे अच्छा समाधान बूटस्ट्रैप मूल के लिए स्टाइल को संपादित करना था, इसलिए मुझे वह चाहिए जो मुझे चाहिए।

तो यहां बूटस्ट्रैप का उपयोग करने वाले हर किसी के लिए विपरीत है:

.caret-up {
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-bottom: 4px dashed;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}

बूटस्ट्रैप क्लास में बनाया गया है जिसे आप कैरेट क्लास के मूल तत्व से जोड़ सकते हैं

<span class="dropup">
    <span class="caret"></span>
</span>

यह बूटस्ट्रैप 2 और 3 दोनों में काम करता है





twitter-bootstrap