बूटस्ट्रैप - सूची समूह के अंदर बटन आइटम

Question

मैं एक वेब जीयूआई बनाना चाहता हूं, जो 2 भागों में अलग है: बूटस्ट्रैप सूची समूह के रूप में लागू विभिन्न कार्यों की एक सूची और एक विस्तार क्षेत्र जहां उन कार्रवाइयों की सेटिंग्स बदला जा सकता है।

आइटम पर क्लिक करने से उस क्रिया के लिए विवरण/सेटिंग्स अनुभाग प्रदर्शित होना चाहिए।

मैं त्वरित कार्यवाही भी चाहता हूं, जो सूची समूह वस्तुओं के दाईं ओर छोटे बटन हैं।

यह अवधारणा बूटस्ट्रैप में काम करती है, लेकिन मुझे आईडीई ने मुझे नेस्टेड बटन/लिंक के बारे में चेतावनियां दी हैं। बड़ी समस्या यह है कि यह मान्य एचटीएमएल 5 नहीं है और गलत परिणाम हो सकता है। एक त्रुटि जो मैंने पहले ही देखी है, वह है कि एक छोटे बटन पर क्लिक करने से फ़ायरफ़ॉक्स में सूची आइटम क्रिया भी निष्पादित होती है। https://jsfiddle.net/drx7xhw7/

<div class="container"> 
    <div class="row"> 
    <div class="col-md-4"> 
     <h3>Actions</h3> 
     <div class="list-group"> 
     <a class="list-group-item clearfix" onclick="alert('Action1 -> Details');"> 
      Action1 
      <span class="pull-right"> 
      <button type="button" class="btn btn-xs btn-default" onclick="alert('Action1 -> Play');"> 
       <span class="glyphicon glyphicon-play" aria-hidden="true"></span> 
      </button> 
      </span> 
     </a> 
     <a class="list-group-item clearfix" onclick="alert('Action2 -> Details');"> 
      Action2 
      <span class="pull-right"> 
      <button type="button" class="btn btn-xs btn-default" onclick="alert('Action2 -> Play');"> 
       <span class="glyphicon glyphicon-play" aria-hidden="true"></span> 
      </button> 
      </span> 
     </a> 
     </div> 
    </div> 

    <div class="col-md-8"> 
     <h3>Settings</h3> 
    </div> 
    </div> 
</div> 

वहाँ बिल्कुल वैसा ही जीयूआई होने लेकिन वैध एचटीएमएल 5 का उपयोग करने का एक आसान तरीका है: के रूप में इस शब्दों में वर्णन करना कठिन है

यहाँ, जीयूआई अवधारणा का एक उदाहरण है?

Answer 1

@ किम: यदि आप अभी भी वैध HTML मानक में बूटस्ट्रैप के साथ इसे प्राप्त करना चाहते हैं, तो निम्न कोड का उपयोग करें। मैंने बटन को विस्तारित करने के लिए बदल दिया और उसी श्रेणी btn btn-xs btn-default को जोड़ा।

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-4"> 
 
      <h3>Actions</h3> 
 
      <div class="list-group"> 
 
       <a class="list-group-item clearfix" onclick="alert('Action1 -> Details');"> 
 
        Action1 
 
        <span class="pull-right"> 
 
         <span class="btn btn-xs btn-default" onclick="alert('Action1 -> Play'); event.stopPropagation();"> 
 
          <span class="glyphicon glyphicon-play" aria-hidden="true"></span> 
 
         </span> 
 
        </span> 
 
       </a> 
 
       <a class="list-group-item clearfix" onclick="alert('Action2 -> Details');"> 
 
        Action2 
 
        <span class="pull-right"> 
 
         <span class="btn btn-xs btn-default" onclick="alert('Action2 -> Play'); event.stopPropagation();"> 
 
          <span class="glyphicon glyphicon-play" aria-hidden="true"></span> 
 
         </span> 
 
        </span> 
 
       </a> 
 
      </div> 
 
     </div> 
 

 
     <div class="col-md-8"> 
 
      <h3>Settings</h3> 
 
     </div> 
 
    </div> 
 
</div>