Bootstrap - Przyciski wewnątrz grupy List Pozycja

Question

Chcę utworzyć GUI WWW, który jest podzielony na 2 części: listę różnych akcji, zaimplementowanych jako Grupa list startowych i obszar szczegółów, w którym można zmienić ustawienia tych akcji.

Kliknięcie tego elementu powinno wyświetlić sekcję szczegółów/ustawień dla tej czynności.

Chcę również szybkie akcje, które są małymi przyciskami po prawej stronie elementów grupy list.

Ta koncepcja działa w Bootstrap, ale ja IDE daje mi ostrzeżenia o zagnieżdżonych przyciskach/linkach. Dużym problemem jest to, że nie jest to poprawne HTML5 i może prowadzić do złych wyników. Błąd, który już zauważyłem, polega na tym, że kliknięcie małego przycisku uruchamia także akcję listy w Firefoksie.

Oto przykład koncepcji GUI, jak to jest trudne do opisania w słowach: 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> 

Czy istnieje prosty sposób mający dokładnie ten sam GUI, ale stosując poprawny HTML5?

Answer 1

@Kim: Jeśli nadal chcesz osiągnąć to samo z Bootstrap w prawidłowym standardzie HTML, użyj następującego kodu. Zmieniłem przycisk na zakres i dodano tę samą klasę 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>