Question

我想创建一个Web GUI，它分为两部分：一系列不同的操作，实现为Bootstrap List Group和一个可以更改这些操作设置的详细区域。

单击该项目应显示该操作的详细信息/设置部分。

我还想要快速操作，这是列表组项目右侧的小按钮。

这个概念适用于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实现相同的功能，请使用以下代码。我将按钮更改为span并添加了相同的类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>

Answer 2

我认为这接近使用flex的标准bootstrap 4列表组

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<ul class="list-group cProductsList"> 
                <li class="list-group-item d-flex justify-content-between"><p class="p-0 m-0 flex-grow-1">First item</p> 
                   <button class="btn-success">EDIT</button>  <button class="btn-danger">DELETE</button>
                </li>
               <li class="list-group-item d-flex justify-content-between"><p class="p-0 m-0 flex-grow-1">Second item</p>  
                   <button class="btn-success">EDIT</button>  <button class="btn-danger">DELETE</button>
                </li> 
</ul>

Answer 3

    <ul class="list-group mb-5">
        <a class="list-group-item list-group-item-action" href="#">My List Item One<button class="btn-success btn-sm" style="float:right">EDIT</button>&nbsp&nbsp<button class="btn-danger btn-sm mr-2" style="float:right">DELETE</button></a>




    </ul>

Bootstrap - List Group Item中的按钮

3 个答案: