引导程序 - 列表组中的按钮项目

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>