引導程序 - 列表組中的按鈕項目

Question

我想創建一個Web GUI，它分爲兩部分：不同操作的列表，實現爲引導列表組和可實施這些操作的詳細區域。

點擊該項目應顯示該操作的詳細信息/設置部分。

我也想要快速操作，這是列表組右側的小按鈕。

這個概念適用於Bootstrap，但我的IDE給我警告有關嵌套按鈕/鏈接。最大的問題是，這不是有效的HTML5，並可能導致錯誤的結果。我已經注意到的一個錯誤是，單擊一個小按鈕也會執行Firefox中的列表項操作。

這裏是GUI概念的一個例子，因爲這是很難用言語來形容：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> 

是否有具有完全相同的GUI，但使用有效HTML5的一個簡單的方法？

Answer 1

@Kim：如果您仍希望在有效的HTML標準中使用Bootstrap實現相同的功能，請使用以下代碼。我改變了按鈕以跨度並添加了相同的類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>