Bootstrap - Pulsanti all'interno dell'elenco Gruppo Elemento

Question

Desidero creare una GUI Web, che è divisa in 2 parti: un elenco di azioni diverse, implementate come un gruppo elenco Bootstrap e un'area di dettaglio in cui è possibile modificare le impostazioni di tali azioni.

Fare clic sull'elemento dovrebbe visualizzare la sezione dettagli/impostazioni per tale azione.

Voglio anche azioni rapide, che sono piccoli pulsanti sul lato destro delle voci del gruppo di elenchi.

Questo concetto funziona in Bootstrap, ma IDE mi fornisce avvisi sui pulsanti/collegamenti nidificati. Il grosso problema è che questo non è un HTML5 valido e potrebbe portare a risultati errati. Un errore che ho già notato è che facendo clic su un piccolo pulsante si esegue anche l'azione dell'elenco in Firefox.

Ecco un esempio del concetto di interfaccia grafica, come questo è difficile da descrivere a parole: 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> 

C'è un modo semplice di avere esattamente la stessa interfaccia grafica, ma utilizzando HTML5 validi?

Answer 1

@Kim: se si desidera ottenere lo stesso risultato con Bootstrap nello standard HTML valido, utilizzare il seguente codice. Ho cambiato il pulsante e ho aggiunto la stessa classe 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>